diff --git a/src/assets/cityScreen/icon1.png b/src/assets/cityScreen/icon1.png
new file mode 100644
index 00000000..88b44c40
Binary files /dev/null and b/src/assets/cityScreen/icon1.png differ
diff --git a/src/assets/cityScreen/icon2.png b/src/assets/cityScreen/icon2.png
new file mode 100644
index 00000000..266b4551
Binary files /dev/null and b/src/assets/cityScreen/icon2.png differ
diff --git a/src/assets/cityScreen/icon3.png b/src/assets/cityScreen/icon3.png
new file mode 100644
index 00000000..86c3db28
Binary files /dev/null and b/src/assets/cityScreen/icon3.png differ
diff --git a/src/assets/cityScreen/tab11.png b/src/assets/cityScreen/tab11.png
new file mode 100644
index 00000000..b38fa328
Binary files /dev/null and b/src/assets/cityScreen/tab11.png differ
diff --git a/src/assets/cityScreen/tab12.png b/src/assets/cityScreen/tab12.png
new file mode 100644
index 00000000..93ef1298
Binary files /dev/null and b/src/assets/cityScreen/tab12.png differ
diff --git a/src/assets/cityScreen/tab21.png b/src/assets/cityScreen/tab21.png
new file mode 100644
index 00000000..1dce8206
Binary files /dev/null and b/src/assets/cityScreen/tab21.png differ
diff --git a/src/assets/cityScreen/tab22.png b/src/assets/cityScreen/tab22.png
new file mode 100644
index 00000000..d1a048b6
Binary files /dev/null and b/src/assets/cityScreen/tab22.png differ
diff --git a/src/assets/cityScreen/tab31.png b/src/assets/cityScreen/tab31.png
new file mode 100644
index 00000000..fbe4ddf1
Binary files /dev/null and b/src/assets/cityScreen/tab31.png differ
diff --git a/src/assets/cityScreen/tab32.png b/src/assets/cityScreen/tab32.png
new file mode 100644
index 00000000..19383346
Binary files /dev/null and b/src/assets/cityScreen/tab32.png differ
diff --git a/src/assets/cityScreen/tableHeader.png b/src/assets/cityScreen/tableHeader.png
new file mode 100644
index 00000000..fb51d9a5
Binary files /dev/null and b/src/assets/cityScreen/tableHeader.png differ
diff --git a/src/assets/cityScreen/tableTr.png b/src/assets/cityScreen/tableTr.png
new file mode 100644
index 00000000..fd3ae0d4
Binary files /dev/null and b/src/assets/cityScreen/tableTr.png differ
diff --git a/src/assets/cityScreen/usingBg.png b/src/assets/cityScreen/usingBg.png
new file mode 100644
index 00000000..14356726
Binary files /dev/null and b/src/assets/cityScreen/usingBg.png differ
diff --git a/src/views/screen/cityScreen/components/engineerUsing/index.vue b/src/views/screen/cityScreen/components/engineerUsing/index.vue
index a3989048..547fb31e 100644
--- a/src/views/screen/cityScreen/components/engineerUsing/index.vue
+++ b/src/views/screen/cityScreen/components/engineerUsing/index.vue
@@ -6,7 +6,61 @@
             </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="topTab1 fs-24">线路</div>
+                    <div class="topTab2 fs-24">变电</div>
+                    <div class="topTab3 fs-24">电缆</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">10</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">10</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%;">
+                        {{ index+1 }}
+                    </div>
+                    <div class="tableTd" style="width: 25%;">
+                        {{ item.major }}
+                    </div>
+                    <div class="tableTd" style="width: 20%;">
+                        {{ item.devicesNum }}
+                    </div>
+                    <div class="tableTd">
+                        {{ item.amount }}
+                    </div>
+                    <div class="tableTd">
+                        {{ item.person }}
+                    </div>
+                    <div class="tableTd">
+                        {{ item.riskLevel }}
+                    </div>
+                    <div class="tableTd">
+                        {{ item.geography }}
+                    </div>
+                </div>
+            </div>
 
         </div>
     </div>
@@ -15,7 +69,97 @@
 <script> 
 export default {
     data() {
-        return { 
+        return {
+            tableList:[
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+                {   
+                    major:"变电站工程",
+                    devicesNum:"15",
+                    amount:"2289",
+                    person:89,
+                    riskLevel:5,
+                    geography:"平原",
+                },
+            ]
         }
     },
     created() {
@@ -52,17 +196,169 @@ export default {
     height: 85%; 
     padding-left: 5%;
 }
- 
+.topView{
+    width: 100%;
+    height: 20%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.fs-24{
+    font-size: 24px;
+}
+.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; 
+}
+.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; 
+}
+.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; 
+}
+
+
+.text{
+    color: #C0C2C6;
+    font-size: 26px;
+}
+.num{
+    color: #83D3F8;
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0 10px;
+}
+.unit{
+    font-size: 16px;
+    color: #ccc; 
+}
+.icon{
+    width: 60px;
+        height: 60px;
+}
+
+.tableHeader{
+    width: 100%;
+    height: 12%; 
+    background-image: url("../../../../../assets/cityScreen/tableHeader.png");
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+}
+.tableBox{
+    width: 100%;
+    height: 68%; 
+    overflow-y: auto;
+}
+.tableTr{
+    width: 100%;
+    height: 12%; 
+    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: 24px;
+    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: 24px;
+}
 @media screen and (min-width: 1920px) { 
     .title{
         font-size: 10px; 
     } 
-    
+    .header{ 
+        font-size: 10px;
+    } 
+    .num{
+        color: #83D3F8;
+        font-size: 12px;
+        margin: 0 2px;
+    }
+    .unit{
+        font-size: 10px; 
+    }
+    .icon{
+        width: 30px;
+        height: 30px;
+    }
+    .text{ 
+        font-size: 10px;
+    }
+    .tableTd{ 
+        font-size: 10px; 
+    }
+    .fs-24{
+        font-size: 10px;
+    }
 }
 @media screen and (min-width: 3000px) { 
     .title{
+        font-size: 24px;
+    }
+    .header{ 
+        font-size: 24px;
+    } 
+    .num{
+        color: #83D3F8;
+        font-size: 24px;
+        margin: 0 10px;
+    }
+    .unit{
+        font-size: 20px; 
+    }
+    .icon{
+        width: 60px;
+        height: 60px;
+    }
+    .text{ 
+        font-size: 20px;
+    }
+    .tableTd{ 
         font-size: 24px; 
     }
+    .fs-24{
+        font-size: 24px;
+    }
 }
 
 
diff --git a/src/views/screen/cityScreen/components/equiQuantity/index.vue b/src/views/screen/cityScreen/components/equiQuantity/index.vue
index 5c23b35a..88c2dc6a 100644
--- a/src/views/screen/cityScreen/components/equiQuantity/index.vue
+++ b/src/views/screen/cityScreen/components/equiQuantity/index.vue
@@ -15,9 +15,34 @@
                     <div class="item-title">
                         <span class="title2">线路装备</span>
                     </div> 
-                    
- 
-                    
+                    <div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
+                        <div class="num">
+                            <span style="font-weight: 700;">50</span>
+                            <span class="unit">台</span>
+                        </div>
+                        <div class="num">
+                            <span style="font-weight: 700;">0.027</span>
+                            <span class="unit">亿元</span>
+                        </div>
+                    </div>
+                    <div id="lineChartOne" style="width: 100%;height: 20%;"></div>
+                    <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;">30</span>
+                            <span class="unit2">73%</span>
+                        </div>
+                        <div class="num2" style="color: #00FEFC;">
+                            <span class="unit2" style="color: #00FEFC;">5-10年</span>
+                            <span style="font-weight: 700;">15</span>
+                            <span class="unit2" style="color: #00FEFC;">23%</span>
+                        </div>
+                        <div class="num2" style="color: #00FEFC;">
+                            <span class="unit2" style="color: #1E8DFF;">10年以上</span>
+                            <span style="font-weight: 700;">15</span>
+                            <span class="unit2" style="color: #1E8DFF;">0%</span>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="content-view-item">
@@ -28,7 +53,34 @@
                     <div class="item-title">
                         <span class="title2">变电装备</span>
                     </div> 
-
+                    <div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
+                        <div class="num">
+                            <span style="font-weight: 700;">50</span>
+                            <span class="unit">台</span>
+                        </div>
+                        <div class="num">
+                            <span style="font-weight: 700;">0.027</span>
+                            <span class="unit">亿元</span>
+                        </div>
+                    </div>
+                    <div id="lineChartTwo" style="width: 100%;height: 20%;"></div>
+                    <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;">30</span>
+                            <span class="unit2">73%</span>
+                        </div>
+                        <div class="num2" style="color: #00FEFC;">
+                            <span class="unit2" style="color: #00FEFC;">5-10年</span>
+                            <span style="font-weight: 700;">15</span>
+                            <span class="unit2" style="color: #00FEFC;">23%</span>
+                        </div>
+                        <div class="num2" style="color: #00FEFC;">
+                            <span class="unit2" style="color: #1E8DFF;">10年以上</span>
+                            <span style="font-weight: 700;">15</span>
+                            <span class="unit2" style="color: #1E8DFF;">0%</span>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="content-view-item">
@@ -39,7 +91,34 @@
                     <div class="item-title">
                         <span class="title2">电缆装备</span>
                     </div> 
-
+                    <div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
+                        <div class="num">
+                            <span style="font-weight: 700;">50</span>
+                            <span class="unit">台</span>
+                        </div>
+                        <div class="num">
+                            <span style="font-weight: 700;">0.027</span>
+                            <span class="unit">亿元</span>
+                        </div>
+                    </div>
+                    <div id="lineChartThree" style="width: 100%;height: 20%;"></div>
+                    <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;">30</span>
+                            <span class="unit2">73%</span>
+                        </div>
+                        <div class="num2" style="color: #00FEFC;">
+                            <span class="unit2" style="color: #00FEFC;">5-10年</span>
+                            <span style="font-weight: 700;">15</span>
+                            <span class="unit2" style="color: #00FEFC;">23%</span>
+                        </div>
+                        <div class="num2" style="color: #00FEFC;">
+                            <span class="unit2" style="color: #1E8DFF;">10年以上</span>
+                            <span style="font-weight: 700;">15</span>
+                            <span class="unit2" style="color: #1E8DFF;">0%</span>
+                        </div>
+                    </div>
 
 
                 </div>
@@ -50,6 +129,7 @@
 </template>
 
 <script> 
+import * as echarts from 'echarts' 
 export default {
     data() {
         return { 
@@ -59,8 +139,170 @@ export default {
 
     },
     mounted() {
+        this.InitEChartsOne()
+        this.InitEChartsTwo()
+        this.lineChartThree()
     },
     methods: {
+        InitEChartsOne() {
+            // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+                var legendData = [
+                    { name: '5年', data: 30 },
+                    { name: '5-10年', data: 15 },
+                    { name: '10年以上', data: 15 }
+                ];
+                var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
+                var seriesList = [];
+                for (var i = 0; i < legendData.length; i++) {
+                    seriesList.push({
+                        type: 'bar',
+                        stack: '2',
+                        legendHoverLink: false,
+                        barWidth: 6,
+                        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)   
+            // }); 
+        },
+        InitEChartsTwo() {
+            // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+                var legendData = [
+                    { name: '5年', data: 30 },
+                    { name: '5-10年', data: 15 },
+                    { name: '10年以上', data: 15 }
+                ];
+                var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
+                var seriesList = [];
+                for (var i = 0; i < legendData.length; i++) {
+                    seriesList.push({
+                        type: 'bar',
+                        stack: '2',
+                        legendHoverLink: false,
+                        barWidth: 6,
+                        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('#lineChartTwo'));
+                this.myCharts1.setOption(option)   
+            // }); 
+        },
+        lineChartThree() {
+            // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+                var legendData = [
+                    { name: '5年', data: 30 },
+                    { name: '5-10年', data: 15 },
+                    { name: '10年以上', data: 15 }
+                ];
+                var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
+                var seriesList = [];
+                for (var i = 0; i < legendData.length; i++) {
+                    seriesList.push({
+                        type: 'bar',
+                        stack: '2',
+                        legendHoverLink: false,
+                        barWidth: 6,
+                        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('#lineChartThree'));
+                this.myCharts1.setOption(option)   
+            // }); 
+        },
     },
 }
 </script>
@@ -108,6 +350,25 @@ export default {
      font-size: 20px;
      color: #fff;
 }
+.num{
+    color: #83D3F8;
+    font-size: 26px;
+}
+.unit{
+    font-size: 20px;
+    color: #ccc;
+    margin-left: 10px;
+}
+.num2{
+    color: #83D3F8;
+    font-size: 24px;
+}
+.unit2{
+    font-size: 16px;
+    color: #ccc;
+    margin-right: 8px;
+    margin-left: 8px;
+}
 @media screen and (min-width: 1920px) { 
     .title{
         font-size: 10px; 
@@ -115,6 +376,23 @@ export default {
     .title2{
         font-size: 10px; 
     }
+    .num{ 
+        font-size: 12px; 
+    }
+    .unit{
+        font-size: 10px; 
+        margin-left: 2px;
+    }
+    .num2{
+        color: #83D3F8;
+        font-size: 10px;
+    }
+    .unit2{
+        font-size: 8px;
+        color: #ccc;
+        margin-right: 2px;
+        margin-left: 2px;
+    }
     
 }
 @media screen and (min-width: 3000px) { 
@@ -124,6 +402,23 @@ export default {
     .title2{
         font-size: 20px; 
     }
+    .num{ 
+        font-size: 26px;
+    }
+    .unit{
+        font-size: 20px; 
+        margin-left: 10px;
+    }
+    .num2{
+        color: #83D3F8;
+        font-size: 24px;
+    }
+    .unit2{
+        font-size: 16px;
+        color: #ccc;
+        margin-right: 8px;
+        margin-left: 8px;
+    }
 }
 
 
diff --git a/src/views/screen/cityScreen/components/equiStatus/index.vue b/src/views/screen/cityScreen/components/equiStatus/index.vue
index 99da3f6a..dd225951 100644
--- a/src/views/screen/cityScreen/components/equiStatus/index.vue
+++ b/src/views/screen/cityScreen/components/equiStatus/index.vue
@@ -6,24 +6,187 @@
             </div> 
         </div>
         <div class="content-view">
-
-
+            <div id="lineChartFour" style="width: 100%;height: 90%;"></div>
+            <div class="text">备注说明：在用装备包含共享装备。</div>
         </div>
     </div>
 </template>
 
 <script> 
+import * as echarts from 'echarts' 
 export default {
     data() {
         return { 
+            barWidth:40,
+            size:[40, 20],
+            Offset1:[-0, 10],
+            Offset2:[-0, -10],
         }
     },
     created() {
 
     },
     mounted() {
+        
+        console.log(window.innerWidth, window.innerHeight);
+        if(window.innerWidth<3000){
+            this.barWidth=20
+            this.size=[20, 5]
+            this.Offset1=[-0, 2]
+            this.Offset2=[-0, -2]
+        }
+        this.InitEChartsOne()
     },
     methods: {
+        InitEChartsOne() {
+            // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+                var option = {
+                    xAxis: {
+                        data: ['在用', '在库', '在修', '共享'],
+                        axisTick: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: true
+                        },
+                        axisLabel: {
+                            interval: 0,
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12,
+                            },
+                            margin: 26, //刻度标签与轴线之间的距离。
+                        },
+                    },
+                    yAxis: {
+                        // name:"单位：t",
+                        nameTextStyle:{
+                            color: '#fff',
+                            fontSize:15,
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        axisTick: {
+                            show: true,
+                        },
+                        axisLine: {
+                            show: true,
+                        },
+                        axisLabel: {
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 10,
+                            },
+                        }
+                    },
+                    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: .5,
+                                                color: '#217CA7'
+                                            },
+                                            {
+                                                offset: .5,
+                                                color: '#2B9CCC'
+                                            },
+                                            {
+                                                offset: 1,
+                                                color: '#2B9CCC'
+                                            }
+                                    ],
+                                },
+                            },
+                            label: {
+                                show: true,
+                                position: 'top',
+                                offset: 0,
+                                fontSize: 10,
+                                color: '#fff',
+                                formatter: function(params) {
+                                    console.log(params) 
+                                    var str = "" + params.value  + "\n\n";
+                                    return str;
+                                },
+                            },
+                            data:[220, 182, 191, 234]
+                        },
+                        {
+                            "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: .5,
+                                                        color: '#217CA7'
+                                                    },
+                                                    {
+                                                        offset: .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": [220, 182, 191, 234]
+                        },
+
+                    ]
+                };
+                this.myCharts1 = echarts.init(document.querySelector('#lineChartFour'));
+                this.myCharts1.setOption(option)   
+            // }); 
+        },
     },
 }
 </script>
@@ -52,7 +215,10 @@ export default {
     height: 85%; 
     padding-left: 8%;
 }
- 
+.text{
+    width: 100%;margin-bottom: 10px;color: #A9C4F8;text-align: center;
+    font-size: 24px;
+}
 @media screen and (min-width: 1920px) { 
     .title{
         font-size: 10px;
@@ -60,6 +226,9 @@ export default {
         top: 42%;
         left: 18%;
     } 
+    .text{ 
+        font-size: 10px;
+    }
     
 }
 @media screen and (min-width: 3000px) { 
@@ -69,6 +238,9 @@ export default {
         top: 42%;
         left: 18%;
     }
+    .text{ 
+        font-size: 24px;
+    }
 }
 
 
diff --git a/src/views/screen/cityScreen/components/equiTurnover/index.vue b/src/views/screen/cityScreen/components/equiTurnover/index.vue
index 85ef350f..75cb0e1c 100644
--- a/src/views/screen/cityScreen/components/equiTurnover/index.vue
+++ b/src/views/screen/cityScreen/components/equiTurnover/index.vue
@@ -6,8 +6,35 @@
             </div> 
         </div>
         <div class="content-view">
-
-
+            <div class="tableHeader">
+                <div class="header">专业</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">
+                        {{ index+1 }}
+                    </div>
+                    <div class="tableTd">
+                        {{ item.major }}
+                    </div>
+                    <div class="tableTd">
+                        {{ item.mainProcess }}
+                    </div>
+                    <div class="tableTd">
+                        {{ item.subProcess }}
+                    </div>
+                    <div class="tableTd">
+                        {{ item.equipment }}
+                    </div>
+                    <div class="tableTd">
+                        {{ item.maintenanceStatus }}
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -16,6 +43,95 @@
 export default {
     data() {
         return { 
+            tableList:[
+                {   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装塔材吊装塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },
+                {   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装塔材吊装塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                },{   
+                    major:"变电站工程",
+                    mainProcess:"组塔施工",
+                    subProcess:"塔材吊装",
+                    equipment:"牵引机",
+                    maintenanceStatus:"2.25次/年",
+                }
+
+            ]
         }
     },
     created() {
@@ -52,17 +168,69 @@ export default {
     height: 85%; 
     padding-left: 8%;
 }
- 
+.tableHeader{
+    width: 100%;
+    height: 12%; 
+    background-image: url("../../../../../assets/cityScreen/tableHeader.png");
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+}
+.tableBox{
+    width: 100%;
+    height: 88%; 
+    overflow-y: auto;
+}
+.tableTr{
+    width: 100%;
+    height: 12%; 
+    background-image: url("../../../../../assets/cityScreen/tableTr.png");
+    background-size: 100% 100%;
+    margin-bottom: 2px;
+    display: flex;
+}
+.tableTd{
+    width: 20%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: #ccc;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.header{
+    color: #72B1F1;
+    width: 20%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+}
 @media screen and (min-width: 1920px) { 
     .title{
         font-size: 10px; 
     } 
-    
+    .header{ 
+        font-size: 10px;
+    } 
+    .tableTd{ 
+        font-size: 10px; 
+    }
 }
 @media screen and (min-width: 3000px) { 
     .title{
         font-size: 24px;
     }
+    .header{ 
+        font-size: 24px;
+    } 
+    .tableTd{ 
+        font-size: 24px; 
+    }
 }
 
 
diff --git a/src/views/screen/cityScreen/components/equiUse/index.vue b/src/views/screen/cityScreen/components/equiUse/index.vue
index 48a93d59..8eaf103c 100644
--- a/src/views/screen/cityScreen/components/equiUse/index.vue
+++ b/src/views/screen/cityScreen/components/equiUse/index.vue
@@ -6,8 +6,24 @@
             </div> 
         </div>
         <div class="content-view">
-
-
+            <img src="../../../../../assets/cityScreen/usingBg.png" style="width: 80%;height: 100%;position: absolute;top: 0;left: 15%;" />
+            <div class="all-box">
+                <div>60%</div>
+                <div class="title2">总体在用率</div>
+            </div>
+            <div class="bd-box">
+                <div>60%</div>
+                <div class="title3">变电装备在用率</div>
+            </div>
+            <div class="line-box">
+                <div>60%</div>
+                <div class="title3">线路装备在用率</div>
+            </div>
+            <div class="cable-box">
+                <div>60%</div>
+                <div class="title3">电缆装备在用率</div>
+            </div>
+            
         </div>
     </div>
 </template>
@@ -50,19 +66,125 @@ export default {
 .content-view{
     width: 100%;
     height: 85%; 
-    padding-left: 8%;
+    padding-left: 8%; 
+    position: relative;
+}
+.title2{
+    font-size: 20px;
+    padding-top: 10px;
+    color: #ccc;
+}
+.title3{
+    color: #ccc;
+    font-size: 20px;
+    padding-top: 30px;
+}
+.all-box{
+    width: 30%;
+    height: 20%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    color: #fff;
+    font-size: 28px;
+    font-weight: 800;
+    position: absolute;
+    top: 40%;
+    left: 43%; 
+}
+.bd-box{
+    width: 30%;
+    height: 20%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    color: #63C7DC;
+    font-size: 28px;
+    font-weight: 800;
+    position: absolute;
+    top:38%;
+    left: 12%;
+}
+.line-box{
+    width: 30%;
+    height: 20%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    color: #9EABFE;
+    font-size: 28px;
+    font-weight: 800;
+    position: absolute;
+    top:19%;
+    right: 0%;
+}
+.cable-box{
+    width: 30%;
+    height: 20%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    color: #8CFED7;
+    font-size: 28px;
+    font-weight: 800;
+    position: absolute;
+    top:74%;
+    right: 0%;
 }
  
 @media screen and (min-width: 1920px) { 
     .title{
         font-size: 10px; 
     } 
-    
+    .title2{
+        font-size: 10px;
+        padding-top: 5px;
+    }
+    .title3{
+        font-size: 10px;
+        padding-top: 10px;
+    }
+    .all-box{
+        font-size: 12px; 
+    }
+    .bd-box{
+        font-size: 12px; 
+    }
+    .line-box{
+        font-size: 12px; 
+    }
+    .cable-box{
+        font-size: 12px; 
+    }
 }
 @media screen and (min-width: 3000px) { 
     .title{
         font-size: 24px;
     }
+    .title2{
+        font-size: 20px;
+        padding-top: 10px;
+    }
+    .title3{
+        font-size: 20px;
+        padding-top: 30px;
+    }
+    .all-box{ 
+        font-size: 28px; 
+    }
+    .bd-box{ 
+        font-size: 28px; 
+    }
+    .line-box{
+        font-size: 28px; 
+    }
+    .cable-box{
+        font-size: 28px; 
+    }
 }
 
 
diff --git a/src/views/screen/cityScreen/components/maintenance/index.vue b/src/views/screen/cityScreen/components/maintenance/index.vue
index 5dd5b769..03935cb3 100644
--- a/src/views/screen/cityScreen/components/maintenance/index.vue
+++ b/src/views/screen/cityScreen/components/maintenance/index.vue
@@ -6,8 +6,20 @@
             </div> 
         </div>
         <div class="content-view">
-
-
+            <div style="width: 100%;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">10</span>
+                <span class="unit">台</span>
+            </div>
+            <div style="width: 100%;height: 85%;overflow-y: auto;">
+                <el-table :data="tableList">
+                    <el-table-column label="序号" align="center" type="index"></el-table-column>
+                    <el-table-column label="工序" align="center" prop="process"/>
+                    <el-table-column label="设备" align="center" prop="equipment"/>
+                    <el-table-column label="维保情况" align="center" prop="maintenanceStatus"/> 
+                </el-table> 
+            </div> 
         </div>
     </div>
 </template>
@@ -16,6 +28,54 @@
 export default {
     data() {
         return { 
+            tableList:[
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+
+            ]
         }
     },
     created() {
@@ -52,17 +112,141 @@ export default {
     height: 85%; 
     padding-left: 8%;
 }
- 
+.text{
+    color: #C0C2C6;
+    font-size: 26px;
+}
+.num{
+    color: #83D3F8;
+    font-size: 26px;
+    font-weight: 600;
+    margin: 0 10px;
+}
+.unit{
+    font-size: 16px;
+    color: #ccc; 
+}
+.icon{
+    width: 60px;
+        height: 60px;
+}
+/*最外层透明*/
+::v-deep .el-table,
+::v-deep .el-table__expanded-cell {
+  background-color: transparent !important;
+}
+/* 表格内背景颜色 */
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+  background-color: transparent !important; 
+  border: 1px solid rgba(3, 40, 70, 0.9) !important;
+}
+/*去除底边框*/
+::v-deep.el-table td.el-table__cell {
+  border: 0;
+}
+::v-deep.el-table th.el-table__cell.is-leaf {
+  border: 0;
+}
+::v-deep.el-table::before {
+  height: 0;
+}
+
+/* 滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #2893cc;
+  border-radius: 3px;
+}
+
+/* 标题行 */
+::v-deep .el-table__header-wrapper {
+  /* border: 1px solid #15c0ff !important; */
+  background-color: rgba(65, 129, 255, 0.4);
+}
+
+::v-deep .el-table .cell {
+  // color: #15c0ff !important;
+  color: #fff;
+  font-size: 10px!important;
+}
+::v-deep .el-table th.el-table__cell > .cell {
+  color: #e1f1fe !important;
+  font-size: 10px!important;
+}
+
+/* 高亮当前行 */
+::v-deep .el-table__body tr.current-row > td {
+  background-color: #15c0ff20 !important; 
+}
+::v-deep .el-table__body tr.current-row .cell {
+  color: #ffffff !important;
+  
+}
+::v-deep .el-table__body tr:hover > td {
+  background-color: #15c0ff20 !important;
+}
 @media screen and (min-width: 1920px) { 
     .title{
         font-size: 10px; 
     } 
-    
+    .num{
+        color: #83D3F8;
+        font-size: 12px;
+        margin: 0 2px;
+    }
+    .unit{
+        font-size: 10px; 
+    }
+    .icon{
+        width: 30px;
+        height: 30px;
+    }
+    .text{ 
+        font-size: 10px;
+    }
+    ::v-deep .el-table .cell {
+    // color: #15c0ff !important;
+    color: #fff;
+    font-size: 10px!important;
+    }
+    ::v-deep .el-table th.el-table__cell > .cell {
+    color: #e1f1fe !important;
+    font-size: 10px!important;
+    }
 }
 @media screen and (min-width: 3000px) { 
     .title{
         font-size: 24px;
     }
+    .num{
+        color: #83D3F8;
+        font-size: 24px;
+        margin: 0 10px;
+    }
+    .unit{
+        font-size: 20px; 
+    }
+    .icon{
+        width: 60px;
+        height: 60px;
+    }
+    .text{ 
+        font-size: 20px;
+    }
+    ::v-deep .el-table .cell {
+    // color: #15c0ff !important;
+    color: #fff;
+        font-size: 20px!important;
+    }
+    ::v-deep .el-table th.el-table__cell > .cell {
+        color: #e1f1fe !important;
+        font-size: 20px!important;
+    }
 }
 
 
diff --git a/src/views/screen/cityScreen/components/retire/index.vue b/src/views/screen/cityScreen/components/retire/index.vue
index 2bc38fd6..466b39a9 100644
--- a/src/views/screen/cityScreen/components/retire/index.vue
+++ b/src/views/screen/cityScreen/components/retire/index.vue
@@ -6,7 +6,20 @@
             </div> 
         </div>
         <div class="content-view">
-
+            <div style="width: 100%;height: 12%;display: flex;align-items: center;justify-content: center;">
+                <img src="../../../../../assets/cityScreen/icon2.png" class="icon" />
+                <span class="text" style="">退役预警总数:</span>
+                <span class="num">10</span>
+                <span class="unit">台</span>
+            </div>
+            <div style="width: 100%;height: 85%;overflow-y: auto;">
+                <el-table :data="tableList">
+                    <el-table-column label="序号" align="center" type="index"></el-table-column>
+                    <el-table-column label="工序" align="center" prop="process"/>
+                    <el-table-column label="设备" align="center" prop="equipment"/>
+                    <el-table-column label="预警情况" align="center" prop="maintenanceStatus"/> 
+                </el-table> 
+            </div> 
 
         </div>
     </div>
@@ -16,6 +29,54 @@
 export default {
     data() {
         return { 
+            tableList:[
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+                {
+                    process:"组塔施工",
+                    equipment:"抱杆",
+                    maintenanceStatus:"正常",
+                },
+
+            ]
         }
     },
     created() {
@@ -31,7 +92,7 @@ export default {
 .content{
     width: 100%;
     height: 100%; 
-    background-image: url("../../../../../assets/cityScreen/retireBg.png");
+    background-image: url("../../../../../assets/cityScreen/maintenanceBg.png");
     background-size: 110% 100%;
     
 }   
@@ -52,16 +113,137 @@ export default {
     height: 85%; 
     padding-left: 8%;
 }
- 
+.text{
+    color: #C0C2C6;
+    font-size: 26px;
+}
+.num{
+    color: #83D3F8;
+    font-size: 26px;
+    font-weight: 600;
+    margin: 0 10px;
+}
+.unit{
+    font-size: 16px;
+    color: #ccc; 
+}
+.icon{
+    width: 60px;
+        height: 60px;
+}
+/*最外层透明*/
+::v-deep .el-table,
+::v-deep .el-table__expanded-cell {
+  background-color: transparent !important;
+}
+/* 表格内背景颜色 */
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+  background-color: transparent !important; 
+  border: 1px solid rgba(3, 40, 70, 0.9) !important;
+}
+/*去除底边框*/
+::v-deep.el-table td.el-table__cell {
+  border: 0;
+}
+::v-deep.el-table th.el-table__cell.is-leaf {
+  border: 0;
+}
+::v-deep.el-table::before {
+  height: 0;
+}
+
+/* 滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #2893cc;
+  border-radius: 3px;
+}
+
+/* 标题行 */
+::v-deep .el-table__header-wrapper {
+  /* border: 1px solid #15c0ff !important; */
+  background-color: rgba(65, 129, 255, 0.4);
+}
+
+::v-deep .el-table .cell {
+  // color: #15c0ff !important;
+  color: #fff;
+}
+::v-deep .el-table th.el-table__cell > .cell {
+  color: #e1f1fe !important;
+}
+
+/* 高亮当前行 */
+::v-deep .el-table__body tr.current-row > td {
+  background-color: #15c0ff20 !important;
+}
+::v-deep .el-table__body tr.current-row .cell {
+  color: #ffffff !important;
+}
+::v-deep .el-table__body tr:hover > td {
+  background-color: #15c0ff20 !important;
+}
 @media screen and (min-width: 1920px) { 
     .title{
         font-size: 10px; 
     } 
-    
+    .num{
+        color: #83D3F8;
+        font-size: 12px;
+        margin: 0 2px;
+    }
+    .unit{
+        font-size: 10px; 
+    }
+    .icon{
+        width: 30px;
+        height: 30px;
+    }
+    .text{ 
+        font-size: 10px;
+    }
+    ::v-deep .el-table .cell {
+    // color: #15c0ff !important;
+    color: #fff;
+        font-size: 10px!important;
+    }
+    ::v-deep .el-table th.el-table__cell > .cell {
+        color: #e1f1fe !important;
+        font-size: 10px!important;
+    }
 }
 @media screen and (min-width: 3000px) { 
     .title{
-        font-size: 24px; 
+        font-size: 24px;
+    }
+    .num{
+        color: #83D3F8;
+        font-size: 24px;
+        margin: 0 10px;
+    }
+    .unit{
+        font-size: 20px; 
+    }
+    .icon{
+        width: 60px;
+        height: 60px;
+    }
+    .text{ 
+        font-size: 20px;
+    }
+      ::v-deep .el-table .cell {
+    // color: #15c0ff !important;
+    color: #fff;
+        font-size: 20px!important;
+    }
+    ::v-deep .el-table th.el-table__cell > .cell {
+        color: #e1f1fe !important;
+        font-size: 20px!important;
     }
 }