gd-earth/src/components/LandMarkShow.vue

<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.landBriefly}}</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;
  setTimeout(() => {
    newImg = document.getElementById(imgId);
  }, 10);
  //程序执行需要时间
  setTimeout(() => {
    let newWidth = window.getComputedStyle(newImg, null)["width"];
    let newMargin = window.getComputedStyle(newImg, null).marginLeft;
    describesShow.value = `width:${newWidth};left:${newMargin};${judgmentDown.value}`;
    brieflyShow.value = `width:${newWidth};left:${newMargin};${judgmentUp.value}`;
  }, 20);
}

watch(() => LandMarkShow.boxShow, (newValue, oldValue) => {
  judgmentShow.value = `display:${LandMarkShow.boxShow?'block':'none'};`;
  adaptive(nowId.value);
})

watch(() => LandMarkShow.information.landImgUrl, (newValue, oldValue) => {
  nowId.value = 1;
  nowImg.value = `${LandMarkShow.information.landImgUrl}${nowId.value}.webp`;
  judgmentUp.value = "display:block;";
  judgmentDown.value = "display:none;";
  adaptive(nowId.value);
})

const up = () => {
  judgmentUp.value = "display:none;";
  judgmentDown.value = "display:block;";
  adaptive(nowId.value);
}

const down = () => {
  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}.webp`;
  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}.webp`;
  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: -15%;
  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: 24%;
  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-bottom: 1%;
  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;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.boxClose {
  bottom: 15%;
  left: 48.5%;
}
.showBtn {
  left: 47.8%;
}
.leftBtn {
  left: 40%;
}
.rightBtn {
  right: 40%;
}
</style>