Browse Source

chore: 基础信息渐变色调整

TwoKe945 1 năm trước cách đây
mục cha
commit
191691d204
2 tập tin đã thay đổi với 28 bổ sung28 xóa
  1. 23 1
      app/src/components/BasicTotal.vue
  2. 5 27
      app/src/views/components/BasicInfo.vue

+ 23 - 1
app/src/components/BasicTotal.vue

@@ -19,8 +19,30 @@ export default {
 </script>
 
 <template >
-  <div>{{ label }}<span>{{ number }}</span>{{ unit }}</div>
+  <div class="layer">{{ label }}<span class="num">
+    <linear-text :text="number" fontSize="16px" ></linear-text>
+  </span>{{ unit }}</div>
 </template>
 
 <style scoped lang='less'>
+
+// 渐变色
+.layer{
+  display: flex;
+  align-items: center;
+  height: 31px;
+  background: rgba(0, 213, 255, .13);
+  line-height: 31px;
+  color: #fff;
+  padding: 0 5px;
+
+}
+// 渐变
+.num{
+  display: inline-block;
+  margin: 0 8px;
+  background: rgba(0, 213, 255, .33);
+  padding: 0px 5px;
+  border: 1px solid rgb(0, 106, 255, .54);
+}
 </style>

+ 5 - 27
app/src/views/components/BasicInfo.vue

@@ -19,12 +19,9 @@ export default {
       </div>
       <div class="__bottom">
         <div class="governance">治理重点</div>
-        <div class="layer">超高层<span class="num">1326</span>栋</div>
-        <div class="layer">老旧<span class="num">926</span>栋</div>
-        <div class="layer">混合体<span class="num">1273</span>栋</div>
-        <!-- <BasicTotal number="1326" label="超高层" unit="栋"/>
+        <BasicTotal number="1326" label="超高层" unit="栋"/>
         <BasicTotal number="926" label="老旧" unit="栋"/>
-        <BasicTotal number="1273" label="混合体" unit="栋"/> -->
+        <BasicTotal number="1273" label="混合体" unit="栋"/>
       </div>
     </div>
 </template>
@@ -42,27 +39,8 @@ export default {
     margin-top: 20px;
     font-size: 14px;
   }
-.governance{
-  color: aqua;
-}
-// 渐变色
-.layer{
-  display: flex;
-  align-items: center;
-  height: 31px;
-  background: #00D5FF;
-  line-height: 31px;
-  color: #fff;
-  padding: 0 5px;
-
-}
-// 渐变
-.num{
-  display: inline-block;
-  height: 26px;
-  margin: 0 8px;
-background: saddlebrown;
-line-height: 26px;
-}
+  .governance{
+    color: aqua;
+  }
 }
 </style>