1111

src/styles/view/datav.scss

@@ -74,7 +74,7 @@
                 position: relative;
                 font-size: 18px;
                 color: #0DF4D1;
-                margin-top: 10px;
+                margin-top: -16px;
                 .red {
                     color: #FE0301;
                 }

src/views/home/datav.vue

@@ -50,8 +50,8 @@
                                     <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]">
+                                            <div class="name mb-[10px] text-center text-[16px]">一季度</div>
+                                            <div class="data text-center text-[24px]">
                                                 <span class="num font-bold">130</span>
                                                 <span class="line">/</span>
                                                 <span class="red font-bold">60</span>
@@ -64,8 +64,8 @@
                                     <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]">
+                                            <div class="name mb-[10px] text-center text-[16px]">二季度</div>
+                                            <div class="data text-center text-[24px]">
                                                 <span class="num font-bold">130</span>
                                                 <span class="line">/</span>
                                                 <span class="red font-bold">60</span>
@@ -78,8 +78,8 @@
                                     <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]">
+                                            <div class="name mb-[10px] text-center text-[16px]">三季度</div>
+                                            <div class="data text-center text-[24px]">
                                                 <span class="num font-bold">130</span>
                                                 <span class="line">/</span>
                                                 <span class="red font-bold">60</span>
@@ -92,8 +92,8 @@
                                     <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]">
+                                            <div class="name mb-[10px] text-center text-[16px]">四季度</div>
+                                            <div class="data text-center text-[24px]">
                                                 <span class="num font-bold">130</span>
                                                 <span class="line">/</span>
                                                 <span class="red font-bold">60</span>
@@ -130,7 +130,67 @@
                 <el-col :span="8" class="h-full">
                     <div class="hc-datav-row-column h-full">
                         <div class="title">进度数据</div>
-                        3333
+                        <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-[10px] text-center text-[16px]">一季度</div>
+                                            <div class="data text-center text-[24px]">
+                                                <span class="num font-bold">130</span>
+                                                <span class="line">/</span>
+                                                <span class="red font-bold">60</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-[10px] text-center text-[16px]">二季度</div>
+                                            <div class="data text-center text-[24px]">
+                                                <span class="num font-bold">130</span>
+                                                <span class="line">/</span>
+                                                <span class="red font-bold">60</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-[10px] text-center text-[16px]">三季度</div>
+                                            <div class="data text-center text-[24px]">
+                                                <span class="num font-bold">130</span>
+                                                <span class="line">/</span>
+                                                <span class="red font-bold">60</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-[10px] text-center text-[16px]">四季度</div>
+                                            <div class="data text-center text-[24px]">
+                                                <span class="num font-bold">130</span>
+                                                <span class="line">/</span>
+                                                <span class="red font-bold">60</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </hc-col>
+                            </hc-row>
+                        </div>
                     </div>
                 </el-col>
             </el-row>