村社区界面完成

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

@@ -4,12 +4,12 @@ import ValueUnit from "./valueUnit.vue";
 export default {
   name: "iconSmallPanel",
   components: {ValueUnit},
-  props: ["icon", "label", "value", "unit"]
+  props: ["icon", "label", "value", "unit", "vertical"]
 }
 </script>
 
 <template>
-  <section class="iconSmallPanel">
+  <section class="iconSmallPanel" :class="{vertical}">
     <img v-if="icon" class="icon" :src="icon">
     <div class="fill" v-text="label"/>
     <value-unit :value="value" :unit="unit"/>
@@ -25,6 +25,11 @@ export default {
   align-items: center;
   gap: 13px;
 
+  &.vertical {
+    flex-direction: column;
+    gap: 16px;
+  }
+
   .icon {
     width: 34px;
     height: 34px;

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

@@ -4,16 +4,19 @@ import ValueUnit from "./valueUnit.vue";
 export default {
   name: "iconStaPanel",
   components: {ValueUnit},
-  props: ["icon", "label", "value", "unit"]
+  props: ["icon", "label", "value", "unit"],
+  computed: {
+    valueSize: v => v.$attrs.size ?? 'large'
+  }
 }
 </script>
 
 <template>
-  <section class="iconStaPanel">
+  <section class="iconStaPanel" :class="[$attrs.size]">
     <div class="block">
       <img class="icon" :src="icon">
       <div v-text="label"/>
-      <value-unit :value="value" :unit="unit" size="large"/>
+      <value-unit :value="value" :unit="unit" :size="valueSize"/>
     </div>
   </section>
 </template>
@@ -24,7 +27,6 @@ export default {
   font-size: 18px;
   color: #FFFFFF;
 
-
   .block {
     padding-left: 96px;
     position: relative;
@@ -36,5 +38,23 @@ export default {
       width: 144px;
     }
   }
+
+  &.small {
+    font-size: 14px;
+
+    .block {
+      padding-left: 90px;
+
+      .icon {
+        position: absolute;
+        top: 50%;
+        left: 16px;
+        transform: translateY(-50%);
+        width: 64px;
+      }
+    }
+
+  }
+
 }
 </style>

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

@@ -62,8 +62,8 @@ export default {
   }
 
   .slot {
-    height: calc(100% - 75px);
-    padding-top: 19px;
+    height: calc(100% - 60px);
+    padding-top: 12px;
   }
 }
 </style>

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

@@ -7,7 +7,7 @@ export default {
 
 <template>
   <section class="valueUnit" :class="[$attrs.size]" :style="{color:$attrs.color}">
-    {{ value }}<p v-text="unit"/>
+    {{ value || 0 }}<p v-text="unit"/>
   </section>
 </template>