1111

src/styles/view/datav.scss

@@ -70,6 +70,48 @@
                 text-align: center;
                 font-weight: bold;
             }
+            .notes {
+                position: relative;
+                font-size: 18px;
+                color: #0DF4D1;
+                margin-top: 10px;
+                .red {
+                    color: #FE0301;
+                }
+            }
+            .gird-card-box .gird-card {
+                border-width: 1px 1px 1px 1px;
+                border-style: solid;
+                border-image-source: url(/src/assets/images/datav-1.png);
+                border-image-slice: 100 100 100 100 fill;
+                border-image-width: 20px 20px 20px 20px;
+                .upper-num {
+                    border-radius: 50%;
+                    &.a1 {
+                        background: #2E7EDC;
+                    }
+                    &.a2 {
+
+                    }
+                    &.a3 {
+
+                    }
+                    &.a4 {
+
+                    }
+                }
+                .content .data {
+                    .num {
+                        color: #0DF4D1;
+                    }
+                    .line {
+                        margin: 0 2px;
+                    }
+                    .red {
+                        color: #FE0301;
+                    }
+                }
+            }
         }
         .hc-datav-row-charts {
             .row-charts {

src/views/home/datav.vue

@@ -39,7 +39,71 @@
                 <el-col :span="8" class="h-full">
                     <div class="hc-datav-row-column h-full">
                         <div class="title">投资数据</div>
-                        111
+                        <div class="notes">
+                            <span>(已完成/</span>
+                            <span class="red">未完成</span>
+                            <span>)</span>
+                        </div>
+                        <div class="gird-card-box relative mt-4">
+                            <hc-row :gutter="20">
+                                <hc-col :span="12">
+                                    <div class="gird-card hc-flex p-[14px]">
+                                        <div class="upper-num a1 hc-flex-center h-[52px] w-[52px] text-[30px]">Ⅰ</div>
+                                        <div class="content relative ml-[12px] h-[52px] flex-1">
+                                            <div class="name mb-[10] ml-[20] text-left text-[16px]">一季度</div>
+                                            <div class="data text-right text-[24px]">
+                                                <span class="num font-bold">130</span>
+                                                <span class="line">/</span>
+                                                <span class="red font-bold">60</span>
+                                                <span class="unit ml-[5px] text-[14px]">(亿)</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </hc-col>
+                                <hc-col :span="12">
+                                    <div class="gird-card hc-flex p-[14px]">
+                                        <div class="upper-num a2 hc-flex-center h-[52px] w-[52px] text-[30px]">Ⅱ</div>
+                                        <div class="content relative ml-[12px] h-[52px] flex-1">
+                                            <div class="name mb-[10] ml-[20] text-left text-[16px]">二季度</div>
+                                            <div class="data text-right text-[24px]">
+                                                <span class="num font-bold">130</span>
+                                                <span class="line">/</span>
+                                                <span class="red font-bold">60</span>
+                                                <span class="unit ml-[5px] text-[14px]">(亿)</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </hc-col>
+                                <hc-col :span="12">
+                                    <div class="gird-card hc-flex p-[14px]">
+                                        <div class="upper-num a3 hc-flex-center h-[52px] w-[52px] text-[30px]">Ⅲ</div>
+                                        <div class="content relative ml-[12px] h-[52px] flex-1">
+                                            <div class="name mb-[10] ml-[20] text-left text-[16px]">三季度</div>
+                                            <div class="data text-right text-[24px]">
+                                                <span class="num font-bold">130</span>
+                                                <span class="line">/</span>
+                                                <span class="red font-bold">60</span>
+                                                <span class="unit ml-[5px] text-[14px]">(亿)</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </hc-col>
+                                <hc-col :span="12">
+                                    <div class="gird-card hc-flex p-[14px]">
+                                        <div class="upper-num a4 hc-flex-center h-[52px] w-[52px] text-[30px]">Ⅳ</div>
+                                        <div class="content relative ml-[12px] h-[52px] flex-1">
+                                            <div class="name mb-[10] ml-[20] text-left text-[16px]">四季度</div>
+                                            <div class="data text-right text-[24px]">
+                                                <span class="num font-bold">130</span>
+                                                <span class="line">/</span>
+                                                <span class="red font-bold">60</span>
+                                                <span class="unit ml-[5px] text-[14px]">(亿)</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </hc-col>
+                            </hc-row>
+                        </div>
                     </div>
                 </el-col>
                 <el-col :span="8" class="h-full">