完成布局

examples/App.vue

@@ -3,11 +3,15 @@
     <header-nav v-if="showTools" title="web端产品库">
       <template #right>
         <mock/>
+        <div @click="showTools=false,dvDev=true">大屏开发</div>
         <div @click="showTools=false">隐藏工具栏</div>
         <div @click="handleLogin">点此登录</div>
       </template>
     </header-nav>
-    <el-row v-if="showTools" class="fill mar-t48" type="flex">
+    <ai-dv-wrapper class="fill" :views="[{label: '返回'}]" v-if="dvDev">
+      <router-view/>
+    </ai-dv-wrapper>
+    <el-row v-else-if="showTools" class="fill mar-t48" type="flex">
       <slider-nav/>
       <main-content class="fill"/>
     </el-row>
@@ -26,10 +30,11 @@ import MainContent from "./components/mainContent";
 import HeaderNav from "./components/headerNav";
 import {mapActions, mapMutations, mapState} from "vuex";
 import Mock from "./components/mock";
+import AiDvWrapper from "@dui/dv/layout/AiDvWrapper/AiDvWrapper.vue";
 
 export default {
   name: 'app',
-  components: {Mock, HeaderNav, MainContent, SliderNav},
+  components: {AiDvWrapper, Mock, HeaderNav, MainContent, SliderNav},
   computed: {
     ...mapState(['user']),
     login() {
@@ -42,6 +47,12 @@ export default {
     return {
       dialog: false,
       showTools: true,
+      dvDev: false
+    }
+  },
+  watch: {
+    showTools(v) {
+      v && (this.dvDev = false)
     }
   },
   methods: {

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -0,0 +1,78 @@
+<script>
+export default {
+  name: "AppDvWeiyang",
+  label: "未央最新定制大屏",
+  mounted() {
+
+  }
+}
+</script>
+
+<template>
+  <section class="AppDvWeiyang">
+    <div class="a"></div>
+    <div class="a1"></div>
+    <div class="b"></div>
+    <div class="b1"></div>
+    <div class="b2"></div>
+    <div class="c"></div>
+    <div class="c1 grid">
+      <div class="item row"></div>
+      <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
+    </div>
+    <div class="d"></div>
+    <div class="e"></div>
+    <div class="f"></div>
+    <div class="g"></div>
+    <div class="h"></div>
+    <div class="i"></div>
+    <div class="j"></div>
+  </section>
+</template>
+<style lang="scss">
+.AiDvWrapper {
+  .viewPanel {
+    background-image: url("https://cdn.sinoecare.com/i/2024/09/03/66d6a644bcc6e.png");
+  }
+}
+</style>
+<style scoped lang="scss">
+.AppDvWeiyang {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(8, 1fr);
+  padding: 16px 0;
+  grid-auto-rows: 128px;
+  grid-template-areas:
+  "a a1 b b1 b2 b2 c c1"
+  "e e f f f f c c1"
+  "e e f f f f g g"
+  "e e f f f f g g"
+  "e e f f f f g g"
+  "h h i i j j g g"
+  "h h i i j j g g";
+
+  .item {
+    background: #7583900f;
+    backdrop-filter: blur(8px);
+  }
+
+  @each $area in (a, a1, b, b1, b2, c, c1, d, e, f, g, h, i, j) {
+    .#{$area} {
+      grid-area: $area;
+      @if not index((c1),$area) {
+        @extend .item;
+      }
+    }
+  }
+
+  .c1 {
+    gap: 10px;
+    grid-template-columns: repeat(2, 1fr);
+
+    .row {
+      grid-column: 1/3
+    }
+  }
+}
+</style>