From 47927db9c21da9f153a6fec8b8df638f3757481e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AD=A5=E5=B1=A5=E4=B8=8D=E5=81=9C?= <1873501479@qq.com>
Date: Sun, 27 Mar 2022 19:23:23 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86index.css?=
 =?UTF-8?q?=E5=92=8CMainPage.vue,=E7=BB=99=E5=B7=A6=E4=B8=8A=E8=A7=92?=
 =?UTF-8?q?=E5=9B=9B=E4=B8=AA=E6=8C=89=E9=92=AE=E5=92=8C=E4=B8=AD=E9=97=B4?=
 =?UTF-8?q?=E4=B8=89=E4=B8=AA=E6=8C=89=E9=92=AE=E6=B7=BB=E5=8A=A0=E4=BA=86?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=EF=BC=8C=E6=82=AC=E6=B5=AE=EF=BC=8C=E6=BF=80?=
 =?UTF-8?q?=E6=B4=BB=E6=95=88=E6=9E=9C=E4=BB=A5=E5=8F=8A=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=BA=86=E9=83=A8=E5=88=86=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css |  10 ++--
 src/views/MainPage.vue   | 120 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 110 insertions(+), 20 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 6e22272..a2ecdfc 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 {
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
index 90d749e..6d9a512 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,72 @@ 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{
+  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;
+}
+</style>
+
-- 
Gitee


From 7ba409df06805f2564cccdf4603a50694ea1cf64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AD=A5=E5=B1=A5=E4=B8=8D=E5=81=9C?= <1873501479@qq.com>
Date: Mon, 28 Mar 2022 16:03:12 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86index.css?=
 =?UTF-8?q?=E5=92=8CMainPage.vue,=E5=8F=B3=E4=B8=8A=E8=A7=92=E5=9B=9B?=
 =?UTF-8?q?=E4=B8=AA=E6=8C=89=E9=92=AE=E6=B7=BB=E5=8A=A0=E4=BA=86=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E6=95=88=E6=9E=9C=E4=BB=A5=E5=8F=8A=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=BA=86=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css |  2 +-
 src/router/index.js      |  2 +-
 src/views/MainPage.vue   | 18 +++++++++++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index a2ecdfc..fe31471 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -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/router/index.js b/src/router/index.js
index c4ee127..c3b0bd4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,7 +11,7 @@ const routes = [
     path: '/MainPage',
     component: () => import('../views/MainPage'),
     meta: {
-      requireAuth: true // 该路由项需要权限校验
+      requireAuth: false // 该路由项需要权限校验
     }
   },
   {
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
index 6d9a512..282f4af 100644
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@@ -1242,7 +1242,11 @@ export default {
 #item9dd0ccd0-7801-11ec-94a6-35c656a9d7d1,
 #item9db74920-78f8-11ec-a3e6-b9940a698494,
 #itemcf541760-78f8-11ec-a3e6-b9940a698494,
-#item3d7c9f50-78f9-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;
@@ -1301,5 +1305,17 @@ export default {
 #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>
 
-- 
Gitee


From e18788e64a3c4c68543ce876f0c53eec64e5524d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AD=A5=E5=B1=A5=E4=B8=8D=E5=81=9C?= <1873501479@qq.com>
Date: Mon, 28 Mar 2022 16:04:34 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86index.css?=
 =?UTF-8?q?=E5=92=8CMainPage.vue,=E5=8F=B3=E4=B8=8A=E8=A7=92=E5=9B=9B?=
 =?UTF-8?q?=E4=B8=AA=E6=8C=89=E9=92=AE=E6=B7=BB=E5=8A=A0=E4=BA=86=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E6=95=88=E6=9E=9C=E4=BB=A5=E5=8F=8A=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=BA=86=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index c3b0bd4..c4ee127 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,7 +11,7 @@ const routes = [
     path: '/MainPage',
     component: () => import('../views/MainPage'),
     meta: {
-      requireAuth: false // 该路由项需要权限校验
+      requireAuth: true // 该路由项需要权限校验
     }
   },
   {
-- 
Gitee