NanjingMuseumWuJinZang/src/views/GameView.vue

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router"
import useSizeAdapt from "@/useFunctions/useSizeAdapt"

import Toast from '@/components/ToastBox.vue'
const router = useRouter()

// home-封面  unity-游戏 scene-线上展  reset-确认是否重新
const mode = ref('home')

const goBack = () => {
  window.history.back()
}

const goHome = () => {
  // router.replace('/')
  mode.value = 'reset'
}

const resetHome = () => {
  router.replace('/')
}

const toast = ref(null)
const showToast = () => {
  toast.value.show()
  setTimeout(() => {
    if (toast?.value) {
      toast.value.hide()
    }
  }, 2000)
}



const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()


onMounted(() => {
  window.closeGame = () => {
    mode.value = 'home'
  }
})

/**
 * 右滑返回
 */
const fingerPosXWhenTouchStart = ref(0)
const handletouchstart = (event) => {
  fingerPosXWhenTouchStart.value = event.changedTouches[0].pageX
}
const touchMove = (event) => {
  let currentX = event.changedTouches[0].pageX
  let tX = currentX - fingerPosXWhenTouchStart.value
  if (tX > 1) {
    router.push({
      name: 'MoreContent',
      query: {
        anchorIdx: 1,
      }
    })
  }
}
</script>

<template>
  <div
    class="game-page"
    @touchstart="handletouchstart($event)"
    @touchmove="touchMove($event)"
  >
    <Toast
      ref="toast"
      :message="`暂未开发`"
      :duration="`3000`"
    />

    <!--默认首页 -->
    <div
      class="home"
      :style="{backgroundImage: mode ==='reset' ?`url(${require('@/assets/images/reset-bg.png')})`:'',background:'cover'}"
    >
      <div
        v-if="mode !='reset'"
        class="line-scene"
        @click="() => {router.push('/onlone-scene')}"
      >
        <div class="down-triangle" />
        <div class="line-title">
          《无尽藏》
        </div>
        线上展
      </div>
      <div
        v-if="mode !='reset'"
        class="game-income"
        @click="() => { mode = 'unity' }"
      >
        <div class="down-triangle" />
        <div>《修篁树石图》画作创作</div>
      </div>
      <!-- reset部分 -->
      <div
        v-if="mode == 'reset'"
        class="title"
      >
        是否重新开始<div>？</div>
      </div>
      <div
        v-if="mode == 'reset'"
        class="cancel"
        @click="() => {
          mode = 'home'
        }"
      >
        取消
      </div>
      <div
        v-if="mode == 'reset'"
        class="reset"
        @click="resetHome()"
      >
        <img
          src="@/assets/images/reset-icon.png"
          alt=""
        >
        重新开始
        <div class="cicle" />
      </div>
      <div class="btns">
        <!-- 加载中... -->
        <img
          src="@/assets/images/icon-loading.png"
          alt="loading"
          @click="goHome()"
        >
        <!-- <BtnBack @click="goBack()" /> -->
      </div>

      <PaginationComp
        class="pagination"
        :total="3"
        :idx="2"
      />
    </div>


    <!-- 游戏页面 -->
    <iframe
      v-if="mode === 'unity'"
      class="game-box"
      :src="`./game/index.html`"
    />
  </div>
</template>

<style lang="less" scoped>
.game-page {
  width: 100%;
  height: 100%;
  position: relative;

  .home {
    width: 100%;
    height: 100%;
    background: url(@/assets/images/bg-game.png);
    background-size: cover;
    transition: all .3s;


    >.line-scene {
      padding: 20px 10px;
      background-image: url(@/assets/images/line-scene.png);
      background-size: 100% 100%;
      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(187 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(56 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      white-space: nowrap;
      font-family: 'KaiTi';

      position: absolute;
      bottom: calc(300 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      left: 50%;
      transform: translateX(-50%);
      padding-top: 30px;
      letter-spacing: .05em;


      >.down-triangle {
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid #6F917F;
        margin-bottom: 10px;
        position: absolute;
        top: -5px;
        animation: fade-in-out 1.5s infinite;

        @keyframes fade-in-out {
          0%{
            opacity: 0.1;
          }
          50%{
            opacity: 1;
          }
          100%{
            opacity: 0.1;
          }

        }
      }

      >.line-title {
        color: #707f48c7;
        font-weight: 600;
        line-height: 29px;
        // text-stroke: 1px #707F48;
        // text-align: center;
        // font-style: normal;
        // text-transform: none;
        // -webkit-text-stroke: 1px #707F48;
      }

      color: #474747;
    }

    >.game-income {
      padding: 20px 10px;
      // background-image: url(@/assets/images/line-scene.png);
      // background-size: 100% 100%;
      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: calc(187 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(56 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      white-space: nowrap;
      font-family: 'KaiTi';

      position: absolute;
      bottom: calc(229 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      left: 50%;
      transform: translateX(-50%);
      padding-top: 30px;
      letter-spacing: .05em;

      >.down-triangle {
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid #6F917F;
        margin-bottom: 10px;
        animation: fade-in-out 1.5s infinite;

        @keyframes fade-in-out {
          0%{
            opacity: 0.1;
          }
          50%{
            opacity: 1;
          }
          100%{
            opacity: 0.1;
          }

        }
      }

    }

    .title{
      position: absolute;
      left: 52%;
      top:20%;
      writing-mode: vertical-rl;
      color: #476446;
      font-family: 'KingHwa_OldSong';
      font-size: calc(26 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      line-height: calc(35 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      display: flex;
      letter-spacing: 6px;
      justify-content: center;
      align-items: center;
      text-align: center;
      >div{
        transform: translateX(-25%);
      }

    }

    .cancel{
      width: calc(92 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(36 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      background-image: url(@/assets/images/cancel-bg.png);
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      bottom: 40%;
      transform: translateX(-20%);
      display: flex;
      justify-content: center;
      align-items: end;
      // padding-bottom: 10px;
      color: #474747;
      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: 'KaiTi';
    }
    .reset{
      display: flex;
      color: #474747;
      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: 'KaiTi';
      position: absolute;
      left: 50%;
      bottom: 30%;
      transform: translateX(-35%);
      >img{
        margin-right: 10px;
        animation: fade-in-out 1.5s infinite;

        @keyframes fade-in-out {
          0%{
            opacity: 0.1;
          }
          50%{
            opacity: 1;
          }
          100%{
            opacity: 0.1;
          }

        }
      }
      >.cicle{
        width: 15px;
        height: 15px;
        border-radius: 50px;
        border: 1px solid #7B916B;
        position: absolute;
        right: -5px;
        bottom: 0px;
      }
    }

    .btns {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      position: absolute;
      // height: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      left: calc(25 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      bottom: calc(30 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

      >img {
        width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(24 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }

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

  .game-box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
}
</style>