标题组件正在开发

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -1,8 +1,10 @@
 <script>
 import {mapState} from "vuex"
+import SubHeader from "./comps/subHeader.vue";
 
 export default {
   name: "AppDvWeiyang",
+  components: {SubHeader},
   label: "未央最新定制大屏",
   props: {
     instance: Function,
@@ -58,12 +60,24 @@ export default {
         <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
       </div>
       <div class="d"></div>
-      <div class="e"></div>
+      <div class="e">
+        <sub-header title="五条工作链"/>
+      </div>
       <div class="f"></div>
-      <div class="g"></div>
-      <div class="h"></div>
-      <div class="i"></div>
-      <div class="j"></div>
+      <div class="g">
+        <sub-header title="工单分类"/>
+      </div>
+      <div class="h">
+        <sub-header title="全区积分排名(前10)"/>
+      </div>
+      <div class="i">
+        <sub-header title="居民统计">
+          <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
+        </sub-header>
+      </div>
+      <div class="j">
+        <sub-header title="特殊人群数量统计"/>
+      </div>
     </template>
   </section>
 </template>
@@ -134,5 +148,10 @@ export default {
       grid-column: 1/3
     }
   }
+
+  .info {
+    font-size: 12px;
+    color: #BDCCDB;
+  }
 }
 </style>

project/biaopin/dv/weiyang/comps/subHeader.vue

@@ -0,0 +1,68 @@
+<template>
+  <section class="subHeader">
+    <div class="subHeader-title" :class="{right:!!$scopedSlots.right}">
+      <h2 class="fill" v-text="title"/>
+      <slot name="right"/>
+    </div>
+    <div class="divider"/>
+    <div class="slot">
+      <slot/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'subHeader',
+  props: ['title']
+}
+</script>
+
+<style lang="scss" scoped>
+.subHeader {
+  height: 100%;
+  background: #7583900f;
+
+  .subHeader-title {
+    display: flex;
+    align-items: center;
+    height: 51px;
+    padding: 0 8px 0 46px;
+    box-sizing: border-box;
+    background-image: linear-gradient(90deg, #00d4ff00 0%, rgba(0, 212, 255, 0.3) 12%, #0080ff00 100%), url("https://cdn.sinoecare.com/i/2024/09/03/66d6d5b006572.png");
+    background-size: 100% 6px, 54px 42px;
+    background-position: center bottom, left center;
+    background-repeat: no-repeat;
+
+
+    h2 {
+      font-size: 20px;
+      color: #fff;
+    }
+
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+
+    &.right {
+      padding-right: 0;
+    }
+  }
+
+  .divider {
+    height: 7px;
+    background-image: linear-gradient(90deg, #1F979A 12%, #1f979a82 100%), linear-gradient(90deg, #243132 80%, #02FEFF 99%);
+    background-size: 16px 7px, 100% 3px;
+    background-position: calc(100% - 92px) top, left center;
+    background-repeat: no-repeat;
+  }
+
+  .slot {
+    height: calc(100% - 75px);
+    padding-top: 19px;
+  }
+}
+</style>