NanjingMuseumWuJinZang/src/views/MoreContent.vue

<template>
  <div
    v-if="isReady"
    :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.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_02"
          src="@/assets/images/fade-chapter-wood/4_02.webp"
          alt=""
          draggable="false"
        >
        <!-- <img
          class="bamboo-4_03"
          src="@/assets/images/fade-chapter-wood/4_03.webp"
          alt=""
          draggable="false"
        > -->
        <!-- <img
          class="bamboo-4_04"
          src="@/assets/images/fade-chapter-wood/4_04.webp"
          alt=""
          draggable="false"
        > -->
        <img
          class="bamboo-4_05"
          src="@/assets/images/fade-chapter-wood/4_05.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_06"
          src="@/assets/images/fade-chapter-wood/4_06.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_07"
          src="@/assets/images/fade-chapter-wood/4_07.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_08"
          src="@/assets/images/fade-chapter-wood/4_08.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_09"
          src="@/assets/images/fade-chapter-wood/4_09.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_10"
          src="@/assets/images/fade-chapter-wood/4_10.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_11"
          src="@/assets/images/fade-chapter-wood/4_11.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-4_12"
          src="@/assets/images/fade-chapter-wood/4_12.webp"
          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.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-3_02"
          src="@/assets/images/fade-chapter-wood/3_02.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-3_03"
          src="@/assets/images/fade-chapter-wood/3_03.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-3_04"
          src="@/assets/images/fade-chapter-wood/3_04.webp"
          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.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_03"
          src="@/assets/images/fade-chapter-wood/2_03.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_02"
          src="@/assets/images/fade-chapter-wood/2_02.webp"
          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.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_04-1"
          src="@/assets/images/fade-chapter-wood/2_04-1.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-2_05"
          src="@/assets/images/fade-chapter-wood/2_05.webp"
          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.webp"
          alt=""
          draggable="false"
        >
        <HotspotComp
          class="hotspot"
          @click="
            router.replace({
              name: 'BambooHot',
            })
          "
        />
        <div class="shuang-gou-she-se-group">
          <div
            class="watch-detail animation-show-long-hide"
            @click="onClickShuangGouEntry"
          >
            查看详情
          </div>
          <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.webp"
          alt=""
          draggable="false"
        >
        <div class="mo-zhu-group">
          <div class="button-group">
            <div
              class="poem animation-show-long-hide"
              @click="onClickEntryAtMoZhu('PoemList')"
            >
              人文
            </div>
            <div
              class="animation-show-long-hide"
              @click="onClickEntryAtMoZhu('PaintingList')"
            >
              画作
            </div>
            <div
              class="animation-show-long-hide"
              @click="onClickEntryAtMoZhu('BambooBook')"
            >
              竹谱
            </div>
          </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.webp"
          alt=""
          draggable="false"
        >
        <img
          class="bamboo-1_04"
          src="@/assets/images/fade-chapter-wood/1_04.webp"
          alt=""
          draggable="false"
        >
        <!-- 第三页文字 -->
        <div class="shuang-gou-she-se-group shuang-gou-she-se-group3">
          <div
            class="watch-detail animation-show-long-hide"
            @click="
              () => {
                isShowGamePage = true;
              }
            "
          >
            开始游戏
          </div>
          <div class="group-title">
            创作体验
            <img
              class="deco"
              src="@/assets/images/more-content-deco.png"
              alt=""
              draggable="false"
            >
          </div>
        </div>
        <!-- 第四页文字 -->
        <div
          class="wei-ye-group"
        >
          <img
            src="@/assets/images/wu-jing-cang.png"
            alt=""
          >
          <div
            class="game-box"
            @click="
              OpenScene()
            "
          >
            线上展厅
          </div>
          <div
            class="online-box"
            @click="() => {
              store.state.haveShownStartup = false
              router.replace('/')
            }"
          >
            重新开始
          </div>
        </div>
        <img
          class="bamboo-1_05"
          src="@/assets/images/fade-chapter-wood/1_05.webp"
          alt=""
          draggable="false"
        >
      </div>
    </div>

    <ProgressBar
      :style="{ opacity: curStep != 0 ? 1: 0}"
      class="pagination"
      :totle-unit="4"
      type="1"
      :cur-percentage="curPercentage"
      color-ac="#7B916B"
      color="#7B916B60"
    />

    <!-- <PaginationComp
      class="pagination"
      :total="4"
      :idx="currentAnchorIdx"
    /> -->
    <BtnBack
      @click="
        router.replace({
          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"
        muted
        @ended="
          router.replace({
            name: 'ShuanggouDetail',
          })
        "
      />
    </Transition>
    <Transition name="fade-in">
      <div
        v-if="isShowVideoFadeAtMoZhu"
        :class="`RWbox`"
      >
        <video
          ref="videoFadeAtMoZhuEl"
          src="@/assets/videos/fade-at-mo-zhu.mp4"
          playsinline
          muted
          webkit-playsinline="true"
          x5-video-player-type="h5"
        />
        <img
          class="RWvideoTxt"
          src="@/assets/images/RW/titile_mozhu-min.png"
          alt=""
        >
      </div>
    </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
        muted
        webkit-playsinline="true"
        x5-video-player-type="h5"
      />
    </Transition>
    <!-- 游戏页面 -->
    <div
      v-if="isShowGamePage"
      class="game-box"
    >
      <iframe
        id="gameIframe"
        :src="`./game/index.html`"
      />
      <!-- edit弹框 -->
      <div
        v-if="isShowToastFromGame"
        class="edit-box"
      >
        <!-- <input :v-model="inputValue"> -->
        <!-- <div class="text" >{{ inputValue }}</div>
        <div class="text">{{  }}</div> -->
        <!-- <textarea
          v-model="inputText"
          rows="2"
          maxlength="15"
          @input="onInput"
        /> -->
        <div class="input-box">
          <input
            ref="input1Ref"
            v-model="input1"
            @input="handleInput1"
            @keyup="checkInput1"
          >
          <input
            ref="input2Ref"
            v-model="input2"
            :readonly="input1.length < 7"
            @input="handleInput2"
            @keyup="checkInput2"
          >
          <div class="tips">
            请输入内容
          </div>
        </div>
        <div
          class="cencel-btn"
          @click="isShowToastFromGame = false"
        >
          取消
        </div>
        <div
          class="yes-btn"
          @click="saveTitle"
        >
          保存
        </div>
      </div>
    </div>

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

<script setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeMount,
  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)

const isShowToastFromGame = ref(false)


const OpenScene = () => {
  isShowScenePage.value = true
  const musicDom = document.getElementById('bg-music')
  musicDom.pause()
}

const closeScene = () => {
  isShowScenePage.value = false
  const musicDom = document.getElementById('bg-music')
  musicDom.play()
}

const input1 = ref("")
const input2 = ref("")
const input1Ref = ref(null)
const input2Ref = ref(null)

const handleInput1 = () => {
  console.log("第一个框得内容", input1.value)
  if (input1.value.length >= 7) {
    input1.value = input1.value.slice(0, 7) // 限制输入长度
    input2Ref.value.focus() // 聚焦到第二个输入框
  }
}

const checkInput1 = (event) => {
  if (event.key === "Backspace" && input1.value.length === 0) {
    input2.value = "" // 清空第二个输入框
    input1Ref.value.focus() // 聚焦回到第一个输入框
  }
}

const handleInput2 = () => {
  // 这里可以添加类似的逻辑，但通常不需要，因为我们假设第二个输入框不会自动跳转回去
  if (input2.value.length >= 7) {
    input2.value = input2.value.slice(0, 7)
  }
}

const checkInput2 = (event) => {
  if (event.key === "Backspace" && input2.value.length === 0) {
    input1Ref.value.focus() // 如果需要从第二个输入框清空后聚焦回第一个输入框
  }
}

const saveTitle = () => {
  var iframe = document.getElementById("gameIframe")
  var iframeWindow = iframe.contentWindow || window.frames["yourIframeId"]
  if (iframeWindow) {
    iframeWindow.saveTitle(
      input1.value.length >= 7
        ? input1.value + "\n" + input2.value
        : input1.value
    )
    isShowToastFromGame.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 positionNumInit = computed(() => {
  console.log("x=", windowWidth.value / windowHeight.value)
  return windowWidth.value / windowHeight.value >= 0.5 ? 236 : 206
})

const {
  onSwipeLeft,
  onswipeRight,
  haveSwipedThisTime,
  translateLength,
  currentAnchorIdx,
  goingToAnchorIdx,
} = useSmoothSwipe({
  scrollTargetRef: scrollTarget,
  maxTranslateLength,
  viewportWidth: windowWidth,
  anchorPosList: [
    (maxTranslateLength.value * positionNumInit.value) / windowWidthDesign -
      windowWidth.value / 2,
    (maxTranslateLength.value * 800) / windowWidthDesign -
      windowWidth.value / 2,
    (maxTranslateLength.value * 1320) / windowWidthDesign -
      windowWidth.value / 2,
    (maxTranslateLength.value * 1840) / 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 curPercentage = computed(() => {
  return currentAnchorIdx.value
}, { 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) {
  if (pathName === "PoemList") {
    isShowVideoFadeAtMoZhu.value = true
    nextTick(() => {
      videoFadeAtMoZhuEl.value.addEventListener("ended", () => {
        router.replace({
          name: pathName,
        })
      })
      videoFadeAtMoZhuEl.value.play()
    })
  } else {
    router.replace({
      name: pathName,
    })
  }
}

const videoFadeAtPage3El = ref(null)
const isShowVideoFadeAtPage3 = ref(false)

watch(goingToAnchorIdx, (v) => {
  if (v === 2) {
    // 跳转到尾页
    // setTimeout(() => {
    //   isShowVideoFadeAtPage3.value = true
    //   nextTick(() => {
    //     videoFadeAtPage3El.value.addEventListener('ended', () => {
    //       router.push({
    //         name: 'Game',
    //       })
    //     })
    //     videoFadeAtPage3El.value.play()
    //   })
    // }, 850)
  }
})

const isReady = ref(true)



onBeforeMount(() => {
  // 第一个页面跳转 要白屏渐进  其他页面不用
  if (route.query.anchorIdx) {
    if (route.query.anchorIdx == 0) isReady.value = false
  } else isReady.value = false


  window.addEventListener("resize", () => {
    window.setTimeout(() => {
      // 根元素
      const dom = document.querySelector("#app")
      if (dom && document.documentElement.clientWidth < 1000) {
        windowWidth.value = document.documentElement.clientWidth
        windowHeight.value = document.documentElement.clientHeight
      }
    }, 100)
  })
  if (!isReady.value) {
    setTimeout(() => {
      isReady.value = true
    }, 300)
  }

})

onMounted(() => {
  window.dispatchEvent(new Event("resize"))

  // const dom = document.querySelector("#app")
  windowWidth.value = window.windowWidth
  windowHeight.value = window.windowHeight

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

  window.isShowToastFromGame = () => {
    isShowToastFromGame.value = true
    input1.value = ""
    input2.value = ""
  }
})
</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 {
  background-color: #fefefe;
  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(
          950px * 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(
          970px * 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(
          480px * v-bind("layer3SpeedFactor") * v-bind("windowHeight") /
            v-bind("windowHeightDesign")
        );
      }

      > .bamboo-3_02 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(
          647px * 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-3 {
      position: absolute;
      height: 100%;

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

      > .bamboo-2_03 {
        display: none;
        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(
          355px * v-bind("layer2SpeedFactor") * v-bind("windowHeight") /
            v-bind("windowHeightDesign")
        );
      }

      > .bamboo-2_02 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(
          846px * 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 {
        z-index: 100;

        position: absolute;
        top: calc(
          245px * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );
        left: calc(
          216px * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );

        > .watch-detail {
          position: absolute;
          top: calc(
            132px * 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")
            );
          }
        }
      }

      // 第三页
      .shuang-gou-she-se-group3{
        left: calc(
          1280px * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );
      }

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

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

        > .button-group {
          position: absolute;
          width: calc(
              20 / v-bind("windowSizeWhenDesignForRef") *
                v-bind("windowSizeInCssForRef")
            );
          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")
          );

          > div {
            .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(
            62 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
          margin-left: calc(
            -30 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
          );
          font-size: calc(
            20 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
        }

        > .online-box {
          font-weight: 700;
          color: #768c77;
          width: calc(
            200 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
          white-space: nowrap;
          display: flex;
          justify-content: center;
          align-items: center;

          margin-left: calc(
            -25 / 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(
          870px * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );
      }

      > .bamboo-1_04 {
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(
          1365px * 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")
    );
  }

  .RWbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .RWvideoTxt {
      width: 18%;
      position: absolute;
      z-index: 10;
      top: 32%;
      left: 44%;
    }
    & > video {
      width: 100%;
    }
  }

  > .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;
    }

    .edit-box {
      width: 125%;
      height: 35vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: url(@/assets/images/game-tip.png);
      background-size: 100% 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      font-family: "KaiTi";

      > .input-box {
        width: 50%;
        display: flex;
        flex-direction: column;
        margin-bottom: 10%;
        margin-right: 5%;

        > input {
          width: 100%;
          height: 45px;
          background: none;
          border: none;
          font-size: 20px;
          white-space: pre-wrap;
          color: white;
          border-bottom: 1px solid rgba(255, 255, 255, 0.548);
          font-family: "KaiTi";
          letter-spacing: 2px;
        }

        .tips {
          font-family: "KaiTi";
          font-size: 14px;
          margin-top: calc(
            5 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
          color: rgba(255, 255, 255, 0.418);
        }
      }

      > textarea {
        width: 34%;
        height: 40%;
        background: none;
        border: none;
        font-size: 20px;
        white-space: pre-wrap;
      }

      > .cencel-btn {
        // width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        // height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background: url(@/assets/images/game-tip-cancel.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        position: absolute;
        left: 30%;
        bottom: calc(
          60 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        padding: 5px 10px;
        font-family: "KaiTi";
      }

      > .yes-btn {
        // width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        // height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background: url(@/assets/images/game-tip-yes.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f4e09d;
        position: absolute;
        right: 38%;
        bottom: calc(
          60 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        padding: 5px 10px;
        font-family: "KaiTi";
      }
    }
  }

  > .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>