第一排样式完成

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -1,10 +1,13 @@
 <script>
 import {mapState} from "vuex"
 import SubHeader from "./comps/subHeader.vue";
+import IconStaPanel from "./comps/iconStaPanel.vue";
+import IconSmallPanel from "./comps/iconSmallPanel.vue";
+import ValueUnit from "./comps/valueUnit.vue";
 
 export default {
   name: "AppDvWeiyang",
-  components: {SubHeader},
+  components: {ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
   label: "未央最新定制大屏",
   props: {
     instance: Function,
@@ -19,10 +22,30 @@ export default {
   computed: {
     ...mapState(["user"]),
     currentAreaId: v => v.areaId || v.user.info.areaId,
-    isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId)
+    isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
+    areaSta: v => [
+      {label: "社区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d80346ec1ea.png", value: 0, unit: "个"},
+      {label: "小区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4c0445d.png", value: 0, unit: "个"},
+      {label: "村数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4d28f1b.png", value: 0, unit: "个"},
+    ],
+    workorderSta: v => [
+      {label: "已处理", value: 0, unit: "个"},
+      {label: "办理中", value: 0, unit: "个"},
+      {label: "待受理", value: 0, unit: "个"},
+      {label: "延期", value: 0, unit: "个", isRed: !0},
+    ]
   },
-  mounted() {
+  methods: {
+    getData() {
 
+    },
+    getLabel(key) {
+      return this.dict.getLabel("wyBasicCount", key) || key
+    }
+  },
+  created() {
+    this.dict.load("wyBasicCount")
+    this.getData()
   }
 }
 </script>
@@ -30,7 +53,7 @@ export default {
 <template>
   <section class="AppDvWeiyang" :class="{isLastAreaLevel}">
     <template v-if="isLastAreaLevel">
-      <div class="a"></div>
+      <icon-sta-panel class="a" :label="getLabel('党组织数')" :value="0" unit="人" icon=""/>
       <div class="a1"></div>
       <div class="b"></div>
       <div class="bb grid">
@@ -49,15 +72,26 @@ export default {
       <div class="j"></div>
     </template>
     <template v-else>
-      <div class="a"></div>
+      <icon-sta-panel class="a pad-24" :label="getLabel('党组织数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd06f269b.png"/>
-      <div class="a1"></div>
+      <icon-sta-panel class="a1 pad-24" :label="getLabel('党员人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd0560bea.png"/>
-      <div class="b"></div>
+      <div class="b pad-l16 pad-r12 pad-v6">
-      <div class="b1"></div>
+        <icon-small-panel v-for="(e,i) in areaSta" :key="i" v-bind="e"/>
+      </div>
+      <div class="b1 pad-v10 pad-h20">
+        <icon-sta-panel :label="getLabel('居民人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
+        <div class="flex staPercent">
+          <div class="flex fill">月环比<p v-text="0"/></div>
+          <div class="flex fill">年同比<p class="minus" v-text="0"/></div>
+        </div>
+      </div>
       <div class="b2"></div>
       <div class="c"></div>
       <div class="c1 grid">
-        <div class="item row"></div>
+        <icon-small-panel class="item row pad-h16" :label="getLabel('工单总数')" :value="0" unit="个"/>
-        <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
+        <div class="item pad-v12 flex column center" v-for="(e,i) in workorderSta" :key="i" :class="{isRed:e.isRed}">
+          <div v-text="e.label"/>
+          <value-unit :value="e.value" :unit="e.unit" size="mini"/>
+        </div>
       </div>
       <div class="d"></div>
       <div class="e">
@@ -90,6 +124,8 @@ export default {
 </style>
 <style scoped lang="scss">
 .AppDvWeiyang {
+  font-size: 14px;
+  color: #fff;
   display: grid;
   gap: 10px;
   grid-template-columns: repeat(8, 1fr);
@@ -153,5 +189,48 @@ export default {
     font-size: 12px;
     color: #BDCCDB;
   }
+
+  .staPercent {
+    margin-top: 9px;
+    line-height: 40px;
+    font-size: 12px;
+
+    p {
+
+      font-size: 16px;
+      color: #26FF9A;
+      display: flex;
+      align-items: center;
+      font-family: DINAlternate;
+
+      &:before {
+        margin-left: 8px;
+        margin-right: 2px;
+        font-size: 10px;
+        content: "▲";
+      }
+
+      &:after {
+        content: "%";
+      }
+
+      &.minus {
+        color: #FF2727;
+
+        &:before {
+          content: "▼";
+        }
+      }
+    }
+  }
+
+  .isRed {
+    background: #fa35351a;
+    border: 1px solid #f76e6e52;
+
+    :deep(.valueUnit) {
+      color: #FF2727;
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,35 @@
+<script>
+import ValueUnit from "./valueUnit.vue";
+
+export default {
+  name: "iconSmallPanel",
+  components: {ValueUnit},
+  props: ["icon", "label", "value", "unit"]
+}
+</script>
+
+<template>
+  <section class="iconSmallPanel">
+    <img v-if="icon" class="icon" :src="icon">
+    <div class="fill" v-text="label"/>
+    <value-unit :value="value" :unit="unit"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.iconSmallPanel {
+  font-weight: 400;
+  font-size: 15px;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+
+  .icon {
+    width: 34px;
+    height: 34px;
+    flex-shrink: 0;
+  }
+
+}
+</style>

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

@@ -0,0 +1,40 @@
+<script>
+import ValueUnit from "./valueUnit.vue";
+
+export default {
+  name: "iconStaPanel",
+  components: {ValueUnit},
+  props: ["icon", "label", "value", "unit"]
+}
+</script>
+
+<template>
+  <section class="iconStaPanel">
+    <div class="block">
+      <img class="icon" :src="icon">
+      <div v-text="label"/>
+      <value-unit :value="value" :unit="unit" size="large"/>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.iconStaPanel {
+  font-weight: 400;
+  font-size: 18px;
+  color: #FFFFFF;
+
+
+  .block {
+    padding-left: 96px;
+    position: relative;
+
+    .icon {
+      position: absolute;
+      top: -16px;
+      left: -32px;
+      width: 144px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,43 @@
+<script>
+export default {
+  name: "valueUnit",
+  props: ["value", "unit"]
+}
+</script>
+
+<template>
+  <section class="valueUnit" :class="[$attrs.size]" :style="{color:$attrs.color}">
+    {{ value }}<p v-text="unit"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.valueUnit {
+  font-family: DINAlternate-Bold;
+  font-weight: 700;
+  font-size: 22px;
+  color: #02FEFF;
+  display: flex;
+  letter-spacing: 0;
+  line-height: 36px;
+  align-items: baseline;
+
+  & > p {
+    margin-left: 2px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  &.mini {
+    font-size: 16px;
+
+    & > p {
+      font-size: 12px;
+    }
+  }
+
+  &.large {
+    font-size: 32px;
+  }
+}
+</style>

ui/lib/styles/common.scss

@@ -23,7 +23,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   }
 }
 
-@each $v in (8, 10, 12, 14, 16, 20, 24, 27, 32, 48, 56, 64, 80) {
+@each $v in (6, 8, 10, 12, 14, 16, 20, 24, 27, 32, 48, 56, 64, 80) {
   //gap
   .gap-#{$v} {
     gap: #{$v}px !important;