NanjingMuseumWuJinZang/src/views/HomeView.vue

<script setup>
import { ref, computed, inject, nextTick } from "vue"
import { useRouter } from "vue-router"
import { useStore } from "vuex"

import HotspotDetail1 from "@/views/HotspotDetail1.vue"
import HotspotDetail3 from "@/views/HotspotDetail3.vue"
import { api as viewerApi } from "v-viewer"
import Startup from "@/views/StartupView.vue"

const store = useStore()

const curPageIndex = ref(0)

const homepagePaintingDesc = configText.homepagePaintingDesc
const homepageAuthorDesc = configText.homepageAuthorDesc
const detailDescStem = configText.homepagePaintingDetailDescStem
const detailDescLeaf = configText.homepagePaintingDetailDescLeaf

const router = useRouter()

const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()

const isShowPaintingDesc = ref(false)
const isShowAuthorDesc = ref(false)

const isShowHotspotDetail1 = ref(false)
const isShowHotspotDetail3 = ref(false)

const curCenterTag = computed(() => {
  return curPageIndex.value == 3
    ? "三竿修竹"
    : curPageIndex.value == 4
      ? "竹叶"
      : ""
})

const curFixedDesc = computed(() => {
  return curPageIndex.value == 3
    ? detailDescStem
    : curPageIndex.value == 4
      ? detailDescLeaf
      : ""
})

const lastY = ref(0)
// 开始滑动
const handletouchstart = (event) => {
  lastY.value = event.changedTouches[0].pageY
}

const isShowOperationTip = ref(true)

// 监听活动
const touchEnd = (event) => {
  let currentY = event.changedTouches[0].pageY
  let ty = currentY - lastY.value
  if (ty > 0 && curPageIndex.value == 1 && !isShowHotspotDetail1.value && !isShowHotspotDetail3.value && !isShowPaintingDesc.value && ! isShowAuthorDesc.value) {
    isShowOperationTip.value = true
    curPageIndex.value = 0
  } else if (ty < 0 && curPageIndex.value == 0) {
    isShowOperationTip.value = false
    curPageIndex.value = 1
  }
}

const $env = inject("$env")
function showBigPainting() {
  viewerApi({
    images: [`${$env.BASE_URL}configMultiMedia/paintings/home-painting2.jpg`],
    options: {
      className: "viewer-backdrop-home",
    },
  })
  const bodyDom = document.querySelector("body")
  const viewerBtn = document.querySelector(".viewer-close")
  const viewerCanvas = document.querySelector(".viewer-canvas")
  const bigTipDomImg = document.createElement("img")
  bigTipDomImg.src = `${$env.BASE_URL}configMultiMedia/icon/icon-home-big.png`
  const bigTipDom = document.createElement("div")
  const bigTipDomText = document.createElement("div")
  bigTipDomText.innerText = "放大/缩小"
  bigTipDom.appendChild(bigTipDomText)
  bigTipDom.appendChild(bigTipDomImg)
  bigTipDom.className = "big-tip"
  if (bodyDom) {
    bodyDom.appendChild(bigTipDom)
  }
  if (viewerBtn) {
    viewerBtn.classList.add("viewer-button-home")
    viewerBtn.addEventListener("click", () => {
      if (bodyDom.querySelector(".big-tip")) {
        bodyDom.removeChild(bigTipDom)
      }
    })
  }

  if (viewerCanvas) {
    viewerCanvas.addEventListener("touchstart", () => {
      if (bodyDom.querySelector(".big-tip")) {
        bodyDom.removeChild(bigTipDom)
      }
    })
  }
}

const isShowVideoFadeToNextPage = ref(false)
const videoFadeToNextPageEl = ref(null)
const isShowSkip = ref(false)

function onClickGoNextPage() {
  isShowVideoFadeToNextPage.value = true
  nextTick(() => {
    videoFadeToNextPageEl.value.play()
  })
  setTimeout(() => {
    isShowSkip.value = true
  }, 2000)
}

const backFu = () => {
  if (
    curPageIndex.value === 4 ||
    curPageIndex.value === 3 ||
    curPageIndex.value === 5
  ) {
    curPageIndex.value = 2
  } else {
    curPageIndex.value--
  }
}
</script>

<template>
  <div style="opacity: 0; pointer-events: none;font-family: KingHwa_OldSong;position: absolute;top:0;left:0;z-index: -1;">
    123
  </div>
  <div
    class="home"
    @touchstart="handletouchstart($event)"
    @touchend="touchEnd($event)"
  >
    <!-- 了解更多视频 -->
    <Transition name="fade-in">
      <video
        v-if="isShowVideoFadeToNextPage"
        ref="videoFadeToNextPageEl"
        class="fade-to-next-page"
        src="@/assets/videos/fade-from-home-to-more-content.mp4"
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
        muted
        @ended="
          router.replace({
            name: 'MoreContentChange',
          })
        "
      />
    </Transition>

    <Transition name="fade-in">
      <BtnSkip
        v-if="isShowSkip"
        @click="
          router.replace({
            name: 'MoreContentChange',
          })
        "
      />
    </Transition>
    <!-- 背景 -->
    <div
      class="bg-mask"
      :style="{ background: curPageIndex == 2 ? `rgba(85,116,83,0.8)` : `` }"
    />
    <!-- 开场动画 -->
    <Transition name="fade-out">
      <Startup
        v-if="!store.state.haveShownStartup"
        class="startup"
      />
    </Transition>
    <!-- 首页标题 -->
    <div
      class="title-wrap"
      :style="{
        opacity: curPageIndex == 0 ? 1 : 0,
      }"
    >
      <img
        class="title"
        src="@/assets/images/home-title.png"
        alt=""
        draggable="false"
      >
      <div class="sub-text">
        南京博物院<br>
        绢本 墨笔<br>
        元 李衎<br>
      </div>
    </div>
    <!-- 画作 -->
    <div
      class="painting-wrap"
      :class="{
        'painting-wrap1': curPageIndex == 0,
        'painting-wrap2': curPageIndex == 1,
        'painting-wrap3': curPageIndex == 2 || curPageIndex == 3,
        'painting-wrap4': curPageIndex == 4,
        'painting-wrap5': curPageIndex == 5,
      }"
      @click="
        () => {
          curPageIndex == 1 ? (curPageIndex = 2) : '';
        }
      "
    >
      <img
        class="painting-border"
        src="@/assets/images/painting-border-new.png"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        src="@/assets/images/home-painting1.jpg"
        alt=""
        draggable="false"
      >
      <img
        class="painting-stem"
        src="@/assets/images/home-painting2.jpg"
        alt=""
        draggable="false"
      >
      <img
        :style="{ opacity: curPageIndex == 3 ? 1 : 0, zIndex: 3 }"
        class="painting-stem"
        src="@/assets/images/home2-1.png"
        alt=""
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_zhuye-min2.png"
        alt=""
        :style="{
          opacity: curPageIndex == 4 ? 1 : 0,
          zIndex: 2,
        }"
        draggable="false"
      >

      <img
        class="painting-stem"
        src="@/assets/images/img_stone_all-min.png"
        :style="{
          opacity: curPageIndex == 5 ? 1 : 0,
          zIndex: 2,
        }"
        alt=""
        draggable="false"
      >

      <!-- 绿色遮罩层 -->
      <div
        class="green-box"
        :style="{ opacity: curPageIndex == 3 ? 1 : 0 }"
      />
    </div>

    <!-- 热点层1 -->
    <div class="hotspot-wrap">
      <HotspotForHomepage
        v-show="curPageIndex == 1"
        class="hotspot-1"
        @click="isShowHotspotDetail1 = true"
      />
      <HotspotForHomepage
        v-show="curPageIndex == 1"
        class="hotspot-3"
        @click="isShowHotspotDetail3 = true"
      />
    </div>

    <!-- 热点层2 -->
    <div class="hotspot-wrap2">
      <HotspotForHomepage
        v-show="curPageIndex == 2"
        class="hotspot-leaf"
        @click="curPageIndex = 4"
      />
      <HotspotForHomepage
        v-show="curPageIndex == 2"
        class="hotspot-stem"
        @click="curPageIndex = 3"
      />
      <HotspotForHomepage
        v-show="curPageIndex == 2"
        class="hotspot-stone"
        @click="curPageIndex = 5"
      />
      <img
        :style="{ opacity: curPageIndex == 2 ? 1 : 0,display: curPageIndex == 2 ? 'block' : 'none' }"
        class="icon_scale"
        src="@/assets/images/icon_scale.png"
        alt=""
        @click="showBigPainting"
      >
    </div>

    <!-- 热点详情页 -->
    <Transition name="fade-in-out">
      <HotspotDetail1
        v-if="isShowHotspotDetail1"
        class="hotspot-detail"
        @close="isShowHotspotDetail1 = false"
      />
    </Transition>
    <Transition name="fade-in-out">
      <HotspotDetail3
        v-if="isShowHotspotDetail3"
        class="hotspot-detail"
        @close="isShowHotspotDetail3 = false"
      />
    </Transition>

    <!-- 底部中心文字 -->
    <div
      class="center-text"
      :style="{ opacity: curPageIndex == 3 || curPageIndex == 4 ? 1 : 0 }"
      :class="{'center-text4': curPageIndex == 4}"
    >
      {{ curCenterTag }}
    </div>

    <!-- 底部文字介绍 -->
    <div
      class="fixed-desc"
      :class="{'fixed-desc4': curPageIndex == 4}"
      :style="{ opacity: curPageIndex == 3 || curPageIndex == 4 ? 1 : 0 }"
      v-html="curFixedDesc"
    />
    <!-- 左滑提示 -->
    <OperationTip
      v-show="curPageIndex == 0"
      class="operation-tip"
      text="向上划动"
      :is-show="isShowOperationTip"
    />
    <!-- 页面2点击提示 -->
    <img
      class="click-tip"
      :class="{ 'click-tip-ac': curPageIndex == 1 }"
      src="@/assets/images/icon-home-click.png"
      alt=""
      @click="
        () => {
          curPageIndex == 1 ? (curPageIndex = 2) : '';
        }
      "
    >
    <!-- 作品、作者简介 -->
    <div
      ref="longDesc"
      class="long-desc"
      :class="{ 'long-desc-ac': curPageIndex == 1 }"
      @touchstart="handletouchstart($event)"
      @touchend="touchEnd($event)"
    >
      <div
        class="page2-box"
        @click="isShowPaintingDesc = true"
      >
        <img
          src="@/assets/images/icon_home_detail-min.png"
          alt=""
        >
        <div>作品简介</div>
      </div>
      <div
        class="page2-box"
        @click="isShowAuthorDesc = true"
      >
        <img
          src="@/assets/images/icon_home_author-min.png"
          alt=""
        >
        <div>作者简介</div>
      </div>
    </div>

    <!-- 了解更多 -->
    <div
      :style="{
        opacity: curPageIndex == 2 ? 1 : 0,
        zIndex: curPageIndex == 2 ? 5 : 0,
      }"
      class="learn-more"
      @click="onClickGoNextPage"
    >
      了解更多
    </div>

    <!-- 返回按钮 -->
    <BtnBack
      :style="{
        opacity:
          curPageIndex == 2 ||
          curPageIndex == 3 ||
          curPageIndex == 4 ||
          curPageIndex == 5
            ? 1
            : 0,
        zIndex: curPageIndex == 1 || curPageIndex == 0 ? -1 : 1,
      }"
      class="back-btn-main"
      @click="backFu()"
    />
    <!-- <img
      :style="{
        opacity:
          curPageIndex == 2 ||
          curPageIndex == 3 ||
          curPageIndex == 4 ||
          curPageIndex == 5
            ? 1
            : 0,
        zIndex: curPageIndex == 1 || curPageIndex == 0 ? -1 : 1,
      }"
      class="back-btn-main"
      src="@/assets/images/icon_back_white.png"
      alt=""
      @click="backFu()"
    > -->
    <!-- 石头文字层 -->
    <div
      class="stone-text-box"
      :style="{
        opacity: curPageIndex == 5 ? 1 : 0,
      }"
    >
      <img
        class="stone-text"
        src="@/assets/images/stone-text-min.png"
      >
    </div>

    <!-- 作品简介 -->
    <div
      v-show="isShowPaintingDesc"
      class="painting-box"
    >
      <!-- 顶部画作 -->
      <img
        class="painting-img"
        src="@/assets/images/img_painting-box.png"
        alt=""
      >
      <div class="text-box">
        <p
          v-for="(item, index) in homepagePaintingDesc"
          :key="index"
        >
          {{ item }}
        </p>
      </div>
      <!-- <div class="bottom-box" /> -->
      <BtnBack
        class="back-btn"
        @click="isShowPaintingDesc = false"
      />
      <!-- <img
        class="back-btn"
        src="@/assets/images/icon_back_white.png"
        alt=""
        @click="isShowPaintingDesc = false"
      > -->
      <!-- <BtnBack
        class="system-btns"
        @click="isShowPaintingDesc = false"
      /> -->
    </div>

    <!-- 作者简介 -->
    <div
      v-show="isShowAuthorDesc"
      class="author-box"
    >
      <div class="author-content">
        <div class="author-img">
          <img src="@/assets/images/img_author-min.png">
        </div>
        <div class="author-name">
          <img src="@/assets/images/text_likan-min.png">
        </div>

        <div class="line" />
        <div class="text-box">
          <p
            v-for="(item, index) in homepageAuthorDesc"
            :key="index"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <!-- 底部遮罩 -->
      <!-- <div class="bottom-box" /> -->
      <BtnBack
        class="back-btn"
        @click="isShowAuthorDesc = false"
      />
      <!-- <img
        style="position: absolute; bottom: 30px; left: 20px; width: 25px"
        src="@/assets/images/icon_back_white.png"
        alt=""
        @click="isShowAuthorDesc = false"
      > -->
      <!-- <BtnBack
        class="system-btns"
        @click="isShowAuthorDesc = false"
      /> -->
    </div>
  </div>
</template>

<style lang="less" scoped>
body {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

// img,div {
//   -webkit-backface-visibility: hidden;
//   backface-visibility: hidden;
//   transition: width 1.5s, transform 1.5s, top 1.5s, opacity 1.5s;
// }

img,
div {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  // transition: opacity 1.5s, top 1.5s, transform 1.5s;
  transition: opacity 1.5s, top 1.5s, width 1.5s, height 1.5s;
}

::-webkit-scrollbar {
  display: none;
}

.home {
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/home-painting-line-small.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;

  > video.fade-to-next-page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
  }

  > .bg-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(60, 89, 71, 0.65);
    backdrop-filter: blur(
      calc(
        22 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      )
    );
  }

  > .startup {
    z-index: 20;
  }

  > .title-wrap {
    position: absolute;
    left: 50%;
    top: calc(
      36 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    transform: translate(-50%);
    width: calc(
      43 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    height: calc(
      180 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    z-index: 5;

    > img.title {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    > .sub-text {
      position: absolute;
      left: 110%;
      top: 46%;
      transform: translateY(-50%);
      writing-mode: vertical-lr;
      font-family: KaiTi;
      font-weight: 400;
      font-size: calc(
        18 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      color: #ffffff;
      line-height: calc(
        21 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      white-space: pre;
      letter-spacing: 0.2em;
      text-align: center;
    }
  }

  > .hotspot-wrap {
    position: absolute;
    left: 50%;
    top: calc(
      62 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    ) !important;
    transform: translate(-46%, 0);
    width: calc(
      266 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    height: calc(
      517 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    z-index: 7;
    pointer-events: none;
    will-change: transform;
    backface-visibility: hidden;
    z-index: 10;

    & > div {
      z-index: 100;
      transition: all 2s ease-in-out;
    }

    > .hotspot-1 {
      position: absolute;
      top: calc(
        54 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      right: calc(
        0 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      pointer-events: initial;
    }

    > .hotspot-2 {
      position: absolute;
      left: calc(
        60 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      top: calc(
        222 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      pointer-events: initial;
    }

    > .hotspot-3 {
      position: absolute;
      bottom: calc(
        -10 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
      );
      right: calc(
        -10 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
      );
      pointer-events: initial;
    }
  }

  > .hotspot-wrap2 {
    position: absolute;
    left: 50%;
    top: calc(
      62 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    ) !important;
    transform: translate(-50%, 0);
    width: calc(
      364 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    height: calc(
      542 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    z-index: 4;

    & > div {
      z-index: 100;
      transition: all 2s ease-in-out;
    }

    // background: rgba(0, 128, 0, 0.527);
    > .hotspot-leaf {
      position: absolute;
      top: calc(
        259 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      left: calc(
        158 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
    }

    > .hotspot-stem {
      position: absolute;
      top: calc(
        79 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      left: calc(
        256 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
    }

    > .hotspot-stone {
      position: absolute;
      top: calc(
        395 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      left: calc(
        94 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
    }

    > .icon_scale {
      width: 35px;
      height: 35px;
      position: absolute;
      right: 0;
      bottom: 0;
      transition: all 1.5s ease-in-out;
    }
  }

  > .hotspot-detail {
    z-index: 21;
  }

  > .painting-wrap {
    position: absolute;
    left: 50%;
    width: calc(
      308 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    height: calc(
      523 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    // background: green;
    transform: translate(-50%, 0);
    z-index: 1;

    > .painting-border {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    > .painting-stem {
      width: calc(
        245 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      height: calc(
        371 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      position: absolute;
      left: 50%;
      transform: translate(-50%, 26%);
    }
  }

  > .painting-wrap1 {
    top: 28%;
  }

  > .painting-wrap2 {
    top: 7%;
    z-index: 8;
    transform: transform 1.5s !important;
  }

  > .painting-wrap3 {
    // transform: translate(-50%, 0%) scale(1.5);
    width: 110%;
    // height: calc(315 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(
      760 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    top: calc(
      -80 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
    );

    > .painting-stem {
      width: calc(
        364 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      height: calc(
        542 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
    }

    > .green-box {
      width: 200vw;
      height: 200vh;
      background: rgba(85, 116, 83, 0.8);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;
      overflow: hidden;
      transition: opacity 1s ease;
    }
  }

  > .painting-wrap4 {
    // transform: translate(-57%, -40%) scale(4.2);
    width: calc(110% * 4.2);
    // height: calc(315 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(
      760 * 4.2 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    transform: translate(-53%, -50%);
    transform-origin: 50% 50%;
    > .painting-stem {
      width: calc(
        364 * 4.2 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      height: calc(
        542 * 4.2 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
    }
  }

  > .painting-wrap5 {
    // transform: translate(-26%, 10%) scale(2.6);
    width: calc(110% * 2.2);
    // height: calc(315 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(
      760 * 2.2 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    transform: translate(-40%, -39%);
    transform-origin: center center;
    > .painting-stem {
      width: calc(
        364 * 2.2 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      height: calc(
        542 * 2.2 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
    }
  }

  > .center-text {
    position: absolute;
    left: 50%;
    top: calc(
      650 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    transform: translateX(-50%);
    width: calc(
      309 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: KaiTi;
    color: #ffffff;
    font-weight: 400;
    font-size: calc(
      30 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    line-height: calc(
      42 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    text-align: justify;
    z-index: 2;
  }
  > .center-text4{
    top: calc(
      630 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }

  > .fixed-desc {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(
      309 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: KaiTi;
    color: #ffffff;
    font-weight: 400;
    top: calc(
      670 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    font-size: calc(
      18 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    line-height: calc(
      25 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    text-align: justify;
    display: block;
    z-index: 2;
    margin-top: calc(
      30 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }
  > .fixed-desc4{
    top: calc(
      645 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }

  > .operation-tip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(
      25 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }

  > .click-tip {
    position: absolute;
    width: 45px;
    height: 45px;
    top: calc(
      340 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    left: calc(
      280 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    z-index: 10;
    opacity: 0;
  }

  > .click-tip-ac {
    opacity: 1;
  }

  > .big-tip {
    position: fixed;
    bottom: calc(
      30 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    left: 50%;
    transform: translateX(-50%);
  }

  > .big-tip-ac {
    opacity: 1;
    z-index: 2015;
  }

  > .stone-text-box {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3;
    width: calc(
      224 / v-bind("windowSizeWhenDesignForRef") *
      v-bind("windowSizeInCssForRef")
    );
    background: linear-gradient(78deg, rgba(0, 0, 0, 0) 38%, #00000087 75%);
    height: 100%;

    > .stone-text {
      position: fixed;
      top: calc(
        50 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      right: calc(
        20 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      z-index: 3;
      width: calc(
        120 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
    }
  }

  > .learn-more {
    width: calc(
      134 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    height: calc(
      50 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: "KaiTi";
    position: absolute;
    top: calc(
      745 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    font-size: calc(
      20 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    line-height: calc(
      29 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    left: 50%;
    transform: translateX(-50%);
    background: url(@/assets/images/learn-more.png);
    background-size: 100% 100%;
  }

  > .back-btn-main {
    position: absolute;
    z-index: 3;
    left: calc(
        17 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      bottom: calc(
        17 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
  }

  > .long-desc {
    position: absolute;
    left: 50%;
    bottom: calc(
      0 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
    );
    width: calc(
      309 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    transform: translate(-50%, 100%);
    color: white;
    overflow: hidden;
    font-family: KaiTi;
    color: #ffffff;
    animation: none;
    display: flex;
    justify-content: space-between;
    z-index: 2;
    opacity: 0;

    > .page2-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      > img {
        width: 45%;
        margin-bottom: 10px;
      }

      > div {
        font-size: calc(
          20 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        font-family: KaiTi;
      }
    }
  }

  > .long-desc-ac {
    bottom: calc(
      100 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    transform: translate(-50%, 0);
    z-index: 5;
    opacity: 1;
  }

  > .painting-box {
    width: 100%;
    height: 100%;
    background: rgba(73, 91, 71, 0.7);
    backdrop-filter: blur(22.5px);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    // align-content: center;
    align-items: center;
    // justify-content: center;
    z-index: 15;
    padding-top: 15%;
    padding-left: 10%;
    padding-right: 10%;

    > .back-btn {
      left: calc(
        17 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      bottom: calc(
        17 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      position: absolute;
    }

    > .painting-img {
      width: 70%;
      margin-bottom: 20px;
    }

    > .text-box {
      width: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
      display: none;
    }

      > p {
        text-indent: 2em;
        margin-bottom: 10px;
        color: #ffffff;
        font-size: calc(
          24 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        line-height: calc(
          30 / v-bind("windowSizeWhenDesignForRef") *
            v-bind("windowSizeInCssForRef")
        );
        font-family: KaiTi;
      }
    }

    > .bottom-box {
      width: 100%;
      min-height: 10vh;
      background: linear-gradient(
        0deg,
        rgba(73, 91, 71, 0.7) 0%,
        rgba(115, 115, 115, 0) 100%
      );
      position: absolute;
      bottom: 0;
      left: 0;
    }

    > .system-btns {
      width: 30px;
      height: 30px;
      padding: 0
        calc(
          20 / v-bind(windowSizeWhenDesignForRef) *
            v-bind(windowSizeInCssForRef)
        );
      position: fixed;
      left: calc(
        30 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
      );
      bottom: calc(
        50 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
      );
      z-index: 2;
    }
  }

  > .author-box {
    width: 100%;
    height: 100%;
    background: rgba(73, 91, 71, 0.7);
    backdrop-filter: blur(22.5px);
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 10%;
    z-index: 15;
    padding-top: 15%;
    padding-left: 10%;
    padding-right: 10%;

    > .author-content {
      width: 100%;
      height: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
      display: none;
    }
      display: flex;
      flex-direction: column;
      align-items: center;

      > .author-img {
        width: 100%;
        margin-bottom: 5px;
        display: flex;
        justify-content: end;

        > img {
          width: 30%;
        }
      }

      > .author-name {
        // width: 50%;
        width: 100%;
        margin-bottom: 5px;
        display: flex;
        justify-content: start;

        > img {
          width: 50%;
        }
      }

      > .line {
        width: 100%;
        min-height: 1px;
        background: #e1edd9;
        margin: 15px auto;
        content: "";
      }

      > .text-box {
        width: 100%;

        > p {
          text-indent: 2em;
          margin-bottom: 10px;
          color: #ffffff;
          font-size: calc(
            24 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
          line-height: calc(
            30 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
          font-family: KaiTi;
        }
      }
    }

    > .bottom-box {
      width: 100%;
      min-height: 20vh;
      background: linear-gradient(
        0deg,
        rgba(73, 91, 71, 0.7) 0%,
        rgba(115, 115, 115, 0) 100%
      );
      position: absolute;
      bottom: 0;
      left: 0;
    }

    > .back-btn {
      left: calc(
        17 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      bottom: calc(
        17 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      position: absolute;
    }

    > .system-btns {
      // width: 100%;
      padding: 0
        calc(
          20 / v-bind(windowSizeWhenDesignForRef) *
            v-bind(windowSizeInCssForRef)
        );
      position: fixed;
      left: calc(
        30 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
      );
      bottom: calc(
        35 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
      );
      z-index: 34;
    }
  }
}
</style>