feat: 去除首页所有的style

src/assets/scss/index.scss

@@ -17,6 +17,18 @@
   }
 
   .host-body {
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
     .title {
       position: relative;
       width: 500px;
@@ -32,16 +44,31 @@
         transform: translate(-50%);
       }
 
-      .title-bototm {
+      .dv-dec-6 {
         position: absolute;
         bottom: -30px;
         left: 50%;
+        width: 250px;
+        height: 8px;
         transform: translate(-50%);
       }
     }
 
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
     // 平行四边形
-    .react-left {
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 500px;
+      }
       cursor: pointer;
       font-size: 18px;
       width: 300px;
@@ -65,7 +92,11 @@
       }
     }
 
-    .react-right {
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
       cursor: pointer;
       font-size: 18px;
       width: 300px;
@@ -73,6 +104,7 @@
       line-height: 50px;
       text-align: center;
       transform: skewX(45deg);
+      background-color: #0f1325;
 
       .react-before {
         position: absolute;

src/constant/index.ts

@@ -10,7 +10,9 @@ type ModuleInfo = {
   name: string
   icon: string
 }[]
+
 export const moduleInfo: ModuleInfo = [
+  // 中间的几个模块
   {
     name: '任务通过率',
     icon: 'icon-chart-bar',
@@ -27,6 +29,7 @@ export const moduleInfo: ModuleInfo = [
     name: '任务完成排行榜',
     icon: 'icon-zhibiao2',
   },
+  // 底部两个模块
   {
     name: '数据统计图',
     icon: 'icon-vector',

src/views/index.vue

@@ -4,58 +4,42 @@
       <dv-loading v-if="loading">Loading...</dv-loading>
       <div v-else class="host-body">
         <div class="d-flex jc-center">
-          <dv-decoration-10 style="width: 33.3%; height: 5px;" />
+          <dv-decoration-10 class="dv-dec-10" />
           <div class="d-flex jc-center">
-            <dv-decoration-8
-              :color="['#568aea', '#000000']"
-              style="width: 200px; height: 50px;"
-            />
+            <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
             <div class="title">
-              <span class="title-text">{{title}}</span>
+              <span class="title-text">{{ title }}</span>
               <dv-decoration-6
-                class="title-bototm"
+                class="dv-dec-6"
                 :reverse="true"
                 :color="['#50e3c2', '#67a1e5']"
-                style="width: 250px; height: 8px;"
               />
             </div>
             <dv-decoration-8
+              class="dv-dec-8"
               :reverse="true"
               :color="['#568aea', '#000000']"
-              style="width: 200px; height: 50px;"
             />
           </div>
-          <dv-decoration-10
-            style="width: 33.3%; height: 5px; transform: rotateY(180deg);"
-          />
+          <dv-decoration-10 class="dv-dec-10-s" />
         </div>
 
         <!-- 第二行 -->
         <div class="d-flex jc-between px-2">
-          <div class="d-flex" style="width: 40%;">
-            <div
-              class="react-right ml-4"
-              style="width: 500px; text-align: left; background-color: #0f1325;"
-            >
+          <div class="d-flex aside-width">
+            <div class="react-left ml-4 react-l-s">
               <span class="react-before"></span>
-              <span class="text">数据分析1</span>
+              <span class="text">{{subtitle[0]}}</span>
             </div>
-            <div class="react-right ml-3" style="background-color: #0f1325;">
-              <span class="text colorBlue">数据分析2</span>
+            <div class="react-left ml-3" >
+              <span class="text colorBlue">{{subtitle[1]}}</span>
             </div>
           </div>
-          <div style="width: 40%;" class="d-flex">
-            <div class="react-left bg-color-blue mr-3">
-              <span class="text fw-b">vue-big-screen</span>
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-blue mr-3">
+              <span class="text fw-b">{{subtitle[2]}}</span>
             </div>
-            <div
-              class="react-left mr-4"
-              style="
-                width: 500px;
-                background-color: #0f1325;
-                text-align: right;
-              "
-            >
+            <div class="react-right mr-4 react-l-s">
               <span class="react-after"></span>
               <span class="text">
                 {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}