1111

src/styles/view/datav.scss

@@ -41,7 +41,10 @@
             bottom: 12px;
         }
     }
-    .hc-datav-total {
-
+    .hc-datav-divider {
+        position: relative;
+        margin-top: 18px;
+        margin-bottom: 28px;
+        border: 0.5px dashed #203a69;
     }
 }

src/views/home/datav.vue

@@ -17,10 +17,25 @@
                 <HcDatavSelect v-model="searchForm.type" :datas="typeArr" />
             </div>
         </div>
-        <div class="hc-datav-total">
-            <datavCard>
-                1111
-            </datavCard>
+        <div class="hc-datav-total relative p-4">
+            <el-row :gutter="24">
+                <el-col :span="6">
+                    <HcDatavCard title="项目总量" num="860" unit="" color="#D5DEFF" />
+                </el-col>
+                <el-col :span="6">
+                    <HcDatavCard title="计划总投资额" num="1590" unit="亿" color="#EEB500" />
+                </el-col>
+                <el-col :span="6">
+                    <HcDatavCard title="目前实际完成投资额" num="590" unit="亿" color="#0DD70C" />
+                </el-col>
+                <el-col :span="6">
+                    <HcDatavCard title="未完成投资额" num="1000" unit="亿" color="#FF0000" />
+                </el-col>
+            </el-row>
+        </div>
+        <div class="hc-datav-divider" />
+        <div class="relative">
+            22222
         </div>
     </div>
 </template>
@@ -32,7 +47,7 @@ import { useAppStore } from '~src/store'
 import bgPng from '~src/assets/images/datav-bg.png'
 import png2 from '~src/assets/images/datav-2.png'
 import HcDatavSelect from './modules/select.vue'
-import datavCard from './modules/card.vue'
+import HcDatavCard from './modules/card.vue'
 
 const store = useAppStore()
 

src/views/home/modules/card.vue

@@ -1,60 +1,75 @@
 <template>
-    <div class="hc-datav-card-box">
-        <svg class="hc-datav-svg full">
-            <polygon fill="transparent" points="4, 0 1587, 0 1591, 4 1591, 862 1587, 866 4, 866 0, 862 0, 4" />
-        </svg>
-        <svg class="left-top hc-datav-svg">
-            <polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" fill="#00CED1" />
-        </svg>
-        <svg class="right-top hc-datav-svg">
-            <polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" fill="#00CED1" />
-        </svg>
-        <svg class="left-bottom hc-datav-svg">
-            <polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" fill="#00CED1" />
-        </svg>
-        <svg class="right-bottom hc-datav-svg">
-            <polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" fill="#00CED1" />
-        </svg>
-        <div class="datav-card-content">
-            <slot />
+    <div class="hc-datav-total-card relative h-[120px] p-[14px]">
+        <div class="card-angle absolute inset-0">
+            <div class="angle a1 absolute left-0 top-0 h-[21px] w-[34px]" />
+            <div class="angle a2 absolute right-0 top-0 h-[21px] w-[34px]" />
+            <div class="angle a3 absolute bottom-0 left-0 h-[21px] w-[34px]" />
+            <div class="angle a4 absolute bottom-0 right-0 h-[21px] w-[34px]" />
+        </div>
+        <div class="card-content relative h-full">
+            <div class="title text-[28px] font-bold">{{ title }}</div>
+            <div class="quantity absolute bottom-[-8px] right-[4px] font-bold" :style="{ color }">
+                <span class="num vertical-sub text-[60px]">{{ num }}</span>
+                <span v-if="unit" class="unit ml-[5px] text-[28px]">({{ unit }})</span>
+            </div>
         </div>
     </div>
 </template>
 
-<style lang="scss" scoped>
-.hc-datav-card-box {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 6px;
-    box-shadow: rgb(131, 191, 246) 0 0 25px 3px inset;
-    .hc-datav-svg {
-        position: absolute;
-        display: block;
-        width: 50px;
-        height: 30px;
-        &.full {
-            width: 100%;
-            height: 100%;
-        }
-        &.right-top {
-            right: 0;
-            transform: rotateY(180deg);
-        }
-        &.left-bottom {
-            bottom: 0;
-            transform: rotateX(180deg);
-        }
-        &.right-bottom {
-            right: 0;
-            bottom: 0;
-            transform: rotateX(180deg) rotateY(180deg);
+<script setup>
+defineProps({
+    title: {
+        type: String,
+        default: '',
+    },
+    num: {
+        type: [String, Number],
+        default: '0',
+    },
+    unit: {
+        type: String,
+        default: '亿',
+    },
+    color: {
+        type: String,
+        default: '',
+    },
+})
+</script>
+
+<style scoped lang="scss">
+.hc-datav-total-card {
+    .card-angle {
+        background-color: rgb(0 43 84 / 80%);
+        border: 1px solid rgb(15 84 155 / 80%);
+        border-radius: 4px;
+        z-index: 0;
+        .angle {
+            border: 5px solid #66FFFF;
+            &.a1 {
+                border-right: 0;
+                border-bottom: 0;
+                border-radius: 4px 0 0 0;
+            }
+            &.a2 {
+                border-left: 0;
+                border-bottom: 0;
+                border-radius: 0 4px 0 0;
+            }
+            &.a3 {
+                border-top: 0;
+                border-right: 0;
+                border-radius: 0 0 0 4px;
+            }
+            &.a4 {
+                border-top: 0;
+                border-left: 0;
+                border-radius: 0 0 4px 0;
+            }
         }
     }
-    .datav-card-content {
-        position: relative;
-        width: 100%;
-        height: 100%;
+    .card-content {
+        z-index: 1;
     }
 }
 </style>