更新 数字化赋能中心样式;新增折线图

src/views/digitalEmpowermentCenter.vue

@@ -1,42 +1,90 @@
 <template>
   <div class="digital-box">
-    <div class="title">累计合规数字化完成: 8920000单</div>
+    <div class="count">累计合规数字化完成: 8920000 单</div>
     <div class="main-box">
       <div class="process-title tal mb10">航运数字化合规承运流程</div>
       <div class="process df aic jcsb">
         <div class="h3 df fdc jcsb">
-          <div class="w4 h1 card">1</div>
+          <div class="w4 h1 card df aic jcc">
+            <div class="ot">
+              <img :src="changeUrl('load')" alt="" />
+            </div>
+            <div class="ml40">装货港</div>
+          </div>
           <div class="h2 df fdc jcsb">
             <div class="df aic jcsb">
-              <div class="w1 h1 card">11</div>
-              <div class="w1 h1 card">12</div>
+              <div class="w1 h1 card">
+                <img :src="changeUrl('contract')" alt="" />
+                <div>电子合同签署</div>
+              </div>
+              <div class="w1 h1 card">
+                <img :src="changeUrl('video')" alt="" />
+                <div>远程监控装货</div>
+              </div>
             </div>
             <div class="df aic jcsb">
-              <div class="w1 h1 card">13</div>
-              <div class="w1 h1 card">14</div>
+              <div class="w1 h1 card">
+                <img :src="changeUrl('pay')" alt="" />
+                <div>定金支付</div>
+              </div>
+              <div class="w1 h1 card">
+                <img :src="changeUrl('auto')" alt="" />
+                <div>自动化保险购买</div>
+              </div>
             </div>
           </div>
         </div>
         <div class="h3 df fdc jcsb">
-          <div class="w5 h1 card">2</div>
+          <div class="w5 h1 card df aic jcc">
+            <div class="ot">
+              <img :src="changeUrl('trans')" alt="" />
+            </div>
+            <div class="ml40">运输中</div>
+          </div>
           <div class="df aic jcsb">
-            <div class="w3 h2 card">21</div>
+            <div class="w3 h2 card">
+              <img class="big-icon" :src="changeUrl('warning')" alt="" />
+              <div>日常运输汇报 / 风险预警</div>
+            </div>
             <div class="h2 df jcsb fdc">
-              <div class="w2 h1 card">22</div>
-              <div class="w2 h1 card">23</div>
+              <div class="w3 h1 card">
+                <img :src="changeUrl('plan')" alt="" />
+                <div>报港计划</div>
+              </div>
+              <div class="w3 h1 card">
+                <img :src="changeUrl('fee2')" alt="" />
+                <div>第二期运费</div>
+              </div>
             </div>
           </div>
         </div>
         <div class="h3 df fdc jcsb">
-          <div class="w4 h1 card">3</div>
+          <div class="w4 h1 card df aic jcc">
+            <div class="ot">
+              <img :src="changeUrl('unload')" alt="" />
+            </div>
+            <div class="ml40">卸货港</div>
+          </div>
           <div class="h2 df fdc jcsb">
             <div class="df aic jcsb">
-              <div class="w1 h1 card">31</div>
-              <div class="w1 h1 card">32</div>
+              <div class="w1 h1 card">
+                <img :src="changeUrl('video')" alt="" />
+                <div>远程监控卸货</div>
+              </div>
+              <div class="w1 h1 card">
+                <img :src="changeUrl('upload')" alt="" />
+                <div>运输单据上传</div>
+              </div>
             </div>
             <div class="df aic jcsb">
-              <div class="w1 h1 card">33</div>
-              <div class="w1 h1 card">34</div>
+              <div class="w1 h1 card">
+                <img :src="changeUrl('fee-last')" alt="" />
+                <div>运费尾款</div>
+              </div>
+              <div class="w1 h1 card">
+                <img :src="changeUrl('digital')" alt="" />
+                <div>数字化结算</div>
+              </div>
             </div>
           </div>
         </div>
@@ -47,29 +95,81 @@
       </div>
       <div class="source df aic jcsb">
         <div class="h3 df fdc jcsb">
-          <div class="w4 h1 card">1</div>
+          <div class="w4 h1 card df aic jcc tt">
+            <div>
+              <span class="num">20980</span><span class="unit">个</span>
+            </div>
+            <div>装货港</div>
+          </div>
           <div class="h2 df fdc jcsb">
             <div class="df aic jcsb">
-              <div class="w1 h1 card">11</div>
-              <div class="w1 h1 card">12</div>
+              <div class="w1 h1 card">
+                <div class="num-box">
+                  <span class="num">20980</span><span class="unit">个</span>
+                </div>
+                <div>电子合同签署</div>
+              </div>
+              <div class="w1 h1 card">
+                <div class="num-box">
+                  <span class="num">56700</span><span class="unit">个</span>
+                </div>
+                <div>远程监控装货</div>
+              </div>
             </div>
             <div class="df aic jcsb">
-              <div class="w1 h1 card">13</div>
-              <div class="w1 h1 card">14</div>
+              <div class="w1 h1 card">
+                <div class="num-box">
+                  <span class="num">68000</span><span class="unit">个</span>
+                </div>
+                <div>定金支付</div>
+              </div>
+              <div class="w1 h1 card">
+                <div class="num-box">
+                  <span class="num">9300</span><span class="unit">个</span>
+                </div>
+                <div>自动化保险购买</div>
+              </div>
             </div>
           </div>
         </div>
-        <div class="h3 w5 card">2</div>
+        <div class="h3 w5 big-card">
+          <LineChart style="width: 100%; height: 100%"></LineChart>
+        </div>
         <div class="h3 df fdc jcsb">
-          <div class="w4 h1 card">3</div>
+          <div class="w4 h1 card df aic jcc tt">
+            <div>
+              <span class="num">56700</span><span class="unit">个</span>
+            </div>
+            <div>卸货港</div>
+          </div>
           <div class="h2 df fdc jcsb">
             <div class="df aic jcsb">
-              <div class="w1 h1 card">31</div>
-              <div class="w1 h1 card">32</div>
+              <div class="w1 h1 card">
+                <div class="num-box">
+                  <span class="num">7680</span><span class="unit">个</span>
+                </div>
+                <div>远程监控卸货</div>
+              </div>
+              <div class="w1 h1 card">
+                <div class="num-box">
+                  <span class="num">880</span><span class="unit">个</span>
+                </div>
+                <div>运输单据上传</div>
+              </div>
             </div>
             <div class="df aic jcsb">
-              <div class="w1 h1 card">33</div>
-              <div class="w1 h1 card">34</div>
+              <div class="w1 h1 card">
+                <div class="num-box">
+                  <span class="num">890,000</span><span class="unit">元</span>
+                </div>
+                <div>运费尾款</div>
+              </div>
+              <div class="w1 h1 card">
+                <div class="num-box">
+                  <span class="num">480</span><span class="unit">个</span>
+                </div>
+                <div>数字化结算</div>
+              </div>
             </div>
           </div>
         </div>
@@ -80,41 +180,51 @@
 
 <script>
 import router from "router/index";
+import exchangeUrl from "utils/exchangeUrl";
+
 export default {
   setup() {
-    return {};
+    function changeUrl(icon) {
+      return exchangeUrl(icon, "digital-icons");
+    }
+    return {
+      changeUrl,
+    };
   },
 };
 </script>
 
 <style lang="scss" scoped>
+$width: 1920px;
+$height: 1080px;
+$allHeight: 260px;
+$h1: calc(((($height - $allHeight) / 2) - 20px) / 3);
+
 .digital-box {
   text-align: center;
-
+  text-shadow: 0px 0px 5px rgba(100, 185, 255, 0.6);
   .h1 {
-    height: 130px;
+    height: $h1;
   }
   .h2 {
     height: 270px;
+    height: calc((((($height - $allHeight) / 2) - 20px) / 3) * 2 + 10px);
   }
   .h3 {
-    height: 410px;
+    height: calc((($height - $allHeight) / 2));
   }
 
   .w1 {
-    width: 245px;
-  }
-  .w2 {
-    width: 390px;
+    width: calc((($width - 80px) * 0.2778 - 10px) / 2);
   }
   .w3 {
-    width: 400px;
+    width: calc(((($width - 80px) * 0.4444) - 10px) / 2);
   }
   .w4 {
-    width: 500px;
+    width: calc(($width - 80px) * 0.2778);
   }
   .w5 {
-    width: 800px;
+    width: calc(($width - 80px) * 0.4444);
   }
 }
 .digital-box {
@@ -125,17 +235,6 @@ export default {
     padding: 20px 30px;
   }
 }
-.title {
-  width: 100%;
-  height: 40px;
-  line-height: 40px;
-  background: rgba(134, 172, 232, 0.21);
-  font-size: 18px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #13fbb9;
-  text-align: center;
-}
 
 .card {
   background: #1e3149;
@@ -143,10 +242,25 @@ export default {
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #e6f7ff;
+  cursor: pointer;
   transition: all 0.8s;
+  > img {
+    width: calc($h1 * 0.4154);
+    height: calc($h1 * 0.4154);
+    margin-top: calc($h1 * 0.1);
+    margin-bottom: calc($h1 * 0.06);
+  }
+
+  .big-icon {
+    width: calc($h1 * 0.831);
+    height: calc($h1 * 0.831);
+    margin-top: calc($h1 * 0.2);
+    margin-bottom: calc($h1 * 0.3);
+  }
 }
 
-.card:hover {
+.card:hover,
+.big-card:hover {
   transform: scale(1.02);
   box-shadow: 0px 0px 2px #aaa;
   z-index: 10;
@@ -172,4 +286,66 @@ export default {
     color: #ffffff;
   }
 }
+
+.ot {
+  width: 78px;
+  height: 78px;
+  background: url(/digital-icons/light-green-back.png);
+  background-size: contain;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    height: 48px;
+    width: 48px;
+  }
+}
+
+.ml40 {
+  margin-left: 40px;
+}
+
+.big-card {
+  background: #1e3149;
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #e6f7ff;
+  cursor: pointer;
+  transition: all 0.8s;
+}
+.num {
+  font-size: 26px;
+  font-family: D-DIN-Bold, D-DIN;
+  font-weight: bold;
+  color: #e6f7ff;
+  margin-right: 8px;
+}
+
+.unit {
+  font-size: 15px;
+  color: #d6f7ff;
+}
+
+.num-box {
+  margin-top: calc($h1 * 0.24);
+  margin-bottom: calc($h1 * 0.1);
+}
+
+.tt > :last-child {
+  height: 15px;
+  margin-left: 35px;
+}
+
+.count {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  background: rgba(134, 172, 232, 0.21);
+  font-size: 18px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #13fbb9;
+  text-align: center;
+}
 </style>