Browse Source

2023-03-14 update

1. fix menu
moccus 2 years ago
parent
commit
d1c73d9149

BIN
src/assets/img/menu/unlock.png


BIN
src/assets/img/menu/unvoice.png


BIN
src/assets/img/menu/webMisc.png


+ 101 - 9
src/views/Menu.vue

@@ -1,18 +1,28 @@
 <template>
   <div class="menu">
     <div
-      :class="item.id === 7 ? !lockMaskDisplay?'menu-item' :'menu-onItem': item.id === current?'menu-onItem': 'menu-item'"
+      :class="showmenuSty(item)"
       v-for="(item, index) in menuList"
       :key="index"
       @click="handleChange(item.id)"
       @mouseleave="leave(item.id)"
       @mouseenter="hovers(item.id)"
     >
-      <img
+    <!-- :src="item.src" -->
+    <el-tooltip
+        class="box-item"
+        effect="dark"
+        placement="right"
+        :content="showTitle(item.id)"
+    >
+        <img
         :class="item.id !== 7 ? 'muen-icon' : 'muen-lock'"
-        :src="item.src"
+        :src="showIcon(item)"
+        
         alt=""
       />
+    </el-tooltip>
+      
       <div v-if="item.id === 3" class="num">{{ temperatureNum }}</div>
     </div>
     <div
@@ -49,11 +59,13 @@ import matrix from "../assets/img/menu/matrix.png";
 import booster from "../assets/img/menu/booster.png";
 import agc from "../assets/img/menu/agc.png";
 import search from "../assets/img/menu/search.png";
+import webMisc from "../assets/img/menu/webMisc.png";
 import lock from "../assets/img/menu/lock.png";
+import unlock from "../assets/img/menu/unlock.png";
 import voice from "../assets/img/menu/voice.png";
+import unvoice from "../assets/img/menu/unvoice.png";
 import screenshot from "../assets/img/menu/screenshot.png";
 import set from "../assets/img/menu/set.png";
-
 export default {
   props: {
     temperatureNum: {
@@ -64,6 +76,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    voiceCV: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     // AGCDetails,
@@ -87,10 +103,10 @@ export default {
           id: 3,
           src: matrix,
         },
-        // {
-        //   id: 4,
-        //   src: booster,
-        // },
+        {
+          id: 4,
+          src: booster,
+        },
         {
           id: 5,
           src: agc,
@@ -102,10 +118,12 @@ export default {
         {
           id: 7,
           src: lock,
+          src1: unlock,
         },
         {
           id: 8,
           src: voice,
+          src1: unvoice,
         },
         {
           id: 9,
@@ -119,6 +137,80 @@ export default {
     };
   },
   methods: {
+    showTitle(id) {
+        let str = ''
+        if (id === 1) {
+            str = '首页'
+        } else if(id === 2) {
+            str = '矩阵'
+        } else if(id === 3) {
+            str = '温度矩阵'
+        } else if(id === 4) {
+            str = '升压站'
+        } else if(id === 5) {
+            str = 'AGC'
+        } else if(id === 7) {
+          str = '锁屏'
+        } else if(id === 8) {
+          str = '声音'
+        } else if(id === 9) {
+          str = '截图'
+        } else if(id === 10) {
+          str = '设置'
+        }
+        return str
+    },
+    showmenuSty(item) {
+        let str = ''
+        if (item.id === this.current) {
+            str = 'menu-onItem'
+            if (item.id === 7) {
+                if (!this.lockMaskDisplay) {
+                    str = 'menu-item'
+                } else {
+                    str = 'menu-onItem'
+                }
+            }
+            if (item.id === 8) {
+                if (!this.voiceCV) {
+                    str = 'menu-item'
+                } else {
+                    str = 'menu-onItem'
+                }
+            }
+        } else {
+            str = 'menu-item'
+        }
+        // item.id === 8 ? !lockMaskDisplay?'menu-item' :'menu-onItem': item.id === current?'menu-onItem': 'menu-item'
+        return str
+    },
+    showIcon(item) {
+        let show = null
+        if (item.id === this.current) {
+            if (item.id === 7) {
+                if (this.lockMaskDisplay) {
+                    show = item.src
+                } else {
+                    show = item.src1
+                }
+            } else if (item.id === 8) {
+                if (this.voiceCV) {
+                    show = item.src1
+                } else {
+                    show = item.src
+                }
+            } else {
+                show = item.src
+            }
+        } else {
+            if (item.id === 7) {
+                show = item.src1
+            } else {
+                show = item.src
+            }
+        }
+        return show
+    },
     handleChange(val) {
       if (!this.lockMaskDisplay || val === 7) {
         if(val === 9){
@@ -201,7 +293,7 @@ export default {
   //   height: 100px;
   background-color: #242424;
   position: absolute;
-  top: 200px;
+  top: 240px;
   left: 37px;
   display: flex;
   flex-direction: column;