<template>
|
<div class="navMenuBox">
|
<div class="navList" @click="setMenuListClick" v-if="showMeuFLag">
|
<img class="menuImg" :src="imgMenuUrl" />
|
</div>
|
<div class="menuliststyle" @click="showMeuFLag = true" :class="{ menulist_active: !showMeuFLag }"
|
v-if="!showMeuFLag">
|
<div class="menubtn" @click.stop="setMenuClick(item)" v-for="(item, index) in menuOption" :key="index">
|
<img class="bhImg" :src="require('../assets/img/menu/' + item.imgUrl)" />
|
<span>{{ item.name }}</span>
|
</div>
|
</div>
|
<div class="menutools" v-if="showMeuFLag">
|
<div class="measureTool" @click="setMapMenuClick(item)" :title="item.name"
|
v-for="(item, index) in menuChildrenOption" :key="index">
|
<img class="measureImg" :src="require('../assets/img/menu/' + item.imgUrl)" />
|
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, reactive, defineProps, defineEmits, watch } from "vue";
|
import mapMenuData from '../assets/js/mapMenuData.js';
|
import mapMenuTools from '../assets/js/mapMenuTools.js'
|
const menuOption = ref([]);
|
const imgMenuUrl = ref(null);
|
const showMeuFLag = ref(true);
|
const menuChildrenOption = ref([])
|
const setMenuStart = () => {
|
menuOption.value = mapMenuData.menuData;
|
|
setMenuIamgeUrl(menuOption.value[0])
|
setMenuChildren(menuOption.value[0])
|
}
|
const setMenuListClick = () => {
|
showMeuFLag.value = !showMeuFLag.value;
|
}
|
const setMenuClick = (res) => {
|
showMeuFLag.value = !showMeuFLag.value;
|
setMenuIamgeUrl(res)
|
if (res.children) {
|
setMenuChildren(res)
|
}
|
}
|
const setMenuIamgeUrl = (res) => {
|
imgMenuUrl.value = config.menuImgUrl + res.imgUrl;
|
}
|
const setMapMenuClick = (res) => {
|
mapMenuTools.Init(res);
|
}
|
|
const setMenuChildren = (res) => {
|
menuChildrenOption.value = res.children;
|
}
|
|
|
|
|
onMounted(() => {
|
setMenuStart();
|
})
|
|
</script>
|
|
<style scoped lang="less">
|
.navMenuBox {
|
position: absolute;
|
left: 15px;
|
bottom: 30px;
|
z-index: 40;
|
display: flex;
|
|
.navList {
|
width: 60px;
|
height: 60px;
|
background: url('../assets/img/menu/rightCircle.png') no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.menuImg {
|
width: 32px;
|
height: 32px;
|
}
|
}
|
|
.navList:hover {
|
background: url('../assets/img/menu/rightCircle-y.png') no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.menuliststyle {
|
transition: all 0.15s linear;
|
overflow: hidden;
|
z-index: 40;
|
position: relative;
|
display: flex;
|
|
.menubtn {
|
width: 50px;
|
height: 50px;
|
margin: 5px;
|
cursor: pointer;
|
|
background-image: url("../assets/img/menu/menuBg.png");
|
background-size: contain;
|
border-radius: 5px;
|
overflow: hidden;
|
color: #fff;
|
}
|
|
.menubtn:hover img {
|
margin-top: -50px;
|
opacity: 0;
|
}
|
|
.menubtn:hover span {
|
margin-top: -5px;
|
}
|
|
.menubtn:hover {
|
box-shadow: 0px 0px 5px 2px rgba(0, 168, 255, 0.16) inset;
|
}
|
|
.menubtn span {
|
display: block;
|
width: 50px;
|
text-align: center;
|
transition: all 0.2s linear;
|
}
|
|
.menubtn img {
|
width: 32px;
|
height: 32px;
|
margin: 9px;
|
transition: all 0.2s linear;
|
}
|
}
|
|
.menulist_active {
|
border-image-source: radial-gradient(59% 79%,
|
transparent 0px,
|
transparent 100%,
|
cyan 100%);
|
border-image-slice: 1;
|
border-width: 1px;
|
border-style: solid;
|
border-image-outset: 0;
|
background-image: url("../assets/img/menu/listbg.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 300px;
|
padding: 10px;
|
}
|
|
.menutools {
|
box-shadow: 0px 0px 10px rgba(101, 180, 253, 0.8) inset;
|
background-color: rgba(5, 39, 126, 0.7);
|
padding: 10px;
|
margin-left: 10px;
|
border-radius: 5px;
|
|
.measureTool {
|
border: 1px solid #999;
|
border-radius: 5px;
|
float: left;
|
width: 40px;
|
height: 40px;
|
margin-left: 10px;
|
|
.measureImg {
|
width: 30px;
|
height: 30px;
|
margin: 5px;
|
}
|
}
|
|
.measureTool:hover {
|
transform: scale(1.1);
|
}
|
}
|
|
}
|
</style>
|
