TangJiaWanFeiYi/src/components/Hotspot.vue

<template>
  <div class="hotspot animation--hack-browser-bug--stack-too-high" >
    <div class="content">
      <img class="bg" :src="popImg" alt="">
      <div class="info">
        <div class="info-top">
          <SquareWord direction="column" :word="store.currentHotspot.name" size="mini" />
          <div class="desc">
            <p v-for="item in store.currentHotspot.info.introduce" :key="item">{{ item }}</p>
          </div>
        </div>

        <div class="info-btm">
          <img :src="store.currentHotspot.info.img" alt="">
        </div>
      </div>
      <img class="close" @click="$emit('close')" :src="closeImg" alt="">
    </div>
  </div>
</template>

<script setup>
import SquareWord from "@/components/SquareWord.vue";
import appStore from "@/store/index";
const store = appStore();


const popImg = utils.getImageUrl(`pop.png`)
const closeImg = utils.getImageUrl(`icon_cancel.png`)
const tempImg = utils.getImageUrl(`zhanwei.jpg`)



</script>

<style lang="scss" scoped>
.hotspot {
  position: fixed;
  top: 0;
  z-index: 9999;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(20px);
  background-color: rgba(236, 222, 193, 0.9);
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36%;

    .bg {
      width: 100%;
    }

    .close {
      position: absolute;
      right: 2rem;
      top: 2rem;
      z-index: 99;
      cursor: pointer;
      width: 1.8rem;
    }

    .info {
      $pading: 3rem;
      position: absolute;
      top: $pading;
      left: $pading * 1.5;
      bottom: $pading;
      right: $pading * 1.5;

      .info-top {
        display: flex;
        height: 55%;
        .desc {
          margin-left: 3rem;
          margin-top: 3rem;
          padding-right: 1rem;
          text-indent: 1.76rem;
          color: #695757;
          font-size: 0.88rem;
          line-height: 1.5;
          overflow-y: auto;
          overflow-x: hidden;
        }
      }

      .info-btm {
        margin-top: 2rem;
        width: 100%;
        height: 40%;
        >img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
</style>