From df49e1f9dc229933ca8d425218e56167ca8b8634 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 3 Sep 2024 18:02:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E9=A2=98=E7=BB=84=E4=BB=B6=E6=AD=A3?=
 =?UTF-8?q?=E5=9C=A8=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/biaopin/dv/weiyang/AppDvWeiyang.vue   | 29 ++++++--
 .../biaopin/dv/weiyang/comps/subHeader.vue    | 68 +++++++++++++++++++
 2 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 project/biaopin/dv/weiyang/comps/subHeader.vue

diff --git a/project/biaopin/dv/weiyang/AppDvWeiyang.vue b/project/biaopin/dv/weiyang/AppDvWeiyang.vue
index 4bcd8e6a..17bdda51 100644
--- a/project/biaopin/dv/weiyang/AppDvWeiyang.vue
+++ b/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>
diff --git a/project/biaopin/dv/weiyang/comps/subHeader.vue b/project/biaopin/dv/weiyang/comps/subHeader.vue
new file mode 100644
index 00000000..350df2dc
--- /dev/null
+++ b/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>