村社区界面完成

2024-09-13 16:41:20 +08:00
parent 85c6d365b1
commit e69b66d2aa
5 changed files with 169 additions and 50 deletions
--- a/project/biaopin/dv/weiyang/comps/iconSmallPanel.vue
+++ b/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;