新增点击地点标点，弹出地点信息弹窗功能
This commit is contained in:
223
src/components/LandMarkShow.vue
Normal file
223
src/components/LandMarkShow.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="lightbox" :style="judgmentShow">
|
||||
<div class="boxImg">
|
||||
<img :id="nowId" style="height:100%;display:block;margin:auto;" :src="nowImg" />
|
||||
<div id="describesBox" class="describesBox" :style="describesShow">
|
||||
<div class="textBox">
|
||||
<br />
|
||||
<h1 class="describesTitle">{{LandMarkShow.information.landTitle}}</h1>
|
||||
<br />
|
||||
<p class="describesParagraph">{{LandMarkShow.information.landDescribes}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="brieflyBox" class="brieflyBox" :style="brieflyShow">
|
||||
<div class="textBox">
|
||||
<h3 class="brieflyTitle">{{LandMarkShow.information.landTitle}}</h3>
|
||||
<p class="brieflyParagraph">{{LandMarkShow.information.landDescribes}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="share showBtn">
|
||||
<img class="imgBase" :style="judgmentUp" src="../../src/assets/up.png" @click="up" />
|
||||
<img class="imgBase" :style="judgmentDown" src="../../src/assets/down.png" @click="down" />
|
||||
</div>
|
||||
<div class="share leftBtn">
|
||||
<img class="imgBase" src="../../src/assets/left.png" @click="left" />
|
||||
</div>
|
||||
<div class="share rightBtn">
|
||||
<img class="imgBase" src="../../src/assets/right.png" @click="right" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="share boxClose">
|
||||
<img class="imgBase" src="../../src/assets/close.png" @click="close" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { LandMarkShowStore } from '/@/stores/LandMarkShow';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const LandMarkShow = LandMarkShowStore();
|
||||
|
||||
const judgmentShow = ref();
|
||||
const describesShow = ref();
|
||||
const brieflyShow = ref();
|
||||
const nowId = ref(1);
|
||||
const nowImg = ref();
|
||||
const judgmentUp = ref("dispaly:block;");
|
||||
const judgmentDown = ref("dispaly:none;");
|
||||
|
||||
const adaptive = (imgId) => {
|
||||
let newImg;
|
||||
let describesBox;
|
||||
let brieflyBox;
|
||||
setTimeout(() => {
|
||||
newImg = document.getElementById(imgId);
|
||||
describesBox = document.getElementById("describesBox");
|
||||
brieflyBox = document.getElementById("brieflyBox");
|
||||
}, 5);
|
||||
setTimeout(() => {
|
||||
let newWidth = window.getComputedStyle(newImg, null)["width"];
|
||||
let newMargin = window.getComputedStyle(newImg, null).marginLeft;
|
||||
describesBox.style.width = newWidth;
|
||||
describesBox.style.left = newMargin;
|
||||
brieflyBox.style.width = newWidth;
|
||||
brieflyBox.style.left = newMargin;
|
||||
}, 10);
|
||||
}
|
||||
|
||||
watch(() => LandMarkShow.boxShow, (newValue, oldValue) => {
|
||||
judgmentShow.value = `display:${LandMarkShow.boxShow?'block':'none'};`;
|
||||
})
|
||||
|
||||
watch(() => LandMarkShow.information.landImgUrl, (newValue, oldValue) => {
|
||||
nowId.value = 1;
|
||||
nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.jpg`;
|
||||
describesShow.value = "display:none;";
|
||||
brieflyShow.value = "display:block;";
|
||||
judgmentUp.value = "display:block;";
|
||||
judgmentDown.value = "display:none;";
|
||||
adaptive(nowId.value);
|
||||
})
|
||||
|
||||
const up = () => {
|
||||
describesShow.value = "display:block;";
|
||||
brieflyShow.value = "display:none;";
|
||||
judgmentUp.value = "display:none;";
|
||||
judgmentDown.value = "display:block;";
|
||||
adaptive(nowId.value);
|
||||
}
|
||||
|
||||
const down = () => {
|
||||
describesShow.value = "display:none;";
|
||||
brieflyShow.value = "display:block;";
|
||||
judgmentUp.value = "display:block;";
|
||||
judgmentDown.value = "display:none;";
|
||||
adaptive(nowId.value);
|
||||
}
|
||||
|
||||
const left = () => {
|
||||
nowId.value = nowId.value - 1;
|
||||
if (nowId.value == 0) {
|
||||
nowId.value = LandMarkShow.information.landImgCount;
|
||||
}
|
||||
nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.jpg`;
|
||||
adaptive(nowId.value);
|
||||
}
|
||||
|
||||
const right = () => {
|
||||
nowId.value = nowId.value + 1;
|
||||
if (nowId.value > LandMarkShow.information.landImgCount) {
|
||||
nowId.value = 1;
|
||||
}
|
||||
nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.jpg`;
|
||||
adaptive(nowId.value);
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
LandMarkShow.boxShow = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lightbox {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
user-select: none;
|
||||
display:none;
|
||||
}
|
||||
.boxImg {
|
||||
width: 70%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 15%;
|
||||
}
|
||||
.imgBase {
|
||||
width: 100%;
|
||||
}
|
||||
.share {
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
width: 3vw;
|
||||
height: 3vw;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
box-shadow:inset 0px 0px 6px white;
|
||||
}
|
||||
.describesBox {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
display: none;
|
||||
text-shadow: 0 0 6px white;
|
||||
}
|
||||
.brieflyBox {
|
||||
width: 60%;
|
||||
height: 30%;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
text-shadow: 0 0 6px black;
|
||||
}
|
||||
.textBox {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
}
|
||||
.describesTitle {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: clamp(0.8rem, 0.489rem + 1.05vw, 2rem);
|
||||
}
|
||||
.describesParagraph {
|
||||
text-align: left;
|
||||
text-indent: 2em;
|
||||
margin: 0;
|
||||
font-size: clamp(0.5rem, 0.489rem + 1.05vw, 1rem);
|
||||
}
|
||||
.brieflyTitle {
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
font-size: clamp(0.6rem, 0.489rem + 1.05vw, 1.2rem);
|
||||
}
|
||||
.brieflyParagraph {
|
||||
color: #fff;
|
||||
font-size: clamp(0.4rem, 0.489rem + 1.05vw, 0.8rem);
|
||||
text-align: left;
|
||||
text-indent: 2em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.boxClose {
|
||||
bottom: 20%;
|
||||
left: 48.5%;
|
||||
}
|
||||
.showBtn {
|
||||
bottom: 0;
|
||||
left: 47.8%;
|
||||
}
|
||||
.leftBtn {
|
||||
left: 40%;
|
||||
}
|
||||
.rightBtn {
|
||||
right: 40%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user