diff --git a/src/assets/images/center-bgc-box.png b/src/assets/images/center-bgc-box.png
new file mode 100644
index 0000000000000000000000000000000000000000..794d7caf42019d4f8b1c8644d4b0c11b5b2fc7f5
Binary files /dev/null and b/src/assets/images/center-bgc-box.png differ
diff --git a/src/assets/images/center-bottom-box-bgc.png b/src/assets/images/center-bottom-box-bgc.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a200eb0835cf4d826657ae85751b48b4a3b1bde
Binary files /dev/null and b/src/assets/images/center-bottom-box-bgc.png differ
diff --git a/src/assets/images/center-center-box-bgc.png b/src/assets/images/center-center-box-bgc.png
new file mode 100644
index 0000000000000000000000000000000000000000..be9f5550ed840c43c10f2770623f272bb3279003
Binary files /dev/null and b/src/assets/images/center-center-box-bgc.png differ
diff --git a/src/assets/images/center-top-box-bgc.png b/src/assets/images/center-top-box-bgc.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e1fd57fb85212ca3a6111aae7387aa227083ac3
Binary files /dev/null and b/src/assets/images/center-top-box-bgc.png differ
diff --git a/src/utils/config.js b/src/utils/config.js
index 1b55f6602927669be942e12e6e2ea8be2e149db7..2b8f96f10655834a3cd9c447c02cd96d87b131d5 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -1,6 +1,6 @@
 module.exports = {
-  baseUrl: 'localhost:2011'
+  // baseUrl: 'localhost:2011'
   // baseUrl: '49.234.81.196:2011'
-  // baseUrl: '192.168.0.100:2011'
+  baseUrl: '192.168.0.101:2011'
   // baseUrl: '120.25.106.20:2011'
 }
diff --git a/src/views/NewMainPage.vue b/src/views/NewMainPage.vue
index 62afbcdfa785c64a01adab68d8648fd456514b8b..ac3ebe3f647c390e36cf539f71e63f79d7e6e02c 100644
--- a/src/views/NewMainPage.vue
+++ b/src/views/NewMainPage.vue
@@ -4,16 +4,16 @@
     <el-header id="new-mainpage-header">
       <div style="height: 30px" />
       <div style="display: inline-block;width: 1%;height: 1px" class="btn-one-left" />
-      <div class="btn btn-one btn-one-left">
+      <div class="btn btn-one btn-one-left" :style="{color: leftBtnColor[0]}" @click="changeLeftBtnStyle(0)">
         安检门
       </div>
       <div style="display: inline-block;width: 1%;height: 1px" class="btn-one-left" />
-      <div class="btn btn-one btn-one-left">
-        x射线机
+      <div class="btn btn-one btn-one-left" :style="{color: leftBtnColor[1]}" @click="changeLeftBtnStyle(1)">
+        人脸ESD
       </div>
       <div style="display: inline-block;width: 1%;height: 1px" class="btn-one-left" />
-      <div class="btn btn-one btn-one-left">
-        炸探/液探
+      <div class="btn btn-one btn-one-left" :style="{color: leftBtnColor[2]}" @click="changeLeftBtnStyle(2)">
+        手探
       </div>
 
       <!--      <div style="display: inline-block;width: 54%" />-->
@@ -25,18 +25,13 @@
       </router-link>
 
       <div style="display: inline-block;width: 1%;height: 1px" class="btn-one-right" />
-      <router-link to="/userManage">
-        <div class="btn btn-one btn-one-right">
-          系统设置
-        </div>
-      </router-link>
-
+      <div class="btn btn-one btn-one-right" :style="{color: leftBtnColor[3]}" @click="changeLeftBtnStyle(3)">
+        炸探/液探
+      </div>
       <div style="display: inline-block;width: 1%;height: 1px" class="btn-one-right" />
-      <router-link to="/deviceList">
-        <div class="btn btn-one btn-one-right">
-          设备管理
-        </div>
-      </router-link>
+      <div class="btn btn-one btn-one-right" :style="{color: leftBtnColor[4]}" @click="changeLeftBtnStyle(4)">
+        X光机
+      </div>
     </el-header>
     <!--  内容  -->
     <el-main style="padding-left: 15px;padding-right: 15px">
@@ -52,8 +47,8 @@
         </div>
       </div>
       <div class="center-box">
-        <div style="height: 10%;font-size: 20px;color: #ffffff;text-align: center">
-          系统总体拓扑结构
+        <div style="height: 8%;font-size: 25px;color: #ffffff;text-align: center;margin-top: 15px">
+          设备状态总览
         </div>
         <div class="center-top">
           1
@@ -92,12 +87,39 @@ export default {
   components: { LeftTop, RightBottom, RightTop, LowerLeft, LeftCenter, RightMiddle },
   data() {
     return {
-
+      leftBtnColor: ['#ffde00', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)']
     }
   },
   async mounted() {
     this.$Socket.connect()
     this.getWebSocket()
+    // 自适应宽度处理
+
+    /**
+     *
+     * 自适应宽度处理
+     * 通过当前网页具体宽高 / 设计稿画板实际宽高 得到比例最终缩放页面
+     *
+     * 如果是同比例，比如12:9的尺寸比例，不管分辨率多大，都是能完全适应且不会被拉伸
+     * 如果不是在同一比例，简单来就像图片改变了比例就会被拉升
+     *
+     * 具体大小可自行设置，下面这句话也可以不要，修改style.css样式也可以，方法很多
+     *
+     */
+    document.getElementsByClassName('container-box')[0].style.transform = `
+       scaleX(${1})
+        scaleY(${1})`
+
+    /**
+     *
+     * 窗口发生改变自动刷新页面
+     * 这样做不太友好，一般做法当前页面大小发生改变去重新加载echarts对象
+     * 最好自行修改一下，当然。不要也可以，不会影响功能使用
+     *
+     */
+    window.onresize = () => location.reload()
+    this.getWebSocket()
+    this.changeLeftBtnStyle()
   },
   beforeDestroy() {
     this.$Socket.close()
@@ -105,6 +127,10 @@ export default {
   methods: {
     getWebSocket() {
       getWebSocket().then()
+    },
+    changeLeftBtnStyle(a) {
+      this.leftBtnColor = ['rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)']
+      this.leftBtnColor[a] = '#ffde00'
     }
   }
 
@@ -188,17 +214,29 @@ export default {
     width: 46%;
     height: 98%;
     .center-top {
-      margin: 0 50px;
-      height: 40%;
-      //border: 1px solid #000000;
-      background-image: url("../assets/images/center-box-bg.png");
+      //margin: 0 50px;
+      margin-right: 20px;
+      height: 16%;
+      margin-bottom: 20px;
+      background-image: url("../assets/images/center-top-box-bgc.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+    .center-center {
+      height: 16%;
+      margin-bottom: 20px;
+      margin-right: 20px;
+      background-image: url("../assets/images/center-center-box-bgc.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
-    .center-center,
     .center-bottom {
-      height: 25%;
-      //border: 1px solid #000000;
+      height: 16%;
+      margin-bottom: 20px;
+      margin-right: 20px;
+      background-image: url("../assets/images/center-bottom-box-bgc.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
     }
   }
 
diff --git a/src/views/NewMainPageComponents/RightTop.vue b/src/views/NewMainPageComponents/RightTop.vue
index 0d6c9d38b59944d6c1e0e14956d6772eb637db4b..b6d86a5ddd27272886eca2b73751984964f637a2 100644
--- a/src/views/NewMainPageComponents/RightTop.vue
+++ b/src/views/NewMainPageComponents/RightTop.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
     <!--右上-->
-    <div style="height: 30px;font-size: 16px;color: white;line-height: 30px;padding-left: 15px;position: relative">
+    <div style="height: 30px;font-size: 16px;line-height: 30px;padding-left: 15px;position: relative">
       数据统计
-      <div style="position: absolute;width: 150px;height: 20px;border: 1px solid #ffffff;right: 10px;bottom: -28px;font-size: 0">
-        <div style="display: inline-block;height: 19px;width: 49px;border-right: 1px solid #ffffff;font-size: 8px;text-align: center;line-height: 19px">
+      <div style="position: absolute;width: 150px;height: 20px;border: 1px solid rgb(0, 240, 255);right: 10px;bottom: -28px;font-size: 0">
+        <div class="btnone btn" :style="{color: leftBtnColor[0]}" @click="changeLeftBtnStyle(0)">
           以周
         </div>
-        <div style="display: inline-block;height: 19px;width: 49px;border-right: 1px solid #ffffff;font-size: 8px;text-align: center;line-height: 19px">
+        <div class="btnone btn" :style="{color: leftBtnColor[1]}" @click="changeLeftBtnStyle(1)">
           以月
         </div>
-        <div style="display: inline-block;height: 19px;width: 49px;font-size: 8px;text-align: center;line-height: 19px">
+        <div class="btn" :style="{color: leftBtnColor[2]}" @click="changeLeftBtnStyle(2)">
           指定
         </div>
       </div>
@@ -23,6 +23,11 @@
 import * as echarts from 'echarts'
 export default {
   name: 'RightTop',
+  data() {
+    return {
+      leftBtnColor: ['#ffde00', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)']
+    }
+  },
   computed: {
     rightTop() {
       return this.$store.state.dataPageData.rightTop
@@ -49,6 +54,10 @@ export default {
     this.initCharts(this.rightTop)
   },
   methods: {
+    changeLeftBtnStyle(a) {
+      this.leftBtnColor = ['rgb(0, 240, 255)', 'rgb(0, 240, 255)', 'rgb(0, 240, 255)']
+      this.leftBtnColor[a] = '#ffde00'
+    },
     initCharts(rightTop) {
       const chartDom = document.getElementById('rightTop')
       const myChart = echarts.init(chartDom)
@@ -196,6 +205,24 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="less">
+.btnone{
+  border-right: 1px solid rgb(0, 240, 255)
+}
+.btn:hover {
+  color: #ffde00;
+}
+.btn{
+  display: inline-block
+;
+  height: 19px
+;
+  width: 49px
+;
+  font-size: 8px
+;
+  text-align: center
+;
+  line-height: 19px
+}
 </style>