<template>
|
<div class="top_btn">
|
<div>
|
<ul>
|
<li
|
class="firstMenu"
|
v-for="(item,i) in menuOptions"
|
@mousemove="setFirstLevlMenu(item,1)"
|
@mouseleave="setFirstLevlMenu(item,2)"
|
>
|
<div
|
class="menuDiv"
|
:title="item.name"
|
:class="{ 'border_left' : i == 0, 'border_right' :i == (menuOptions.length -1)}"
|
@click="setMenuClick(item)"
|
>
|
<div
|
class="menuFirstImage"
|
:class="item.class"
|
>
|
</div>
|
</div>
|
<ul
|
@mouseleave="setFirstLevlMenu(item,2)"
|
v-show="item.children &&menuFlag == item.id"
|
>
|
<li v-for="(res,j) in item.children">
|
<div
|
class="tmenuDiv"
|
:title="res.name"
|
@click="setMenuClick(res)"
|
>
|
<div class="tmenuImg">
|
<div
|
class="menuFirstImage"
|
:class="res.class"
|
>
|
|
</div>
|
</div>
|
<div class="tmenulabel">
|
{{ res.name }}
|
</div>
|
</div>
|
</li>
|
|
</ul>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import menuData from "@/assets/js/Map/menuData.js";
|
const menuFlag = ref(null);
|
const menuOptions = ref([]);
|
const setFirstLevlMenu = (res, flag) => {
|
if (flag == 1) {
|
menuFlag.value = res.id;
|
} else {
|
menuFlag.value = null;
|
}
|
};
|
const setMenuClick = (res) => {
|
if (res.children && res.children.length > 0) {
|
return;
|
}
|
menuFlag.value = null;
|
};
|
onMounted(() => {
|
menuOptions.value = menuData.topMenu;
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.top_btn {
|
position: absolute;
|
top: 23px;
|
right: 25px;
|
display: flex;
|
cursor: pointer;
|
|
.menuDiv {
|
width: 72px;
|
padding: 20px 0px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background: rgba(1, 10, 28, 1);
|
border-top: 1px solid gray;
|
border-bottom: 1px solid gray;
|
}
|
.border_left {
|
border-radius: 5px 0px 0px 5px;
|
border-left: 1px solid gray;
|
}
|
.border_right {
|
border-radius: 0px 5px 5px 0px;
|
border-right: 1px solid gray;
|
}
|
.tmenuDiv {
|
width: 70px;
|
padding: 10px 0px;
|
border-right: 1px solid gray;
|
border-left: 1px solid gray;
|
border-bottom: 1px solid gray;
|
background: rgba(1, 10, 28, 1);
|
}
|
.tmenuDiv :hover {
|
color: #409eff;
|
}
|
.tmenuImg {
|
width: 100%;
|
|
display: flex;
|
justify-content: center;
|
}
|
.tmenulabel {
|
width: 100%;
|
|
display: flex;
|
justify-content: center;
|
color: #fff;
|
font-size: 12px;
|
margin-top: 2px;
|
}
|
.firstMenu {
|
float: left;
|
}
|
.menuScond {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
.menuFirstImage {
|
width: 15px;
|
height: 15px;
|
}
|
.twoMenu_imge21 {
|
background: url("../assets/img/cd.png") no-repeat 100% 100%;
|
}
|
}
|
</style>
|
