更新 数字化中心 布局样式更新

src/views/digitalEmpowermentCenter.vue

@@ -2,74 +2,74 @@
   <div class="digital-box">
     <div class="title">累计合规数字化完成: 8920000单</div>
     <div class="main-box">
-      <div class="process-title tal">航运数字化合规承运流程</div>
+      <div class="process-title tal mb10">航运数字化合规承运流程</div>
       <div class="process df aic jcsb">
-        <div>
-          <div class="w4 h1">1</div>
-          <div>
+        <div class="h3 df fdc jcsb">
+          <div class="w4 h1 card">1</div>
+          <div class="h2 df fdc jcsb">
             <div class="df aic jcsb">
-              <div class="w1 h1">11</div>
-              <div class="w1 h1">12</div>
+              <div class="w1 h1 card">11</div>
+              <div class="w1 h1 card">12</div>
             </div>
             <div class="df aic jcsb">
-              <div class="w1 h1">13</div>
-              <div class="w1 h1">14</div>
+              <div class="w1 h1 card">13</div>
+              <div class="w1 h1 card">14</div>
             </div>
           </div>
         </div>
-        <div>
-          <div class="w5 h1">2</div>
+        <div class="h3 df fdc jcsb">
+          <div class="w5 h1 card">2</div>
           <div class="df aic jcsb">
-            <div class="w3 h2">21</div>
-            <div class="df jcsb ffc">
-              <div class="w2 h1">22</div>
-              <div class="w2 h1">23</div>
+            <div class="w3 h2 card">21</div>
+            <div class="h2 df jcsb fdc">
+              <div class="w2 h1 card">22</div>
+              <div class="w2 h1 card">23</div>
             </div>
           </div>
         </div>
-        <div>
-          <div class="w4 h1">3</div>
-          <div>
+        <div class="h3 df fdc jcsb">
+          <div class="w4 h1 card">3</div>
+          <div class="h2 df fdc jcsb">
             <div class="df aic jcsb">
-              <div class="w1 h1">31</div>
-              <div class="w1 h1">32</div>
+              <div class="w1 h1 card">31</div>
+              <div class="w1 h1 card">32</div>
             </div>
             <div class="df aic jcsb">
-              <div class="w1 h1">33</div>
-              <div class="w1 h1">34</div>
+              <div class="w1 h1 card">33</div>
+              <div class="w1 h1 card">34</div>
             </div>
           </div>
         </div>
       </div>
-      <div class="source-title df aic jcsb">
+      <div class="source-title df aic jcsb mt20 mb20">
         <div>创建数字化航运资产包</div>
         <div>汇很多航运数字经济区块链认证</div>
       </div>
       <div class="source df aic jcsb">
-        <div>
-          <div class="w4 h1">1</div>
-          <div>
+        <div class="h3 df fdc jcsb">
+          <div class="w4 h1 card">1</div>
+          <div class="h2 df fdc jcsb">
             <div class="df aic jcsb">
-              <div class="w1 h1">11</div>
-              <div class="w1 h1">12</div>
+              <div class="w1 h1 card">11</div>
+              <div class="w1 h1 card">12</div>
             </div>
             <div class="df aic jcsb">
-              <div class="w1 h1">13</div>
-              <div class="w1 h1">14</div>
+              <div class="w1 h1 card">13</div>
+              <div class="w1 h1 card">14</div>
             </div>
           </div>
         </div>
-        <div class="w5 h3">2</div>
-        <div>
-          <div class="w4 h1">3</div>
-          <div>
+        <div class="h3 w5 card">2</div>
+        <div class="h3 df fdc jcsb">
+          <div class="w4 h1 card">3</div>
+          <div class="h2 df fdc jcsb">
             <div class="df aic jcsb">
-              <div class="w1 h1">31</div>
-              <div class="w1 h1">32</div>
+              <div class="w1 h1 card">31</div>
+              <div class="w1 h1 card">32</div>
             </div>
             <div class="df aic jcsb">
-              <div class="w1 h1">33</div>
-              <div class="w1 h1">34</div>
+              <div class="w1 h1 card">33</div>
+              <div class="w1 h1 card">34</div>
             </div>
           </div>
         </div>
@@ -92,29 +92,29 @@ export default {
   text-align: center;
 
   .h1 {
-    height: 12.96vh;
+    height: 130px;
   }
   .h2 {
-    height: 26.85vh;
+    height: 270px;
   }
   .h3 {
-    height: 40.74vh;
+    height: 410px;
   }
 
   .w1 {
-    width: 12.76vw;
+    width: 245px;
   }
   .w2 {
-    width: 20.31vw;
+    width: 390px;
   }
   .w3 {
-    width: 20.83vw;
+    width: 400px;
   }
   .w4 {
-    width: 26.04vw;
+    width: 500px;
   }
   .w5 {
-    width: 41.67vw;
+    width: 800px;
   }
 }
 .digital-box {
@@ -122,7 +122,7 @@ export default {
   height: calc(100% - 60px);
   background: #191a24;
   .main-box {
-    padding: 20px 40px;
+    padding: 20px 30px;
   }
 }
 .title {
@@ -137,12 +137,39 @@ export default {
   text-align: center;
 }
 
-.process div,
-.source div {
-  box-sizing: border-box;
-  border: 1px solid red;
+.card {
+  background: #1e3149;
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #e6f7ff;
+  transition: all 0.8s;
+}
+
+.card:hover {
+  transform: scale(1.02);
+  box-shadow: 0px 0px 2px #aaa;
+  z-index: 10;
 }
-.ffc {
-  flex-direction: column;
+
+.source-title {
+  :first-child {
+    width: 178px;
+    height: 36px;
+    line-height: 36px;
+    border-radius: 1px;
+    border: 1px solid #10ffb9;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #13fbb9;
+  }
+
+  :last-child {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+  }
 }
 </style>