Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/components/chart/BarAndLine.vue

@@ -100,7 +100,7 @@
       initChartsOption();
 
       function initCharts(isRefresh = false) {
-        debugger
+        // debugger
         //轴数据
         if (option.series && option.series.length === chartsColumns.length) {
           let xAxisData = props.dataSource.map((item) => item[props.xAxisPropType]);

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -27,12 +27,12 @@
   function getOption() {
     nextTick(() => {
       const color = '#66ffff';
-      const barWidth = 0.1; // 柱条占比
+      let barWidth = echartData.ydata.length>0 && echartData.ydata.length<=1 ? 0.03 : 0.1; // 柱条占比
 
       function renderItem(params, api) {
         const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
         const width = api.size([0, 1])[0] * barWidth; // 宽度
-        const ballRadius = width * 0.8;
+        const ballRadius = width * 0.6;
         return {
           type: 'group',
           children: [
@@ -61,7 +61,7 @@
           trigger: 'item',
           show: true,
           formatter: function (p) {
-            console.info(p);
+            // console.info(p);
             return p.marker + p.name + ' : ' + p.value;
           },
         },
@@ -181,7 +181,7 @@
             label: {
               normal: {
                 show: true,
-                position: ['-7', '-28'],
+                position: echartData.ydata.length>0 && echartData.ydata.length<=1 ?  ['-17', '-30'] :  ['-20', '-25'],
                 formatter: [' {a|{c}}'].join(','),
                 rich: {
                   a: {

src/views/vent/monitorManager/alarmMonitor/DetailModalFire.vue

@@ -272,10 +272,11 @@ onMounted(async () => { });
 
     .alarm-menu {
       height: 100%;
-      width: 272px;
+      // width: 272px;
+      width: 15%;
 
       .type-btn {
-        width: 192px;
+        width: 68%;
         height: 28px;
         line-height: 28px;
         border: 1px solid #0058ee;
@@ -313,9 +314,9 @@ onMounted(async () => { });
 
         .btn {
           position: relative;
-          width: 212px;
-          height: 99px;
-          margin-bottom: 30px;
+          width: 81%;
+          height: 14%;
+          margin-bottom: 10%;
           font-family: 'douyuFont';
           background: url('../../../../assets/images/fire/no-choice.png') no-repeat;
           background-size: 100% 100%;
@@ -346,9 +347,9 @@ onMounted(async () => { });
 
         .btn1 {
           position: relative;
-          width: 262px;
-          height: 99px;
-          margin-bottom: 30px;
+          width: 100%;
+          height: 14%;
+          margin-bottom: 10%;
           font-family: 'douyuFont';
           background: url('../../../../assets//images//fire/choice.png') no-repeat;
           background-size: 100% 100%;
@@ -380,13 +381,11 @@ onMounted(async () => { });
     }
 
     .alarm-content {
-      width: calc(100% - 282px);
+      width: calc(85% - 10px);
       height: 100%;
       margin-left: 10px;
       background: url('../../../../assets//images/fire/border.png') no-repeat;
       background-size: 100% 100%;
-
-
     }
 
   }

src/views/vent/monitorManager/alarmMonitor/alarm.data.ts

@@ -572,25 +572,25 @@ export const fireMonitor = [
     value: 0,
   },
   {
-    title: 'CH4最大值(%)',
+    title: 'CH₄最大值(%)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: 'C2H4最大值(ppm)',
+    title: 'C₂H₄最大值(ppm)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: 'CO2最大值(%)',
+    title: 'CO₂最大值(%)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: '上隅角O2最小值(%)',
+    title: '上隅角O₂最小值(%)',
     code: '',
     level:null,
     value: 0,
@@ -624,25 +624,25 @@ export const fireMonitor1 = [
     value: 0,
   },
   {
-    title: 'CH4最大值(%)',
+    title: 'CH₄最大值(%)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: 'C2H4最大值(ppm)',
+    title: 'C₂H₄最大值(ppm)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: 'CO2最大值(%)',
+    title: 'CO₂最大值(%)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: '上隅角O2最小值(%)',
+    title: '上隅角O₂最小值(%)',
     code: '',
     level:null,
     value: 0,

src/views/vent/monitorManager/alarmMonitor/fire.data.ts

@@ -51,7 +51,7 @@ export const topList = [
     value: null,
     text: '',
     list: [
-      { id: 0, label: 'O2', value: 0 },
+      { id: 0, label: 'O₂', value: 0 },
       { id: 1, label: 'CO', value: 0 },
     ],
   },
@@ -72,7 +72,7 @@ export const contentList = [
     list: [
       {
         id: '0-0',
-        title: 'O2',
+        title: 'O₂',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -80,7 +80,7 @@ export const contentList = [
       },
       {
         id: '0-1',
-        title: 'C2H4',
+        title: 'C₂H₄',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -101,7 +101,7 @@ export const contentList = [
       },
       {
         id: '1-1',
-        title: 'CH4',
+        title: 'CH₄',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -114,7 +114,7 @@ export const contentList = [
     list: [
       {
         id: '2-0',
-        title: 'CO2',
+        title: 'CO₂',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -122,7 +122,7 @@ export const contentList = [
       },
       {
         id: '2-1',
-        title: 'C2H2',
+        title: 'C₂H₂',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',

src/views/vent/monitorManager/alarmMonitor/fire/closeWall.vue

@@ -45,8 +45,6 @@
             <div class="echart-box">
                 <div class="title-f">
                     <div class="title-text">{{ `${type}趋势` }}</div>
-                    <!-- <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                        :placeholder="['开始时间', '终止时间']" @change="onDataChange" /> -->
                 </div>
                 <div class="echarts-box">
                     <echartLine1 :echartDataSg="echartDataSg1"></echartLine1>
@@ -74,7 +72,7 @@ let topContent = reactive({
 //密闭参数列表
 let mbList = reactive([
     {
-        label: 'O2',
+        label: 'O₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -92,7 +90,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'CO2',
+        label: 'CO₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -101,7 +99,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'CH4',
+        label: 'CH₄',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -110,7 +108,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'C2H2',
+        label: 'C₂H₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -119,7 +117,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'C2H4',
+        label: 'C₂H₄',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -134,14 +132,12 @@ let mbList = reactive([
 //当前密闭参数激活选项
 let activeIndex = ref(0)
 //当前激活密闭参数类型
-let type = ref('O2')
-//时间查询参数
-// let TimeRange = reactive<any>([])
+let type = ref('O₂')
 
 let echartDataSg1 = reactive({
     xData: [],
     yData: [],
-    lengedData: 'O2',
+    lengedData: 'O₂',
 })
 let echartDataSgList = reactive<any[]>([])
 
@@ -153,14 +149,14 @@ function btnClick(item, ind) {
     echartDataSg1.yData.length = 0
     echartDataSg1.lengedData = type.value
     switch (type.value) {
-        case 'O2':
+        case 'O₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.o2val)
 
             })
             break;
-        case 'C2H4':
+        case 'C₂H₄':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.ch2val)
@@ -174,21 +170,21 @@ function btnClick(item, ind) {
 
             })
             break;
-        case 'CH4':
+        case 'CH₄':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.chval)
 
             })
             break;
-        case 'CO2':
+        case 'CO₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.co2val)
 
             })
             break;
-        case 'C2H2':
+        case 'C₂H₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.gasval)
@@ -198,10 +194,6 @@ function btnClick(item, ind) {
     }
 
 }
-//时间选项切换
-// function onDataChange(value, dateString) {
-//     TimeRange = [dateString[0], dateString[1]]
-// }
 
 watch(() => props.listData, (val) => {
     console.log(val, 'val---')
@@ -227,17 +219,17 @@ watch(() => props.listData, (val) => {
 
             val.bundletube[0].history.forEach(v => {
                 echartDataSg1.xData.push(v.time)
-                if (echartDataSg1.lengedData == 'O2') {
+                if (echartDataSg1.lengedData == 'O₂') {
                     echartDataSg1.yData.push(v.o2val)
-                } else if (echartDataSg1.lengedData == 'C2H4') {
+                } else if (echartDataSg1.lengedData == 'C₂H₄') {
                     echartDataSg1.yData.push(v.ch2val)
                 } else if (echartDataSg1.lengedData == 'CO') {
                     echartDataSg1.yData.push(v.coval)
-                } else if (echartDataSg1.lengedData == 'CH4') {
+                } else if (echartDataSg1.lengedData == 'CH₄') {
                     echartDataSg1.yData.push(v.chval)
-                } else if (echartDataSg1.lengedData == 'CO2') {
+                } else if (echartDataSg1.lengedData == 'CO₂') {
                     echartDataSg1.yData.push(v.co2val)
-                } else if (echartDataSg1.lengedData == 'C2H2') {
+                } else if (echartDataSg1.lengedData == 'C₂H₂') {
                     echartDataSg1.yData.push(v.gasval)
                 }
                 echartDataSgList.push(v)
@@ -263,11 +255,11 @@ watch(() => props.listData, (val) => {
 
     .title {
         width: 100%;
-        height: 128px;
+        height: 17%;
         margin-bottom: 20px;
         display: flex;
         justify-content: space-between;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
 
         .box {
@@ -290,7 +282,7 @@ watch(() => props.listData, (val) => {
             }
 
             .contents {
-                height: 94px;
+                height: 73%;
 
                 &:nth-child(1) {
                     width: 40%;
@@ -300,10 +292,10 @@ watch(() => props.listData, (val) => {
 
                     img {
                         position: relative;
-                        width: 94px;
-                        height: 94px;
-                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
-                        background-position: 50% 50%;
+                        width: 23%;
+                        height: 100%;
+                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+                        background-size: 50% 50%;
                     }
 
                     .text {
@@ -354,36 +346,38 @@ watch(() => props.listData, (val) => {
 
     .content {
         width: 100%;
-        height: calc(100% - 148px);
+        height: calc(83% - 20px);
         padding: 15px 20px 0px 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
 
         .title-b {
+            height: 30px;
+            line-height: 30px;
             font-family: 'douyuFont';
             font-size: 16px;
             color: #3df6ff;
-            margin-bottom: 10px;
         }
 
         .card-btn {
-            height: 169px;
+            height: 28%;
             margin-bottom: 10px;
             display: flex;
             justify-content: space-between;
 
             .box {
                 position: relative;
-                width: 248px;
+                width: 16%;
                 height: 100%;
-                background: url('../../../../../assets/images/fire/1.png') no-repeat;
+                background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+                background-size: 100% 100%;
                 cursor: pointer;
 
                 .label {
                     position: absolute;
                     left: 50%;
-                    top: 2px;
+                    top: 0;
                     transform: translate(-50%);
                     font-size: 16px;
                     color: #fff;
@@ -393,22 +387,23 @@ watch(() => props.listData, (val) => {
                     position: absolute;
                     left: 50%;
                     transform: translate(-50%, 0);
-                    width: 226px;
-                    height: 27px;
+                    width: 89%;
+                    height: 16%;
                     padding: 0px 10px;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+                    background-size: 100% 100%;
 
                     .text-t {
-                        width: 32px;
+                        width: 17%;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
-                        width: calc(100% - 32px);
+                        width: 83%;
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
@@ -417,30 +412,32 @@ watch(() => props.listData, (val) => {
                     }
                 }
 
+               
                 .box-item1 {
-                    top: 32px;
+                    top: 24%;
                 }
 
                 .box-item2 {
-                    top: 68px;
+                    top: 50%;
                 }
 
                 .box-item3 {
-                    top: 104px;
+                    top: 75%;
                 }
             }
 
             .box1 {
                 position: relative;
-                width: 248px;
+                width: 16%;
                 height: 100%;
-                background: url('../../../../../assets/images/fire/2.png') no-repeat;
+                background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+                background-size: 100% 100%;
                 cursor: pointer;
 
                 .label {
                     position: absolute;
                     left: 50%;
-                    top: 2px;
+                    top: 0;
                     transform: translate(-50%);
                     font-size: 16px;
                     color: #fff;
@@ -450,22 +447,23 @@ watch(() => props.listData, (val) => {
                     position: absolute;
                     left: 50%;
                     transform: translate(-50%, 0);
-                    width: 226px;
-                    height: 27px;
+                    width: 89%;
+                    height: 16%;
                     padding: 0px 10px;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+                    background-size: 100% 100%;
 
                     .text-t {
-                        width: 32px;
+                        width: 17%;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
-                        width: calc(100% - 32px);
+                        width: 83%;
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
@@ -475,21 +473,21 @@ watch(() => props.listData, (val) => {
                 }
 
                 .box-item1 {
-                    top: 32px;
+                    top: 19%;
                 }
 
                 .box-item2 {
-                    top: 68px;
+                    top: 41%;
                 }
 
                 .box-item3 {
-                    top: 104px;
+                    top: 63%;
                 }
             }
         }
 
         .echart-box {
-            height: calc(100% - 215px);
+            height: calc(72% - 41px);
             border: 1px solid #114aac;
 
             .title-f {

src/views/vent/monitorManager/alarmMonitor/fire/dustPage.vue

@@ -20,7 +20,6 @@
 
 <script lang="ts" setup>
 import { ref, computed, reactive, watch, defineProps } from 'vue';
-// import { centerAreaListT, } from '../fire.data'
 import echartLine from './common/echartLine.vue'
 
 let props = defineProps({
@@ -137,17 +136,17 @@ watch(() => props.listData, (val) => {
     box-sizing: border-box;
 
     .top-area {
-        height: 183px;
+        height: 24%;
         display: flex;
-        // justify-content: space-between;
         justify-content: flex-start;
         margin-bottom: 10px;
 
         .top-box {
             position: relative;
-            width: 480px;
-            height: 160px;
-            background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
+            width: 30.5%;
+            height: 88%;
+            background: url('../../../../../assets//images/fire/fc-t.png') no-repeat center;
+            background-size: 100% 100%;
             margin: 0px 20px;
 
             .top-title {
@@ -155,16 +154,16 @@ watch(() => props.listData, (val) => {
                 text-align: center;
                 position: absolute;
                 left: 50%;
-                top: 6px;
+                top: 3%;
                 transform: translate(-50%, 0);
             }
 
             .top-content {
                 position: absolute;
-                top: 33px;
+                top: 17%;
                 left: 0;
                 width: 100%;
-                height: calc(100% - 33px);
+                height: 83%;
                 display: flex;
                 justify-content: flex-start;
                 align-items: flex-start;
@@ -176,10 +175,10 @@ watch(() => props.listData, (val) => {
                     width: 50%;
                     height: 50%;
                     background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-
+                    background-size: 72% 50%;
                     .item-label {
                         position: absolute;
-                        left: 52px;
+                        left: 21%;
                         top: 50%;
                         transform: translate(0, -44%);
                         font-size: 12px;
@@ -187,7 +186,7 @@ watch(() => props.listData, (val) => {
 
                     .item-value {
                         position: absolute;
-                        right: 52px;
+                        right: 21%;
                         top: 50%;
                         transform: translate(0, -44%);
                         font-size: 12px;
@@ -200,9 +199,10 @@ watch(() => props.listData, (val) => {
 
         .top-box1 {
             position: relative;
-            width: 480px;
-            height: 183px;
-            background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
+            width: 30.5%;
+            height: 100%;
+            background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat center;
+            background-size: 100% 100%;
             margin: 0px 20px;
 
             .top-title {
@@ -210,16 +210,16 @@ watch(() => props.listData, (val) => {
                 text-align: center;
                 position: absolute;
                 left: 50%;
-                top: 6px;
+                top: 3%;
                 transform: translate(-50%, 0);
             }
 
             .top-content {
                 position: absolute;
-                top: 33px;
+                top: 17%;
                 left: 0;
                 width: 100%;
-                height: calc(100% - 33px);
+                height: 83%;
                 display: flex;
                 justify-content: flex-start;
                 align-items: flex-start;
@@ -233,10 +233,11 @@ watch(() => props.listData, (val) => {
                     width: 50%;
                     height: 50%;
                     background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+                    background-size: 72% 50%;
 
                     .item-label {
                         position: absolute;
-                        left: 52px;
+                        left: 21%;
                         top: 50%;
                         transform: translate(0, -44%);
                         font-size: 12px;
@@ -244,7 +245,7 @@ watch(() => props.listData, (val) => {
 
                     .item-value {
                         position: absolute;
-                        right: 52px;
+                        right: 21%;
                         top: 50%;
                         transform: translate(0, -44%);
                         font-size: 12px;
@@ -257,9 +258,8 @@ watch(() => props.listData, (val) => {
     }
 
     .bot-area {
-        // height: calc(100% - 471px);
-        height: calc(100% - 193px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        height: calc(76% - 10px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
     }
 }

src/views/vent/monitorManager/alarmMonitor/fire/fireWork.vue

@@ -26,12 +26,6 @@
         <div class="center-echart">
             <div class="nav-title">
                 <div class="title">光纤测温系统温度实时监测</div>
-                <!-- <a-select style="width: 240px; margin-left: 10px" v-model="pointCode" allowClear class="code-mode-select"
-                    placeholder="请选择" @change="handleChange">
-                    <a-select-option v-for="device in pointList" :key="device.value" :value="device.value">{{ device.label
-                    }}
-                    </a-select-option>
-                </a-select> -->
             </div>
             <div class="echart-box">
                 <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw"></echartLine>
@@ -41,17 +35,6 @@
         <div class="bot-content">
             <div class="title">
                 <div class="text">束管系统监测</div>
-                <!-- <div class="search">
-                    <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                        :placeholder="['开始时间', '终止时间']" @change="onDataChange" />
-
-                    <a-select style="width: 240px; margin-left: 10px" v-model="pointCode1" allowClear
-                        class="code-mode-select" placeholder="请选择" @change="handleChange1">
-                        <a-select-option v-for="device in pointList1" :key="device.value" :value="device.value">{{
-                            device.label }}
-                        </a-select-option>
-                    </a-select>
-                </div> -->
             </div>
             <div class="content">
                 <div class="box" v-for="(item, index) in contentList" :key="index">
@@ -100,42 +83,22 @@ let echartDataGq = reactive({
 let echartDataSg = reactive({
     xData: [],
     yData: [],
-    lengedData: 'O2',
+    lengedData: 'O₂',
 })
 let echartDataSgList = reactive<any[]>([])
-//光钎测温测点编号
-// let pointCode = ref('')
-//束管监测-查询时间
-// let TimeRange = reactive<any>([])
-//束管监测-测点编号
-// let pointCode1 = ref('')
-
-
-//光钎测温测点编号选项切换
-// function handleChange(val) {
-//     pointCode.value = val
-// }
-//束管监测-时间选项切换
-// function onDataChange(value, dateString) {
-//     TimeRange = [dateString[0], dateString[1]]
-// }
-//束管监测测点编号选项切换
-// function handleChange1(val) {
-//     pointCode1.value = val
-// }
 //束管实时数据选项点击
 function getSgClick(items) {
     echartDataSg.xData.length = 0
     echartDataSg.yData.length = 0
     echartDataSg.lengedData = items.title
     switch (items.title) {
-        case 'O2':
+        case 'O₂':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.o2val)
             })
             break;
-        case 'C2H4':
+        case 'C₂H₄':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.ch2val)
@@ -147,19 +110,19 @@ function getSgClick(items) {
                 echartDataSg.yData.push(el.coval)
             })
             break;
-        case 'CH4':
+        case 'CH₄':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.chval)
             })
             break;
-        case 'CO2':
+        case 'CO₂':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.co2val)
             })
             break;
-        case 'C2H2':
+        case 'C₂H₂':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.gasval)
@@ -204,17 +167,17 @@ watch(() => props.listData, (val, val1) => {
 
             val.bundletube[0].history.forEach(el => {
                 echartDataSg.xData.push(el.time)
-                if (echartDataSg.lengedData == 'O2') {
+                if (echartDataSg.lengedData == 'O₂') {
                     echartDataSg.yData.push(el.o2val)
-                } else if (echartDataSg.lengedData == 'C2H4') {
+                } else if (echartDataSg.lengedData == 'C₂H₄') {
                     echartDataSg.yData.push(el.ch2val)
-                } else if (echartDataSg.lengedData == 'C2H2') {
+                } else if (echartDataSg.lengedData == 'C₂H₂') {
                     echartDataSg.yData.push(el.gasval)
-                } else if (echartDataSg.lengedData == 'CH4') {
+                } else if (echartDataSg.lengedData == 'CH₄') {
                     echartDataSg.yData.push(el.chval)
                 } else if (echartDataSg.lengedData == 'CO') {
                     echartDataSg.yData.push(el.coval)
-                } else if (echartDataSg.lengedData == 'CO2') {
+                } else if (echartDataSg.lengedData == 'CO₂') {
                     echartDataSg.yData.push(el.co2val)
                 }
                 echartDataSgList.push(el)
@@ -234,10 +197,10 @@ watch(() => props.listData, (val, val1) => {
     box-sizing: border-box;
 
     .work-nav {
-        height: 115px;
+        height: 15%;
         width: 100%;
         margin-bottom: 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         display: flex;
         justify-content: space-between;
@@ -284,7 +247,7 @@ watch(() => props.listData, (val, val1) => {
 
                 .percent {
                     width: 100%;
-                    height: 94px;
+                    height: 82%;
                     padding: 0px 20px;
                     box-sizing: border-box;
                     display: flex;
@@ -311,8 +274,8 @@ watch(() => props.listData, (val, val1) => {
             }
 
             .pic {
-                width: 94px;
-                height: 94px;
+                width: 30%;
+                height: 82%;
 
                 img {
                     width: 100%;
@@ -321,7 +284,7 @@ watch(() => props.listData, (val, val1) => {
             }
 
             .content {
-                height: 94px;
+                height: 82%;
                 margin-left: 15px;
                 color: #fff;
                 display: flex;
@@ -346,28 +309,29 @@ watch(() => props.listData, (val, val1) => {
         }
 
         .nav:nth-child(1) .pic {
-            background: url('../../../../../assets/images/fire/max.svg') no-repeat;
-            background-position: 50% 50%;
+            background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
+            background-size: 50% 50%;
         }
 
         .nav:nth-child(2) .pic {
-            background: url('../../../../../assets/images/fire/min.svg') no-repeat;
-            background-position: 50% 50%;
+            background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
+            background-size: 50% 50%;
         }
 
         .nav:nth-child(3) .pic {
-            background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
-            background-position: 50% 50%;
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+            background-size: 50% 50%;
+
         }
     }
 
     .center-echart {
         width: 100%;
-        height: 242px;
+        height: 32%;
         padding: 15px;
         margin-bottom: 20px;
         box-sizing: border-box;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
 
         .nav-title {
@@ -392,21 +356,20 @@ watch(() => props.listData, (val, val1) => {
     .bot-content {
         position: relative;
         width: 100%;
-        height: calc(100% - 397px);
+        height: calc(53% - 40px);
         padding: 15px 15px 0px 15px;
         box-sizing: border-box;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
 
         .title {
-            height: 32px;
+            height: 30px;
             display: flex;
             justify-content: space-between;
-            margin-bottom: 10px;
 
             .text {
-                height: 32px;
-                line-height: 32px;
+                height: 30px;
+                line-height: 30px;
                 font-family: 'douyuFont';
                 font-size: 16px;
                 color: #3df6ff;
@@ -414,22 +377,22 @@ watch(() => props.listData, (val, val1) => {
         }
 
         .content {
-            height: calc(100% - 42px);
+            height: calc(100% - 30px);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
 
             .box {
                 width: 100%;
-                height: 90px;
+                height: 29%;
                 display: flex;
                 justify-content: space-between;
 
                 .box-item {
                     position: relative;
-                    width: 242px;
+                    width: 16%;
                     height: 100%;
-                    background: url('../../../../../assets/images/fire/14174.png') no-repeat;
+                    background: url('../../../../../assets/images/fire/14174.png') no-repeat center;
                     background-size: 100% 100%;
                     cursor: pointer;
 
@@ -439,24 +402,23 @@ watch(() => props.listData, (val, val1) => {
                         top: 0;
                         transform: translate(-50%);
                         color: #fff;
-                        font-size: 16px;
+                        font-size: 14px;
                     }
 
                     .content-item {
                         position: absolute;
-                        width: 226px;
-                        height: 24px;
-                        line-height: 24px;
+                        width: 93%;
+                        height: 27%;
+                        display: flex;
+                        align-items: center;
                         padding: 0px 10px;
                         box-sizing: border-box;
-                        color: #fff;
-                        font-size: 14px;
-                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
+                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
                         background-size: 100% 100%;
 
                         &:nth-child(2) {
                             left: 50%;
-                            top: 26px;
+                            top: 28%;
                             transform: translate(-50%);
                             display: flex;
                             justify-content: space-between;
@@ -464,7 +426,7 @@ watch(() => props.listData, (val, val1) => {
 
                         &:nth-child(3) {
                             left: 50%;
-                            top: 56px;
+                            top: 62%;
                             transform: translate(-50%);
                             display: flex;
                             justify-content: space-between;
@@ -483,10 +445,10 @@ watch(() => props.listData, (val, val1) => {
         .echart-box {
             position: absolute;
             left: 50%;
-            top: 57px;
+            top: 50px;
             transform: translate(-50%, 0);
-            width: calc(100% - 514px);
-            height: calc(100% - 57px);
+            width: 66%;
+            height: calc(100% - 50px);
         }
     }
 }

src/views/vent/monitorManager/alarmMonitor/fire/gasPage.vue

@@ -113,7 +113,7 @@ watch(() => props.listData, (val) => {
     box-sizing: border-box;
 
     .top-area {
-        height: 128px;
+        height: 17%;
         margin: 10px 0px;
         display: flex;
         justify-content: space-between;
@@ -122,7 +122,7 @@ watch(() => props.listData, (val) => {
             position: relative;
             width: 330px;
             height: 128px;
-            background: url('../../../../../assets/images/fire/top-area.png') no-repeat;
+            background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
             background-size: 100% 100%;
 
             .box-label {
@@ -200,9 +200,9 @@ watch(() => props.listData, (val) => {
 
 
     .bot-area {
-        height: calc(100% - 148px);
+        height: calc(83% - 20px);
         padding: 10px 15px 0px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
 
@@ -314,7 +314,7 @@ watch(() => props.listData, (val) => {
     .bot-area1 {
         height: 100%;
         padding: 10px 15px 0px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
 

src/views/vent/monitorManager/alarmMonitor/fire/mainWell.vue

@@ -131,11 +131,11 @@ let topContent = reactive({
 //束管监测当前密闭参数激活选项
 let activeIndex = ref(0)
 //束管监测当前激活密闭参数类型
-let type = ref('O2')
+let type = ref('O₂')
 //束管监测密闭参数列表
 let mbList = reactive([
     {
-        label: 'O2',
+        label: 'O₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -153,7 +153,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'CO2',
+        label: 'CO₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -162,7 +162,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'CH4',
+        label: 'CH₄',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -171,7 +171,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'C2H2',
+        label: 'C₂H₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -180,7 +180,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'C2H4',
+        label: 'C₂H₄',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -192,7 +192,7 @@ let mbList = reactive([
 let echartDataSg1 = reactive({
     xData: [],
     yData: [],
-    lengedData: 'O2',
+    lengedData: 'O₂',
 })
 let echartDataSgList = reactive<any[]>([])
 
@@ -230,14 +230,14 @@ function btnClick(item, ind) {
     echartDataSg1.yData.length = 0
     echartDataSg1.lengedData = type.value
     switch (type.value) {
-        case 'O2':
+        case 'O₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.o2val)
 
             })
             break;
-        case 'C2H4':
+        case 'C₂H₄':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.ch2val)
@@ -251,21 +251,21 @@ function btnClick(item, ind) {
 
             })
             break;
-        case 'CH4':
+        case 'CH₄':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.chval)
 
             })
             break;
-        case 'CO2':
+        case 'CO₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.co2val)
 
             })
             break;
-        case 'C2H2':
+        case 'C₂H₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.gasval)
@@ -312,17 +312,17 @@ watch(() => props.listData, (val) => {
             topContent.warn = val.bundletube[0].warnLevel == 0 ? '正常' : val.bundletube[0].warnLevel == 101 ? '较低风险' : val.bundletube[0].warnLevel == 102 ? '低风险' : val.bundletube[0].warnLevel == 103 ? '中风险' : val.bundletube[0].warnLevel == 104 ? '高风险' : val.bundletube[0].warnLevel == 201 ? '报警' : '正常'
             val.bundletube[0].history.forEach(v => {
                 echartDataSg1.xData.push(v.time)
-                if (echartDataSg1.lengedData == 'O2') {
+                if (echartDataSg1.lengedData == 'O₂') {
                     echartDataSg1.yData.push(v.o2val)
-                } else if (echartDataSg1.lengedData == 'C2H4') {
+                } else if (echartDataSg1.lengedData == 'C₂H₄') {
                     echartDataSg1.yData.push(v.ch2val)
                 } else if (echartDataSg1.lengedData == 'CO') {
                     echartDataSg1.yData.push(v.coval)
-                } else if (echartDataSg1.lengedData == 'CH4') {
+                } else if (echartDataSg1.lengedData == 'CH₄') {
                     echartDataSg1.yData.push(v.chval)
-                } else if (echartDataSg1.lengedData == 'CO2') {
+                } else if (echartDataSg1.lengedData == 'CO₂') {
                     echartDataSg1.yData.push(v.co2val)
-                } else if (echartDataSg1.lengedData == 'C2H2') {
+                } else if (echartDataSg1.lengedData == 'C₂H₂') {
                     echartDataSg1.yData.push(v.gasval)
                 }
                 echartDataSgList.push(v)
@@ -367,10 +367,10 @@ watch(() => props.listData, (val) => {
     overflow-y: auto;
 
     .work-nav {
-        height: 115px;
+        height: 15%;
         width: 100%;
         margin-bottom: 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         display: flex;
         justify-content: space-between;
@@ -419,8 +419,8 @@ watch(() => props.listData, (val) => {
             }
 
             .pic {
-                width: 94px;
-                height: 94px;
+                width: 26%;
+                height: 84%;
 
                 img {
                     width: 100%;
@@ -429,7 +429,7 @@ watch(() => props.listData, (val) => {
             }
 
             .content {
-                height: 94px;
+                height: 84%;
                 margin-left: 15px;
                 color: #fff;
                 display: flex;
@@ -454,22 +454,23 @@ watch(() => props.listData, (val) => {
         }
 
         .nav:nth-child(1) .pic {
-            background: url('../../../../../assets/images/fire/max.svg') no-repeat;
-            background-position: 50% 50%;
+            background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
+            background-size: 50% 50%;
         }
 
         .nav:nth-child(2) .pic {
-            background: url('../../../../../assets/images/fire/min.svg') no-repeat;
-            background-position: 50% 50%;
+            background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
+            background-size: 50% 50%;
         }
 
         .nav:nth-child(3) .pic {
-            background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
-            background-position: 50% 50%;
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+            background-size: 50% 50%;
         }
 
 
 
+       
         .box {
             display: flex;
 
@@ -490,7 +491,7 @@ watch(() => props.listData, (val) => {
             }
 
             .contents {
-                height: 94px;
+                height: 73%;
 
                 &:nth-child(1) {
                     width: 40%;
@@ -500,10 +501,10 @@ watch(() => props.listData, (val) => {
 
                     img {
                         position: relative;
-                        width: 94px;
-                        height: 94px;
-                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
-                        background-position: 50% 50%;
+                        width: 23%;
+                        height: 100%;
+                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+                        background-size: 50% 50%;
                     }
 
                     .text {
@@ -551,7 +552,7 @@ watch(() => props.listData, (val) => {
     }
 
     .center-box {
-        height: 355px;
+        height: 47%;
         margin-bottom: 20px;
         display: flex;
         justify-content: space-between;
@@ -559,10 +560,10 @@ watch(() => props.listData, (val) => {
 
         .box {
             display: flex;
-            flex: 1;
             flex-direction: column;
+            width: 32%;
             height: 100%;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
             background-size: 100% 100%;
 
             &:nth-child(2) {
@@ -600,12 +601,12 @@ watch(() => props.listData, (val) => {
     }
 
     .footer-box {
-        height: calc(100% - 510px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        height: calc(38% - 40px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
 
         .footer-title {
-            height: 36px;
+            height: 30px;
             padding: 0px 15px;
             display: flex;
             justify-content: space-between;
@@ -618,42 +619,43 @@ watch(() => props.listData, (val) => {
         }
 
         .echart-content {
-            height: calc(100% - 36px);
+            height: calc(100% - 30px);
         }
     }
 
-    .content-s {
+    .content-s{
         width: 100%;
         height: 608px;
         padding: 15px 20px 0px 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
-
         .title-b {
+            height: 30px;
+            line-height: 30px;
             font-family: 'douyuFont';
             font-size: 16px;
             color: #3df6ff;
-            margin-bottom: 10px;
         }
 
         .card-btn {
-            height: 169px;
+            height: 28%;
             margin-bottom: 10px;
             display: flex;
             justify-content: space-between;
 
             .box {
                 position: relative;
-                width: 248px;
+                width: 16%;
                 height: 100%;
-                background: url('../../../../../assets/images/fire/1.png') no-repeat;
+                background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+                background-size: 100% 100%;
                 cursor: pointer;
 
                 .label {
                     position: absolute;
                     left: 50%;
-                    top: 2px;
+                    top: 0;
                     transform: translate(-50%);
                     font-size: 16px;
                     color: #fff;
@@ -663,22 +665,23 @@ watch(() => props.listData, (val) => {
                     position: absolute;
                     left: 50%;
                     transform: translate(-50%, 0);
-                    width: 226px;
-                    height: 27px;
+                    width: 89%;
+                    height: 16%;
                     padding: 0px 10px;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+                    background-size: 100% 100%;
 
                     .text-t {
-                        width: 32px;
+                        width: 17%;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
-                        width: calc(100% - 32px);
+                        width: 83%;
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
@@ -687,30 +690,32 @@ watch(() => props.listData, (val) => {
                     }
                 }
 
+               
                 .box-item1 {
-                    top: 32px;
+                    top: 24%;
                 }
 
                 .box-item2 {
-                    top: 68px;
+                    top: 50%;
                 }
 
                 .box-item3 {
-                    top: 104px;
+                    top: 75%;
                 }
             }
 
             .box1 {
                 position: relative;
-                width: 248px;
+                width: 16%;
                 height: 100%;
-                background: url('../../../../../assets/images/fire/2.png') no-repeat;
+                background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+                background-size: 100% 100%;
                 cursor: pointer;
 
                 .label {
                     position: absolute;
                     left: 50%;
-                    top: 2px;
+                    top: 0;
                     transform: translate(-50%);
                     font-size: 16px;
                     color: #fff;
@@ -720,22 +725,23 @@ watch(() => props.listData, (val) => {
                     position: absolute;
                     left: 50%;
                     transform: translate(-50%, 0);
-                    width: 226px;
-                    height: 27px;
+                    width: 89%;
+                    height: 16%;
                     padding: 0px 10px;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+                    background-size: 100% 100%;
 
                     .text-t {
-                        width: 32px;
+                        width: 17%;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
-                        width: calc(100% - 32px);
+                        width: 83%;
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
@@ -745,21 +751,21 @@ watch(() => props.listData, (val) => {
                 }
 
                 .box-item1 {
-                    top: 32px;
+                    top: 19%;
                 }
 
                 .box-item2 {
-                    top: 68px;
+                    top: 41%;
                 }
 
                 .box-item3 {
-                    top: 104px;
+                    top: 63%;
                 }
             }
         }
 
         .echart-box {
-            height: calc(100% - 215px);
+            height: calc(72% - 41px);
             border: 1px solid #114aac;
 
             .title-f {

src/views/vent/monitorManager/alarmMonitor/fire/ventilate.vue

@@ -147,32 +147,32 @@ watch(
   box-sizing: border-box;
 
   .top-area {
-    height: 183px;
+    height: 24%;
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
-    padding: 0px 15px;
-    box-sizing: border-box;
+ 
 
     .top-box {
       position: relative;
-      width: 480px;
-      height: 160px;
+      width: 32%;
+      height: 88%;
       background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
+      background-size: 100% 100%;
 
       .top-title {
         position: absolute;
         left: 50%;
-        top: 6px;
+        top: 4%;
         transform: translate(-50%, 0);
       }
 
       .top-content {
         position: absolute;
-        top: 33px;
+        top: 20%;
         left: 0;
         width: 100%;
-        height: calc(100% - 33px);
+        height: 80%;
         display: flex;
         justify-content: flex-start;
         align-items: flex-start;
@@ -184,10 +184,11 @@ watch(
           width: 50%;
           height: 50%;
           background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+          background-size: 72% 54%;
 
           .item-label {
             position: absolute;
-            left: 54px;
+            left: 20%;
             top: 50%;
             transform: translate(0, -44%);
             font-size: 12px;
@@ -195,7 +196,7 @@ watch(
 
           .item-value {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -205,7 +206,7 @@ watch(
 
           .item-value1 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -215,7 +216,7 @@ watch(
 
           .item-value2 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -225,7 +226,7 @@ watch(
 
           .item-value3 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -235,7 +236,7 @@ watch(
 
           .item-value4 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -245,7 +246,7 @@ watch(
 
           .item-value5 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -255,7 +256,7 @@ watch(
 
           .item-value6 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -268,25 +269,24 @@ watch(
   }
 
   .center-area {
-    height: 258px;
+    height: 34%;
     margin-bottom: 20px;
     background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
     background-size: 100% 100%;
 
     .center-t {
       height: 50%;
-      // padding: 0px 80px;
       display: flex;
       justify-content: space-around;
       align-items: center;
       background: url('../../../../../assets/images/fire/dz.png') no-repeat;
       background-size: 100% 100%;
-      // box-sizing: border-box;
 
       .t-box {
-        width: 218px;
-        height: 97px;
+        width: 14%;
+        height: 75%;
         background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
+        background-size: 100% 100%;
 
         .box-label {
           text-align: center;
@@ -296,44 +296,38 @@ watch(
 
     .center-b {
       height: 50%;
-      // padding: 0px 80px;
       display: flex;
       justify-content: space-around;
       align-items: center;
-      // box-sizing: border-box;
 
       .b-box {
-        width: 218px;
-        height: 97px;
+        width: 14%;
+        height: 75%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
 
         .box-label {
-          width: 169px;
-          height: 42px;
-          line-height: 42px;
-          text-align: center;
-          margin-bottom: 5px;
+          width: 78%;
+          height: 44%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
           color: #3df6ff;
           font-family: 'douyuFont';
           background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
+          background-size: 100% 100%;
         }
       }
     }
   }
 
   .bot-area {
-    height: calc(100% - 471px);
+    height: calc(100% - 58% - 30px);
     background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
     background-size: 100% 100%;
   }
 
-  .bot-area1 {
-    height: calc(100% - 278px);
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-    background-size: 100% 100%;
-  }
 }
 </style>