NanjingMuseumWuJinZang/src/views/HotspotDetail1.vue

<template>
  <div class="hotspot-detail-1">
    <div class="bg-mask" />
    <div class="row row-1">
      <div class="text">
        <h3>
          {{ craftInfo[3].title }}
        </h3>
        <p>
          {{ craftInfo[3].desc }}
        </p>
      </div>
      <div class="image">
        <img
          class=""
          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[3].title}.png`"
          alt=""
          draggable="false"
        >
      </div>
    </div>
    <div class="row row-2">
      <div class="text">
        <h3>
          {{ craftInfo[4].title }}
        </h3>
        <p>
          {{ craftInfo[4].desc }}
        </p>
      </div>
      <div class="image">
        <img
          class=""
          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[4].title}.png`"
          alt=""
          draggable="false"
        >
      </div>
    </div>
    <div class="row row-3">
      <div class="text">
        <h3>
          {{ craftInfo[5].title }}
        </h3>
        <p>
          {{ craftInfo[5].desc }}
        </p>
      </div>
      <div class="image">
        <img
          class=""
          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[5].title}.png`"
          alt=""
          draggable="false"
        >
      </div>
    </div>
    <BtnBack
      @click="emit('close')"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import useSizeAdapt from "@/useFunctions/useSizeAdapt"

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const emit = defineEmits(['close'])

const craftInfo = configText.craft

</script>

<style lang="less" scoped>
.hotspot-detail-1{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/home-painting-line-small.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  >.bg-mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(48, 74, 56, 0.70);
    backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
    z-index: -1;
  }
  >.row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    >.text{
      width: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >h3{
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: #FFFFFF;
        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        margin-bottom: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        text-align: end;
      }
      >p{
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.3;
        text-align: justify;
      }
    }
    >.image{
      flex: 0 0 auto;
      width: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      border-radius: 50%;
      border: 1px solid #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      >img{
        width: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        border-radius: 50%;
      }
    }
  }
  >.row-1{
    flex-direction: row-reverse
  }
  >.row-3{
    flex-direction: row-reverse
  }
}
</style>