YangZhouDaYunHeDaDu/src/components/GameEntryPage.vue

<template>
  <div class="game-entry-page">
    <button
      class="return"
      @click="store.dispatch('closeGameEntryPage')"
    />
    <div class="entry-list">
      <div
        class="entry-item"
        @click="store.dispatch('openIframePage', {
          url: 'https://houseoss.4dkankan.com/project/yzdyh-dadu/ghg/index.html',
          style: 'width: 100%; height: 100%'
        })"
      >
        <img
          v-if="gameName !== '广寒宫'"
          class=""
          src="@/assets/images/game-entry-jigsaw.png"
          alt=""
          draggable="false"
        >
        <img
          v-if="gameName === '广寒宫'"
          class="highlight"
          src="@/assets/images/game-entry-jigsaw-highlight.png"
          alt=""
          draggable="false"
        >
        <h3>广寒胜境</h3>
      </div>
      <div
        class="entry-item"
        @click="emit('playShipGame')"
      >
        <img
          v-if="gameName !== '聊城古船'"
          class=""
          src="@/assets/images/game-entry-boat.png"
          alt=""
          draggable="false"
        >
        <img
          v-if="gameName === '聊城古船'"
          class="highlight"
          src="@/assets/images/game-entry-boat-highlight.png"
          alt=""
          draggable="false"
        >
        <h3>舟楫千里</h3>
      </div>
      <div
        class="entry-item"
        @click="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="gameName !== '多宝阁'"
          class=""
          src="@/assets/images/game-entry-relic-show.png"
          alt=""
          draggable="false"
        >
        <img
          v-if="gameName === '多宝阁'"
          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'])

</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 top;
  >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 center;
  }
  >.entry-list{
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -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;
      }
    }
  }
}
</style>