更新 数字化赋能中心布局

src/views/digitalEmpowermentCenter.vue

@@ -1,5 +1,81 @@
 <template>
-  <el-button>digitalEmpowermentCenter - 数字化赋能中心</el-button>
+  <div class="digital-box">
+    <div class="title">累计合规数字化完成: 8920000单</div>
+    <div class="main-box">
+      <div class="process-title tal">航运数字化合规承运流程</div>
+      <div class="process df aic jcsb">
+        <div>
+          <div class="w4 h1">1</div>
+          <div>
+            <div class="df aic jcsb">
+              <div class="w1 h1">11</div>
+              <div class="w1 h1">12</div>
+            </div>
+            <div class="df aic jcsb">
+              <div class="w1 h1">13</div>
+              <div class="w1 h1">14</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="w5 h1">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>
+          </div>
+        </div>
+        <div>
+          <div class="w4 h1">3</div>
+          <div>
+            <div class="df aic jcsb">
+              <div class="w1 h1">31</div>
+              <div class="w1 h1">32</div>
+            </div>
+            <div class="df aic jcsb">
+              <div class="w1 h1">33</div>
+              <div class="w1 h1">34</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="source-title df aic jcsb">
+        <div>创建数字化航运资产包</div>
+        <div>汇很多航运数字经济区块链认证</div>
+      </div>
+      <div class="source df aic jcsb">
+        <div>
+          <div class="w4 h1">1</div>
+          <div>
+            <div class="df aic jcsb">
+              <div class="w1 h1">11</div>
+              <div class="w1 h1">12</div>
+            </div>
+            <div class="df aic jcsb">
+              <div class="w1 h1">13</div>
+              <div class="w1 h1">14</div>
+            </div>
+          </div>
+        </div>
+        <div class="w5 h3">2</div>
+        <div>
+          <div class="w4 h1">3</div>
+          <div>
+            <div class="df aic jcsb">
+              <div class="w1 h1">31</div>
+              <div class="w1 h1">32</div>
+            </div>
+            <div class="df aic jcsb">
+              <div class="w1 h1">33</div>
+              <div class="w1 h1">34</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -11,5 +87,62 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+.digital-box {
+  text-align: center;
+
+  .h1 {
+    height: 12.96vh;
+  }
+  .h2 {
+    height: 26.85vh;
+  }
+  .h3 {
+    height: 40.74vh;
+  }
+
+  .w1 {
+    width: 12.76vw;
+  }
+  .w2 {
+    width: 20.31vw;
+  }
+  .w3 {
+    width: 20.83vw;
+  }
+  .w4 {
+    width: 26.04vw;
+  }
+  .w5 {
+    width: 41.67vw;
+  }
+}
+.digital-box {
+  width: 100%;
+  height: calc(100% - 60px);
+  background: #191a24;
+  .main-box {
+    padding: 20px 40px;
+  }
+}
+.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;
+}
+
+.process div,
+.source div {
+  box-sizing: border-box;
+  border: 1px solid red;
+}
+.ffc {
+  flex-direction: column;
+}
 </style>