diff --git a/src/assets/images/cityScreen/1.png b/src/assets/images/cityScreen/1.png
index b3e3225b..d5c0bebe 100644
Binary files a/src/assets/images/cityScreen/1.png and b/src/assets/images/cityScreen/1.png differ
diff --git a/src/assets/images/cityScreen/2.png b/src/assets/images/cityScreen/2.png
index 92650e90..637546c0 100644
Binary files a/src/assets/images/cityScreen/2.png and b/src/assets/images/cityScreen/2.png differ
diff --git a/src/assets/images/cityScreen/4.png b/src/assets/images/cityScreen/4.png
index 495246b1..150a2af1 100644
Binary files a/src/assets/images/cityScreen/4.png and b/src/assets/images/cityScreen/4.png differ
diff --git a/src/assets/images/cityScreen/5.png b/src/assets/images/cityScreen/5.png
index 66c49e54..9490bcb8 100644
Binary files a/src/assets/images/cityScreen/5.png and b/src/assets/images/cityScreen/5.png differ
diff --git a/src/assets/images/cityScreen/6.png b/src/assets/images/cityScreen/6.png
index 5688f77b..a9356f76 100644
Binary files a/src/assets/images/cityScreen/6.png and b/src/assets/images/cityScreen/6.png differ
diff --git a/src/assets/images/cityScreen/8.png b/src/assets/images/cityScreen/8.png
new file mode 100644
index 00000000..d6bc55c6
Binary files /dev/null and b/src/assets/images/cityScreen/8.png differ
diff --git a/src/views/screen/cityScreen/components/countryMap/index.vue b/src/views/screen/cityScreen/components/countryMap/index.vue
index b4f787f0..8383940f 100644
--- a/src/views/screen/cityScreen/components/countryMap/index.vue
+++ b/src/views/screen/cityScreen/components/countryMap/index.vue
@@ -180,10 +180,10 @@ export default {
                         map: 'dishi',
                         type: 'map',
                         aspectScale: 1,
-                        zoom: this.zoom,
+                        zoom: 1,
                         roam: false, // 是否允许缩放
                         animationDurationUpdate: 0,
-                        layoutSize: '80%',
+                        layoutSize: '60%',
                         layoutCenter: ['50%', '56%'],
                         itemStyle: {
                             normal: {
@@ -191,8 +191,8 @@ export default {
                                     show: false,
                                 },
                                 areaColor: this.sendMapColor, //地图颜色
-                                opacity: 0.7,
-                                borderColor: '#38EAF6', //地图边框颜色
+                                opacity: 0.5,
+                                borderColor: '#7ef638', //地图边框颜色
                                 borderWidth: 1, //地图边框宽度
                                 shadowColor: 'none',
                                 shadowBlur: 10,
@@ -231,14 +231,14 @@ export default {
                         aspectScale: 1,
                         roam: false, // 是否允许缩放
                         animationDurationUpdate: 0,
-                        zoom: this.zoom,
-                        layoutSize: '80%',
+                        zoom: 1,
+                        layoutSize: '60%',
                         layoutCenter: ['50%', '58%'],
                         itemStyle: {
                             areaColor: '#5785AE',
                             borderColor: '#5785AE',
                             borderWidth: 1,
-                            opacity: 0.3,
+                            opacity: 0.5,
                             color: '#fff',
                         },
                         zlevel: -1,
@@ -371,8 +371,8 @@ export default {
         // 放大1.2倍
         transform: scale(1.3);
         #mapEcharts {
-            width: 100%;
-            height: 100%;
+            width: 90%;
+            height: 90%;
         }
         #mapEcharts2 {
             width: 100%;
diff --git a/src/views/screen/cityScreen/components/engineerUsing/index.vue b/src/views/screen/cityScreen/components/engineerUsing/index.vue
index 85e3e78a..0c1bf7f2 100644
--- a/src/views/screen/cityScreen/components/engineerUsing/index.vue
+++ b/src/views/screen/cityScreen/components/engineerUsing/index.vue
@@ -1,348 +1,376 @@
 <template>
-    <div class="content">
-        <div class="content-title">
-            <div class="title"> 工程在用装备情况 </div>
-            <div class="select-view">
-                <select v-model="selectId" @change="changeSelect" class="select-box">
-                    <option v-for="item in options" :key="item.value" :value="item.value">
-                        {{ item.label }}
-                    </option>
-                </select>
-                <!-- <el-select v-model="value" placeholder="请选择" popper-class="popperView">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select> -->
-            </div>
-        </div>
-        <div class="content-view">
-            <div class="topView">
-                <div
-                    style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between"
-                >
-                    <div :class="tabIndex == 1 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(1)"
-                        >线路</div
-                    >
-                    <div :class="tabIndex == 3 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(3)"
-                        >变电</div
-                    >
-                    <div :class="tabIndex == 2 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(2)"
-                        >电缆</div
-                    >
-                </div>
-                <div
-                    style="width: 45%; height: 100%; display: flex; align-items: center; justify-content: space-between"
-                >
-                    <div style="width: 50%; height: 12%; display: flex; align-items: center; justify-content: center">
-                        <img src="../../../../../assets/cityScreen/icon3.png" class="icon" />
-                        <span class="text" style="">项目数:</span>
-                        <span class="num">{{ total }}</span>
-                        <span class="unit">个</span>
-                    </div>
-                    <div style="width: 50%; height: 12%; display: flex; align-items: center; justify-content: center">
-                        <img src="../../../../../assets/cityScreen/icon1.png" class="icon" />
-                        <span class="text" style="">在用装备数:</span>
-                        <span class="num">{{ useNum }}</span>
-                        <span class="unit">台</span>
-                    </div>
-                </div>
-            </div>
-            <div class="tableHeader">
-                <div class="header" style="width: 10%">排名</div>
-                <div class="header" style="width: 25%">工程名称</div>
-                <div class="header" style="width: 20%">在用装备数(台)</div>
-                <div class="header">投资额(万元)</div>
-                <div class="header">现场人员(人)</div>
-                <div class="header">风险等级</div>
-                <div class="header">地理特征</div>
-            </div>
-            <div class="tableBox">
-                <div class="tableTr" v-for="(item, index) in tableList" :key="index">
-                    <div class="tableTd" style="width: 10%; font-weight: 800">
-                        {{ index + 1 }}
-                    </div>
-                    <div class="tableTd" style="width: 25%">
-                        {{ item.projectName }}
-                    </div>
-                    <div class="tableTd" style="width: 20%">
-                        {{ item.useNum }}
-                    </div>
-                    <div class="tableTd">
-                        {{ (item.investAmount / 10000).toFixed(2) }}
-                    </div>
-                    <div class="tableTd">
-                        {{ item.scenePersonNum }}
-                    </div>
-                    <div class="tableTd">
-                        {{ item.riskLevel }}
-                    </div>
-                    <div class="tableTd">
-                        {{ item.geoFeature }}
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div class="content">
+    <div class="content-title">
+      <div class="select-view">
+        <select v-model="selectId" @change="changeSelect" class="select-box">
+          <option v-for="item in options" :key="item.value" :value="item.value">
+            {{ item.label }}
+          </option>
+        </select>
+      </div>
     </div>
+    <div class="content-view">
+      <div class="topView">
+        <div
+          style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between"
+        >
+          <div :class="tabIndex == 1 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(1)"
+          >线路
+          </div
+          >
+          <div :class="tabIndex == 3 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(3)"
+          >变电
+          </div
+          >
+          <div :class="tabIndex == 2 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(2)"
+          >电缆
+          </div
+          >
+        </div>
+        <div
+          style="width: 60%; height: 100%; display: flex; align-items: center; justify-content: space-between"
+        >
+          <div style="width: 50%; height: 12%; display: flex; align-items: center; justify-content: center">
+            <img src="../../../../../assets/cityScreen/icon3.png" class="icon"/>
+            <span class="text" style="">项目数:</span>
+            <span class="num">{{ total }}</span>
+            <span class="unit">个</span>
+          </div>
+          <div style="width: 50%; height: 12%; display: flex; align-items: center; justify-content: center">
+            <img src="../../../../../assets/cityScreen/icon1.png" class="icon"/>
+            <span class="text" style="">在用装备数:</span>
+            <span class="num">{{ useNum }}</span>
+            <span class="unit">台</span>
+          </div>
+        </div>
+      </div>
+      <div class="tableHeader">
+        <div class="header" style="width: 5%">排名</div>
+        <div class="header" style="width: 15%">工程名称</div>
+        <div class="header" style="width: 20%">在用装备数(台)</div>
+        <div class="header" style="width: 15%">投资额(万元)</div>
+        <div class="header" style="width: 15%">现场人员(人)</div>
+        <div class="header" style="width: 15%">风险等级</div>
+        <div class="header" style="width: 15%">地理特征</div>
+      </div>
+      <div class="tableBox">
+        <div class="tableTr" v-for="(item, index) in tableList" :key="index">
+          <div class="tableTd" style="width: 5%; font-weight: 800">
+            {{ index + 1 }}
+          </div>
+          <div class="tableTd" style="width: 15%">
+            {{ item.projectName }}
+          </div>
+          <div class="tableTd" style="width: 20%">
+            {{ item.useNum }}
+          </div>
+          <div class="tableTd" style="width: 15%">
+            {{ (item.investAmount / 10000).toFixed(2) }}
+          </div>
+          <div class="tableTd" style="width: 15%">
+            {{ item.scenePersonNum }}
+          </div>
+          <div class="tableTd" style="width: 15%">
+            {{ item.riskLevel }}
+          </div>
+          <div class="tableTd" style="width: 15%">
+            {{ item.geoFeature }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import { equipmentInUseInTheProjectApi, getVoltageLevelApi } from '@/api/screen/cityScreen'
 
 export default {
-    data() {
-        return {
-            tabIndex: 1,
-            total: 0,
-            useNum: 0,
-            tableList: [],
-            selectId: '',
-            options: [],
-        }
+  data() {
+    return {
+      tabIndex: 1,
+      total: 0,
+      useNum: 0,
+      tableList: [],
+      selectId: '',
+      options: []
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getVoltageLevel()
+    this.getEquipmentInUseInTheProject()
+  },
+  methods: {
+    changeSelect() {
+      console.log(this.selectId)
+      this.getEquipmentInUseInTheProject()
     },
-    created() {},
-    mounted() {
-        this.getVoltageLevel()
-        this.getEquipmentInUseInTheProject()
+    changTab(index) {
+      this.tabIndex = index
+      this.selectId = ''
+      this.getEquipmentInUseInTheProject()
     },
-    methods: {
-        changeSelect() {
-            console.log(this.selectId)
-            this.getEquipmentInUseInTheProject()
-        },
-        changTab(index) {
-            this.tabIndex = index
-            this.selectId = ''
-            this.getEquipmentInUseInTheProject()
-        },
 
-        getEquipmentInUseInTheProject() {
-            let param = {
-                companyId: sessionStorage.getItem('companyId'),
-                typeId: this.tabIndex,
-                voltageLevel: this.selectId,
-            }
-            console.log(param)
-            equipmentInUseInTheProjectApi(param).then((response) => {
-                console.log(response, 'equipmentInUseInTheProjectApi')
-                if (response.code == 200) {
-                    this.total = response.data.total
-                    this.useNum = response.data.useNum
-                    this.tableList = response.data.list
-                }
-            })
-        },
-        getVoltageLevel() {
-            getVoltageLevelApi({}).then((response) => {
-                console.log(response, 'getVoltageLevelApi')
-                if (response.code == 200) {
-                    if (response.data && response.data.length > 0) {
-                        response.data.forEach((item) => {
-                            let obj = {
-                                label: item.voltage + 'kV',
-                                value: item.voltage,
-                            }
-                            this.options.push(obj)
-                        })
-                        // this.$set(this,'selectId',response.data[0].voltage)
-                    }
-                }
-            })
-        },
+    getEquipmentInUseInTheProject() {
+      let param = {
+        companyId: sessionStorage.getItem('companyId'),
+        typeId: this.tabIndex,
+        voltageLevel: this.selectId
+      }
+      console.log(param)
+      equipmentInUseInTheProjectApi(param).then((response) => {
+        console.log(response, 'equipmentInUseInTheProjectApi')
+        if (response.code == 200) {
+          this.total = response.data.total
+          this.useNum = response.data.useNum
+          this.tableList = response.data.list
+        }
+      })
     },
+    getVoltageLevel() {
+      getVoltageLevelApi({}).then((response) => {
+        console.log(response, 'getVoltageLevelApi')
+        if (response.code == 200) {
+          if (response.data && response.data.length > 0) {
+            response.data.forEach((item) => {
+              let obj = {
+                label: item.voltage + 'kV',
+                value: item.voltage
+              }
+              this.options.push(obj)
+            })
+            // this.$set(this,'selectId',response.data[0].voltage)
+          }
+        }
+      })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
+@font-face {
+  font-family: 'DIN';
+  src: url('../../../../../assets/font-family/DS-Digital/DS-TITle.ttf');
+}
 .content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
-    // background-image: url('../../../../../assets/cityScreen/engineerUsingBg.png');
-    // background-repeat: no-repeat;
-    // background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  // background-image: url('../../../../../assets/cityScreen/engineerUsingBg.png');
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
 }
+
 .content-title {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    // height: 18%;
-    position: relative;
-    // color: #78d6ff;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  // height: 18%;
+  position: relative;
+  background: url('../../../../../assets/images/cityScreen/8.png') no-repeat;
+  background-size: 100% 100%;
+  // color: #78d6ff;
 }
+
 .title {
-    width: 100%;
-    height: 38px;
-    padding-left: 9%;
-    letter-spacing: 2px;
-    background: url('../../../../../assets/images/cityScreen/2.png') no-repeat;
-    background-size: 100% 100%;
-    font-size: 16px;
-    font-family: 'PingFang SC';
-    font-weight: 600;
-    color: #78d6ff;
-    line-height: 38px;
+  width: 100%;
+  height: 38px;
+  padding-left: 9%;
+  letter-spacing: 2px;
+  font-size: 18px;
+  font-family: 'DIN';
+  font-weight: 600;
+  color: #78d6ff;
+  line-height: 38px;
+  background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
+
 .select-view {
-    width: 20%;
-    height: 36px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 0;
+  margin-left: 330px;
+  width: 25%;
+  height: 36px;
+
 }
+
 .select-box {
-    width: 80%; /*设置宽度确保内容 和 下拉icon的距离*/
-    height: 75%;
-    background: #113f67;
-    color: #ccc;
-    border: none;
-    border-radius: 10%;
-    border-color: #113f67;
+  width: 80%; /*设置宽度确保内容 和 下拉icon的距离*/
+  height: 75%;
+  background: #113f67;
+  color: #ccc;
+  margin-top: 5px;
+  border-radius: 10%;
+  border-color: #113f67;
+  font-size: 16px;
+  /*清除select聚焦时候的边框颜色*/
+  outline: none;
+
+  option {
     font-size: 16px;
-    /*清除select聚焦时候的边框颜色*/
-    outline: none;
-    option {
-        font-size: 16px;
-        border: none;
-    }
+    border: none;
+  }
 }
 
 .content-view {
-    width: 100%;
-    height: 85%;
+  width: 100%;
+  height: 85%;
 }
+
 .topView {
-    width: 100%;
-    height: 16%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  width: 100%;
+  height: 16%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
+
 .fs-24 {
-    font-size: 16px;
+  font-size: 16px;
 }
+
 .topTab1 {
-    width: 33%;
-    height: 80%;
-    color: #45adf1;
-    background-image: url('../../../../../assets/cityScreen/tab11.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 33%;
+  height: 80%;
+  color: #45adf1;
+  background-image: url('../../../../../assets/cityScreen/tab11.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
 .topTab2 {
-    width: 33%;
-    height: 80%;
-    color: #45adf1;
-    background-image: url('../../../../../assets/cityScreen/tab21.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 33%;
+  height: 80%;
+  color: #45adf1;
+  background-image: url('../../../../../assets/cityScreen/tab21.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
 .topTab3 {
-    width: 33%;
-    height: 80%;
-    color: #45adf1;
-    background-image: url('../../../../../assets/cityScreen/tab31.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 33%;
+  height: 80%;
+  color: #45adf1;
+  background-image: url('../../../../../assets/cityScreen/tab31.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
 .active1 {
-    background-image: url('../../../../../assets/cityScreen/tab12.png');
+  background-image: url('../../../../../assets/cityScreen/tab12.png');
 }
+
 .active2 {
-    background-image: url('../../../../../assets/cityScreen/tab22.png');
+  background-image: url('../../../../../assets/cityScreen/tab22.png');
 }
+
 .active3 {
-    background-image: url('../../../../../assets/cityScreen/tab32.png');
+  background-image: url('../../../../../assets/cityScreen/tab32.png');
 }
 
 .text {
-    color: #c0c2c6;
-    font-size: 14px;
+  color: #c0c2c6;
+  font-size: 10px;
 }
+
 .num {
-    color: #83d3f8;
-    font-size: 14px;
-    font-weight: 600;
-    margin: 0 10px;
+  color: #fcfac4;
+  font-size: 20px;
+  font-weight: bold;
+  opacity: 0.9; /* 轻微透明感 */
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
+  letter-spacing: 2px; /* 可选：调整数字间距 */
+  margin: 0 10px;
 }
+
 .unit {
-    font-size: 16px;
-    color: #ccc;
+  font-size: 8px;
+  color: #ccc;
 }
+
 .icon {
-    width: 70px;
-    height: 70px;
+  width: 40px;
+  height: 40px;
+  margin-top: 5px;
 }
 
 .tableHeader {
-    width: 100%;
-    height: 12%;
-    background-image: url('../../../../../assets/cityScreen/tableHeader.png');
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
+  width: 100%;
+  height: 12%;
+  background-image: url('../../../../../assets/cityScreen/tableHeader.png');
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
 }
+
 .tableBox {
-    width: 100%;
-    height: 76%;
-    overflow-y: auto;
+  width: 100%;
+  height: 76%;
+  overflow-y: auto;
 }
+
 .tableTr {
-    width: 100%;
-    height: 18%;
-    background-image: url('../../../../../assets/cityScreen/tableTr.png');
-    background-size: 100% 100%;
-    margin-bottom: 2px;
-    display: flex;
+  width: 100%;
+  height: 18%;
+  background-image: url('../../../../../assets/cityScreen/tableTr.png');
+  background-size: 100% 100%;
+  margin-bottom: 2px;
+  display: flex;
 }
+
 .tableTd {
-    width: 15%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    color: #ccc;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  width: 15%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  color: #ccc;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+
 .header {
-    color: #72b1f1;
-    width: 15%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
+  color: #72b1f1;
+  width: 15%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
 }
+
 ::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
+  width: 4px;
+  height: 4px;
 }
+
 //定义背景颜色和圆角
 ::-webkit-scrollbar-thumb {
-    border-radius: 1em;
-    background-color: rgba(50, 50, 50, 0.3);
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.3);
 }
+
 //定义滚动条轨道 内阴影+圆角
 ::-webkit-scrollbar-track {
-    border-radius: 1em;
-    background-color: rgba(50, 50, 50, 0.1);
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.1);
 }
 
 // @media screen and (min-width: 1080px) {
diff --git a/src/views/screen/cityScreen/components/equQuantity/index.vue b/src/views/screen/cityScreen/components/equQuantity/index.vue
index 1798c876..86a1ff78 100644
--- a/src/views/screen/cityScreen/components/equQuantity/index.vue
+++ b/src/views/screen/cityScreen/components/equQuantity/index.vue
@@ -1,468 +1,504 @@
 <template>
-    <div class="content">
-        <div class="content-title"> 装备数量价值 </div>
-        <div class="content-view">
-            <div class="content-view-item">
-                <img src="../../../../../assets/cityScreen/quantityIcon1.png" />
-                <div class="item-content">
-                    <div class="item-title"> 线路装备 </div>
-                    <div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
-                        <div class="num">
-                            <span style="font-weight: 700">{{ lineData.deviceQuantity }}</span>
-                            <span class="unit">台</span>
-                        </div>
-                        <div class="num">
+  <div class="content">
+    <div class="content-title"></div>
+    <div class="content-view">
+      <div class="content-view-item" style="padding-top: 12px;">
+        <img src="../../../../../assets/cityScreen/quantityIcon1.png"/>
+        <div class="item-content">
+          <div class="item-title"> 线路装备</div>
+          <div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
+            <div class="num">
+              <span style="font-weight: 700">{{ lineData.deviceQuantity }}</span>
+              <span class="unit">台</span>
+            </div>
+            <div class="num">
                             <span style="font-weight: 700" v-if="lineData.totalValue > 99999999">{{
                                 (lineData.totalValue / 100000000).toFixed(3)
-                            }}</span>
-                            <span style="font-weight: 700" v-else>{{ (lineData.totalValue / 10000).toFixed(2) }}</span>
-                            <span class="unit" v-if="lineData.totalValue > 99999999">亿元</span>
-                            <span class="unit" v-else>万元</span>
-                        </div>
-                    </div>
-                    <div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
-                        <div class="num2">
-                            <span class="unit2">5年</span>
-                            <span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveYearCount }}</span>
-                            <span class="unit2">{{ lineData.fiveYearRatio || 0 }}%</span>
-                        </div>
-                        <div class="num2" style="color: #00fefc; margin-left: 8px">
-                            <span class="unit2" style="color: #00fefc">5-10年</span>
-                            <span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveToTenYearCount }}</span>
-                            <span class="unit2" style="color: #00fefc">{{ lineData.fiveToTenYearRatio || 0 }}%</span>
-                        </div>
-                        <div class="num2" style="color: #1e8dff">
-                            <span class="unit2" style="color: #1e8dff">10年以上</span>
-                            <span style="font-weight: 700; padding: 0 2px">{{ lineData.aboveTenYearCount }}</span>
-                            <span class="unit2" style="color: #1e8dff">{{ lineData.aboveTenYearRatio || 0 }}%</span>
-                        </div>
-                    </div>
-                </div>
+                              }}</span>
+              <span style="font-weight: 700" v-else>{{ (lineData.totalValue / 10000).toFixed(2) }}</span>
+              <span class="unit" v-if="lineData.totalValue > 99999999">亿元</span>
+              <span class="unit" v-else>万元</span>
             </div>
-            <div class="content-view-item">
-                <img src="../../../../../assets/cityScreen/quantityIcon2.png" />
-                <div class="item-content">
-                    <div class="item-title"> 变电装备 </div>
-                    <div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
-                        <div class="num">
-                            <span style="font-weight: 700">{{ bdData.deviceQuantity }}</span>
-                            <span class="unit">台</span>
-                        </div>
-                        <div class="num">
+          </div>
+          <div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
+            <div class="num2">
+              <span class="unit2">5年</span>
+              <span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveYearCount }}</span>
+              <span class="unit2" style="font-size: 13px">{{ lineData.fiveYearRatio || 0 }}%</span>
+            </div>
+            <div class="num2" style="color: #00fefc; margin-left: 8px">
+              <span class="unit2" style="color: #00fefc">5-10年</span>
+              <span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveToTenYearCount }}</span>
+              <span class="unit2" style="color: #00fefc;font-size: 13px">{{ lineData.fiveToTenYearRatio || 0 }}%</span>
+            </div>
+            <div class="num2" style="color: #1e8dff">
+              <span class="unit2" style="color: #1e8dff">10年以上</span>
+              <span style="font-weight: 700; padding: 0 2px">{{ lineData.aboveTenYearCount }}</span>
+              <span class="unit2" style="color: #1e8dff;font-size: 13px">{{ lineData.aboveTenYearRatio || 0 }}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content-view-item">
+        <img src="../../../../../assets/cityScreen/quantityIcon3.png"/>
+
+        <div class="item-content">
+          <div class="item-title"> 变电装备</div>
+          <div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
+            <div class="num">
+              <span style="font-weight: 700">{{ bdData.deviceQuantity }}</span>
+              <span class="unit">台</span>
+            </div>
+            <div class="num">
                             <span style="font-weight: 700" v-if="bdData.totalValue > 99999999">{{
                                 (bdData.totalValue / 100000000).toFixed(3)
-                            }}</span>
-                            <span style="font-weight: 700" v-else>{{ (bdData.totalValue / 10000).toFixed(2) }}</span>
-                            <span class="unit" v-if="bdData.totalValue > 99999999">亿元</span>
-                            <span class="unit" v-else>万元</span>
-                        </div>
-                    </div>
+                              }}</span>
+              <span style="font-weight: 700" v-else>{{ (bdData.totalValue / 10000).toFixed(2) }}</span>
+              <span class="unit" v-if="bdData.totalValue > 99999999">亿元</span>
+              <span class="unit" v-else>万元</span>
+            </div>
+          </div>
 
-                    <div
-                        style="
+          <div
+            style="
                             width: 100%;
 
                             display: flex;
                             justify-content: space-between;
                             align-items: center;
                         "
-                    >
-                        <div class="num2">
-                            <span class="unit2">5年</span>
-                            <span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveYearCount }}</span>
-                            <span class="unit2">{{ bdData.fiveYearRatio }}%</span>
-                        </div>
-                        <div class="num2" style="color: #00fefc; margin-left: 8px">
-                            <span class="unit2" style="color: #00fefc">5-10年</span>
-                            <span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveToTenYearCount }}</span>
-                            <span class="unit2" style="color: #00fefc">{{ bdData.fiveToTenYearRatio || 0 }}%</span>
-                        </div>
-                        <div class="num2" style="color: #1e8dff">
-                            <span class="unit2" style="color: #1e8dff">10年以上</span>
-                            <span style="font-weight: 700 padding: 0 2px">{{ bdData.aboveTenYearCount }}</span>
-                            <span class="unit2" style="color: #1e8dff">{{ bdData.aboveTenYearRatio || 0 }}%</span>
-                        </div>
-                    </div>
-                </div>
+          >
+            <div class="num2">
+              <span class="unit2">5年</span>
+              <span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveYearCount }}</span>
+              <span class="unit2" style="font-size: 13px">{{ bdData.fiveYearRatio }}%</span>
             </div>
-            <div class="content-view-item">
-                <img src="../../../../../assets/cityScreen/quantityIcon3.png" />
-                <div class="item-content">
-                    <div class="item-title"> 电缆装备 </div>
-                    <div
-                        style="
+            <div class="num2" style="color: #00fefc; margin-left: 8px">
+              <span class="unit2" style="color: #00fefc">5-10年</span>
+              <span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveToTenYearCount }}</span>
+              <span class="unit2" style="color: #00fefc;font-size: 13px">{{ bdData.fiveToTenYearRatio || 0 }}%</span>
+            </div>
+            <div class="num2" style="color: #1e8dff">
+              <span class="unit2" style="color: #1e8dff">10年以上</span>
+              <span style="font-weight: 700;padding: 0 2px">{{ bdData.aboveTenYearCount }}</span>
+              <span class="unit2" style="color: #1e8dff;font-size: 13px">{{ bdData.aboveTenYearRatio || 0 }}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content-view-item">
+        <img src="../../../../../assets/cityScreen/quantityIcon2.png"/>
+        <div class="item-content">
+          <div class="item-title"> 电缆装备</div>
+          <div
+            style="
                             width: 100%;
                             height: 40%;
                             display: flex;
                             justify-content: space-between;
                             align-items: center;
                         "
-                    >
-                        <div class="num">
-                            <span style="font-weight: 700">{{ dlData.deviceQuantity }}</span>
-                            <span class="unit">台</span>
-                        </div>
-                        <div class="num">
+          >
+            <div class="num">
+              <span style="font-weight: 700">{{ dlData.deviceQuantity }}</span>
+              <span class="unit">台</span>
+            </div>
+            <div class="num">
                             <span style="font-weight: 700" v-if="dlData.totalValue > 99999999">{{
                                 (dlData.totalValue / 100000000).toFixed(3)
-                            }}</span>
-                            <span style="font-weight: 700" v-else>{{ (dlData.totalValue / 10000).toFixed(2) }}</span>
-                            <span class="unit" v-if="dlData.totalValue > 99999999">亿元</span>
-                            <span class="unit" v-else>万元</span>
-                        </div>
-                    </div>
+                              }}</span>
+              <span style="font-weight: 700" v-else>{{ (dlData.totalValue / 10000).toFixed(2) }}</span>
+              <span class="unit" v-if="dlData.totalValue > 99999999">亿元</span>
+              <span class="unit" v-else>万元</span>
+            </div>
+          </div>
 
-                    <div
-                        style="
+          <div
+            style="
                             width: 100%;
                             height: 40%;
                             display: flex;
                             justify-content: space-between;
                             align-items: center;
                         "
-                    >
-                        <div class="num2">
-                            <span class="unit2">5年</span>
-                            <span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveYearCount }}</span>
-                            <span class="unit2">{{ dlData.fiveYearRatio }}%</span>
-                        </div>
-                        <div class="num2" style="color: #00fefc; margin-left: 8px">
-                            <span class="unit2" style="color: #00fefc">5-10年</span>
-                            <span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveToTenYearCount }}</span>
-                            <span class="unit2" style="color: #00fefc">{{ dlData.fiveToTenYearRatio }}%</span>
-                        </div>
-                        <div class="num2" style="color: #1e8dff">
-                            <span class="unit2" style="color: #1e8dff">10年以上</span>
-                            <span style="font-weight: 700; padding: 0 2px">{{ dlData.aboveTenYearCount }}</span>
-                            <span class="unit2" style="color: #1e8dff">{{ dlData.aboveTenYearRatio }}%</span>
-                        </div>
-                    </div>
-                </div>
+          >
+            <div class="num2">
+              <span class="unit2">5年</span>
+              <span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveYearCount }}</span>
+              <span class="unit2" style="font-size: 13px">{{ dlData.fiveYearRatio }}%</span>
             </div>
+            <div class="num2" style="color: #00fefc; margin-left: 8px">
+              <span class="unit2" style="color: #00fefc">5-10年</span>
+              <span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveToTenYearCount }}</span>
+              <span class="unit2" style="color: #00fefc;font-size: 13px">{{ dlData.fiveToTenYearRatio }}%</span>
+            </div>
+            <div class="num2" style="color: #1e8dff">
+              <span class="unit2" style="color: #1e8dff">10年以上</span>
+              <span style="font-weight: 700; padding: 0 2px">{{ dlData.aboveTenYearCount }}</span>
+              <span class="unit2" style="color: #1e8dff;font-size: 13px">{{ dlData.aboveTenYearRatio }}%</span>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { equipmentQuantityValueApi } from '@/api/screen/cityScreen'
 import * as echarts from 'echarts'
+
 export default {
-    data() {
-        return {
-            barWidth: 6,
-            myCharts1: null,
-            myCharts2: null,
-            myCharts3: null,
-            dataList: [],
-            lineData: {
-                aboveTenYearCount: 0,
-                aboveTenYearRatio: 0,
-                fiveToTenYearCount: 0,
-                fiveToTenYearRatio: 0,
-                fiveYearCount: 0,
-                fiveYearRatio: 0,
-                totalValue: 0, //价值
-                deviceQuantity: 0, //数量
-            }, //0
-            dlData: {
-                aboveTenYearCount: 0,
-                aboveTenYearRatio: 0,
-                fiveToTenYearCount: 0,
-                fiveToTenYearRatio: 0,
-                fiveYearCount: 0,
-                fiveYearRatio: 0,
-                totalValue: 0, //价值
-                deviceQuantity: 0, //数量
-            }, //1
-            bdData: {
-                aboveTenYearCount: 0,
-                aboveTenYearRatio: 0,
-                fiveToTenYearCount: 0,
-                fiveToTenYearRatio: 0,
-                fiveYearCount: 0,
-                fiveYearRatio: 0,
-                totalValue: 0, //价值
-                deviceQuantity: 0, //数量
-            }, //2
+  data() {
+    return {
+      barWidth: 6,
+      myCharts1: null,
+      myCharts2: null,
+      myCharts3: null,
+      dataList: [],
+      lineData: {
+        aboveTenYearCount: 0,
+        aboveTenYearRatio: 0,
+        fiveToTenYearCount: 0,
+        fiveToTenYearRatio: 0,
+        fiveYearCount: 0,
+        fiveYearRatio: 0,
+        totalValue: 0, //价值
+        deviceQuantity: 0 //数量
+      }, //0
+      dlData: {
+        aboveTenYearCount: 0,
+        aboveTenYearRatio: 0,
+        fiveToTenYearCount: 0,
+        fiveToTenYearRatio: 0,
+        fiveYearCount: 0,
+        fiveYearRatio: 0,
+        totalValue: 0, //价值
+        deviceQuantity: 0 //数量
+      }, //1
+      bdData: {
+        aboveTenYearCount: 0,
+        aboveTenYearRatio: 0,
+        fiveToTenYearCount: 0,
+        fiveToTenYearRatio: 0,
+        fiveYearCount: 0,
+        fiveYearRatio: 0,
+        totalValue: 0, //价值
+        deviceQuantity: 0 //数量
+      } //2
+    }
+  },
+  created() {
+  },
+  mounted() {
+    // console.log(window.innerWidth, window.innerHeight);
+    if (window.innerWidth < 3000) {
+      this.barWidth = 3
+    }
+    this.getEquipmentQuantity()
+  },
+  methods: {
+    getEquipmentQuantity() {
+      equipmentQuantityValueApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
+        console.log(response, 'equipmentQuantityValueApi')
+        if (response.code == 200) {
+          this.dataList = response.data
+          this.dataList.forEach((item) => {
+            if (item.deviceType == 0) {
+              this.lineData = item
+            }
+            if (item.deviceType == 1) {
+              this.dlData = item
+            }
+            if (item.deviceType == 2) {
+              this.bdData = item
+            }
+          })
         }
+        this.InitEChartsOne()
+        this.InitEChartsTwo()
+        this.lineChartThree()
+      })
     },
-    created() {},
-    mounted() {
-        // console.log(window.innerWidth, window.innerHeight);
-        if (window.innerWidth < 3000) {
-            this.barWidth = 3
-        }
-        this.getEquipmentQuantity()
+    InitEChartsOne() {
+      // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+      var legendData = [
+        { name: '5年', data: this.lineData.fiveYearCount },
+        { name: '5-10年', data: this.lineData.fiveToTenYearCount },
+        { name: '10年以上', data: this.lineData.aboveTenYearCount }
+      ]
+      var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
+      var seriesList = []
+      for (var i = 0; i < legendData.length; i++) {
+        seriesList.push({
+          type: 'bar',
+          stack: '2',
+          legendHoverLink: false,
+          barWidth: this.barWidth,
+          data: [
+            {
+              value: legendData[i].data,
+              itemStyle: {
+                color: colorList[i]
+              }
+            }
+          ]
+        })
+      }
+      var option = {
+        grid: {
+          show: true,
+          left: '0%',
+          right: '0%',
+          top: '0%',
+          bottom: '0%',
+          borderColor: 'transparent'
+        },
+        // backgroundColor: '#fff',
+        xAxis: {
+          show: false
+        },
+        yAxis: [
+          {
+            inverse: true,
+            data: [''],
+            axisLine: {
+              show: false
+            }
+          }
+        ],
+        series: seriesList
+      }
+      this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'))
+      this.myCharts1.setOption(option)
+      // });
     },
-    methods: {
-        getEquipmentQuantity() {
-            equipmentQuantityValueApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
-                console.log(response, 'equipmentQuantityValueApi')
-                if (response.code == 200) {
-                    this.dataList = response.data
-                    this.dataList.forEach((item) => {
-                        if (item.deviceType == 0) {
-                            this.lineData = item
-                        }
-                        if (item.deviceType == 1) {
-                            this.dlData = item
-                        }
-                        if (item.deviceType == 2) {
-                            this.bdData = item
-                        }
-                    })
-                }
-                this.InitEChartsOne()
-                this.InitEChartsTwo()
-                this.lineChartThree()
-            })
+    InitEChartsTwo() {
+      // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+      var legendData = [
+        { name: '5年', data: this.bdData.fiveYearCount },
+        { name: '5-10年', data: this.bdData.fiveToTenYearCount },
+        { name: '10年以上', data: this.bdData.aboveTenYearCount }
+      ]
+      var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
+      var seriesList = []
+      for (var i = 0; i < legendData.length; i++) {
+        seriesList.push({
+          type: 'bar',
+          stack: '2',
+          legendHoverLink: false,
+          barWidth: this.barWidth,
+          data: [
+            {
+              value: legendData[i].data,
+              itemStyle: {
+                color: colorList[i]
+              }
+            }
+          ]
+        })
+      }
+      var option = {
+        grid: {
+          show: true,
+          left: '0%',
+          right: '0%',
+          top: '0%',
+          bottom: '0%',
+          borderColor: 'transparent'
         },
-        InitEChartsOne() {
-            // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
-            var legendData = [
-                { name: '5年', data: this.lineData.fiveYearCount },
-                { name: '5-10年', data: this.lineData.fiveToTenYearCount },
-                { name: '10年以上', data: this.lineData.aboveTenYearCount },
-            ]
-            var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
-            var seriesList = []
-            for (var i = 0; i < legendData.length; i++) {
-                seriesList.push({
-                    type: 'bar',
-                    stack: '2',
-                    legendHoverLink: false,
-                    barWidth: this.barWidth,
-                    data: [
-                        {
-                            value: legendData[i].data,
-                            itemStyle: {
-                                color: colorList[i],
-                            },
-                        },
-                    ],
-                })
-            }
-            var option = {
-                grid: {
-                    show: true,
-                    left: '0%',
-                    right: '0%',
-                    top: '0%',
-                    bottom: '0%',
-                    borderColor: 'transparent',
-                },
-                // backgroundColor: '#fff',
-                xAxis: {
-                    show: false,
-                },
-                yAxis: [
-                    {
-                        inverse: true,
-                        data: [''],
-                        axisLine: {
-                            show: false,
-                        },
-                    },
-                ],
-                series: seriesList,
-            }
-            this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'))
-            this.myCharts1.setOption(option)
-            // });
+        // backgroundColor: '#fff',
+        xAxis: {
+          show: false
         },
-        InitEChartsTwo() {
-            // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
-            var legendData = [
-                { name: '5年', data: this.bdData.fiveYearCount },
-                { name: '5-10年', data: this.bdData.fiveToTenYearCount },
-                { name: '10年以上', data: this.bdData.aboveTenYearCount },
-            ]
-            var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
-            var seriesList = []
-            for (var i = 0; i < legendData.length; i++) {
-                seriesList.push({
-                    type: 'bar',
-                    stack: '2',
-                    legendHoverLink: false,
-                    barWidth: this.barWidth,
-                    data: [
-                        {
-                            value: legendData[i].data,
-                            itemStyle: {
-                                color: colorList[i],
-                            },
-                        },
-                    ],
-                })
+        yAxis: [
+          {
+            inverse: true,
+            data: [''],
+            axisLine: {
+              show: false
             }
-            var option = {
-                grid: {
-                    show: true,
-                    left: '0%',
-                    right: '0%',
-                    top: '0%',
-                    bottom: '0%',
-                    borderColor: 'transparent',
-                },
-                // backgroundColor: '#fff',
-                xAxis: {
-                    show: false,
-                },
-                yAxis: [
-                    {
-                        inverse: true,
-                        data: [''],
-                        axisLine: {
-                            show: false,
-                        },
-                    },
-                ],
-                series: seriesList,
-            }
-            this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'))
-            this.myCharts2.setOption(option)
-            // });
-        },
-        lineChartThree() {
-            // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
-            var legendData = [
-                { name: '5年', data: this.dlData.fiveYearCount },
-                { name: '5-10年', data: this.dlData.fiveToTenYearCount },
-                { name: '10年以上', data: this.dlData.aboveTenYearCount },
-            ]
-            var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
-            var seriesList = []
-            for (var i = 0; i < legendData.length; i++) {
-                seriesList.push({
-                    type: 'bar',
-                    stack: '2',
-                    legendHoverLink: false,
-                    barWidth: this.barWidth,
-                    data: [
-                        {
-                            value: legendData[i].data,
-                            itemStyle: {
-                                color: colorList[i],
-                            },
-                        },
-                    ],
-                })
-            }
-            var option = {
-                grid: {
-                    show: true,
-                    left: '0%',
-                    right: '0%',
-                    top: '0%',
-                    bottom: '0%',
-                    borderColor: 'transparent',
-                },
-                // backgroundColor: '#fff',
-                xAxis: {
-                    show: false,
-                },
-                yAxis: [
-                    {
-                        inverse: true,
-                        data: [''],
-                        axisLine: {
-                            show: false,
-                        },
-                    },
-                ],
-                series: seriesList,
-            }
-            this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'))
-            this.myCharts3.setOption(option)
-            // });
-        },
+          }
+        ],
+        series: seriesList
+      }
+      this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'))
+      this.myCharts2.setOption(option)
+      // });
     },
+    lineChartThree() {
+      // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+      var legendData = [
+        { name: '5年', data: this.dlData.fiveYearCount },
+        { name: '5-10年', data: this.dlData.fiveToTenYearCount },
+        { name: '10年以上', data: this.dlData.aboveTenYearCount }
+      ]
+      var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
+      var seriesList = []
+      for (var i = 0; i < legendData.length; i++) {
+        seriesList.push({
+          type: 'bar',
+          stack: '2',
+          legendHoverLink: false,
+          barWidth: this.barWidth,
+          data: [
+            {
+              value: legendData[i].data,
+              itemStyle: {
+                color: colorList[i]
+              }
+            }
+          ]
+        })
+      }
+      var option = {
+        grid: {
+          show: true,
+          left: '0%',
+          right: '0%',
+          top: '0%',
+          bottom: '0%',
+          borderColor: 'transparent'
+        },
+        // backgroundColor: '#fff',
+        xAxis: {
+          show: false
+        },
+        yAxis: [
+          {
+            inverse: true,
+            data: [''],
+            axisLine: {
+              show: false
+            }
+          }
+        ],
+        series: seriesList
+      }
+      this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'))
+      this.myCharts3.setOption(option)
+      // });
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
-.content {
-    width: 100%;
-    height: 100%;
-    padding: 6px;
-    display: flex;
-    flex-direction: column;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
+@font-face {
+  font-family: 'DIN';
+  src: url('../../../../../assets/font-family/DS-Digital/DS-TITle.ttf');
 }
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .content-title {
-    width: 100%;
-    height: 38px;
-    padding-left: 12%;
-    letter-spacing: 2px;
-    background: url('../../../../../assets/images/cityScreen/6.png') no-repeat;
-    background-size: 100% 100%;
-    font-size: 16px;
-    font-family: 'PingFang SC';
-    font-weight: 600;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 38px;
+  padding-left: 12%;
+  letter-spacing: 2px;
+  background: url('../../../../../assets/images/cityScreen/6.png') no-repeat;
+  background-size: 100% 100%;
+  font-size: 38px;
+  font-family: 'PingFang SC';
+  color: #78d6ff;
+  line-height: 44px;
+
+  span{
+    font-family: 'DIN';
     color: #78d6ff;
-    line-height: 38px;
+    background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
 }
 
 .content-view {
-    width: 100%;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  // height: 80%;
+  // padding-left: 8%;
+}
+
+.content-view-item {
+  width: 100%;
+  height: 33.33%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+
+  img {
+    transform: scale(0.8);
+  }
+
+  .item-content {
     flex: 1;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    // height: 80%;
-    // padding-left: 8%;
+    justify-content: space-around;
+  }
 }
-.content-view-item {
-    width: 100%;
-    height: 33.33%;
-    flex: 1;
-    display: flex;
-    align-items: center;
 
-    img {
-        transform: scale(0.8);
-    }
-
-    .item-content {
-        flex: 1;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-    }
-}
 .item-title {
-    width: 100%;
-    // height: 30%;
-    padding: 2px 0 2px 10px;
-    background-image: url('../../../../../assets/cityScreen/equiQuantityTitle.png');
-    background-size: 100% 100%;
-    font-size: 14px;
-    color: #fff;
-    letter-spacing: 2px;
+  width: 100%;
+  // height: 30%;
+  padding: 2px 0 2px 10px;
+  background-image: url('../../../../../assets/cityScreen/equiQuantityTitle.png');
+  background-size: 100% 100%;
+  font-size: 12px;
+  color: #fff;
+  letter-spacing: 2px;
 }
+
 .title2 {
-    font-size: 20px;
-    color: #fff;
+  font-size: 20px;
+  color: #fff;
 }
+
 .num {
-    color: #83d3f8;
-    font-size: 14px;
+  font-family: 'DIN';
+  color: #83d3f8;
+  font-size: 18px;
+  -webkit-background-clip: text;
+  letter-spacing: 2px;
+  font-style: italic;
+  font-weight: bold;
+  background-clip: text;
+  background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+
 }
+
 .unit {
-    font-size: 14px;
-    color: #ccc;
-    margin-left: 10px;
+  font-size: 10px;
+  color: #ccc;
+  margin-left: 5px;
 }
+
 .num2 {
-    color: #83d3f8;
-    font-size: 14px;
+  color: #83d3f8;
+  font-size: 13px;
 }
+
 .unit2 {
-    font-size: 14px;
-    color: #ccc;
-    // margin-right: 8px;
-    // margin-left: 8px;
+  font-size: 8px;
+  color: #ccc;
+  margin-right: 4px;
+  margin-left: 4px;
 }
+
 // @media screen and (min-width: 1080px) {
 //     .title {
 //         font-size: 10px;
diff --git a/src/views/screen/cityScreen/components/equStatus/index.vue b/src/views/screen/cityScreen/components/equStatus/index.vue
index a31804fd..24a31c07 100644
--- a/src/views/screen/cityScreen/components/equStatus/index.vue
+++ b/src/views/screen/cityScreen/components/equStatus/index.vue
@@ -1,243 +1,261 @@
 <template>
-    <div class="content">
-        <div class="content-title"> 装备状态 </div>
-        <div class="content-view">
-            <div id="lineChartFour" style="width: 100%; height: 92%"></div>
-            <div class="text">备注说明：在用装备包含共享装备。</div>
-        </div>
+  <div class="content">
+    <div class="content-title"><span style="margin-top: -5px;">装备状态</span></div>
+    <div class="content-view">
+      <div id="lineChartFour" style="width: 100%; height: 85%"></div>
+      <div class="text">备注说明：在用装备包含共享装备。</div>
     </div>
+  </div>
 </template>
 
 <script>
 import { equipmentStatusApi } from '@/api/screen/cityScreen'
 import * as echarts from 'echarts'
+
 export default {
-    data() {
-        return {
-            myCharts4: null,
-            barWidth: 40,
-            size: [40, 20],
-            Offset1: [-0, 10],
-            Offset2: [-0, -10],
-            fontSize: 20,
-        }
-    },
-    created() {},
-    mounted() {
-        console.log(window.innerWidth, window.innerHeight)
-        if (window.innerWidth < 3000) {
-            this.barWidth = 20
-            this.size = [20, 5]
-            this.Offset1 = [-0, 3]
-            this.Offset2 = [-0, -3]
-            this.fontSize = 10
-        }
-        this.InitEChartsOne()
-    },
-    methods: {
-        InitEChartsOne() {
-            equipmentStatusApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
-                console.log(response, 'equipmentStatusApi')
-                var dataList = response.data || []
-                var xData = []
-                var yData = []
-                var rateData = []
-                dataList.forEach((item) => {
-                    xData.push(item.name)
-                    yData.push(item.num)
-                    rateData.push(item.rate)
-                })
-                var option = {
-                    grid: {
-                        show: true,
-                        left: '10%',
-                        right: '2%',
-                        top: '12%',
-                        bottom: '12%',
-                        borderColor: 'transparent',
+  data() {
+    return {
+      myCharts4: null,
+      barWidth: 40,
+      size: [40, 20],
+      Offset1: [-0, 10],
+      Offset2: [-0, -10],
+      fontSize: 20
+    }
+  },
+  created() {
+  },
+  mounted() {
+    console.log(window.innerWidth, window.innerHeight)
+    if (window.innerWidth < 3000) {
+      this.barWidth = 20
+      this.size = [20, 5]
+      this.Offset1 = [-0, 3]
+      this.Offset2 = [-0, -3]
+      this.fontSize = 10
+    }
+    this.InitEChartsOne()
+  },
+  methods: {
+    InitEChartsOne() {
+      equipmentStatusApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
+        console.log(response, 'equipmentStatusApi')
+        var dataList = response.data || []
+        var xData = []
+        var yData = []
+        var rateData = []
+        dataList.forEach((item) => {
+          xData.push(item.name)
+          yData.push(item.num)
+          rateData.push(item.rate)
+        })
+        var option = {
+          grid: {
+            show: true,
+            left: '10%',
+            right: '2%',
+            top: '12%',
+            bottom: '12%',
+            borderColor: 'transparent'
+          },
+          xAxis: {
+            data: xData,
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: true
+            },
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: '#ccc',
+                fontSize: this.fontSize
+              },
+              margin: 10 //刻度标签与轴线之间的距离。
+            }
+          },
+          yAxis: {
+            // name:"单位：t",
+            nameTextStyle: {
+              color: '#ccc',
+              fontSize: this.fontSize
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: true
+            },
+            axisLine: {
+              show: true
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#ccc',
+                fontSize: this.fontSize
+              }
+            }
+          },
+          series: [
+            {
+              type: 'bar',
+              barWidth: this.barWidth,
+              z: 10,
+              itemStyle: {
+                color: {
+                  x: 1,
+                  y: 0,
+                  x2: 0,
+                  y2: 0,
+                  type: 'linear',
+                  global: false,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#217CA7'
                     },
-                    xAxis: {
-                        data: xData,
-                        axisTick: {
-                            show: false,
-                        },
-                        axisLine: {
-                            show: true,
-                        },
-                        axisLabel: {
-                            interval: 0,
-                            textStyle: {
-                                color: '#ccc',
-                                fontSize: this.fontSize,
-                            },
-                            margin: 10, //刻度标签与轴线之间的距离。
-                        },
+                    {
+                      offset: 0.5,
+                      color: '#217CA7'
                     },
-                    yAxis: {
-                        // name:"单位：t",
-                        nameTextStyle: {
-                            color: '#ccc',
-                            fontSize: this.fontSize,
-                        },
-                        splitLine: {
-                            show: false,
-                        },
-                        axisTick: {
-                            show: true,
-                        },
-                        axisLine: {
-                            show: true,
-                        },
-                        axisLabel: {
-                            textStyle: {
-                                color: '#ccc',
-                                fontSize: this.fontSize,
-                            },
-                        },
+                    {
+                      offset: 0.5,
+                      color: '#2B9CCC'
                     },
-                    series: [
-                        {
-                            type: 'bar',
-                            barWidth: this.barWidth,
-                            z: 10,
-                            itemStyle: {
-                                color: {
-                                    x: 1,
-                                    y: 0,
-                                    x2: 0,
-                                    y2: 0,
-                                    type: 'linear',
-                                    global: false,
-                                    colorStops: [
-                                        {
-                                            offset: 0,
-                                            color: '#217CA7',
-                                        },
-                                        {
-                                            offset: 0.5,
-                                            color: '#217CA7',
-                                        },
-                                        {
-                                            offset: 0.5,
-                                            color: '#2B9CCC',
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: '#2B9CCC',
-                                        },
-                                    ],
-                                },
-                            },
-                            label: {
-                                show: true,
-                                position: 'top',
-                                offset: 0,
-                                fontSize: this.fontSize,
-                                color: '#ccc',
-                                formatter: function (params) {
-                                    // console.log(params)
-                                    var str = params.value + '/' + rateData[params.dataIndex] + '%'
-                                    return str
-                                },
-                            },
-                            data: yData,
-                        },
-                        {
-                            name: '',
-                            barWidth: this.barWidth,
-                            type: 'pictorialBar',
-                            symbol: 'diamond',
-                            symbolSize: this.size,
-                            symbolOffset: this.Offset1,
-                            z: 1,
-                            itemStyle: {
-                                color: {
-                                    x: 1,
-                                    y: 0,
-                                    x2: 0,
-                                    y2: 0,
-                                    type: 'linear',
-                                    global: false,
-                                    colorStops: [
-                                        {
-                                            offset: 0,
-                                            color: '#217CA7',
-                                        },
-                                        {
-                                            offset: 0.5,
-                                            color: '#217CA7',
-                                        },
-                                        {
-                                            offset: 0.5,
-                                            color: '#2B9CCC',
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: '#2B9CCC',
-                                        },
-                                    ],
-                                },
-                            },
-                            data: [1, 1, 1, 1],
-                        },
-                        {
-                            name: '',
-                            barWidth: this.barWidth,
-                            type: 'pictorialBar',
-                            symbol: 'diamond',
-                            symbolPosition: 'end',
-                            symbolSize: this.size,
-                            symbolOffset: this.Offset2,
-                            z: 50,
-                            itemStyle: {
-                                opacity: 1,
-                                color: '#2B9CCC',
-                            },
-                            data: yData,
-                        },
-                    ],
+                    {
+                      offset: 1,
+                      color: '#2B9CCC'
+                    }
+                  ]
                 }
-                this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'))
-                this.myCharts4.setOption(option)
-            })
-        },
-    },
+              },
+              label: {
+                show: true,
+                position: 'top',
+                offset: 0,
+                fontSize: this.fontSize,
+                color: '#ccc',
+                formatter: function(params) {
+                  // console.log(params)
+                  var str = params.value + '/' + rateData[params.dataIndex] + '%'
+                  return str
+                }
+              },
+              data: yData
+            },
+            {
+              name: '',
+              barWidth: this.barWidth,
+              type: 'pictorialBar',
+              symbol: 'diamond',
+              symbolSize: this.size,
+              symbolOffset: this.Offset1,
+              z: 1,
+              itemStyle: {
+                color: {
+                  x: 1,
+                  y: 0,
+                  x2: 0,
+                  y2: 0,
+                  type: 'linear',
+                  global: false,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#217CA7'
+                    },
+                    {
+                      offset: 0.5,
+                      color: '#217CA7'
+                    },
+                    {
+                      offset: 0.5,
+                      color: '#2B9CCC'
+                    },
+                    {
+                      offset: 1,
+                      color: '#2B9CCC'
+                    }
+                  ]
+                }
+              },
+              data: [1, 1, 1, 1]
+            },
+            {
+              name: '',
+              barWidth: this.barWidth,
+              type: 'pictorialBar',
+              symbol: 'diamond',
+              symbolPosition: 'end',
+              symbolSize: this.size,
+              symbolOffset: this.Offset2,
+              z: 50,
+              itemStyle: {
+                opacity: 1,
+                color: '#2B9CCC'
+              },
+              data: yData
+            }
+          ]
+        }
+        this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'))
+        this.myCharts4.setOption(option)
+      })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
-.content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
+@font-face {
+  font-family: 'DIN';
+  src: url('../../../../../assets/font-family/DS-Digital/DS-TITle.ttf');
 }
+
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 .content-title {
-    width: 100%;
-    height: 38px;
-    line-height: 38px;
-    padding-left: 12%;
-    letter-spacing: 2px;
-    background: url('../../../../../assets/images/cityScreen/7.png') no-repeat;
-    background-size: 100% 100%;
-    font-size: 16px;
-    font-family: 'PingFang SC';
-    font-weight: 600;
+  width: 100%;
+  height: 38px;
+  padding-left: 12%;
+  letter-spacing: 2px;
+  background: url('../../../../../assets/images/cityScreen/7.png') no-repeat;
+  background-size: 100% 100%;
+  font-size: 24px;
+  font-family: 'PingFang SC';
+  color: #78d6ff;
+  line-height: 38px;
+
+  span {
+    font-family: 'DIN';
     color: #78d6ff;
+    background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
 }
 
 .content-view {
-    width: 100%;
-    flex: 1;
+  width: 100%;
+  flex: 1;
 }
+
 .text {
-    width: 100%;
-    // margin-bottom: 10px;
-    color: #a9c4f8;
-    text-align: center;
-    font-size: 14px;
+  width: 100%;
+  // margin-bottom: 10px;
+  color: #a9c4f8;
+  text-align: center;
+  margin-top: 10px;
+  font-size: 12px;
 }
+
 // @media screen and (min-width: 1080px) {
 //     .title {
 //         font-size: 10px;
diff --git a/src/views/screen/cityScreen/components/equTurnover/index.vue b/src/views/screen/cityScreen/components/equTurnover/index.vue
index d096da11..5a73f53a 100644
--- a/src/views/screen/cityScreen/components/equTurnover/index.vue
+++ b/src/views/screen/cityScreen/components/equTurnover/index.vue
@@ -1,161 +1,174 @@
 <template>
-    <div class="content">
-        <div class="content-title"> 装备周转率 </div>
-        <div class="content-view">
-            <div class="tableHeader">
-                <div class="header" style="width: 30%">专业</div>
-                <div class="header" style="width: 20%">主工序</div>
-                <div class="header" style="width: 15%">子工序</div>
-                <div class="header" style="width: 20%">装备名称</div>
-                <div class="header" style="width: 15%">周转率</div>
-            </div>
-            <div class="tableBox">
-                <div class="tableTr" v-for="(item, index) in tableList" :key="index">
-                    <div class="tableTd" style="width: 30%">
-                        {{ item.major }}
-                    </div>
-                    <div class="tableTd" style="width: 20%">
-                        {{ item.mainProcess }}
-                    </div>
-                    <div class="tableTd" style="width: 15%">
-                        {{ item.subprocess }}
-                    </div>
-                    <div class="tableTd" style="width: 20%">
-                        {{ item.deviceName }}
-                    </div>
-                    <div class="tableTd" style="width: 15%">
-                        {{ item.turnoverRate }}
-                    </div>
-                </div>
-            </div>
+  <div class="content">
+    <div class="content-title"></div>
+    <div class="content-view">
+      <div class="tableHeader">
+        <div class="header" style="width: 30%">专业</div>
+        <div class="header" style="width: 20%">主工序</div>
+        <div class="header" style="width: 15%">子工序</div>
+        <div class="header" style="width: 20%">装备名称</div>
+        <div class="header" style="width: 15%">周转率</div>
+      </div>
+      <div class="tableBox">
+        <div class="tableTr" v-for="(item, index) in tableList" :key="index">
+          <div class="tableTd" style="width: 30%">
+            {{ item.major }}
+          </div>
+          <div class="tableTd" style="width: 20%">
+            {{ item.mainProcess }}
+          </div>
+          <div class="tableTd" style="width: 15%">
+            {{ item.subprocess }}
+          </div>
+          <div class="tableTd" style="width: 20%">
+            {{ item.deviceName }}
+          </div>
+          <div class="tableTd" style="width: 15%">
+            {{ item.turnoverRate }}
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { equipmentTurnoverRateApi } from '@/api/screen/cityScreen'
+
 export default {
-    data() {
-        return {
-            tableList: [],
+  data() {
+    return {
+      tableList: []
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getEquipmentTurnoverRate()
+  },
+  methods: {
+    getEquipmentTurnoverRate() {
+      equipmentTurnoverRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
+        console.log(response, 'equipmentTurnoverRateApi')
+        if (response.code == 200) {
+          this.tableList = response.data.list
         }
-    },
-    created() {},
-    mounted() {
-        this.getEquipmentTurnoverRate()
-    },
-    methods: {
-        getEquipmentTurnoverRate() {
-            equipmentTurnoverRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
-                console.log(response, 'equipmentTurnoverRateApi')
-                if (response.code == 200) {
-                    this.tableList = response.data.list
-                }
-            })
-        },
-    },
+      })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .content {
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
 }
+
 .content-title {
-    width: 100%;
-    height: 38px;
-    padding-left: 12%;
-    letter-spacing: 2px;
-    background: url('../../../../../assets/images/cityScreen/2.png') no-repeat;
-    background-size: 100% 100%;
-    font-size: 16px;
-    font-family: 'PingFang SC';
-    font-weight: 600;
-    color: #78d6ff;
-    line-height: 38px;
+  width: 100%;
+  height: 38px;
+  padding-left: 10%;
+  letter-spacing: 2px;
+  background: url('../../../../../assets/images/cityScreen/2.png') no-repeat;
+  background-size: 100% 100%;
+  font-size: 16px;
+  font-family: 'PingFang SC';
+  font-weight: 600;
+  color: #78d6ff;
+  line-height: 38px;
 }
-.title {
-    font-size: 16px;
-    position: absolute;
-    top: 35%;
-    left: 18%;
-    color: #78d6ff;
-    font-weight: 800;
-}
-.content-view {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: hidden;
-    // width: 100%;
-    // height: 85%;
-    // padding-left: 8%;
-}
-.tableHeader {
-    width: 100%;
-    padding: 4px 0;
-    background-image: url('../../../../../assets/cityScreen/tableHeader.png');
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
-}
-.tableBox {
-    width: 100%;
-    flex: 1;
-    overflow-y: auto;
-    // height: 84%;
-    // overflow-y: auto;
-}
-.tableTr {
-    width: 100%;
-    height: 16%;
-    background-image: url('../../../../../assets/cityScreen/tableTr.png');
-    background-size: 100% 100%;
-    // margin-bottom: 2px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-}
-.tableTd {
-    font-size: 13px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: #ccc;
-    text-align: center;
-    box-sizing: border-box;
-}
-.header {
-    color: #72b1f1;
 
-    height: 100%;
-    // margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    text-align: center;
+.title {
+  font-size: 16px;
+  position: absolute;
+  top: 35%;
+  left: 18%;
+  color: #78d6ff;
+  font-weight: 800;
 }
+
+.content-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  // width: 100%;
+  // height: 85%;
+  // padding-left: 8%;
+}
+
+.tableHeader {
+  width: 100%;
+  height: 32px;
+  padding: 4px 0;
+  background-image: url('../../../../../assets/cityScreen/tableHeader.png');
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+}
+
+.tableBox {
+  width: 100%;
+  flex: 1;
+  overflow-y: auto;
+  // height: 84%;
+  // overflow-y: auto;
+}
+
+.tableTr {
+  width: 100%;
+  height: 31px;
+  background-image: url('../../../../../assets/cityScreen/tableTr.png');
+  background-size: 100% 100%;
+  // margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.tableTd {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #ccc;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.header {
+  color: #72b1f1;
+
+  height: 100%;
+  // margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  text-align: center;
+}
+
 ::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
+  width: 4px;
+  height: 4px;
 }
+
 //定义背景颜色和圆角
 ::-webkit-scrollbar-thumb {
-    border-radius: 1em;
-    background-color: rgba(50, 50, 50, 0.3);
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.3);
 }
+
 //定义滚动条轨道 内阴影+圆角
 ::-webkit-scrollbar-track {
-    border-radius: 1em;
-    background-color: rgba(50, 50, 50, 0.1);
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.1);
 }
+
 // @media screen and (min-width: 1080px) {
 //     .title {
 //         font-size: 10px;
diff --git a/src/views/screen/cityScreen/components/equUse/index.vue b/src/views/screen/cityScreen/components/equUse/index.vue
index bd5f229e..734c5d37 100644
--- a/src/views/screen/cityScreen/components/equUse/index.vue
+++ b/src/views/screen/cityScreen/components/equUse/index.vue
@@ -1,149 +1,158 @@
 <template>
-    <div class="content">
-        <div class="content-title"> 装备在用率 </div>
-        <div class="content-view">
-            <div class="all-box">
-                <div>{{ allRate }}%</div>
-                <div class="title2">总体在用率</div>
-            </div>
-            <div class="bd-box">
-                <div>{{ rate1 }}%</div>
-                <div class="title3">变电装备在用率</div>
-            </div>
-            <div class="line-box">
-                <div>{{ rate2 }}%</div>
-                <div class="title3">线路装备在用率</div>
-            </div>
-            <div class="cable-box">
-                <div>{{ rate3 }}%</div>
-                <div class="title3">电缆装备在用率</div>
-            </div>
-        </div>
+  <div class="content">
+    <div class="content-title"></div>
+    <div class="content-view">
+      <div class="all-box">
+        <div style="font-size: 20px">{{ allRate }}%</div>
+        <div class="title2">总体在用率</div>
+      </div>
+      <div class="bd-box">
+        <div style="font-size: 16px">{{ rate1 }}%</div>
+        <div class="title3">变电装备在用率</div>
+      </div>
+      <div class="line-box">
+        <div style="font-size: 16px">{{ rate2 }}%</div>
+        <div class="title3">线路装备在用率</div>
+      </div>
+      <div class="cable-box">
+        <div style="font-size: 16px">{{ rate3 }}%</div>
+        <div class="title3">电缆装备在用率</div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { equipmentInServiceRateApi } from '@/api/screen/cityScreen'
+
 export default {
-    data() {
-        return {
-            allRate: 0,
-            rate1: 0,
-            rate2: 0,
-            rate3: 0,
+  data() {
+    return {
+      allRate: 0,
+      rate1: 0,
+      rate2: 0,
+      rate3: 0
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getEquipmentInServiceRate()
+  },
+  methods: {
+    getEquipmentInServiceRate() {
+      equipmentInServiceRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
+        console.log(response, 'equipmentInServiceRateApi')
+        if (response.code == 200) {
+          this.allRate = response.data[3].rate
+          this.rate1 = response.data[0].rate
+          this.rate2 = response.data[1].rate
+          this.rate3 = response.data[2].rate
         }
-    },
-    created() {},
-    mounted() {
-        this.getEquipmentInServiceRate()
-    },
-    methods: {
-        getEquipmentInServiceRate() {
-            equipmentInServiceRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
-                console.log(response, 'equipmentInServiceRateApi')
-                if (response.code == 200) {
-                    this.allRate = response.data[3].rate
-                    this.rate1 = response.data[0].rate
-                    this.rate2 = response.data[1].rate
-                    this.rate3 = response.data[2].rate
-                }
-            })
-        },
-    },
+      })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
+
 .content-title {
-    width: 100%;
-    height: 38px;
-    padding-left: 12%;
-    letter-spacing: 2px;
-    background: url('../../../../../assets/images/cityScreen/1.png') no-repeat;
-    background-size: 100% 100%;
-    font-size: 16px;
-    font-family: 'PingFang SC';
-    font-weight: 600;
-    color: #78d6ff;
-    line-height: 38px;
+  width: 100%;
+  height: 38px;
+  padding-left: 10%;
+  letter-spacing: 2px;
+  background: url('../../../../../assets/images/cityScreen/1.png') no-repeat;
+  background-size: 100% 100%;
+  font-size: 18px;
+  font-family: 'PingFang SC';
+  font-weight: 600;
+  color: #78d6ff;
+  line-height: 38px;
 }
+
 .title {
-    font-size: 16px;
-    position: absolute;
-    top: 35%;
-    left: 18%;
+  font-size: 16px;
+  position: absolute;
+  top: 35%;
+  left: 18%;
 }
+
 .content-view {
-    width: 50%;
-    height: 85%;
-    position: relative;
-    background: url('../../../../../assets/cityScreen/usingBg.png') no-repeat center center;
-    background-size: 100% 100%;
+  width: 70%;
+  height: 85%;
+  position: relative;
+  background: url('../../../../../assets/cityScreen/usingBg.png') no-repeat center center;
+  background-size: 100% 100%;
 }
+
 .title2 {
-    font-size: 14px;
-    padding-top: 40%;
-    color: #ccc;
+  font-size: 12px;
+  padding-top: 40%;
+  color: #ccc;
 }
+
 .title3 {
-    color: #ccc;
-    font-size: 14px;
-    padding-top: 22%;
+  color: #ccc;
+  font-size: 12px;
+  padding-top: 22%;
 }
+
 .all-box {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 800;
-    position: absolute;
-    top: 50%;
-    left: 45%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  font-weight: 800;
+  position: absolute;
+  top: 50%;
+  left: 46%;
 }
+
 .bd-box {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    color: #63c7dc;
-    font-size: 16px;
-    font-weight: 800;
-    position: absolute;
-    top: 42%;
-    left: 1%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  color: #63c7dc;
+  font-size: 16px;
+  font-weight: 800;
+  position: absolute;
+  top: 40%;
+  left: 2%;
 }
+
 .line-box {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    color: #9eabfe;
-    font-size: 16px;
-    font-weight: 800;
-    position: absolute;
-    top: 20%;
-    right: 0%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  color: #9eabfe;
+  font-size: 16px;
+  font-weight: 800;
+  position: absolute;
+  top: 20%;
+  right: 2%;
 }
+
 .cable-box {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    color: #8cfed7;
-    font-size: 16px;
-    font-weight: 800;
-    position: absolute;
-    top: 73%;
-    right: 0%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  color: #8cfed7;
+  font-size: 16px;
+  font-weight: 800;
+  position: absolute;
+  top: 73%;
+  right: 2%;
 }
 
 // @media screen and (min-width: 1080px) {
diff --git a/src/views/screen/cityScreen/components/maintenance/index.vue b/src/views/screen/cityScreen/components/maintenance/index.vue
index a8481055..322f545d 100644
--- a/src/views/screen/cityScreen/components/maintenance/index.vue
+++ b/src/views/screen/cityScreen/components/maintenance/index.vue
@@ -1,203 +1,228 @@
 <template>
-    <div class="content-1">
-        <div class="content-title"> 维保预警 </div>
-        <div class="content-view">
-            <div class="content-view-item">
-                <img src="../../../../../assets/cityScreen/icon1.png" />
-                <span class="text" style="">装备预警总数:</span>
-                <span class="num">{{ totalNum }}</span>
-                <span class="unit">台</span>
-            </div>
-            <div class="table-container">
-                <div class="tableHeader">
-                    <div class="header" style="width: 10%">序号</div>
-                    <div class="header" style="width: 35%">工序</div>
-                    <div class="header" style="width: 30%">设备</div>
-                    <div class="header" style="width: 25%">维保情况</div>
-                </div>
-                <div class="tableBox">
-                    <div class="tableTr" v-for="(item, index) in tableList" :key="index">
-                        <div class="tableTd" style="width: 10%">
-                            {{ index + 1 }}
-                        </div>
-                        <div class="tableTd" style="width: 35%">
-                            {{ item.procedureName }}
-                        </div>
-                        <div class="tableTd" style="width: 30%">
-                            {{ item.deviceName }}
-                        </div>
-                        <div class="tableTd" style="width: 25%">
-                            <span v-if="item.situation == '已超期'" style="color: red">{{ item.situation }}</span>
-                            <span v-else>{{ item.situation }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div class="content-1">
+    <div class="content-title">
+      <div class="content-view-item">
+        <span class="text">装备预警总数:</span>
+        <span class="num">&nbsp;{{ totalNum }}</span>
+        <span class="unit">台</span>
+      </div>
+      <span></span>
     </div>
+    <div class="content-view">
+      <div class="table-container">
+        <div class="tableHeader">
+          <div class="header" style="width: 5%">序号</div>
+          <div class="header" style="width: 35%">工序</div>
+          <div class="header" style="width: 30%">设备</div>
+          <div class="header" style="width: 30%">维保情况</div>
+        </div>
+        <div class="tableBox">
+          <div class="tableTr" v-for="(item, index) in tableList" :key="index">
+            <div class="tableTd" style="width: 5%">
+              {{ index + 1 }}
+            </div>
+            <div class="tableTd" style="width: 35%">
+              {{ item.procedureName }}
+            </div>
+            <div class="tableTd" style="width: 30%">
+              {{ item.deviceName }}
+            </div>
+            <div class="tableTd" style="width: 30%">
+              <span v-if="item.situation == '已超期'" style="color: red">{{ item.situation }}</span>
+              <span v-else>{{ item.situation }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import { maintenanceAlarmApi } from '@/api/screen/cityScreen'
+
 export default {
-    data() {
-        return {
-            totalNum: 0,
-            tableList: [],
+  data() {
+    return {
+      totalNum: 0,
+      tableList: []
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getMaintenanceAlarm()
+  },
+  methods: {
+    getMaintenanceAlarm() {
+      maintenanceAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
+        console.log(response, 'maintenanceAlarmApi')
+        if (response.code == 200) {
+          this.totalNum = response.data.total
+          this.tableList = response.data.list
         }
-    },
-    created() {},
-    mounted() {
-        this.getMaintenanceAlarm()
-    },
-    methods: {
-        getMaintenanceAlarm() {
-            maintenanceAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
-                console.log(response, 'maintenanceAlarmApi')
-                if (response.code == 200) {
-                    this.totalNum = response.data.total
-                    this.tableList = response.data.list
-                }
-            })
-        },
-    },
+      })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .content-1 {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
-.content-title {
-    width: 100%;
-    height: 38px;
-    line-height: 38px;
-    padding-left: 12%;
-    letter-spacing: 2px;
-    background: url('../../../../../assets/images/cityScreen/5.png') no-repeat;
-    background-size: 100% 100%;
-    font-size: 16px;
-    font-family: 'PingFang SC';
-    font-weight: 600;
-    color: #78d6ff;
-}
-.title {
-    font-size: 16px;
-    position: absolute;
-    top: 35%;
-    left: 18%;
-    letter-spacing: 2px;
-    font-family: 'PingFang SC';
-}
-.content-view {
-    width: 100%;
-    height: 82%;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
 
-    // padding-left: 8%;
+.content-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  height: 38px;
+  line-height: 38px;
+  padding-left: 10%;
+  letter-spacing: 2px;
+  background: url('../../../../../assets/images/cityScreen/5.png') no-repeat;
+  background-size: 100% 100%;
+  font-size: 16px;
+  font-family: 'PingFang SC';
+  font-weight: 600;
+  color: #78d6ff;
+}
+
+.title {
+  font-size: 16px;
+  position: absolute;
+  top: 35%;
+  left: 18%;
+  letter-spacing: 2px;
+  font-family: 'PingFang SC';
+}
+
+.content-view {
+  width: 100%;
+  height: 80%;
+  flex: 1;
+  margin-top: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .content-view-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  margin-left: 215px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    img {
-        height: 42px;
-    }
+  img {
+    height: 50px;
+    margin-top: 15px;
+  }
 }
+
 .text {
-    color: #c0c2c6;
-    font-size: 16px;
+  color: #c0c2c6;
+  font-size: 12px;
 }
+
 .num {
-    color: #83d3f8;
-    font-size: 16px;
-    font-weight: 600;
+  color: #fcfac4;
+  font-size: 20px;
+  margin: 0 5px;
+  font-weight: bold;
+  opacity: 0.9; /* 轻微透明感 */
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
 }
+
 .unit {
-    font-size: 16px;
-    color: #ccc;
+  font-size: 8px;
+  color: #ccc;
+  margin-top: 10px;
 }
+
 .icon {
-    // width: 70px;
-    // height: 70px;
-    transform: scale(0.8);
+  // width: 70px;
+  // height: 70px;
+  transform: scale(0.8);
 }
 
 .table-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow-y: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
 }
 
 .tableHeader {
-    width: 100%;
-    height: 20%;
-    background-color: #082d6e;
-    opacity: 0.8;
-    display: flex;
-    align-items: center;
+  width: 100%;
+  height: 15%;
+  background-color: #082d6e;
+  opacity: 0.8;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
 }
+
 .tableBox {
-    width: 100%;
-    flex: 1;
-    overflow-y: auto;
+  width: 100%;
+  flex: 1;
+  overflow-y: auto;
 }
+
 .tableTr {
-    width: 100%;
-    height: 32%;
-    // background-image: url("../../../../../assets/cityScreen/tableTr2.png");
-    // background-size: 100% 100%;
-    /* border-bottom: 1px dashed #eee; */
-    display: flex;
-    cursor: pointer;
+  width: 100%;
+  height: 30%;
+  font-size: 11px;
+  // background-image: url("../../../../../assets/cityScreen/tableTr2.png");
+  // background-size: 100% 100%;
+  border-bottom: 1px dashed rgba(238, 238, 238, 0.56);
+  display: flex;
+  cursor: pointer;
 }
+
 .tableTd {
-    width: auto;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    color: #ccc;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  color: #ccc;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+
 .header {
-    color: #ccc;
-    padding: 4px 0;
-    width: 25%;
-    height: 100%;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
+  color: #ccc;
+  padding: 4px 0;
+  width: 25%;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
 }
 
 ::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
+  width: 4px;
+  height: 4px;
 }
+
 //定义背景颜色和圆角
 ::-webkit-scrollbar-thumb {
-    border-radius: 1em;
-    background-color: rgba(50, 50, 50, 0.3);
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.3);
 }
+
 //定义滚动条轨道 内阴影+圆角
 ::-webkit-scrollbar-track {
-    border-radius: 1em;
-    background-color: rgba(50, 50, 50, 0.1);
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.1);
 }
 
 // @media screen and (min-width: 1080px) {
diff --git a/src/views/screen/cityScreen/components/retire/index.vue b/src/views/screen/cityScreen/components/retire/index.vue
index 3d4e698d..5a4d1870 100644
--- a/src/views/screen/cityScreen/components/retire/index.vue
+++ b/src/views/screen/cityScreen/components/retire/index.vue
@@ -1,190 +1,217 @@
 <template>
-    <div class="content">
-        <div class="content-title"> 退役预警 </div>
-        <div class="content-view">
-            <div class="content-view-item">
-                <img src="../../../../../assets/cityScreen/icon2.png" />
-                <span class="label" style="">退役预警总数:</span>
-                <span class="num">{{ totalNum }}</span>
-                <span class="unit">台</span>
-            </div>
-            <div class="table-container">
-                <div class="tableHeader">
-                    <div class="header" style="width: 10%">序号</div>
-                    <div class="header" style="width: 30%">工序</div>
-                    <div class="header" style="width: 25%">设备</div>
-                    <div class="header" style="width: 35%">预警情况</div>
-                </div>
-                <div class="tableBox">
-                    <div class="tableTr" v-for="(item, index) in tableList" :key="index">
-                        <div class="tableTd" style="width: 10%">
-                            {{ index + 1 }}
-                        </div>
-                        <div class="tableTd" style="width: 30%">
-                            {{ item.procedureName }}
-                        </div>
-                        <div class="tableTd" style="width: 25%">
-                            {{ item.deviceName }}
-                        </div>
-                        <div class="tableTd" style="width: 35%; color: #e3c54e">
-                            {{ item.situation }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div class="content">
+    <div class="content-title">
+      <div class="content-view-item">
+        <span class="label" style="">退役预警总数:</span>
+        <span class="num">{{ totalNum }}</span>
+        <span class="unit">台</span>
+      </div>
+      <span></span>
     </div>
+    <div class="content-view">
+
+      <div class="table-container">
+        <div class="tableHeader">
+          <div class="header" style="width: 5%">序号</div>
+          <div class="header" style="width: 30%">工序</div>
+          <div class="header" style="width: 25%">设备</div>
+          <div class="header" style="width: 40%">预警情况</div>
+        </div>
+        <div class="tableBox">
+          <div class="tableTr" v-for="(item, index) in tableList" :key="index">
+            <div class="tableTd" style="width: 5%">
+              {{ index + 1 }}
+            </div>
+            <div class="tableTd" style="width: 30%">
+              {{ item.procedureName }}
+            </div>
+            <div class="tableTd" style="width: 25%">
+              {{ item.deviceName }}
+            </div>
+            <div class="tableTd" style="width: 40%; color: #e3c54e">
+              {{ item.situation }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import { retirementAlarmApi } from '@/api/screen/cityScreen'
+
 export default {
-    data() {
-        return {
-            totalNum: 0,
-            tableList: [],
+  data() {
+    return {
+      totalNum: 0,
+      tableList: []
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getRetirementAlarm()
+  },
+  methods: {
+    getRetirementAlarm() {
+      retirementAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
+        console.log(response, 'retirementAlarmApi')
+        if (response.code == 200) {
+          this.totalNum = response.data.total
+          this.tableList = response.data.list
         }
-    },
-    created() {},
-    mounted() {
-        this.getRetirementAlarm()
-    },
-    methods: {
-        getRetirementAlarm() {
-            retirementAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
-                console.log(response, 'retirementAlarmApi')
-                if (response.code == 200) {
-                    this.totalNum = response.data.total
-                    this.tableList = response.data.list
-                }
-            })
-        },
-    },
+      })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
+
 .content-title {
-    width: 100%;
-    height: 38px;
-    line-height: 38px;
-    padding-left: 12%;
-    letter-spacing: 2px;
-    background: url('../../../../../assets/images/cityScreen/4.png') no-repeat;
-    background-size: 100% 100%;
-    font-size: 16px;
-    font-family: 'PingFang SC';
-    font-weight: 600;
-    color: #78d6ff;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  height: 38px;
+  line-height: 38px;
+  padding-left: 10%;
+  letter-spacing: 2px;
+  background: url('../../../../../assets/images/cityScreen/4.png') no-repeat;
+  background-size: 100% 100%;
+  font-size: 16px;
+  font-family: 'PingFang SC';
+  font-weight: 600;
+  color: #78d6ff;
 }
+
 .title {
-    font-size: 16px;
-    position: absolute;
-    top: 35%;
-    left: 18%;
-    letter-spacing: 2px;
-    font-family: 'PingFang SC';
+  font-size: 16px;
+  position: absolute;
+  top: 35%;
+  left: 18%;
+  letter-spacing: 2px;
+  font-family: 'PingFang SC';
 }
+
 .content-view {
-    width: 100%;
-    height: 82%;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+  margin-top: 5px;
+  width: 100%;
+  height: 82%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
-    // padding-left: 8%;
+  // padding-left: 8%;
 }
+
 .content-view-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  margin-left: 210px;
+  align-items: center;
+  justify-content: center;
 
-    img {
-        height: 42px;
-    }
+  img {
+    height: 50px;
+    margin-top: 15px;
+  }
 }
+
 .label {
-    color: #c0c2c6;
-    font-size: 16px;
+  color: #c0c2c6;
+  font-size: 10px;
 }
+
 .num {
-    color: #83d3f8;
-    font-size: 16px;
-    font-weight: 600;
-    margin: 0 10px;
+  color: #fcfac4;
+  font-size: 20px;
+  margin: 0 5px;
+  font-weight: bold;
+  opacity: 0.9; /* 轻微透明感 */
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
 }
+
 .unit {
-    font-size: 16px;
-    color: #ccc;
+  font-size: 8px;
+  color: #ccc;
+  margin-top: 5px;
 }
+
 // .icon {
 //     width: 70px;
 //     height: 70px;
 // }
 
 .table-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow-y: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
 }
 
 .tableHeader {
-    width: 100%;
-    height: 20%;
-    background-color: #082d6e;
-    opacity: 0.8;
-    display: flex;
-    align-items: center;
+  width: 100%;
+  height: 15%;
+  background-color: #082d6e;
+  opacity: 0.8;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
 }
+
 .tableBox {
-    width: 100%;
-    flex: 1;
-    overflow-y: auto;
+  width: 100%;
+  flex: 1;
+  overflow-y: auto;
 }
+
 .tableBox::-webkit-scrollbar {
-    display: none; /* Chrome, Safari, Opera */
+  display: none; /* Chrome, Safari, Opera */
 }
+
 .tableTr {
-    width: 100%;
-    height: 31%;
-    // background-image: url("../../../../../assets/cityScreen/tableTr2.png");
-    // background-size: 100% 100%;
-    // margin-bottom: 2px;
-    /* border-bottom: 1px dashed #eee; */
-    display: flex;
-    cursor: pointer;
+  width: 100%;
+  height: 31%;
+  font-size: 11px;
+  // background-image: url("../../../../../assets/cityScreen/tableTr2.png");
+  // background-size: 100% 100%;
+  // margin-bottom: 2px;
+  border-bottom: 1px dashed rgba(238, 238, 238, 0.56);
+  display: flex;
+  cursor: pointer;
 }
+
 .tableTd {
-    width: auto;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    color: #ccc;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  color: #ccc;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+
 .header {
-    color: #ccc;
-    padding: 4px 0;
-    width: 25%;
-    height: 100%;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
+  color: #ccc;
+  padding: 4px 0;
+  width: 25%;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
 }
 
 // @media screen and (min-width: 1080px) {
diff --git a/src/views/screen/cityScreen/components/topIcons/index.vue b/src/views/screen/cityScreen/components/topIcons/index.vue
index 01642aae..f8ba3388 100644
--- a/src/views/screen/cityScreen/components/topIcons/index.vue
+++ b/src/views/screen/cityScreen/components/topIcons/index.vue
@@ -1,47 +1,47 @@
 <template>
-    <div class="content">
-        <div v-for="item in itemList" :key="item.keyValue" class="iconItem-box">
-            <img :src="item.icon" alt="" />
+  <div class="content">
+    <div v-for="item in itemList" :key="item.keyValue" class="iconItem-box">
+      <img :src="item.icon" alt="" />
 
-            <div class="value">
-                <span> {{ item.title }} </span>
-                <span>
+      <div class="value">
+        <span> {{ item.title }} </span>
+        <span>
                     {{ basicHeadData[item.keyValue] }} <i> {{ item.unit }} </i>
                 </span>
-            </div>
-        </div>
-        <!-- <div class="iconItem">
-            <div class="item-box" style="right: -8%">
-                <div class="title">装备总量</div>
-                <div class="num">
-                    <span style="font-weight: 600">{{ totalCount }}</span>
-                    <span class="unit">台</span>
-                </div>
-            </div>
-        </div>
-        <div class="iconItem">
-            <div class="item-box" style="right: -10%">
-                <div class="title">装备总价值</div>
-                <div class="num">
-                    <span style="font-weight: 600" v-if="totalValue > 99999999">{{
-                        (totalValue / 100000000).toFixed(3)
-                    }}</span>
-                    <span style="font-weight: 600" v-else>{{ (totalValue / 10000).toFixed(2) }}</span>
-                    <span class="unit" v-if="totalValue > 99999999">亿元</span>
-                    <span class="unit" v-else>万元</span>
-                </div>
-            </div>
-        </div>
-        <div class="iconItem">
-            <div class="item-box" style="right: -8%">
-                <div class="title">装备配置率</div>
-                <div class="num">
-                    <span style="font-weight: 600">{{ allocationRate }}</span>
-                    <span class="unit">%</span>
-                </div>
-            </div>
-        </div> -->
+      </div>
     </div>
+    <!-- <div class="iconItem">
+        <div class="item-box" style="right: -8%">
+            <div class="title">装备总量</div>
+            <div class="num">
+                <span style="font-weight: 600">{{ totalCount }}</span>
+                <span class="unit">台</span>
+            </div>
+        </div>
+    </div>
+    <div class="iconItem">
+        <div class="item-box" style="right: -10%">
+            <div class="title">装备总价值</div>
+            <div class="num">
+                <span style="font-weight: 600" v-if="totalValue > 99999999">{{
+                    (totalValue / 100000000).toFixed(3)
+                }}</span>
+                <span style="font-weight: 600" v-else>{{ (totalValue / 10000).toFixed(2) }}</span>
+                <span class="unit" v-if="totalValue > 99999999">亿元</span>
+                <span class="unit" v-else>万元</span>
+            </div>
+        </div>
+    </div>
+    <div class="iconItem">
+        <div class="item-box" style="right: -8%">
+            <div class="title">装备配置率</div>
+            <div class="num">
+                <span style="font-weight: 600">{{ allocationRate }}</span>
+                <span class="unit">%</span>
+            </div>
+        </div>
+    </div> -->
+  </div>
 </template>
 
 <script>
@@ -51,116 +51,122 @@ import Icon2 from '@/assets/images/cityScreen/icon-2.png'
 import Icon3 from '@/assets/images/cityScreen/icon-3.png'
 
 export default {
-    data() {
-        return {
-            // totalCount: 0,
-            // totalValue: 0,
-            // allocationRate: 0,
-            basicHeadData: {
-                totalCount: 0,
-                totalValue: 0,
-                allocationRate: 0,
-            },
+  data() {
+    return {
+      // totalCount: 0,
+      // totalValue: 0,
+      // allocationRate: 0,
+      basicHeadData: {
+        totalCount: 0,
+        totalValue: 0,
+        allocationRate: 0
+      },
 
-            itemList: [
-                {
-                    title: '装备数量',
-                    icon: Icon1,
-                    unit: '台',
-                    keyValue: 'totalCount',
-                },
-                {
-                    title: '装备总价值',
-                    icon: Icon2,
-                    unit: '万元',
-                    keyValue: 'totalValue',
-                },
-                {
-                    title: '装备配置率',
-                    icon: Icon3,
-                    unit: '%',
-                    keyValue: 'allocationRate',
-                },
-            ],
+      itemList: [
+        {
+          title: '装备数量',
+          icon: Icon1,
+          unit: '台',
+          keyValue: 'totalCount'
+        },
+        {
+          title: '装备总价值',
+          icon: Icon2,
+          unit: '万元',
+          keyValue: 'totalValue'
+        },
+        {
+          title: '装备配置率',
+          icon: Icon3,
+          unit: '%',
+          keyValue: 'allocationRate'
         }
+      ]
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getBasicHeader()
+  },
+  methods: {
+    getBasicHeader() {
+      getBasicHeadApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
+        console.log(response, 'getBasicHeadApi')
+        if (response.code == 200) {
+          this.basicHeadData.totalCount = response.data.totalCount
+          this.basicHeadData.totalValue = this.formatMoney(response.data.totalValue)
+          this.basicHeadData.allocationRate = response.data.allocationRate
+          this.formatMoney(response.data.totalValue)
+        }
+      })
     },
-    created() {},
-    mounted() {
-        this.getBasicHeader()
-    },
-    methods: {
-        getBasicHeader() {
-            getBasicHeadApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
-                console.log(response, 'getBasicHeadApi')
-                if (response.code == 200) {
-                    this.basicHeadData.totalCount = response.data.totalCount
-                    this.basicHeadData.totalValue = this.formatMoney(response.data.totalValue)
-                    this.basicHeadData.allocationRate = response.data.allocationRate
-                    this.formatMoney(response.data.totalValue)
-                }
-            })
-        },
 
-        // 金额格式化 以及单位
-        formatMoney(money) {
-            if (money > 99999999) {
-                this.itemList[1].unit = '亿元'
-                return (money / 100000000).toFixed(3)
-            } else {
-                this.itemList[1].unit = '万元'
-                return (money / 10000).toFixed(2)
-            }
-        },
-    },
+    // 金额格式化 以及单位
+    formatMoney(money) {
+      if (money > 99999999) {
+        this.itemList[1].unit = '亿元'
+        return (money / 100000000).toFixed(3)
+      } else {
+        this.itemList[1].unit = '万元'
+        return (money / 10000).toFixed(2)
+      }
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    background: url('../../../../../assets/images/cityScreen/left-1-bg.png') no-repeat center center;
+  width: 100%;
+  height: 100%;
+  padding: 0 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background: url('../../../../../assets/images/cityScreen/left-1-bg.png') no-repeat center center;
+  background-size: 100% 100%;
+
+  .iconItem-box {
+    background: url('../../../../../assets/images/cityScreen/left-1-1-bg.png') no-repeat center center;
     background-size: 100% 100%;
+    display: flex;
+    width: 100%;
+    height: 90%;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+  }
 
-    .iconItem-box {
-        display: flex;
-        flex: 1;
-        justify-content: center;
+  .value {
+    margin-left: -5px;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
 
-        img {
-            transform: scale(1.5);
-        }
+    & span:first-child {
+      margin-bottom: 3%;
+      color: #fff;
+      font-size: 14px;
     }
 
-    .value {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        width: 50%;
-        background: url('../../../../../assets/images/cityScreen/left-1-1-bg.png') no-repeat center center;
-        background-size: 100% 100%;
-        padding-top: 5%;
-
-        & span:first-child {
-            margin-bottom: 3%;
-            color: #fff;
-            font-size: 16px;
-        }
-        & span:last-child {
-            color: #fcfac4;
-            font-size: 18px;
-        }
-
-        i {
-            font-style: normal;
-            font-size: 12px;
-            color: #fff;
-            margin-top: 5px;
-        }
+    & span:last-child {
+      color: #fcfac4;
+      font-size: 20px;
+      font-weight: bold;
+      opacity: 0.9; /* 轻微透明感 */
+      text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
+      letter-spacing: 2px; /* 可选：调整数字间距 */
     }
+
+    i {
+      font-style: normal;
+      font-size: 8px;
+      color: #fff;
+      margin-top: 5px;
+    }
+  }
 }
+
 // .iconItem {
 //     width: 25%;
 //     height: 100%;
diff --git a/src/views/screen/cityScreen/components/topIconsTwo/index.vue b/src/views/screen/cityScreen/components/topIconsTwo/index.vue
index 8900fb0f..ffe5983c 100644
--- a/src/views/screen/cityScreen/components/topIconsTwo/index.vue
+++ b/src/views/screen/cityScreen/components/topIconsTwo/index.vue
@@ -1,127 +1,114 @@
 <template>
-    <div class="content">
-        <div v-for="item in itemList" :key="item.keyValue" class="iconItem-box">
-            <img :src="item.icon" alt="" />
+  <div class="content">
+    <div v-for="item in itemList" :key="item.keyValue" class="iconItem-box">
+      <img :src="item.icon" alt=""/>
 
-            <div class="value">
-                <span> {{ item.title }} </span>
-                <span>
-                    {{ basicHeadData[item.keyValue] }} <i> {{ item.unit }} </i>
+      <div class="value">
+        <span> {{ item.title }} </span>
+        <span>
+                    {{ !basicHeadData[item.keyValue] ? '0' : basicHeadData[item.keyValue]}} <i> {{ item.unit }} </i>
                 </span>
-            </div>
-        </div>
-        <!-- <div class="iconItem">
-            <div class="item-box" style="right: -12%">
-                <div class="title">今日入库</div>
-                <div class="num">
-                    <span style="font-weight: 600">{{ enterNum }}</span>
-                    <span class="unit">台</span>
-                </div>
-            </div>
-        </div>
-        <div class="iconItem">
-            <div class="item-box" style="right: 8%">
-                <div class="title">今日出库</div>
-                <div class="num">
-                    <span style="font-weight: 600">{{ outNum }}</span>
-                    <span class="unit">台</span>
-                </div>
-            </div>
-        </div> -->
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { getBasicHeadApi } from '@/api/screen/cityScreen'
 import Icon1 from '@/assets/images/cityScreen/今日出库.png'
 import Icon2 from '@/assets/images/cityScreen/out.png'
+
 export default {
-    data() {
-        return {
-            enterNum: 0,
-            outNum: 0,
-            basicHeadData: {
-                enterNum: 0,
-                outNum: 0,
-            },
-            itemList: [
-                {
-                    title: '今日入库',
-                    icon: Icon1,
-                    unit: '台',
-                    keyValue: 'enterNum',
-                },
-                {
-                    title: '今日出库',
-                    icon: Icon2,
-                    unit: '台',
-                    keyValue: 'totalValue',
-                },
-            ],
-        }
-    },
-    created() {},
-    mounted() {
-        this.getBasicHeader()
-    },
-    methods: {
-        getBasicHeader() {
-            getBasicHeadApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
-                if (response.code == 200) {
-                    this.enterNum = response.data.enterNum
-                    this.outNum = response.data.outNum
-                }
-            })
+  data() {
+    return {
+      enterNum: 0,
+      outNum: 0,
+      basicHeadData: {
+        enterNum: 0,
+        outNum: 0
+      },
+      itemList: [
+        {
+          title: '今日入库',
+          icon: Icon1,
+          unit: '台',
+          keyValue: 'enterNum'
         },
-    },
+        {
+          title: '今日出库',
+          icon: Icon2,
+          unit: '台',
+          keyValue: 'totalValue'
+        }
+      ]
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getBasicHeader()
+  },
+  methods: {
+    getBasicHeader() {
+      getBasicHeadApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
+        if (response.code == 200) {
+          this.enterNum = response.data.enterNum
+          this.outNum = response.data.outNum
+        }
+      })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .content {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
+  padding: 0 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background: url('../../../../../assets/images/cityScreen/left-1-bg.png') no-repeat center center;
+  background-size: 100% 100%;
+
+  .iconItem-box {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    background: url('../../../../../assets/images/cityScreen/left-1-1-bg.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  .value {
     display: flex;
     align-items: center;
-    justify-content: space-around;
-    background: url('../../../../../assets/images/cityScreen/left-1-bg.png') no-repeat center center;
-    background-size: 100% 100%;
+    flex-direction: column;
+    width: 50%;
 
-    .iconItem-box {
-        display: flex;
-        flex: 1;
-        justify-content: center;
+    padding-top: 5%;
 
-        img {
-            transform: scale(1.5);
-        }
+    & span:first-child {
+      margin-bottom: 3%;
+      color: #fff;
+      font-size: 14px;
     }
 
-    .value {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        width: 50%;
-        background: url('../../../../../assets/images/cityScreen/left-1-1-bg.png') no-repeat center center;
-        background-size: 100% 100%;
-        padding-top: 5%;
-
-        & span:first-child {
-            margin-bottom: 3%;
-            color: #fff;
-            font-size: 16px;
-        }
-        & span:last-child {
-            color: #fcfac4;
-            font-size: 18px;
-        }
-
-        i {
-            font-style: normal;
-            font-size: 12px;
-            color: #fff;
-            margin-top: 5px;
-        }
+    & span:last-child {
+      color: #fcfac4;
+      font-size: 20px;
+      font-weight: bold;
+      opacity: 0.9; /* 轻微透明感 */
+      text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
+      letter-spacing: 2px; /* 可选：调整数字间距 */
     }
+
+    i {
+      font-style: normal;
+      font-size: 8px;
+      color: #fff;
+      margin-top: 5px;
+    }
+  }
 }
 
 // @media screen and (min-width: 1080px) {
diff --git a/src/views/screen/cityScreen/index.vue b/src/views/screen/cityScreen/index.vue
index 49e30c21..9165b46e 100644
--- a/src/views/screen/cityScreen/index.vue
+++ b/src/views/screen/cityScreen/index.vue
@@ -1,42 +1,42 @@
 <template>
-    <!-- 城市大屏 -->
-    <div class="city-screen-container" id="cityScreenContainer">
-        <div class="left_view">
-            <!-- <TopIcons /> -->
-            <div class="left_1">
-                <TopIcons />
-            </div>
-            <div class="left_2">
-                <EquQuantity />
-            </div>
-            <div class="left_5">
-                <EquStatus />
-            </div>
-            <div class="left_3">
-                <Maintenance />
-            </div>
-            <div class="left_6">
-                <Retire />
-            </div>
-        </div>
-        <div class="center_view">
-            <CountryMap />
-        </div>
-        <div class="right_view">
-            <div class="right_1">
-                <TopIconsTwo />
-            </div>
-            <div class="right_2">
-                <EquUse />
-            </div>
-            <div class="right_3">
-                <EquTurnover />
-            </div>
-            <div class="right_4">
-                <EngineerUsing />
-            </div>
-        </div>
+  <!-- 城市大屏 -->
+  <div class="city-screen-container" id="cityScreenContainer">
+    <div class="left_view">
+      <!-- <TopIcons /> -->
+      <div class="left_1">
+        <TopIcons/>
+      </div>
+      <div class="left_2">
+        <EquQuantity/>
+      </div>
+      <div class="left_5">
+        <EquStatus/>
+      </div>
+      <div class="left_3">
+        <Maintenance/>
+      </div>
+      <div class="left_6">
+        <Retire/>
+      </div>
     </div>
+    <div class="center_view">
+      <CountryMap/>
+    </div>
+    <div class="right_view">
+      <div class="right_1">
+        <TopIconsTwo/>
+      </div>
+      <div class="right_2">
+        <EquUse/>
+      </div>
+      <div class="right_3">
+        <EquTurnover/>
+      </div>
+      <div class="right_4">
+        <EngineerUsing/>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -51,34 +51,36 @@ import EquUse from './components/equUse/index.vue'
 import EquTurnover from './components/equTurnover/index.vue'
 import EngineerUsing from './components/engineerUsing/index.vue'
 import autofit from 'autofit.js'
+
 export default {
-    name: 'cityScreen',
-    // mixins: [drawMixin],
-    components: {
-        TopIcons,
-        EquQuantity,
-        EquStatus,
-        Maintenance,
-        Retire,
-        CountryMap,
-        TopIconsTwo,
-        EquUse,
-        EquTurnover,
-        EngineerUsing,
-    },
-    data() {
-        return {}
-    },
-    created() {},
-    mounted() {
-        autofit.init({
-            designHeight: 1080,
-            designWidth: 1920,
-            renderDom: '#cityScreenContainer',
-            resize: true,
-        })
-    },
-    methods: {},
+  name: 'cityScreen',
+  // mixins: [drawMixin],
+  components: {
+    TopIcons,
+    EquQuantity,
+    EquStatus,
+    Maintenance,
+    Retire,
+    CountryMap,
+    TopIconsTwo,
+    EquUse,
+    EquTurnover,
+    EngineerUsing
+  },
+  data() {
+    return {}
+  },
+  created() {
+  },
+  mounted() {
+    autofit.init({
+      designHeight: 1080,
+      designWidth: 1920,
+      renderDom: '#cityScreenContainer',
+      resize: true
+    })
+  },
+  methods: {}
 }
 </script>
 <style lang="scss" scoped>
@@ -86,65 +88,91 @@ export default {
   font-family: 'Alibaba-PuHuiTi-Regular';
   src: url('../../../assets/font-family/alibaba/Alibaba-PuHuiTi-Regular.ttf');
 }
+
 .city-screen-container {
-    width: 100%;
-    height: 100%;
-    font-size: 16px;
-    padding: 60px 1% 6px;
-    display: grid;
-    grid-template-rows: 100%;
-    grid-template-columns: 34% 32% 34%;
-    background: url('../../../assets/images/cityScreen/bg.jpg') no-repeat center center;
-    background-size: 100% 100%;
-    font-family: 'Alibaba-PuHuiTi-Regular';
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  padding: 60px 3.5% 6px;
+  display: grid;
+  grid-template-rows: 100%;
+  grid-template-columns: 25% 50% 25%;
+  background: url('../../../assets/images/cityScreen/bg.jpg') no-repeat center center;
+  background-size: 100% 100%;
+  font-family: 'Alibaba-PuHuiTi-Regular';
 }
 
 .left_view {
-    display: grid;
-    gap: 10px;
-    grid-template-rows: repeat(16, 1fr);
+  display: grid;
+  padding-bottom: 6%;
+  gap: 10px;
+  grid-template-rows: repeat(10, 1fr);
 }
 
 .right_view {
-    display: grid;
-    gap: 10px;
-    grid-template-rows: repeat(16, 1fr);
+  display: grid;
+  gap: 10px;
+  padding-bottom: 6%;
+  grid-template-rows: repeat(10, 1fr);
 }
 
 .left_1 {
-    grid-row: 1 / 2;
-    grid-column: 1 / 2;
+  width: 100%;
+  height: 92px;
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
 }
+
 .left_2 {
-    grid-row: 2 / 6;
-    grid-column: 1 / 2;
+  width: 100%;
+  height: 274px;
+  grid-row: 2 / 6;
+  grid-column: 1 / 2;
 }
+
 .left_5 {
-    grid-row: 6 / 10;
-    grid-column: 1 / 2;
+  width: 100%;
+  height: 269px;
+  grid-row: 6 / 10;
+  grid-column: 1 / 2;
 }
+
 .left_3 {
-    grid-row: 10 / 13;
-    grid-column: 1 / 2;
+  width: 100%;
+  height: 150px;
+  grid-row: 10 / 13;
+  grid-column: 1 / 2;
 }
+
 .left_6 {
-    grid-row: 13 / 17;
-    grid-column: 1 / 2;
+  width: 100%;
+  height: 150px;
+  grid-row: 13 / 17;
+  grid-column: 1 / 2;
 }
 
 .right_1 {
-    grid-row: 1 / 2;
+  width: 100%;
+  height: 92px;
+  grid-row: 1 / 2;
 }
+
 .right_2 {
-    grid-row: 2 / 7;
-    display: flex;
+  width: 100%;
+  height: 306px;
+  grid-row: 2 / 7;
+  display: flex;
 }
+
 .right_3 {
-    grid-row: 7 / 12;
-    display: flex;
+  height: 306px;
+  grid-row: 7 / 12;
+  display: flex;
 }
+
 .right_4 {
-    grid-row: 12 / 17;
-    display: flex;
+  height: 306px;
+  grid-row: 12 / 17;
+  display: flex;
 }
 </style>