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

<template>
  <div class="camera-content-1-1">
    <button
      class="return"
      @click="handleClose"
    />
    <div class="content-wrap">
      <img
        draggable="false"
        src="@/assets/images/camera-content-1-1-3-bg.png"
      >
      <div class="content-wrap-c">
        <div class="content-wrap-c__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>
  </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;
    left: 50%;
    top: 54%;
    width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translate(-50%, -50%);
    >img {
      width: 100%;
    }
    &-c {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    &-c__left{
      flex-shrink: 0;
      width: calc(637 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      .card-title {
        margin-bottom: 20px;
      }
    }
  }
  .video {
    width: calc(700 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

    video {
      width: 100%;
    }
    .img-tips {
      font-size: 14px;
    }
  }
  .map {
    flex-shrink: 0;
    position: relative;
    width: calc(175 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(409 / 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;
      font-size: 14px;
      font-weight: bold;
      color: #000000;
      padding: 0 0 1px 2px;
      width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(59 / 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(0px - 80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      &:nth-child(3) {
        left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(86 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      &:nth-child(4) {
        left: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(222 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      &:nth-child(5) {
        left: calc(0px - 84 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(266 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      &:nth-child(6) {
        top: calc(0px - 20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
  }
}

@media screen and (max-height: 480px) {
  .camera-content-1-1 .video {
    width: calc(860 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  .camera-content-1-1 .content-wrap {
    top: 50%;
    width: 100%;

    .map {
      width: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(538 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

      p {
        width: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

        &:nth-child(1) {
          left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        &:nth-child(2) {
          right: calc(-120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        &:nth-child(3) {
          left: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        &:nth-child(4) {
          left: calc(82 / 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>