YangZhouDaYunHeDaDu/src/components/MobileCameraContent/CameraContent-1-2-3.vue

<template>
  <div class="camera-content-1-1">
    <button
      class="return"
      @click="handleClose"
    />
    <div class="content-wrap">
      <div class="content-wrap__left">
        <p class="card-title left">
          忽必烈召见赵孟頫
        </p>
        <p class="text-indent">
          赵孟頫觐见忽必烈，得到忽必烈的称许：“果真是一表人才、丰神俊朗，就如那九天之上的仙人啊！朕授予你兵部郎中之职，愿你尽忠职守。”
        </p>
      </div>
      <div class="map">
        <p
          v-for="(point, idx) in mapPoint"
          :key="point"
          :class="{
            active: idx === curIndex - 1
          }"
          @click="curIndex = idx + 1"
        >
          {{ point }}
        </p>

        <div
          v-if="showTipsCover"
          class="tips-cover"
          @click="closeTipsCover"
        >
          <span>点击查看</span>
        </div>
      </div>
      <div class="video">
        <video
          controls
          controlsList="nodownload"
          autoplay
          :src="require(`@/assets/videos/1-2-3/${curIndex}.mp4`)"
          x5-playsinline="true"
          playsinline="true"
          webkit-playsinline="true"
          x-webkit-airplay="true"
          x5-video-player-type="h5-page"
          @play="stopBgAudio"
          @ended="startBgAudio"
        />

        <p
          class="img-tips"
          style="text-align: center;"
        >
          {{ imgTips[curIndex - 1] }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue'

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(1920, 970)

const TIPS_COVER_KEY = 'ydd-1-2-3-tips'
const startBgAudio = inject("startBgAudio")
const stopBgAudio = inject("stopBgAudio")
const emit = defineEmits(['close'])
const curIndex = ref(1)
const showTipsCover = ref(!localStorage.getItem(TIPS_COVER_KEY))
const mapPoint = ['德清', '南浔', '宝应', '济州', '虎陂', '大都']
const imgTips = [
  '德清——赵孟頫接获北上诏令',
  '南浔——赵孟頫南浔北得独孤赠兰亭序，舟中写跋',
  '宝应——赵孟頫舟中展卷',
  '济州——赵孟頫济州急登船',
  '虎陂——赵孟頫虎陂等待放闸',
  '大都——赵孟頫抵达大都'
]

const handleClose = () => {
  startBgAudio()
  emit('close')
}

const closeTipsCover = () => {
  showTipsCover.value = false
  localStorage.setItem(TIPS_COVER_KEY, 1)
}
</script>

<style lang="less" scoped>
.camera-content-1-1{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(60px);
  .tips-cover {
    top: calc(-50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    left: calc(-70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    right: calc(-70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    bottom: calc(-50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >button.return{
    position: absolute;
    width: 58px;
    height: 58px;
    left: 42px;
    top: 68px;
    background-image: url(@/assets/images/btn-return.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .content-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    display: flex;
    align-items: center;
    gap: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: url(@/assets/images/mobile/bg_1-min.jpg) no-repeat center / 100% 100%;

    &__left{
      flex: 1;
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      .card-title {
        margin-bottom: 20px;
      }
    }
  }
  .video {
    width: 850px;

    video {
      width: 100%;
    }
    .img-tips {
      font-size: 14px;
    }
  }
  .map {
    flex-shrink: 0;
    position: relative;
    width: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(538 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: url('@/assets/images/map_line-min.png') no-repeat center / contain;

    p {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0 1px 2px;
      width: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      cursor: pointer;
      box-sizing: border-box;
      animation: emisse-ani linear 4s;
      background: url('@/assets/images/Rectangle382.png') no-repeat center / cover;

      &.active {
        font-family: "Source Han Sans SC Bold" !important;
        font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: #6A3906;
        background: url('@/assets/images/hightline -min.png') no-repeat center / cover;
      }
      &:nth-child(1) {
        left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(0px - 16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      &:nth-child(2) {
        right: calc(-120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      &:nth-child(3) {
        left: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(86 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      &:nth-child(4) {
        left: calc(82 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(222 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      &:nth-child(5) {
        left: calc(-120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(296 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      &:nth-child(6) {
        top: calc(0px - 20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        left: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
  }
}
</style>