css

src/apps/AppEpidemicSituation/Health.vue

@@ -1,38 +1,21 @@
 <template>
   <div class="Health">
-    <div class="top">
-      <div class="topCard">
-        <div class="left">
-          <span class="num1">274</span>
-          <span class="hint">上报人员</span>
-        </div>
-
-        <div class="line"></div>
+    <div class="header">
+      <div class="tab-item">
+        <h2 style="color: #2c51ce">274</h2>
+        <p>返乡人员</p>
       </div>
-
-      <div class="topCard">
-        <div class="left">
-          <span class="num2">274</span>
-          <span class="hint">上报人员</span>
-        </div>
-
-        <div class="line"></div>
+      <div class="tab-item">
+        <h2 style="color: #5aad6a">274</h2>
+        <p>今日返乡</p>
       </div>
-
-      <div class="topCard">
-        <div class="left">
-          <span class="num3">274</span>
-          <span class="hint">上报人员</span>
-        </div>
-
-        <div class="line"></div>
+      <div class="tab-item">
+        <h2 style="color: #f5a319">274</h2>
+        <p>今日异常</p>
       </div>
-
-      <div class="topCard">
-        <div class="left">
-          <span class="num4">274</span>
-          <span class="hint">上报人员</span>
-        </div>
+      <div class="tab-item">
+        <h2 style="color: #cd413a; border-right: 0">274</h2>
+        <p>异常处理</p>
       </div>
     </div>
 
@@ -54,7 +37,7 @@
     <div class="line2"></div>
 
     <div class="bottom">
-      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#fff" inactive-color="#333 " active-color="#135AB8 " @change="change"></u-tabs>
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#fff" inactive-color="#333" bar-width="192" active-color="#135AB8 " @change="change"></u-tabs>
 
       <div class="line3"></div>
 
@@ -167,42 +150,37 @@ export default {
 .Health {
   height: 100%;
   background: #fff;
-  .top {
+
+  .header {
+    padding: 54px 32px 48px 32px;
     display: flex;
-    padding: 48px 32px;
-    .topCard {
-      display: flex;
-      .left {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 0 28px;
+    background-color: #fff;
+    margin-bottom: 4px;
+    .tab-item {
+      flex: 1;
+      text-align: center;
+
+      h2 {
         font-size: 52px;
+        font-family: DINAlternate-Bold, DINAlternate;
         font-weight: bold;
-        .num1 {
-          color: #2c51ce;
-        }
-        .num2 {
-          color: #5aad6a;
-        }
-        .num3 {
-          color: #f5a319;
-        }
-        .num4 {
-          color: #cd413a;
-        }
-        .hint {
-          font-size: 28px;
-          color: #999999;
-          margin-top: 8px;
-        }
+        height: 80px;
+        margin-bottom: 8px;
+        letter-spacing: -4px;
+        border-right: 1px solid #ddd;
+        line-height: 44px;
       }
-      .line {
-        width: 1px;
-        background: #dddddd;
-        margin: 14px 0px;
+      p {
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #999;
+        line-height: 40px;
+        margin-top: -22px;
       }
     }
+    .tab-item:nth-last-of-type(1) {
+      border-right: 0;
+    }
   }
 
   .line1 {