1111

src/styles/view/datav.scss

@@ -41,4 +41,7 @@
             bottom: 12px;
         }
     }
+    .hc-datav-total {
+
+    }
 }

src/views/home/datav.vue

@@ -17,6 +17,11 @@
                 <HcDatavSelect v-model="searchForm.type" :datas="typeArr" />
             </div>
         </div>
+        <div class="hc-datav-total">
+            <datavCard>
+                1111
+            </datavCard>
+        </div>
     </div>
 </template>
 
@@ -27,6 +32,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'
 
 const store = useAppStore()
 

src/views/home/modules/card.vue

@@ -0,0 +1,60 @@
+<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>
+    </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);
+        }
+    }
+    .datav-card-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>