132 lines
3.6 KiB
Vue
132 lines
3.6 KiB
Vue
<template>
|
|
<div class="window" :style="nowPosition">
|
|
<div class="base">
|
|
<div>{{LandMarkWindow.information.landTitle}}</div>
|
|
<div class="triangle"></div>
|
|
<div class="backimg" :style="nowImg">{{LandMarkWindow.information.landTitle}}</div>
|
|
</div>
|
|
<div class="closeBtn" @click="closeWindow">
|
|
<svg
|
|
t="1603334792546"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="1328"
|
|
width="20"
|
|
height="20"
|
|
>
|
|
<path
|
|
d="M568.922 508.232L868.29 208.807a39.139 39.139 0 0 0 0-55.145l-1.64-1.64a39.139 39.139 0 0 0-55.09 0l-299.367 299.82-299.425-299.934a39.139 39.139 0 0 0-55.088 0l-1.697 1.64a38.46 38.46 0 0 0 0 55.09l299.48 299.594-299.424 299.48a39.139 39.139 0 0 0 0 55.09l1.64 1.696a39.139 39.139 0 0 0 55.09 0l299.424-299.48L811.56 864.441a39.139 39.139 0 0 0 55.089 0l1.696-1.64a39.139 39.139 0 0 0 0-55.09l-299.48-299.537z"
|
|
p-id="1329"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<div class="changeButton" @click="judgment">{{LandMarkWindow.buttonText?'地点信息':'探索'}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { LandMarkWindowStore } from '/@/stores/LandMarkWindow';
|
|
import { LandMarkShowStore } from '/@/stores/LandMarkShow';
|
|
import { ref, watch } from 'vue';
|
|
|
|
const LandMarkWindow = LandMarkWindowStore();
|
|
const LandMarkShow = LandMarkShowStore();
|
|
|
|
const nowPosition = ref();
|
|
const nowImg = ref();
|
|
|
|
watch(() => LandMarkWindow.windowShow, (newValue, oldValue) => {
|
|
nowPosition.value = `bottom:${LandMarkWindow.windowPosition.bottom};left:${LandMarkWindow.windowPosition.left};display:${LandMarkWindow.windowShow?'block':'none'};`;
|
|
})
|
|
|
|
watch(() => LandMarkWindow.information.landImgUrl, (newValue, oldValue) => {
|
|
nowImg.value = `background-image: url('${LandMarkWindow.information.landImgUrl}1.webp');`;
|
|
})
|
|
|
|
watch(() => LandMarkWindow.windowPosition.left, (newValue, oldValue) => {
|
|
nowPosition.value = `bottom:${LandMarkWindow.windowPosition.bottom};left:${LandMarkWindow.windowPosition.left};display:${LandMarkWindow.windowShow?'block':'none'};`;
|
|
})
|
|
|
|
const closeWindow = () => {
|
|
LandMarkWindow.windowShow = false;
|
|
LandMarkWindow.hiddenWindow = true;
|
|
}
|
|
const flyToLandmark = () => {
|
|
LandMarkWindow.flyToLand = true;
|
|
}
|
|
const watchImg = () => {
|
|
LandMarkShow.boxShow = true;
|
|
LandMarkShow.information = LandMarkWindow.information;
|
|
}
|
|
const judgment = () => {
|
|
if(LandMarkWindow.buttonText){
|
|
watchImg()
|
|
}else{
|
|
flyToLandmark()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.window {
|
|
width: 300px;
|
|
height: 30px;
|
|
position: absolute;
|
|
display:none;
|
|
}
|
|
.base {
|
|
background: #FFFFA0;
|
|
height: 200px;
|
|
text-align: center;
|
|
}
|
|
.triangle {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 10px solid red;
|
|
border-right: 10px solid transparent;
|
|
border-left: 10px solid transparent;
|
|
position: absolute;
|
|
left: 140px;
|
|
bottom: -200px;
|
|
}
|
|
.backimg {
|
|
color: red;
|
|
text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5);
|
|
padding-top: 4px;
|
|
font-size: 32px;
|
|
background-size: cover;
|
|
height: 200px;
|
|
line-height:100px;
|
|
border-radius: 0px 0px 10px 10px;
|
|
}
|
|
.closeBtn {
|
|
width:20px;
|
|
height:21px;
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
background-color:#fff;
|
|
cursor:pointer;
|
|
}
|
|
.closeBtn:hover {
|
|
background-color: red;
|
|
}
|
|
.changeButton {
|
|
width:110px;
|
|
height:40px;
|
|
position:absolute;
|
|
top:100px;
|
|
right:95px;
|
|
background-image:url('../../src/assets/button.png');
|
|
background-size:cover;
|
|
color:#fff;
|
|
border:1px solid skyblue;
|
|
border-radius:16px;
|
|
box-shadow:0px 0px 8px skyblue;
|
|
text-align:center;
|
|
line-height:36px;
|
|
cursor:pointer;
|
|
}
|
|
</style> |