121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import Icon3D from "../assets/menu_icon/Icon3D.vue";
|
|
import IconAlert from "../assets/menu_icon/IconAlert.vue";
|
|
import IconChart from "../assets/menu_icon/IconChart.vue";
|
|
import IconRealtime from "../assets/menu_icon/IconRealtime.vue";
|
|
import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue";
|
|
const props = defineProps(['value'])
|
|
const emit = defineEmits(["change"]);
|
|
const handleClick = (page) => {
|
|
emit("change", page);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="nav-menu">
|
|
<ul class="flex-list">
|
|
<li>
|
|
<button type="button" @click="(e) => handleClick('3d')">
|
|
<span :style="{ color: value == '3d' ? '#b1daff' : '#339dff' }">三维界面</span>
|
|
<Icon3D class="nav-icon" :color="value == '3d' ? '#b1daff' : '#339dff'" />
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" @click="(e) => handleClick('data')">
|
|
<span :style="{ color: value == 'data' ? '#b1daff' : '#339dff' }">数据界面</span>
|
|
<IconChart class="nav-icon" :color="value == 'data' ? '#b1daff' : '#339dff'" />
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" @click="(e) => handleClick('realtime')">
|
|
<span :style="{ color: value == 'realtime' ? '#b1daff' : '#339dff' }">实时数据</span>
|
|
<IconRealtime class="nav-icon" :color="value == 'realtime' ? '#b1daff' : '#339dff'" />
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" @click="(e) => handleClick('alert')">
|
|
<span :style="{ color: value == 'alert' ? '#b1daff' : '#339dff' }">报警列表</span>
|
|
<IconAlert class="nav-icon" :color="value == 'alert' ? '#b1daff' : '#339dff'" />
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" @click="(e) => handleClick('announcement')">
|
|
<span style="">公告页面</span>
|
|
<IconAnnounce class="nav-icon" />
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.nav-menu {
|
|
width: 279px;
|
|
height: 710px;
|
|
background: url(../assets/left-bg.png) 100% / cover no-repeat;
|
|
display: grid;
|
|
place-items: center;
|
|
position: relative;
|
|
top: 72px;
|
|
left: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* :fullscreen .nav-menu {
|
|
top: 25%;
|
|
} */
|
|
|
|
.flex-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 26px;
|
|
}
|
|
|
|
button {
|
|
appearance: none;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-menu button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-menu button>span {
|
|
font-size: 32px;
|
|
letter-spacing: 3px;
|
|
line-height: 45px;
|
|
color: #339dff;
|
|
text-shadow: 0 5px 1px #001124;
|
|
/* text-shadow: 0 5px 1px #004969; */
|
|
}
|
|
|
|
.nav-menu button:hover>span {
|
|
color: #b1daff !important;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.nav-menu button:hover>.nav-icon #icon3d-g,
|
|
.nav-menu button:hover>.nav-icon #alert-rect,
|
|
.nav-menu button:hover>.nav-icon #alert-dot,
|
|
.nav-menu button:hover>.nav-icon #realtime-main,
|
|
.nav-menu button:hover>.nav-icon #announce-main,
|
|
.nav-menu button:hover>.nav-icon #chart-main {
|
|
fill: #b1daff !important;
|
|
}
|
|
</style>
|