2022 3/4修改

ui/src/views/monitor/elec/elecindex.vue

@@ -28,22 +28,20 @@
       <div class="d-flex jc-between px-2">
         <div class="d-flex" style="width: 40%">
           <div
-            class="react-right ml-4"
-            style="width: 3.25rem; text-align: left;background-color: #0f1325;"
-            @click="changeDashboard(1)"
-          >
+            class="react-right ml-4" v-bind:style="{backgroundColor:bgCol1,width:wh,textAlign:tAlign}"
+            @click="changeDashboard(1)">
             <span class="react-before"></span>
-            <span class="text">数据监控</span>
+            <span class="text" id="aa">数据监控</span>
           </div>
-          <div class="react-right ml-3" style="background-color: #0f1325;"
+          <div class="react-right ml-3" v-bind:style="{backgroundColor:bgCol2,width:wh,textAlign:tAlign}"
                @click="changeDashboard(2)">
             <span class="text colorBlue"></span>
-            <span class="text">蒸汽平衡</span>
+            <span class="text" id="bb">蒸汽平衡</span>
           </div>
-          <div class="react-right ml-3" style="background-color: #0f1325;"
+          <div class="react-right ml-2" v-bind:style="{backgroundColor:bgCol3,width:wh,textAlign:tAlign}"
                @click="changeDashboard(3)">
             <span class="text colorBlue"></span>
-            <span class="text">全厂在线分析仪表</span>
+            <span class="text" id="cc">全厂在线分析仪表</span>
           </div>
         </div>
         <div style="width: 40%" class="d-flex">
@@ -169,7 +167,13 @@ export default {
       dateYear: null,
       dateWeek: null,
       weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
-      timer:null
+      timer:null,
+      bgCol1:"#0f1325",
+      bgCol2:"#0f1325",
+      bgCol3:"#0f1325",
+      bgCol0:"#0a84ff",
+      wh:"3.25rem",
+      tAlign:"left"
     };
   },
   components: {
@@ -186,6 +190,9 @@ export default {
     frontElecThree
   },
   mounted() {
+    if(this.dashboard===1){
+      this.bgCol1="#1a5cd7"
+    };
     this.timer = setInterval(()=>{
       const date= dayjs(new Date());
       this.dateDay = date.format('HH:mm:ss');
@@ -203,7 +210,6 @@ export default {
         this.loading = false;
       }, 500);
     },
-
     getScale() {
       let { width, height } = this;
       let wh = window.innerHeight / height;
@@ -241,18 +247,30 @@ export default {
     changeDashboard(val) {
       if (val === 1) {
         this.dashboard = 1
+        this.bgCol1="#1a5cd7";
+        this.bgCol2="#0f1325";
+        this.bgCol3="#0f1325";
       }else if (val === 2) {
-        this.dashboard = 2
+        this.dashboard = 2,
+        this.bgCol2="#1a5cd7";
+        this.bgCol1="#0f1325";
+        this.bgCol3="#0f1325";
       }else if (val === 3) {
-        this.dashboard = 3
+        this.dashboard = 3,
+        this.bgCol3="#1a5cd7";
+        this.bgCol1="#0f1325";
+        this.bgCol2="#0f1325";
       }
+
     },
     openNewWindow() {
       let routeData = this.$router.resolve({
         path: "/elecDashboard",
       });
       window.open('/cpms/index.html#/elecDashboard', '_blank');
-    }
+    },
+
+
   }
 };
 </script>
@@ -332,8 +350,8 @@ export default {
       transform: skewX(45deg);
 
       .react-before {
-        position: absolute;
-        left: -0.3125rem;
+        position: relative;
+        left: -1.3125rem;
         top: 0;
         height: 0.625rem;
         width: 0.625rem;
@@ -374,6 +392,18 @@ export default {
     }
   }
 }
+#aa{
+  position: absolute;
+  right: 100px;
+}
+#bb{
+  position: absolute;
+  right: 100px;
+}
+#cc{
+  position: absolute;
+  right: 80px;
+}
 .fs-xl {
   font-size: 0.14rem;
 }