<template>
|
<div class="menuView">
|
<div class="menuButton" @click="setMenuClick('layer')">
|
<div class="menImg menuImg1"></div>
|
<div class="menuLabel">资产库</div>
|
</div>
|
<div class="eslider"></div>
|
<div class="menuButton" @click="setMenuClick('refresh')">
|
<div class="menImg menuImg2"></div>
|
<div class="menuLabel">刷新</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, computed, shallowRef } from 'vue';
|
import mapData from '../assets/js/mapData';
|
import { useStore } from 'vuex';
|
import mapMenu from '../assets/js/mapMenu';
|
const store = useStore();
|
const emit = defineEmits(['mapRefreash']);
|
const setMenuClick = item => {
|
switch (item) {
|
// 点击图层
|
case 'layer':
|
mapMenu.setMenuChange('layer');
|
break;
|
// 刷新页面
|
case 'refresh':
|
store.state.setLoadFlag = true;
|
mapData.init();
|
// emit('mapRefreash', 'mapRefreash');
|
break;
|
}
|
};
|
|
onMounted(() => {});
|
</script>
|
|
<style scoped lang="less">
|
.menuView {
|
position: absolute;
|
z-index: 40;
|
padding: 10px;
|
top: 20px;
|
right: 10px;
|
opacity: 1;
|
border-radius: 8px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
|
|
.menuButton {
|
font-size: 10px;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
|
.menuLabel {
|
width: 100%;
|
text-align: center;
|
}
|
|
.menImg {
|
width: 20px;
|
height: 18px;
|
}
|
|
.menuImg1 {
|
background: url('../assets/img/m1.png') no-repeat;
|
background-size: 100% 100%;
|
margin-left: 50%;
|
transform: translate(-50%, 0);
|
}
|
|
.menuImg2 {
|
background: url('../assets/img/m2.png') no-repeat;
|
background-size: 100% 100%;
|
margin-left: 50%;
|
transform: translate(-50%, 0);
|
}
|
}
|
|
.eslider {
|
height: 1px;
|
background: rgba(134, 147, 166, 1);
|
margin: 7px 0px;
|
}
|
}
|
</style>
|
