布局

front/src/views/capabilityCloud/index.vue

@@ -2,17 +2,22 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-19 10:11:03
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 10:29:16
+ * @LastEditTime: 2022-06-19 10:45:59
  * @Description: 告诉大家这是什么
 -->
 <template>
   <div class="capability-cloud">
-    <platform-overview></platform-overview>
-    <application-resources></application-resources>
-    <component-services></component-services>
-    <infrastructure></infrastructure>
-    <data-resources></data-resources>
-    <knowledge-base></knowledge-base>
+    <div class="header"><span class="title">数字资源驾驶舱</span></div>
+    <div class="main">
+      <platform-overview></platform-overview>
+      <application-resources></application-resources>
+    </div>
+    <div class="main">
+      <component-services></component-services>
+      <infrastructure></infrastructure>
+      <data-resources></data-resources>
+      <knowledge-base></knowledge-base>
+    </div>
   </div>
 </template>
 <script setup>
@@ -45,4 +50,26 @@
       font-family: DIN-Bold;
     }
   }
+  .capability-cloud {
+    height: 10.8rem;
+    background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
+    background-size: 100% 100%;
+    & > .header {
+      height: 1.04rem;
+      background: url('~@/assets/capabilityCloud/header.png') no-repeat;
+      font-size: 0.46rem;
+      text-align: center;
+      & > .title {
+        background: -webkit-linear-gradient(90deg, #99a8d0, #fff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+    & > .main {
+      margin-top: 0.24rem;
+      padding: 0 0.24rem;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
 </style>