Prechádzať zdrojové kódy

[Feat 0000] 可配置首页list组件样式调整

houzekong 7 mesiacov pred
rodič
commit
47c64e1802

+ 11 - 6
src/views/vent/home/configurable/components/CustomList.vue

@@ -12,8 +12,8 @@
         <!-- 列表项的具体内容填充剩余宽度 -->
         <div class="flex-grow" :class="`list-item__content_${type}`">
           <div class="list-item__label">{{ item.label }}</div>
-          <div :class="`list-item__info_${item.color}`">{{ item.info }}</div>
-          <div :class="`list-item__value_${item.color}`">{{ item.value }}</div>
+          <div class="list-item__info" :class="`list-item__info_${item.color}`">{{ item.info }}</div>
+          <div class="list-item__value" :class="`list-item__value_${item.color}`">{{ item.value }}</div>
         </div>
       </div>
     </div>
@@ -65,7 +65,6 @@
     background-image: @vent-gas-list-item-bg-img;
     padding: 5px 10px;
     display: flex;
-    justify-content: space-between;
   }
   .list-item__icon_A {
     background-repeat: no-repeat;
@@ -78,7 +77,6 @@
     background-repeat: no-repeat;
     padding: 5px 10px 10px 10px;
     display: flex;
-    justify-content: space-between;
     background-position: left bottom;
     background-size: 100% auto;
     background-image: url(/@/assets/images/home-container/configurable/list_bg_b.png);
@@ -150,8 +148,15 @@
   //   border-radius: 8px;
   //   border: 1px solid @vent-gas-tab-border;
   // }
-  // .list-item__label {
-  // }
+  .list-item__label {
+    flex-basis: 55%;
+  }
+  .list-item__info {
+    flex-grow: 1;
+  }
+  .list-item__value {
+    flex-basis: 30%;
+  }
   .list-item__value_red {
     color: red;
   }