修改

src/apps/home/components/smodule/smodule103.vue

@@ -1,37 +1,43 @@
 <template>
     <div class="module-main">
         <div class="module-box">
-            <!-- <div class="main-box"> -->
-            <div class="block2 flex-col">
-                <div class="text-wrapper1 flex-row justify-between">
-                    <span class="text5">{{ info.count1 }}</span>
-                    <span class="text6">{{ info.count2 }}</span>
-                </div>
-                <div class="text-wrapper2 flex-row justify-between">
-                    <span class="text7">消防设施总点位数</span>
-                    <span class="text8">巡更计划点位数</span>
+            <div class="block2">
+                <!-- 上部 -->
+                <div class="top">
+                    <div class="top-item left">
+                        <div class="num">{{ info.count1 }}</div>
+                        <div class="label">消防设施总点位数</div>
+                    </div>
+                    <div class="top-item right">
+                        <div class="num">{{ info.count2 }}</div>
+                        <div class="label">巡更计划点位数</div>
+                    </div>
                 </div>
-                <div class="box1 flex-row">
-                    <span class="text9" style="margin-left: 1.5vw;">{{ info.count3 }}</span>
-                    <span class="text9" style="font-size: 15px;margin-top: 8vh;margin-left: -17vw;">当班人数</span>
+
+                <!-- 中间圆 -->
+                <div class="center">
+                    <div class="big-num">{{ info.count3 }}</div>
+                    <div class="big-label">当班人数</div>
                 </div>
-                <div class="box2  justify-between">
-                    <div class="text-group2  justify-between">
-                        <span class="text11">{{ info.count4 }}</span>
-                        <span class="text12">消防设施检查完成数</span>
+
+                <!-- 下部 -->
+                <div class="bottom">
+                    <div class="bottom-item left">
+                        <div class="num">{{ info.count4 }}</div>
+                        <div class="label">消防设施检查完成数</div>
                     </div>
-                    <div class=" justify-between">
-                        <span class="text13">{{ info.count5 }}<a v-if=" info.count5 > 0 " style="font-size: 30px;">%</a></span>
-                        <span class="text14">今日巡更完成率</span>
+                    <div class="bottom-item right">
+                        <div class="num">
+                            {{ info.count5 ? Math.round(info.count5) : '' }}<span v-if="info.count5 > 0">%</span>
+                        </div>
+                        <div class="label">今日巡更完成率</div>
                     </div>
                 </div>
+
             </div>
-            <!-- </div> -->
         </div>
     </div>
-
 </template>
-
 <script>
 import Vue from 'vue';
 import Component from 'vue-class-component';
@@ -83,164 +89,99 @@ export default class Echarts extends Vue {
 }
 
 .block2 {
+    position: relative;
     background-image: url(../../images/smodule/smodule103.png);
     background-repeat: no-repeat;
-    background-size: 100% 80%;
-    height: 77vh;
-    margin-top: 1.1vh;
-
-    .text-wrapper1 {
-        width: 18.8vw;
-        height: 11vh;
-        margin: 4vh 0 0 2.2vw;
-
-        .text5 {
-            width: 13.9vw;
-            height: 11vh;
-            overflow-wrap: break-word;
-            color: rgba(255, 255, 255, 1);
-            font-size: 3.7vw;
-            font-family: AlibabaPuHuiTi-Bold;
-            font-weight: 700;
-            text-align: left;
-            white-space: nowrap;
-            line-height: 11vh;
-        }
-
-        .text6 {
-            width: 13.9vw;
-            height: 11vh;
-            overflow-wrap: break-word;
-            color: rgba(255, 255, 255, 1);
-            font-size: 3.7vw;
-            font-family: AlibabaPuHuiTi-Bold;
-            font-weight: 700;
-            text-align: right;
-            margin-left: 15.8vw;
-            white-space: nowrap;
-            line-height: 11vh;
-        }
-    }
+    background-size: 100% 100%;
+    height: 64.8vh;
+}
 
-    .text-wrapper2 {
-        width: 26.5vw;
-        height: 5vh;
-
-        // margin: 0 0 0 2.9vw;
-        .text7 {
-            width: 9.3vw;
-            height: 5vh;
-            overflow-wrap: break-word;
-            color: rgba(11, 226, 223, 1);
-            font-size: 18px;
-            font-family: AlibabaPuHuiTi-Regular;
-            font-weight: NaN;
-            text-align: left;
-            margin-left: 2.5vw;
-            margin-top: -5.5vh;
-            white-space: nowrap;
-            line-height: 11vh;
-        }
-
-        .text8 {
-            width: 9.3vw;
-            height: 5vh;
-            overflow-wrap: break-word;
-            color: rgba(11, 226, 223, 1);
-            font-size: 18px;
-            font-family: AlibabaPuHuiTi-Regular;
-            font-weight: NaN;
-            text-align: left;
-            margin-left: 15.4vw;
-            margin-top: -6vh;
-            white-space: nowrap;
-            line-height: 11vh;
-        }
-    }
+/* ========= 上部分 ========= */
+.top {
+    position: absolute;
+    top: 5%;
+    left: 5%;
+    right: 5%;
+    display: flex;
+    justify-content: space-between;
+}
 
-    .box1 {
-        width: 23.1vw;
-        height: 27vh;
-        margin: 0 0 0 11.6vw;
-        text-align: center;
-        .text9 {
-            width: 23.1vw;
-            height: 16vh;
-            overflow-wrap: break-word;
-            color: rgba(11, 226, 223, 1);
-            font-size: 100px;
-            font-family: AlibabaPuHuiTi-Heavy;
-            font-weight: 900;
-            text-align: left;
-            white-space: nowrap;
-            line-height: 20vh;
-        }
+.top-item {
+    display: flex;
+    flex-direction: column;
+}
 
-    }
+.top-item.right {
+    text-align: right;
+}
 
-    .box2 {
-        // width: 71.5vw;
-        height: 11.5vw;
-        margin: 5vh 0 0 2vw;
-        .text-group2{
-            .text11 {
-                width: 13.9vw;
-                height: 11vh;
-                overflow-wrap: break-word;
-                color: rgba(255, 255, 255, 1);
-                font-size: 3.7vw;
-                font-family: AlibabaPuHuiTi-Bold;
-                font-weight: 700;
-                text-align: left;
-                margin-top: -2.5vw;
-                white-space: nowrap;
-                line-height: 49px;
-            }
-
-            .text12 {
-                width: 69px;
-                height: 17px;
-                overflow-wrap: break-word;
-                color: rgba(11, 226, 223, 1);
-                font-size: 18px;
-                font-family: AlibabaPuHuiTi-Regular;
-                font-weight: NaN;
-                text-align: left;
-                white-space: nowrap;
-                line-height: 48px;
-                margin-left: -13.5vw;
-                margin-top: 1vh;
-            }
-        }
-        .text13 {
-            width: 104px;
-            height: 47px;
-            overflow-wrap: break-word;
-            color: rgba(255, 255, 255, 1);
-            font-size: 3.7vw;
-            font-family: AlibabaPuHuiTi-Bold;
-            font-weight: 700;
-            text-align: left;
-            white-space: nowrap;
-            margin-top: -4vh;
-            margin-left: -9vw;
-            line-height: 5vh;
-        }
-        .text14 {
-            position: absolute;
-            width: 123px;
-            height: 17px;
-            overflow-wrap: break-word;
-            color: rgba(11, 226, 223, 1);
-            font-size: 18px;
-            font-family: AlibabaPuHuiTi-Regular;
-            font-weight: NaN;
-            text-align: left;
-            white-space: nowrap;
-            line-height: 6vh;
-            margin-left: -9vw;
-            margin-top: 1vh;
-        }
-    }
+.top .num {
+    font-size: clamp(28px, 3.8vw, 64px);
+    font-weight: 700;
+    color: #fff;
+}
+
+.top .label {
+    font-size: clamp(12px, 1.2vw, 18px);
+    color: rgba(11, 226, 223, 1);
+    margin-top: 0.5vh;
+}
+
+/* ========= 中间 ========= */
+.center {
+    position: absolute;
+    top: 48%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.big-num {
+    font-size: clamp(50px, 7vw, 130px);
+    font-weight: 900;
+    color: rgba(11, 226, 223, 1);
+    line-height: 1;
+}
+
+.big-label {
+    font-size: clamp(14px, 1.5vw, 22px);
+    color: rgba(11, 226, 223, 1);
+    margin-top: 1vh;
+}
+
+/* ========= 下部分（关键修复） ========= */
+.bottom {
+    position: absolute;
+    bottom: 6%;   /* ⭐关键：固定到底部，保证不消失 */
+    left: 5%;
+    right: 5%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.bottom-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.bottom-item.right {
+    text-align: right;
+}
+
+.bottom .num {
+    font-size: clamp(26px, 3.5vw, 60px);
+    font-weight: 700;
+    color: #fff;
+}
+
+.bottom .label {
+    font-size: clamp(12px, 1.2vw, 18px);
+    color: rgba(11, 226, 223, 1);
+    margin-top: 0.5vh;
+}
+
+/* 百分号 */
+.bottom span {
+    font-size: clamp(16px, 2vw, 30px);
 }
 </style>