YangZhouDaYunHeDaDu/src/views/PanoView.vue

<template>
  <div class="pano-view">
    <div
      class="pano-wrap"
      :class="{
        hide: !haveShownSceneEffect
      }"
    >
      <iframe
        ref="panoIframe"
        :src="iframeSrc"
        frameborder="0"
      />
      <button
        class="return-home"
        @click="router.push({
          name: 'HomeView',
        })"
      />
      <CameraDesc
        v-if="isShowCameraDesc"
        class="camera-desc"
        @close="isShowCameraDesc = false"
      />
      <CharacterDesc
        v-if="isShowCharacterDesc"
        class="character-desc"
        @close="isShowCharacterDesc = false"
      />
      <div
        class="character-wrap"
        draggable="false"
      >
        <button
          class="name"
          @click="isShowCharacterDesc = true"
        >
          <span>趙孟頫</span>
        </button>
        <div
          class="character-frames-wrapper"
          @click="onClickCharacter"
        >
          <img
            v-show="animationType === 1"
            class="default-frames"
            src="@/assets/images/A1-min.png"
            alt=""
            draggable="false"
          >
          <img
            v-show="animationType === 2"
            class="frames frames-2"
            :class="{
              animating: isCharacterSpecialMoving,
              state1: isCharacterSpecialMoving === 0,
              state2: isCharacterSpecialMoving === 1,
            }"
            src="@/assets/images/A2-min.png"
            alt=""
            draggable="false"
          >
          <img
            v-show="animationType === 3"
            class="frames frames-3"
            :class="{
              animating: isCharacterSpecialMoving,
              state1: isCharacterSpecialMoving === 0,
              state2: isCharacterSpecialMoving === 1,
            }"
            src="@/assets/images/A3-min.png"
            alt=""
            draggable="false"
          >
        </div>
        <img
          class="btn-track"
          :src="require(`@/assets/images/people-btn-track-${sceneIdx + 1}.png`)"
          alt=""
          draggable="false"
        >
        <button
          class="one btn-on-track"
          @click="showingContentIdx = 1"
        >
          <span>{{ btnOnTrack1Name }}</span>
        </button>
        <button
          class="two btn-on-track"
          @click="showingContentIdx = 2"
        >
          <span>{{ btnOnTrack2Name }}</span>
        </button>
        <button
          class="three btn-on-track"
          @click="showingContentIdx = 3"
        >
          <span>{{ btnOnTrack3Name }}</span>
        </button>
        <button
          class="four btn-on-track"
          @click="router.push({
            name: 'RelicList',
            query: {
              sceneIdx: route.query.sceneIdx,
              cameraIdx: route.query.cameraIdx,
            }
          })"
        >
          <span>文物长卷</span>
        </button>
      </div>
      <div
        class="camera-list"
      >
        <button
          v-for="(item, idx) in currentCameraList"
          :key="idx"
          class="camera-entry"
          :class="{
            active: idx === (mouseEnterCameraItemIdx === -1 ? cameraIdx : mouseEnterCameraItemIdx)
          }"
          @mouseenter="mouseEnterCameraItemIdx = idx"
          @mouseleave="mouseEnterCameraItemIdx = -1"
          @click="router.push({
            name: route.name,
            query:{
              sceneIdx: route.query.sceneIdx,
              cameraIdx: idx,
            }
          })"
        >
          <span>{{ item.name }}</span>
          <img
            class="bg-normal"
            :src="require(`@/assets/images/camera-list-item-bg-${sceneIdx + 1}.png`)"
            alt=""
            draggable="false"
          >
          <img
            class="bg-active"
            :src="require(`@/assets/images/camera-list-item-bg-active-${sceneIdx + 1}.png`)"
            alt=""
            draggable="false"
          >
        </button>
        <button
          class="next-scene"
          @click="onClickNextScene"
        />
      </div>
    </div>
    <CameraContent1
      v-if="showingContentIdx === 1"
      class="camera-content"
      @close="showingContentIdx = 0"
    />
    <CameraContent2
      v-if="showingContentIdx === 2"
      class="camera-content"
      @close="showingContentIdx = 0"
    />
    <CameraContent3
      v-if="showingContentIdx === 3"
      class="camera-content"
      @close="showingContentIdx = 0"
    />
    <RelicDetailForHotspot
      v-if="isShowHotspotDetail"
      :relic-info="hotspotRelicInfo"
      @close="isShowHotspotDetail = false"
    />
    <!-- 镜头切换过渡 -->
    <transition name="fade-in-out-slow">
      <div
        v-if="isShowCameraIntro"
        class="text-wrap"
      >
        <div
          class="text"
          v-html="cameraIntroText"
        />
        <button
          class="skip"
          @click="skipCameraIntro"
        />
      </div>
    </transition>
    <transition name="cloud-top">
      <img
        v-if="isShowCameraIntro"
        class="cloud cloud-top"
        src="@/assets/images/cloud-top.png"
        alt=""
        draggable="false"
      >
    </transition>
    <transition name="cloud-left-bottom">
      <img
        v-if="isShowCameraIntro"
        class="cloud-left-bottom"
        src="@/assets/images/cloud-left-bottom.png"
        alt=""
        draggable="false"
      >
    </transition>
    <transition name="cloud-right-bottom">
      <img
        v-if="isShowCameraIntro"
        class="cloud-right-bottom"
        src="@/assets/images/cloud-right-bottom.png"
        alt=""
        draggable="false"
      >
    </transition>
    <!-- end of 镜头切换过渡 -->
    <!-- 场景切换过渡 -->
    <video
      v-show="isShowSceneIntroVideoStart"
      ref="sceneIntrovideoStartEl"
      class="scene-intro-video scene-intro-video-start"
      :src="require(`@/assets/videos/scene-${sceneIdx + 1}-introduction-start.mp4`)"
      playsinline
      webkit-playsinline="true"
      x5-video-player-type="h5"
      @play="onPlayedSceneIntroVideoStart"
    />
    <button
      v-show="isShowSceneIntroVideoStart"
      class="skip-scene-intro"
      :style="{
        left: skipBtnLeftTop.x + 'px',
        top: skipBtnLeftTop.y + 'px',
        width: skipBtnRightBottom.x - skipBtnLeftTop.x + 'px',
        height: skipBtnRightBottom.y - skipBtnLeftTop.y + 'px',
      }"
      @click="skipSceneIntro"
    />
    <transition name="fade-out">
      <video
        v-show="isShowSceneIntroVideoEnd"
        ref="sceneIntrovideoEndEl"
        class="scene-intro-video scene-intro-video-end"
        :src="require(`@/assets/videos/scene-${sceneIdx + 1}-introduction-end.mp4`)"
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
        @ended="onSceneIntroVideoEndEnd"
      />
    </transition>
    <!-- end of 场景切换过渡 -->
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick, watchEffect, onUnmounted } from "vue"
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router"
import { useStore } from "vuex"
import * as krfn from "@/libs/pano-core/index.js"
import CameraDesc from '@/components/CameraDesc.vue'
import CharacterDesc from '@/components/CharacterDesc.vue'
import { defineAsyncComponent } from 'vue'
import sceneTree from '/public/sceneTree.js'
import RelicDetailForHotspot from '@/components/RelicDetailForHotspot.vue'
import { useWindowSize } from '@vueuse/core'

const btnReturnHomeImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-return-home-${sceneIdx.value + 1}.png`) + ')'
})
const btnReturnHomeActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-return-home-active-${sceneIdx.value + 1}.png`) + ')'
})

const btnOnTrack1ImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'
})
const btnOnTrack1ActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1-active.png`) + ')'
})
const btnOnTrack2ImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2.png`) + ')'
})
const btnOnTrack2ActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2-active.png`) + ')'
})
const btnOnTrack3ImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3.png`) + ')'
})
const btnOnTrack3ActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3-active.png`) + ')'
})
const btnOnTrack4ImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4.png`) + ')'
})
const btnOnTrack4ActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4-active.png`) + ')'
})

const cameraListBgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-list-bg-${sceneIdx.value + 1}.png`) + ')'
})

const btnOnTrack1Name = computed(() => {
  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[0]
})
const btnOnTrack2Name = computed(() => {
  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[1]
})
const btnOnTrack3Name = computed(() => {
  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[2]
})

let CameraContent1 = defineAsyncComponent(() =>
  import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.vue`)
)
let CameraContent2 = defineAsyncComponent(() =>
  import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2.vue`)
)
let CameraContent3 = defineAsyncComponent(() =>
  import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.vue`)
)
onBeforeRouteUpdate((to, from) => {
  console.log('to: ', to)
  if (to.name === route.name) {
    CameraContent1 = defineAsyncComponent(() =>
      import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.vue`)
    )
    CameraContent2 = defineAsyncComponent(() =>
      import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2.vue`)
    )
    CameraContent3 = defineAsyncComponent(() =>
      import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.vue`)
    )
  }
})

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

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

const sceneIdx = computed(() => {
  return Number(route.query.sceneIdx)
})
const cameraIdx = computed(() => {
  return Number(route.query.cameraIdx)
})

/**
 * 左下角人物相关
 */
const isCharacterSpecialMoving = ref(0)
const animationType = ref(1)
const isShowCameraDesc = ref(false)
const isShowCharacterDesc = ref(false)
const showingContentIdx = ref(0)

function onClickCharacter() {
  // isShowCameraDesc.value = true
  if (!isCharacterSpecialMoving.value) {
    animationType.value = Math.floor(Math.random() * 2) + 2
    let duration = 0
    switch (animationType.value) {
    case 2:
      duration = 2000
      break
    case 3:
      duration = 1500
      break
    default:
      break
    }
    setTimeout(() => {
      isCharacterSpecialMoving.value = 1
      setTimeout(() => {
        isCharacterSpecialMoving.value = 0
        animationType.value = 1
      }, duration)
    }, 200)
  }
}
/**
 * end of 左下角人物相关
 */

/**
 * 右下角镜头列表
 */
const currentCameraList = computed(() => {
  return sceneTree[sceneIdx.value].cameraList
})

const mouseEnterCameraItemIdx = ref(-1)
/**
 * end of 右下角镜头列表
 */

/**
 * 镜头切换过渡
 */
const isShowCameraIntro = ref(false)
const cameraIntroText = computed(() => {
  return sceneTree[sceneIdx.value].cameraList[cameraIdx.value].desc
})
let cameraIntroAudioTimeoutId = null
let cameraIntroAudio = null
watch(cameraIdx, (vNew) => {
  if (haveShownSceneEffect.value) {
    isShowCameraIntro.value = true
    cameraIntroAudioTimeoutId = setTimeout(() => {
      cameraIntroAudio?.pause()
      cameraIntroAudio = new Audio(require(`@/assets/audios/camera-intro-${sceneIdx.value + 1}-${cameraIdx.value + 1}.mp3`))
      cameraIntroAudio.play()
      cameraIntroAudio.addEventListener('ended', () => {
        isShowCameraIntro.value = false
      })
    }, 1000)
  }
})

// 跳过按钮 功能
function skipCameraIntro() {
  clearTimeout(cameraIntroAudioTimeoutId)
  cameraIntroAudio?.pause()
  isShowCameraIntro.value = false
}
onUnmounted(() => {
  skipCameraIntro()
})
onBeforeRouteUpdate(() => {
  skipCameraIntro()
})
/**
  * end of 镜头切换过渡
  */

const isShowSceneIntroVideoStart = ref(false)
const isShowSceneIntroVideoEnd = ref(false)
const sceneIntrovideoStartEl = ref(null)
const sceneIntrovideoEndEl = ref(null)

/**
 * 第一次进入某个场景时展示动效
 */
const haveShownSceneEffect = computed(() => {
  return store.state.haveShownSceneEffect[sceneIdx.value]
})

watch(sceneIdx, (vNew) => {
  if (!haveShownSceneEffect.value) {
    isShowSceneIntroVideoStart.value = true
    nextTick(() => {
      sceneIntrovideoStartEl.value.play()
    })
  }
}, {
  immediate: true
})
let sceneIntroAudioTimeoutId = null
let audio = null
function onPlayedSceneIntroVideoStart() {
  sceneIntroAudioTimeoutId = setTimeout(() => {
    audio?.pause()
    audio = new Audio(require(`@/assets/audios/camera-intro-${sceneIdx.value + 1}-1.mp3`))
    audio.play()
    audio.addEventListener('ended', () => {
      store.commit('setHaveShownSceneEffect', {
        idx: sceneIdx.value,
        value: true,
      })
      isShowSceneIntroVideoStart.value = false
      isShowSceneIntroVideoEnd.value = true
      sceneIntrovideoEndEl.value.play()
    })
  }, 4000)
}
function onSceneIntroVideoEndEnd() {
  isShowSceneIntroVideoEnd.value = false
}

// 跳过按钮 位置
const { width: windowWidth, height: windowHeight } = useWindowSize()
const skipBtnLeftTop = ref({
  x: 0,
  y: 0,
})
const skipBtnRightBottom = ref({
  x: 0,
  y: 0,
})
watchEffect(() => {
  skipBtnLeftTop.value = utils.mapPosFromDraftToWindow({
    x: 850,
    y: 660,
  }, 'cover', 1920, 970, windowWidth.value, windowHeight.value)
  skipBtnRightBottom.value = utils.mapPosFromDraftToWindow({
    x: 1070,
    y: 720,
  }, 'cover', 1920, 970, windowWidth.value, windowHeight.value)
})

// 跳过按钮 功能
function skipSceneIntro() {
  clearTimeout(sceneIntroAudioTimeoutId)
  audio?.pause()
  store.commit('setHaveShownSceneEffect', {
    idx: sceneIdx.value,
    value: true,
  })
  isShowSceneIntroVideoStart.value = false
  isShowSceneIntroVideoEnd.value = false
  sceneIntrovideoStartEl.value?.pause()
  sceneIntrovideoEndEl.value?.pause()
}
onUnmounted(() => {
  skipSceneIntro()
})
onBeforeRouteUpdate(() => {
  skipSceneIntro()
})
/**
 * end of 第一次进入某个场景时展示动效
 */

/**
 * 背景音乐
 */
let bgAudio = null
watch(sceneIdx, () => {
  bgAudio?.pause()
  bgAudio = new Audio(require(`@/assets/audios/scene-bg-${sceneIdx.value + 1}.mp3`))
  setTimeout(() => {
    bgAudio.play()
  }, 300)
}, {
  immediate: true,
})
onUnmounted(() => {
  bgAudio?.pause()
})
onBeforeRouteUpdate(() => {
  // bgAudio?.pause()
})
/**
 * end of 背景音乐
 */

/**
 * 点击“下一个场景”按钮的逻辑
 */
function onClickNextScene() {
  if (sceneIdx.value === 0) {
    router.push({
      name: route.name,
      query: {
        sceneIdx: Number(route.query.sceneIdx) + 1,
        cameraIdx: 0,
      }
    })
  } else if (sceneIdx.value === 1) {
    router.push({
      name: route.name,
      query: {
        sceneIdx: Number(route.query.sceneIdx) + 1,
        cameraIdx: 0,
      }
    })
  } else if (sceneIdx.value === 2) {
    router.push({
      name: 'EpilogueView',
    })
  }
}
/**
 * end of 点击“下一个场景”按钮的逻辑
 */


/**
 * iframe的逻辑
 */
const iframeSrc = `${process.env.VUE_APP_CLI_MODE === 'dev' ? 'http://192.168.0.27:8081/' : 'https://houseoss.4dkankan.com/project/yzdyh-dadu/pano/'}show.html?id=WK1730428603763576832&lang=zh`
const panoIframe = ref(null)

watch(cameraIdx, (vNew) => {
  console.log('parent window: post message!')
  panoIframe.value.contentWindow.postMessage({
    msgName: 'change-scene',
    sceneId: store.getters.catalogTopology[sceneIdx.value].children[0].children[cameraIdx.value].id
  }, '*')
}, {
  deep: true,
})

// window.addEventListener('message', (e) => {
//   console.log('parent window: received message!', e)
// })
const isShowHotspotDetail = ref(false)
const hotspotRelicInfo = ref({})
window.showHotspotDetail = function(hotspotInfo) {
  console.log('parent window: 展示热点详情')
  console.log(hotspotInfo)
  console.log(hotspotInfo.hotspotTitle)
  hotspotRelicInfo.value = hotspotInfo
  isShowHotspotDetail.value = true
}
/**
 * end of iframe的逻辑
 */

/**
 * 获取全景图somedata.json并处理 todo:改为从本地获取
 */
function fixPanoData(panoData) {
  // 丢弃没有包含场景的二级分组
  let tmp = []
  panoData.scenes.forEach((item) => {
    panoData.catalogs.forEach((sub) => {
      if (item.category == sub.id) {
        if (tmp.indexOf(sub) < 0) {
          tmp.push(sub)
        }
      }
    })
  })
  tmp = utils.unique(tmp)
  panoData.catalogs = tmp

  // 丢弃没有包含二级分组的一级分组
  let rootmp = []
  tmp.forEach((item) => {
    panoData.catalogRoot.forEach((sub) => {
      sub.children = utils.unique(sub.children)

      if (sub.children.indexOf(item.id) > -1) {
        rootmp.push(sub)
      }
    })
  })
  rootmp = utils.unique(rootmp)

  // 一级分组按名称排序
  let sortArr = panoData.catalogRoot.map((item) => item.name)
  rootmp.sort((a, b) => {
    return sortArr.indexOf(a.name) - sortArr.indexOf(b.name)
  })

  // 各个一级分组的children去重，只留下有实际的二级分组相对应的那些children item。
  panoData.catalogRoot = rootmp.map((item) => {
    let temp = []
    item.children = utils.unique(item.children)
    item.children.forEach((sub) => {
      tmp.forEach((jj) => {
        if (jj.id == sub) {
          temp.push(sub)
        }
      })
    })
    return {
      ...item,
      children: temp,
    }
  })

  // 多余
  panoData.catalogs = tmp

  // 如果没有一级分组（一定也就没有二级分组）就创建一级分组和二级分组 有必要吗？
  let cid = "c_" + utils.randomWord(true, 8, 8)
  if (panoData.catalogRoot.length <= 0) {
    panoData.catalogRoot.push({
      id: "r_" + utils.randomWord(true, 8, 8),
      name: "全部场景",
      children: [cid],
    })
  }
  if (panoData.catalogs.length <= 0) {
    panoData.catalogs.push({
      id: cid,
      name: "默认二级分组",
    })
  }

  // 如果有初始场景，改为引用场景列表中对应的那个场景的js对象
  if (panoData.firstScene) {
    panoData.firstScene = panoData.scenes.find(
      (item) => item.sceneCode == panoData.firstScene.sceneCode
    )
  }
}

onMounted(() => {
  api.fetchPanoData('WK1730428603763576832').then((res) => {
    fixPanoData(res)
    store.commit('setPanoData', res)
    console.log('catalogTopology', store.getters.catalogTopology)
  })
})
/**
 * end of 获取全景图somedata.json并处理
 */
</script>

<style lang="less" scoped>
*{
  user-select: none;
}
.pano-view{
  position: relative;
  height: 100%;
  .pano-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    &.hide{
      opacity: 0;
    }
    >iframe{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    >button.return-home{
      position: absolute;
      width: 77px;
      height: 77px;
      top: 43px;
      right: 51px;
      background-image: v-bind(btnReturnHomeImgUrl);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      &:hover{
        background-image: v-bind(btnReturnHomeActiveImgUrl);
      }
    }
    >.camera-desc{
      z-index: 5;
    }
    >.character-desc{
      z-index: 5;
    }
    >.character-wrap{
      position: absolute;
      left: 40px;
      bottom: 0;
      width: 300px;
      height: 452px;
      >button.name{
        position: absolute;
        top: 50px;
        left: 0;
        transform: translateX(-50%);
        width: 36px;
        height: 178px;
        z-index: 3;
        font-size: 23px;
        font-family: Source Han Serif SC, Source Han Serif SC;
        font-weight: 400;
        color: #43310E;
        line-height: 27px;
        letter-spacing: 7px;
        writing-mode: vertical-lr;
        background-image: url(@/assets/images/people-name-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        >span{
          position: absolute;
          left: 45%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      @frame-width: 256px;
      @frame-height: 512px;
      @duration-1: 3s;
      @frame-num-1: 72;
      @duration-2: 2s;
      @frame-num-2: 48;
      @duration-3: 1.5s;
      @frame-num-3: 36;
      >.character-frames-wrapper {
        position: absolute;
        left: 0;
        top: -60px;
        height: @frame-height;
        width: @frame-width;
        overflow: hidden;
        z-index: 1;
        cursor: pointer;
        >.default-frames{
          position: absolute;
          left: 0;
          height: 100%;
          animation-name: character-default-animation;
          animation-timing-function: steps(73, end);
          animation-duration: 3s;
          animation-iteration-count: infinite;
        }
        >.frames {
          position: absolute;
          height: 100%;
          transition-property: none;
          &.animating{
            transition-property: left;
          }
          &.state1 {
            left: 0;
          }
        }
        >.frames-2{
          transition-duration: @duration-2;
          transition-timing-function: steps(@frame-num-2 - 1, jump-end);
          &.state2 {
            left: calc(-100% * (@frame-num-2 - 1));
          }
        }
        >.frames-3{
          transition-duration: @duration-3;
          transition-timing-function: steps(@frame-num-3 - 1, jump-end);
          &.state2 {
            left: calc(-100% * (@frame-num-3 - 1));
          }
        }
      }
      >img.btn-track{
        position: absolute;
        width: 598px;
        height: 598px;
        left: -150px;
        bottom: -101px;
      }
      >button.btn-on-track{
        position: absolute;
        width: 78px;
        height: 78px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        text-align: left;
        z-index: 3;
        >span{
          margin-left: 120px;
          display: none;
          font-size: 23px;
          font-family: Source Han Serif SC, Source Han Serif SC;
          font-weight: 600;
          color: #FFF1BE;
          line-height: 27px;
          letter-spacing: 5px;
        }
        &:hover{
          width: 397px;
          height: 91px;
          transform: translate(-13px, -5px);
          >span{
            display: initial;
          }
        }
      }
      >button.one{
        left: 210px;
        top: -42px;
        background-image: v-bind(btnOnTrack1ImgUrl);
        &:hover{
          background-image: v-bind(btnOnTrack1ActiveImgUrl);
        }
      }
      >button.two{
        left: 336px;
        top: 62px;
        background-image: v-bind(btnOnTrack2ImgUrl);
        &:hover{
          background-image: v-bind(btnOnTrack2ActiveImgUrl);
        }
      }
      >button.three{
        left: 385px;
        top: 205px;
        background-image: v-bind(btnOnTrack3ImgUrl);
        &:hover{
          background-image: v-bind(btnOnTrack3ActiveImgUrl);
        }
      }
      >button.four{
        left: 352px;
        top: 353px;
        background-image: v-bind(btnOnTrack4ImgUrl);
        &:hover{
          background-image: v-bind(btnOnTrack4ActiveImgUrl);
        }
      }
    }
    >div.camera-list{
      position: absolute;
      bottom: 0;
      right: 0;
      width: calc(1346 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(161 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      background-image: v-bind(cameraListBgUrl);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-right: calc(204 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >button.camera-entry{
        width: calc(198 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-size: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Serif SC, Source Han Serif SC;
        font-weight: 600;
        color: #FFED87;
        line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        letter-spacing: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        position: relative;
        z-index: 0;
        >img.bg-normal{
          display: initial;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: calc(198/ v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          z-index: -1;
        }
        >img.bg-active{
          display: none;
          position: absolute;
          left: 50%;
          top: 0%;
          transform: translate(-50%, -50%);
          width: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: auto;
          z-index: -1;
        }
      }
      >button.camera-entry.active{
        font-size: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Serif SC, Source Han Serif SC;
        font-weight: 600;
        color: #794A00;
        line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        letter-spacing: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >img.bg-normal{
          display: none;
        }
        >img.bg-active{
          display: initial;
        }
      }
      >button.next-scene{
        position: absolute;
        top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        right: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
  }
  >.camera-content{
    z-index: 10;
  }
  /**
  镜头切换过渡
   */
   >.text-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 11;
    background-color: rgba(0, 0, 0, 0.3);
    >.text{
      position: absolute;
      left: 50%;
      top: 50%;
      max-width: 80%;
      max-height: 80%;
      overflow: auto;
      transform: translate(-50%, -50%);
      font-size: 23px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 39px;
      letter-spacing: 7px;
      text-shadow: 0px 15px 25px rgba(0,0,0,0.59);
      padding-right: 10px;
    }
    >button.skip{
      position: absolute;
      width: 220px;
      height: 58px;
      right: 50px;
      bottom: 50px;
      background-image: url(@/assets/images/startup-video-skip.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
   }
  .cloud-top{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 12;
    pointer-events: none;
  }
  .cloud-top-enter-active {
    transition: all 1.5s;
  }
  .cloud-top-leave-active {
    transition: all 1.5s;
    pointer-events: none;
  }
  .cloud-top-enter-from {
    opacity: 0;
    translate: 0 -100%;
  }
  .cloud-top-leave-to {
    opacity: 0;
    top: -50%;
    translate: 0 -100%;
  }

  .cloud-left-bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 70%;
    z-index: 12;
    pointer-events: none;
  }
  .cloud-left-bottom-enter-active {
    transition: all 1.5s;
  }
  .cloud-left-bottom-leave-active {
    transition: all 1.5s;
    pointer-events: none;
  }
  .cloud-left-bottom-enter-from {
    opacity: 0;
    translate: -100% 100%;
  }
  .cloud-left-bottom-leave-to {
    opacity: 0;
    pointer-events: none;
    translate: -100% 100%;
  }

  .cloud-right-bottom{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 95%;
    z-index: 12;
    pointer-events: none;
  }
  .cloud-right-bottom-enter-active {
    transition: all 1.5s;
  }
  .cloud-right-bottom-leave-active {
    transition: all 1.5s;
    pointer-events: none;
  }
  .cloud-right-bottom-enter-from {
    opacity: 0;
    translate: 100% 100%;
  }
  .cloud-right-bottom-leave-to {
    opacity: 0;
    pointer-events: none;
    translate: 100% 100%;
  }
  /**
  end of 镜头切换过渡
   */
  /**
   * 场景切换过渡
   */
  >video.scene-intro-video{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
  }
  >button.skip-scene-intro{
    position: absolute;
    z-index: 21;
    // background-color: red;
    // opacity: 0.5;
  }
  /**
   * end of 场景切换过渡
   */
}
@keyframes character-default-animation {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -100% 0;
  }
}
</style>