1111

src/styles/view/datav.scss

@@ -1,5 +1,6 @@
 .hc-datav-main {
     color: white;
+    overflow: auto;
     i {
         display: inline-block;
     }
@@ -38,13 +39,31 @@
             position: absolute;
             justify-content: end;
             padding-right: 14px;
-            bottom: 12px;
+            bottom: 10px;
         }
     }
+    .hc-datav-total {
+        margin-top: -10px;
+    }
     .hc-datav-divider {
         position: relative;
-        margin-top: 18px;
-        margin-bottom: 28px;
+        margin-top: 8px;
+        margin-bottom: 8px;
         border: 0.5px dashed #203a69;
     }
+    .hc-datav-row-total {
+        height: calc(100% - 290px);
+        .hc-datav-row-column {
+            position: relative;
+            border-width: 50px 20px 20px 20px;
+            border-style: solid;
+            border-image-source: url(/src/assets/images/datav-4.png);
+            border-image-slice: 100 50 50 50 fill;
+            border-image-width: 50px 20px 20px 20px;
+            transition: all linear .1s;
+            .title {
+
+            }
+        }
+    }
 }

src/views/home/datav.vue

@@ -34,8 +34,24 @@
             </el-row>
         </div>
         <div class="hc-datav-divider" />
-        <div class="relative">
-            22222
+        <div class="hc-datav-row-total relative p-4">
+            <el-row :gutter="24" class="h-full">
+                <el-col :span="8" class="h-full">
+                    <div class="hc-datav-row-column h-full">
+                        <div class="title">投资数据</div>
+                        111
+                    </div>
+                </el-col>
+                <el-col :span="8" class="h-full">
+                    222
+                </el-col>
+                <el-col :span="8" class="h-full">
+                    <div class="hc-datav-row-column h-full">
+                        <div class="title">进度数据</div>
+                        3333
+                    </div>
+                </el-col>
+            </el-row>
         </div>
     </div>
 </template>