diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 6e22272c568b229f5b7ac597abcbfde96698a40a..fe3147133c4a3466f6de5798c807ebf5e3e25e0a 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -52,8 +52,8 @@ body {
   position: absolute;
   left: 790px;
   top: 89px;
-  width: 350px;
-  height: 50px;
+  width: 370px;/*原来350px*/
+  height: 70px;/*原来50px*/
   z-index: 7;
 }
 #item9db74920-78f8-11ec-a3e6-b9940a698494 {
@@ -143,7 +143,7 @@ body {
   left: 25px;
   top: 90px;
   width: 1895px;
-  height: 50px;
+  height: 70px;/*原来50px*/
   z-index: 6;
 }
 #item30dbd420-7807-11ec-94a6-35c656a9d7d1 {
@@ -151,8 +151,8 @@ body {
   position: absolute;
   left: 0px;
   top: 0px;
-  width: 700px;
-  height: 50px;
+  width: 720px;/*原来700px*/
+  height: 70px;/*原来50px*/
   z-index: 2;
 }
 #item9c5804f0-7800-11ec-94a6-35c656a9d7d1 {
@@ -269,7 +269,7 @@ body {
   left: 1175px;
   top: 0px;
   width: 720px;
-  height: 50px;
+  height: 70px;
   z-index: 1;
 }
 #itemdc844880-7801-11ec-94a6-35c656a9d7d1 {
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
index 90d749e4da5d59d98304e7cbb5040bebf7fe5d2a..282f4af1b684db00f5c7b571e592d56638cbbff1 100644
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@@ -26,7 +26,7 @@
     <!-- 中间菜单 -->
     <div id="item53aecd00-78d3-11ec-9368-f3f928853655">
       <!-- 中一 -->
-      <div id="item9db74920-78f8-11ec-a3e6-b9940a698494">
+      <div id="item9db74920-78f8-11ec-a3e6-b9940a698494" @click="changeCentercolor(0)">
         <!-- 中一文字 -->
         <div
           id="item48d25850-78f8-11ec-a3e6-b9940a698494"
@@ -54,7 +54,8 @@
           :style="{
             width: '110px',
             height: '50px',
-            background: 'rgba(11, 29, 35, 0.54)',
+            //background: 'rgba(11, 29, 35, 0.54)',
+            background: centercolor[0],
           }"
         />
         <!-- 中一背景 /-->
@@ -62,7 +63,7 @@
       <!-- 中一  /-->
 
       <!-- 中二  -->
-      <div id="itemcf541760-78f8-11ec-a3e6-b9940a698494">
+      <div id="itemcf541760-78f8-11ec-a3e6-b9940a698494" @click="changeCentercolor(1)">
         <!-- 中二文字 -->
         <div
           id="itemac98cb80-78f8-11ec-a3e6-b9940a698494"
@@ -90,7 +91,8 @@
           :style="{
             width: '110px',
             height: '50px',
-            background: 'rgba(11, 29, 35, 0.54)',
+            //background: 'rgba(11, 29, 35, 0.54)',
+            background: centercolor[1],
           }"
         />
         <!-- 中二背景  /-->
@@ -98,7 +100,7 @@
       <!-- 中二 /-->
 
       <!-- 中三  -->
-      <div id="item3d7c9f50-78f9-11ec-a3e6-b9940a698494">
+      <div id="item3d7c9f50-78f9-11ec-a3e6-b9940a698494" @click="changeCentercolor(2)">
         <!-- 中三文字  -->
         <div
           id="item1f8480d0-78f9-11ec-a3e6-b9940a698494"
@@ -126,7 +128,8 @@
           :style="{
             width: '110px',
             height: '50px',
-            background: 'rgba(11, 29, 35, 0.54)',
+            //background: 'rgba(11, 29, 35, 0.54)',
+            background: centercolor[2],
           }"
         />
         <!-- 中三背景 /-->
@@ -140,7 +143,7 @@
       <!-- 左侧菜单 -->
       <div id="item30dbd420-7807-11ec-94a6-35c656a9d7d1">
         <!-- 左一 -->
-        <div id="item9c5804f0-7800-11ec-94a6-35c656a9d7d1">
+        <div id="item9c5804f0-7800-11ec-94a6-35c656a9d7d1" @click="changeLeftcolor(0)">
           <!-- 左一文字      -->
           <div
             id="item64990070-77fe-11ec-94a6-35c656a9d7d1"
@@ -168,7 +171,8 @@
             :style="{
               width: '160px',
               height: '50px',
-              background: 'rgba(17, 24, 54, 0.8)',
+              //background:'#122e59',
+              background: leftcolor[0],
             }"
           />
           <!-- 左一背景    /-->
@@ -176,7 +180,7 @@
         <!-- 左一 /-->
 
         <!-- 左二 -->
-        <div id="item72535600-7800-11ec-94a6-35c656a9d7d1">
+        <div id="item72535600-7800-11ec-94a6-35c656a9d7d1" @click="changeLeftcolor(1)">
           <!-- 左二文字      -->
           <div
             id="itemb794acf0-7800-11ec-94a6-35c656a9d7d1"
@@ -204,7 +208,8 @@
             :style="{
               width: '160px',
               height: '50px',
-              background: 'rgba(17, 24, 54, 0.8)',
+              //background:'#122e59',
+              background: leftcolor[1],
             }"
           />
           <!-- 左二背景      /-->
@@ -212,7 +217,7 @@
         <!-- 左二  /-->
 
         <!-- 左三  -->
-        <div id="item60b6dce0-7801-11ec-94a6-35c656a9d7d1">
+        <div id="item60b6dce0-7801-11ec-94a6-35c656a9d7d1" @click="changeLeftcolor(2)">
           <!-- 左三文字     -->
           <div
             id="item596eb250-7801-11ec-94a6-35c656a9d7d1"
@@ -240,7 +245,8 @@
             :style="{
               width: '160px',
               height: '50px',
-              background: 'rgba(17, 24, 54, 0.8)',
+              //background:'#122e59',
+              background: leftcolor[2],
             }"
           />
           <!-- 左三背景   /-->
@@ -248,7 +254,7 @@
         <!-- 左三  /-->
 
         <!-- 左四  -->
-        <div id="item9dd0ccd0-7801-11ec-94a6-35c656a9d7d1">
+        <div id="item9dd0ccd0-7801-11ec-94a6-35c656a9d7d1" @click="changeLeftcolor(3)">
           <!-- 左四文字     -->
           <div
             id="item96887b30-7801-11ec-94a6-35c656a9d7d1"
@@ -276,7 +282,8 @@
             :style="{
               width: '160px',
               height: '50px',
-              background: 'rgba(17, 24, 54, 0.8)',
+              //background:'#122e59',
+              background: leftcolor[3],
             }"
           />
           <!-- 左四背景      /-->
@@ -500,6 +507,8 @@ export default {
   },
   data() {
     return {
+      centercolor: ['#122e59', '#40b4fc', '#122e59'],
+      leftcolor: ['#40b4fc', '#122e59', '#122e59', '#122e59'],
       StatusCarditemfd1cd9c1_7925_11ec_8bea_d1ecd897e10eData: {
         responseData: []
       }
@@ -602,6 +611,19 @@ export default {
     this.$Socket.close()
   },
   methods: {
+    // 中间三个按钮的变色方法
+    changeCentercolor(a) {
+      console.log(a)
+      this.centercolor = ['#122e59', '#122e59', '#122e59']
+      this.centercolor[a] = '#40b4fc'
+      console.log(this.centercolor[a])
+    },
+    changeLeftcolor(a) {
+      console.log(a)
+      this.leftcolor = ['#122e59', '#122e59', '#122e59', '#122e59']
+      this.leftcolor[a] = '#40b4fc'
+      console.log(this.leftcolor[a])
+    },
     // 页面标题
     pageTitle() {
       // 基于准备好的dom，初始化echarts实例
@@ -1212,4 +1234,88 @@ export default {
 }
 </script>
 
-<style></style>
+<style scoped>
+/*1.左边四个按钮和中间三个按钮的点击效果和样式*/
+#item9c5804f0-7800-11ec-94a6-35c656a9d7d1,
+#item72535600-7800-11ec-94a6-35c656a9d7d1,
+#item60b6dce0-7801-11ec-94a6-35c656a9d7d1,
+#item9dd0ccd0-7801-11ec-94a6-35c656a9d7d1,
+#item9db74920-78f8-11ec-a3e6-b9940a698494,
+#itemcf541760-78f8-11ec-a3e6-b9940a698494,
+#item3d7c9f50-78f9-11ec-a3e6-b9940a698494,
+#itemdc844880-7801-11ec-94a6-35c656a9d7d1,
+#item4d335440-7802-11ec-94a6-35c656a9d7d1,
+#item166861d0-7802-11ec-94a6-35c656a9d7d1,
+#itemccafd340-7804-11ec-94a6-35c656a9d7d1{
+  box-shadow: 5px 5px 4px #409eff;
+  transform: scale(1);
+  border-radius: 10px;
+}
+#item9c5804f0-7800-11ec-94a6-35c656a9d7d1:active{
+  transform: scale(0.95);
+}
+#item72535600-7800-11ec-94a6-35c656a9d7d1:active{
+  transform: scale(0.95);
+}
+#item60b6dce0-7801-11ec-94a6-35c656a9d7d1:active{
+  transform: scale(0.95);
+}
+#item9dd0ccd0-7801-11ec-94a6-35c656a9d7d1:active{
+  transform: scale(0.95);
+}
+#item9db74920-78f8-11ec-a3e6-b9940a698494:active{
+  transform: scale(0.95);
+}
+#itemcf541760-78f8-11ec-a3e6-b9940a698494:active{
+  transform: scale(0.95);
+}
+#item3d7c9f50-78f9-11ec-a3e6-b9940a698494:active{
+  transform: scale(0.95);
+}
+
+/*2.左边四个按钮和中间三个按钮的圆角样式*/
+#item94118b60-778b-11ec-a975-8f9b0d833e75,
+#item9822a6d0-778b-11ec-a975-8f9b0d833e75,
+#item98eaffe0-778b-11ec-a975-8f9b0d833e75,
+#item482cc950-78d3-11ec-9368-f3f928853655,
+#item4adb2070-78d3-11ec-9368-f3f928853655,
+#item4ee4c1d0-78d3-11ec-9368-f3f928853655{
+  border-radius: 10px;
+}
+
+/*左边四个按钮和中间三个按钮的鼠标悬浮样式*/
+#item64990070-77fe-11ec-94a6-35c656a9d7d1:hover{
+  color:dodgerblue !important;
+}
+#itemb794acf0-7800-11ec-94a6-35c656a9d7d1:hover{
+  color:dodgerblue !important;
+}
+#item596eb250-7801-11ec-94a6-35c656a9d7d1:hover{
+  color:dodgerblue !important;
+}
+#item96887b30-7801-11ec-94a6-35c656a9d7d1:hover{
+  color:dodgerblue !important;
+}
+#item48d25850-78f8-11ec-a3e6-b9940a698494:hover{
+  color:dodgerblue !important;
+}
+#itemac98cb80-78f8-11ec-a3e6-b9940a698494:hover{
+  color:dodgerblue !important;
+}
+#item1f8480d0-78f9-11ec-a3e6-b9940a698494:hover{
+  color:dodgerblue !important;
+}
+#itemd388c8a0-7801-11ec-94a6-35c656a9d7d1:hover{
+  color:dodgerblue !important;
+}
+#item377c8d60-7802-11ec-94a6-35c656a9d7d1:hover{
+  color:dodgerblue !important;
+}
+#itemf61f0050-7801-11ec-94a6-35c656a9d7d1:hover{
+  color:dodgerblue !important;
+}
+#itemc26b58a0-7804-11ec-94a6-35c656a9d7d1:hover{
+  color:dodgerblue !important;
+}
+</style>
+