更新 数字化赋能中心自适应

src/views/digitalEmpowermentCenter.vue

@@ -2,7 +2,7 @@
   <div class="digital-box">
     <div class="count">累计合规数字化完成: 8920000 单</div>
     <div class="main-box">
-      <div class="process-title tal mb10">航运数字化合规承运流程</div>
+      <div class="process-title tal">航运数字化合规承运流程</div>
       <div class="process df aic jcsb">
         <div class="h3 df fdc jcsb">
           <div class="w4 h1 card df aic jcc">
@@ -89,7 +89,7 @@
           </div>
         </div>
       </div>
-      <div class="source-title df aic jcsb mt20 mb20">
+      <div class="source-title df aic jcsb">
         <div>创建数字化航运资产包</div>
         <div>汇很多航运数字经济区块链认证</div>
       </div>
@@ -195,8 +195,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$width: 1920px;
-$height: 1080px;
+$width: 100vw;
+$height: 100vh;
 $allHeight: 260px;
 $h1: calc(((($height - $allHeight) / 2) - 20px) / 3);
 
@@ -213,18 +213,19 @@ $h1: calc(((($height - $allHeight) / 2) - 20px) / 3);
   .h3 {
     height: calc((($height - $allHeight) / 2));
   }
-
+  $padding: 3.7vh;
+  $gap: 1.629vh;
   .w1 {
-    width: calc((($width - 80px) * 0.2778 - 10px) / 2);
+    width: calc((($width - $padding - $gap) * 0.2778 - 10px) / 2);
   }
   .w3 {
-    width: calc(((($width - 80px) * 0.4444) - 10px) / 2);
+    width: calc(((($width - $padding - $gap) * 0.4444) - 10px) / 2);
   }
   .w4 {
-    width: calc(($width - 80px) * 0.2778);
+    width: calc(($width - $padding - $gap) * 0.2778);
   }
   .w5 {
-    width: calc(($width - 80px) * 0.4444);
+    width: calc(($width - $padding - $gap) * 0.4444);
   }
 }
 .digital-box {
@@ -232,13 +233,13 @@ $h1: calc(((($height - $allHeight) / 2) - 20px) / 3);
   height: calc(100% - 60px);
   background: #191a24;
   .main-box {
-    padding: 20px 30px;
+    padding: 0.85vh 1.85vh;
   }
 }
 
 .card {
   background: #1e3149;
-  font-size: 16px;
+  font-size: 1.48vh;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #e6f7ff;
@@ -261,26 +262,33 @@ $h1: calc(((($height - $allHeight) / 2) - 20px) / 3);
 
 .card:hover,
 .big-card:hover {
-  transform: scale(1.02);
-  box-shadow: 0px 0px 2px #aaa;
+  transform: scale(1.005);
+  box-shadow: 0px 0px 3px #10ffb9;
   z-index: 10;
 }
 
+.process-title {
+  font-size: 1.48vh;
+  margin-bottom: 0.9vh;
+}
+
 .source-title {
+  font-size: 1.48vh;
+  padding: 0.463vh 0;
+  margin-bottom: 0.9vh;
+  margin-top: 0.9vh;
   :first-child {
-    width: 178px;
     height: 36px;
+    padding: 0 0.863vh;
     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;
@@ -315,7 +323,7 @@ $h1: calc(((($height - $allHeight) / 2) - 20px) / 3);
   transition: all 0.8s;
 }
 .num {
-  font-size: 26px;
+  font-size: 2.41vh;
   font-family: D-DIN-Bold, D-DIN;
   font-weight: bold;
   color: #e6f7ff;
@@ -323,7 +331,7 @@ $h1: calc(((($height - $allHeight) / 2) - 20px) / 3);
 }
 
 .unit {
-  font-size: 15px;
+  font-size: 1.389vh;
   color: #d6f7ff;
 }