|
@@ -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;
|