NanjingMuseumWuJinZang/src/views/MoreContent.vue

<template>
  <div class="more-content">
    <div
      ref="scrollTarget"
      v-touch:swipe.left="onSwipeLeft"
      v-touch:swipe.right="onswipeRight"
      class="scroll-target"
    >
      <img
        class="bg"
        :style="{
          left: bgLeft + 'px'
        }"
        src="@/assets/images/fade-chapter-wood/bg-more-content.jpg"
        alt=""
        draggable="false"
      >

      <div
        class="layer-4"
        :style="{
          left: layer4Left + 'px',
        }"
      >
        <img
          class="bamboo-4_01"
          src="@/assets/images/fade-chapter-wood/4_01.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_02"
          src="@/assets/images/fade-chapter-wood/4_02.png"
          alt=""
          draggable="false"
        >
        <!-- <img
          class="bamboo-4_03"
          src="@/assets/images/fade-chapter-wood/4_03.png"
          alt=""
          draggable="false"
        > -->
        <!-- <img
          class="bamboo-4_04"
          src="@/assets/images/fade-chapter-wood/4_04.png"
          alt=""
          draggable="false"
        > -->
        <img
          class="bamboo-4_05"
          src="@/assets/images/fade-chapter-wood/4_05.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_06"
          src="@/assets/images/fade-chapter-wood/4_06.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_07"
          src="@/assets/images/fade-chapter-wood/4_07.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_08"
          src="@/assets/images/fade-chapter-wood/4_08.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_09"
          src="@/assets/images/fade-chapter-wood/4_09.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_10"
          src="@/assets/images/fade-chapter-wood/4_10.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_11"
          src="@/assets/images/fade-chapter-wood/4_11.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_12"
          src="@/assets/images/fade-chapter-wood/4_12.png"
          alt=""
          draggable="false"
        >
      </div>

      <div
        class="layer-3"
        :style="{
          left: layer3Left + 'px',
        }"
      >
        <img
          class="bamboo-3_01"
          src="@/assets/images/fade-chapter-wood/3_01.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-3_02"
          src="@/assets/images/fade-chapter-wood/3_02.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-3_03"
          src="@/assets/images/fade-chapter-wood/3_03.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-3_04"
          src="@/assets/images/fade-chapter-wood/3_04.png"
          alt=""
          draggable="false"
        >
      </div>

      <div
        class="layer-2"
        :style="{
          left: layer2Left + 'px',
        }"
      >
        <img
          class="bamboo-2_01"
          src="@/assets/images/fade-chapter-wood/2_01.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_03"
          src="@/assets/images/fade-chapter-wood/2_03.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_02"
          src="@/assets/images/fade-chapter-wood/2_02.png"
          alt=""
          draggable="false"
        >
        <!-- <img
          class="bamboo-2_03"
          src="@/assets/images/fade-chapter-wood/2_03.png"
          alt=""
          draggable="false"
        > -->
        <img
          class="bamboo-2_04"
          src="@/assets/images/fade-chapter-wood/2_04.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_04-1"
          src="@/assets/images/fade-chapter-wood/2_04-1.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_05"
          src="@/assets/images/fade-chapter-wood/2_05.png"
          alt=""
          draggable="false"
        >
      </div>

      <div
        class="layer-1"
        :style="{
          left: layer1Left + 'px',
        }"
      >
        <img
          class="bamboo-1_01"
          src="@/assets/images/fade-chapter-wood/1_01.png"
          alt=""
          draggable="false"
        >
        <HotspotComp
          class="hotspot"
          @click="router.push({
            name: 'BambooHot',
          })"
        />
        <div class="shuang-gou-she-se-group">
          <button
            class="watch-detail animation-show-long-hide"
            @click="onClickShuangGouEntry"
          >
            查看详情
          </button>
          <div class="group-title">
            双钩设色
            <img
              class="deco"
              src="@/assets/images/more-content-deco.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>
        <img
          class="bamboo-1_02"
          src="@/assets/images/fade-chapter-wood/1_02.png"
          alt=""
          draggable="false"
        >
        <div class="mo-zhu-group">
          <div class="button-group">
            <button
              class="poem animation-show-long-hide"
              @click="onClickEntryAtMoZhu('PoemList')"
            >
              人文
            </button>
            <button
              class="animation-show-long-hide"
              @click="onClickEntryAtMoZhu('PaintingList')"
            >
              画作
            </button>
            <button
              class="animation-show-long-hide"
              @click="onClickEntryAtMoZhu('BambooBook')"
            >
              竹谱
            </button>
          </div>
          <div class="group-title">
            墨竹
            <img
              class="deco"
              src="@/assets/images/more-content-deco.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>
        <img
          class="bamboo-1_03"
          src="@/assets/images/fade-chapter-wood/1_03.png"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-1_04"
          src="@/assets/images/fade-chapter-wood/1_04.png"
          alt=""
          draggable="false"
        >
        <div class="wei-ye-group">
          <img
            src="@/assets/images/wu-jing-cang.png"
            alt=""
          >
          <div
            class="game-box"
            @click="() => { isShowGamePage = true }"
          >
            画作创作
          </div>
          <div
            class="online-box"
            @click="() => { isShowScenePage = true }"
          >
            线上展厅
          </div>
        </div>
        <img
          class="bamboo-1_05"
          src="@/assets/images/fade-chapter-wood/1_05.png"
          alt=""
          draggable="false"
        >
      </div>
    </div>

    <PaginationComp
      class="pagination"
      :total="3"
      :idx="currentAnchorIdx"
    />
    <BtnBack
      @click="router.push({
        name: 'HomeView',
      })"
    />

    <OperationTip
      class="operation-tip"
      :direction="'h'"
      :text="'下一章'"
      :is-show="isShowOperationTip"
      :color="'green'"
    />

    <Transition name="fade-in">
      <video
        v-if="isShowVideoFadeAtShuangGou"
        ref="videoFadeAtShuangGouEl"
        class="fade-to-other-page"
        src="@/assets/videos/fade-at-shuang-gou.mp4"
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
        @ended="router.push({
          name: 'ShuanggouDetail',
        })"
      />
    </Transition>
    <Transition name="fade-in">
      <video
        v-if="isShowVideoFadeAtMoZhu"
        ref="videoFadeAtMoZhuEl"
        class="fade-to-other-page"
        src="@/assets/videos/fade-at-mo-zhu.mp4"
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
      />
    </Transition>
    <Transition name="fade-in">
      <video
        v-if="isShowVideoFadeAtPage3"
        ref="videoFadeAtPage3El"
        class="fade-to-other-page"
        src="@/assets/videos/fade-from-more-content-to-game.mp4"
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
      />
    </Transition>
    <!-- 游戏页面 -->
    <div
      v-if="isShowGamePage"
      class="game-box"
    >
      <iframe
        class="game-box"
        :src="`./game/index.html`"
      />
      <!-- edit弹框 -->
      <div class="edit-box" />
    </div>


    <!-- 线上展厅 -->
    <div
      v-if="isShowScenePage"
      class="scene-box"
    >
      <BtnBack
        class="scene-back"
        @click="isShowScenePage = false"
      />
      <iframe
        src="https://www.4dkankan.com/spg.html?m=KJ-et2X3su4ofm"
        frameborder="0"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, inject, nextTick } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import PoemList from '@/views/PoemList.vue'
import paintingList from '@/views/PaintingList.vue'
import useSmoothSwipe from '@/useFunctions/useSmoothSwipe.js'
import { useWindowSize } from '@vueuse/core'
import OperationTip from "@/components/OperationTip.vue"
import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
import PaginationComp from "@/components/PaginationComp.vue"


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

const $env = inject('$env')

const isShowGamePage = ref(false)

const isShowScenePage = ref(false)

onMounted(() => {
  window.closeGame = () => {
    isShowGamePage.value = false
  }
})

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const windowWidthDesign = 1560
const windowHeightDesign = 844

const scrollTarget = ref(null)
const { width: windowWidth, height: windowHeight } = useWindowSize()
const maxTranslateLength = computed(() => {
  return windowHeight.value * windowWidthDesign / windowHeightDesign
})
const { onSwipeLeft, onswipeRight, haveSwipedThisTime, translateLength, currentAnchorIdx, goingToAnchorIdx } = useSmoothSwipe({
  scrollTargetRef: scrollTarget,
  maxTranslateLength,
  viewportWidth: windowWidth,
  anchorPosList: [
    maxTranslateLength.value * 216 / windowWidthDesign - windowWidth.value / 2,
    maxTranslateLength.value * 967 / windowWidthDesign - windowWidth.value / 2,
    maxTranslateLength.value * 1860 / windowWidthDesign - windowWidth.value / 2,
    // maxTranslateLength.value - windowWidth.value
  ],
  initialAnchorIdx: Number(route.query.anchorIdx) || 0
})

const bgInitialLeft = -30
const bgLeft = ref(bgInitialLeft)
const bgSpeedFactor = 0.8 * 0.8 * 0.8 * 0.8
watch(translateLength, (v) => {
  bgLeft.value = bgInitialLeft - v * bgSpeedFactor
}, {
  immediate: true,
})

const layer4SpeedFactor = 0.8 * 0.8 * 0.8
const layer4InitialLeft = 0
const layer4Left = ref(layer4InitialLeft)
watch(translateLength, (v) => {
  layer4Left.value = layer4InitialLeft - v * layer4SpeedFactor
}, {
  immediate: true,
})

const layer3SpeedFactor = 0.8 * 0.8
const layer3InitialLeft = 0
const layer3Left = ref(layer3InitialLeft)
watch(translateLength, (v) => {
  layer3Left.value = layer3InitialLeft - v * layer3SpeedFactor
}, {
  immediate: true,
})

const layer2SpeedFactor = 0.8
const layer2InitialLeft = 0
const layer2Left = ref(layer2InitialLeft)
watch(translateLength, (v) => {
  layer2Left.value = layer2InitialLeft - v * layer2SpeedFactor
}, {
  immediate: true,
})

const layer1InitialLeft = 0
const layer1Left = ref(layer1InitialLeft)
watch(translateLength, (v) => {
  layer1Left.value = layer1InitialLeft - v
}, {
  immediate: true,
})

const isShowOperationTip = ref(true)
const unwatch = watch(translateLength, (v) => {
  isShowOperationTip.value = false
  unwatch()
  // if (Math.abs(v - (scrollerEl.value.scrollHeight - scrollerEl.value.clientHeight)) <= 1) {
  //   router.push({
  //     name: 'MoreContent',
  //   })
  // }
})

const videoFadeAtShuangGouEl = ref(null)
const isShowVideoFadeAtShuangGou = ref(false)
function onClickShuangGouEntry() {
  isShowVideoFadeAtShuangGou.value = true
  nextTick(() => {
    videoFadeAtShuangGouEl.value.play()
  })
}

const videoFadeAtMoZhuEl = ref(null)
const isShowVideoFadeAtMoZhu = ref(false)
function onClickEntryAtMoZhu(pathName) {
  isShowVideoFadeAtMoZhu.value = true
  nextTick(() => {
    videoFadeAtMoZhuEl.value.addEventListener('ended', () => {
      router.push({
        name: pathName,
      })
    })
    videoFadeAtMoZhuEl.value.play()
  })
}

const videoFadeAtPage3El = ref(null)
const isShowVideoFadeAtPage3 = ref(false)
// function onClickEntryAtMoZhu(pathName) {
//   isShowVideoFadeAtMoZhu.value = true
//   nextTick(() => {
//     videoFadeAtMoZhuEl.value.addEventListener('ended', () => {
//       router.push({
//         name: pathName,
//       })
//     })
//     videoFadeAtMoZhuEl.value.play()
//   })
// }
watch(goingToAnchorIdx, (v) => {
  if (v === 2) {
    // 跳转到尾页
    // setTimeout(() => {
    //   isShowVideoFadeAtPage3.value = true
    //   nextTick(() => {
    //     videoFadeAtPage3El.value.addEventListener('ended', () => {
    //       router.push({
    //         name: 'Game',
    //       })
    //     })
    //     videoFadeAtPage3El.value.play()
    //   })
    // }, 850)
  }
})
</script>

<style lang="less" scoped>
.button-common-style {
  font-family: KaiTi, KaiTi;
  font-weight: 400;
  font-size: calc(16px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
  writing-mode: vertical-lr;
  letter-spacing: 0.2em;
  white-space: pre;
  color: #B8AE7A;
}

.group-title-common-style {
  font-family: KingHwa_OldSong, KingHwa_OldSong;
  font-weight: 400;
  font-size: calc(48px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
  color: #474747;
  writing-mode: vertical-lr;
  letter-spacing: 0.2em;
  white-space: pre;
}

.more-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  user-select: none;

  >.scroll-target {
    height: 100%;
    width: 100%;
    display: flex;
    gap: 100px;
    overflow: hidden;

    >img.bg {
      position: absolute;
      height: 100%;
    }

    >.layer-4 {
      position: absolute;
      height: 100%;

      >.bamboo-4_01 {
        position: absolute;
        left: calc(0 * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        bottom: 0;
        height: calc(300px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-4_02 {
        position: absolute;
        bottom: 0;
        left: calc(120px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: calc(380px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-4_03 {
        position: absolute;
        bottom: 0;
        left: calc(880px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: calc(518px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-4_04 {
        position: absolute;
        bottom: 0;
        left: calc(870px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }

      >.bamboo-4_05 {
        position: absolute;
        bottom: 0;
        left: calc(450px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }

      >.bamboo-4_06 {
        position: absolute;
        bottom: 0;
        left: calc(520px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }

      >.bamboo-4_07 {
        position: absolute;
        bottom: 0;
        left: calc(1000px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }

      >.bamboo-4_08 {
        position: absolute;
        bottom: 0;
        height: calc(380px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        left: calc(1553px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-4_09 {
        position: absolute;
        bottom: 0;
        left: calc(1345px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }

      >.bamboo-4_10 {
        position: absolute;
        bottom: 0;
        left: calc(1403px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }

      >.bamboo-4_11 {
        position: absolute;
        bottom: 0;
        left: calc(1403px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }

      >.bamboo-4_12 {
        position: absolute;
        bottom: 0;
        left: calc(1403px * v-bind('layer4SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        height: 100%;
      }

    }

    >.layer-3 {
      position: absolute;
      height: 100%;

      >.bamboo-3_01 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(393px * v-bind('layer3SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-3_02 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(880px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-3_03 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(1290px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-3_04 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(867px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
    }

    >.layer-2 {
      position: absolute;
      height: 100%;

      >.bamboo-2_01 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(0px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-2_03 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(420px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-2_02 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(920px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      // >.bamboo-2_03{
      //   position: absolute;
      //   top: 0;
      //   height: 100%;
      //   left: calc(920px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      // }
      >.bamboo-2_04 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(1281px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-2_04-1 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(1863px * v-bind('layer2SpeedFactor') * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-2_05 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(997px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
    }

    >.layer-1 {
      position: absolute;
      height: 100%;

      >.bamboo-1_01 {
        position: absolute;
        top: 0;
        height: 100%;
        left: 0;
      }

      >.hotspot {
        position: absolute;
        top: calc(385px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        left: calc(71px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.shuang-gou-she-se-group {
        position: absolute;
        top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        left: calc(216px * v-bind('windowHeight') / v-bind('windowHeightDesign'));

        >button.watch-detail {
          position: absolute;
          top: calc(182px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
          left: 0;
          background-image: url(@/assets/images/fade-chapter-btn-bg-big.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          .button-common-style();
        }

        >div.group-title {
          position: absolute;
          top: 0;
          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
          ;
          .group-title-common-style();

          >img.deco {
            position: absolute;
            bottom: 0.9em;
            right: -0.05em;
            width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
        }
      }

      >.bamboo-1_02 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(352px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.mo-zhu-group {
        position: absolute;
        top: calc(245px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        left: calc(936px * v-bind('windowHeight') / v-bind('windowHeightDesign'));

        >.button-group {
          position: absolute;
          top: calc(75px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
          left: 0;
          display: flex;
          flex-direction: column;
          gap: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

          >button {
            .button-common-style();
            background-image: url(@/assets/images/fade-chapter-btn-bg-small.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            padding-top: calc(3px / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
        }

        >div.group-title {
          position: absolute;
          top: 0;
          left: calc(41px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
          ;
          .group-title-common-style();

          >img.deco {
            position: absolute;
            bottom: 0.9em;
            right: 0.1em;
            width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
        }
      }

      >.wei-ye-group {
        position: absolute;
        top: calc(170px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        left: calc(1776px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
        font-family: 'KingHwa_OldSong';
        color: white;
        z-index: 2;
        width: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

        // background: green;
        >.game-box {
          width: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background: url(@/assets/images/game-bg.png);
          background-size: 100% 100%;
          padding: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          white-space: nowrap;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          margin-left: calc(-60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

        }

        >.online-box {
          width: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background: url(@/assets/images/online-scene-bg.png);
          background-size: 100% 100%;
          padding: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          white-space: nowrap;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: calc(-10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          margin-left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

        }
      }

      >.bamboo-1_03 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(960px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-1_04 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(1336px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }

      >.bamboo-1_05 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(1891px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
      }
    }
  }

  >.pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }

  >.operation-tip {
    position: absolute;
    right: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    bottom: calc(74 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }

  >.fade-to-other-page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  >.game-box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    >iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  >.scene-box {
    width: 100%;
    height: 100%;
    position: fixed;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    >.scene-back {
      position: absolute;
      left: 20px;
      top: 25px;
      transform: scale(1.2);
      z-index: 2;
    }

    >iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>