YangZhouDaYunHeDaDu/src/components/GameEntryPage.vue

<template>
  <div class="game-entry-page">
    <button
      class="return"
      @click="store.dispatch('closeGameEntryPage')"
    />
    <img
      class="game-entry-page__title"
      src="@/assets/images/game-entry-page-title.png"
      draggable="false"
    >
    <div class="entry-list">
      <div
        v-if="isGHG"
        class="entry-item"
        @click="isGHG && store.dispatch('openIframePage', {
          url: 'https://houseoss.4dkankan.com/project/yzdyh-dadu/ghg/index.html',
          style: 'width: 100%; height: 100%'
        })"
      >
        <img
          v-if="!isGHG"
          class=""
          src="@/assets/images/game-entry-jigsaw.png"
          alt=""
          draggable="false"
        >
        <img
          v-else
          class="highlight"
          src="@/assets/images/game-entry-jigsaw-highlight.png"
          alt=""
          draggable="false"
        >
        <h3>广寒胜境</h3>
      </div>
      <div
        v-if="isShip"
        class="entry-item"
        @click="isShip && emit('playShipGame')"
      >
        <img
          v-if="!isShip"
          class=""
          src="@/assets/images/game-entry-boat.png"
          alt=""
          draggable="false"
        >
        <img
          v-else
          class="highlight"
          src="@/assets/images/game-entry-boat-highlight.png"
          alt=""
          draggable="false"
        >
        <h3>舟楫千里</h3>
      </div>
      <div
        v-if="isDBG"
        class="entry-item"
        @click="isDBG && store.dispatch('openIframePage', {
          url: $isMobile ? 'https://houseoss.4dkankan.com/project/yzdyh-dadu/duobaoge/mobile/index.html' : 'https://houseoss.4dkankan.com/project/yzdyh-dadu/duobaoge/index.html',
          style: 'width: 100%; height: 100%'
        })"
      >
        <img
          v-if="!isDBG"
          class=""
          src="@/assets/images/game-entry-relic-show.png"
          alt=""
          draggable="false"
        >
        <img
          v-else
          class="highlight"
          src="@/assets/images/game-entry-relic-show-highlight.png"
          alt=""
          draggable="false"
        >
        <h3>古瓷集珍</h3>
      </div>
    </div>
  </div>
</template>

<script setup>
import { inject } from "vue"
import { useStore } from "vuex"

const store = useStore()
const $isMobile = inject('$isMobile')

const gameName = store.state.gameEntryPageAttrs.gameName

const emit = defineEmits(['playShipGame'])

const isGHG = gameName === '广寒宫'
const isShip = gameName === '聊城古船'
const isDBG = gameName === '多宝阁'
</script>

<style lang="less" scoped>
.game-entry-page{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/game-entry-page-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  &__title {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 1062px;
    transform: translateX(-50%);
  }
  >button.return{
    position: absolute;
    top: 68px;
    left: 42px;
    width: 58px;
    height: 58px;
    background-image: url(@/assets/images/btn-return.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  >.entry-list{
    position: absolute;
    left: 50%;
    top: 320px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 106px;
    >.entry-item{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      cursor: pointer;
      >img{
        width: 284px;
        height: 284px;
        margin-bottom: 43px;
      }
      >img.highlight{
        width: 326px;
        height: 326px;
        margin-bottom: 0px;
        transform: translateY(-20px);
      }
      >h3{
        font-size: 28px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #43310E;
        line-height: 36px;
      }
    }
  }
}

@media screen and (max-height: 480px) {
  .game-entry-page {
    button.return {
      width: 100px;
      height: 100px;
    }
  }
}
</style>