完成布局

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>