<template>
|
<div class="botttomMenuBox">
|
<div class="bottomwrapper" @click="setMapMenuClick">
|
<div class="imgbox">
|
<img src="../assets/img/menu/chengshigengxin.png" />
|
</div>
|
<div class="textbox">
|
<span>历史影像 </span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, reactive, defineProps, defineEmits, watch } from "vue";
|
import store from "@/store";
|
import mapScreen from "../assets/js/mapScreen";
|
import historyLayer from "../assets/js/historyLayer";
|
const setMapMenuClick = () => {
|
if (mapScreen.isScreen) {
|
mapScreen.edit();
|
historyLayer.removeLeftMapLayer();
|
historyLayer.removeRightMapLayer();
|
store.state.showScreenFlag = true;
|
} else {
|
store.state.showScreenFlag = false;
|
mapScreen.Init();
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.botttomMenuBox {
|
width: 20px;
|
height: 30px;
|
z-index: 40;
|
position: absolute;
|
bottom: 130px;
|
left: 50%;
|
transform: trsnslate(-50%, 0%);
|
.bottomwrapper {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
cursor: pointer;
|
}
|
|
.imgbox {
|
width: 110px;
|
height: 90px;
|
background: url("../assets/img/menu/b1.png");
|
background-size: 100% 100%;
|
position: relative;
|
}
|
.imgbox:hover {
|
background-image: url("../assets/img/menu/h1.png");
|
}
|
|
.imgbox img {
|
width: 32px;
|
position: absolute;
|
top: 37%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
.textbox {
|
margin-top: 2px;
|
width: 100px;
|
height: 28px;
|
background-image: url("../assets/img/menu/textbg.png");
|
background-size: 100% 100%;
|
}
|
|
.textbox span {
|
text-align: center;
|
display: block;
|
font-size: 20px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 28px;
|
text-shadow: 0px 2px 2px rgba(32, 32, 32, 0.8);
|
}
|
}
|
</style>
|
