Wuchuan/src/views/gui/EntryList.vue

<template>
  <div class="entry-list">
    <ul>
      <li
        v-for="(item, index) in entryList"
        :key="index"
        @click="onClickEntry(item)"
      >
        <img
          class=""
          :src="item.bgImgUrl"
          alt=""
          draggable="false"
        >
        <span>{{ item.title }}</span>
      </li>
    </ul>
    <button
      class="close"
      @click="onClickClose"
    >
      <img
        class=""
        src="@/assets/images/close.png"
        alt=""
        draggable="false"
      >
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      entryList: [
        {
          bgImgUrl: require('@/assets/images/entries/wen-wu-ting.png'),
          title: '文物厅',
          sceneCode: '1264',
        },
        {
          bgImgUrl: require('@/assets/images/entries/shu-fa-ting.png'),
          title: '书法厅',
          sceneCode: '1264',
        },
        {
          bgImgUrl: require('@/assets/images/entries/ge-lao-zu.png'),
          title: '仡佬族文化厅',
          sceneCode: '1264',
        },
        {
          bgImgUrl: require('@/assets/images/entries/30-zhou-nian.png'),
          title: '30周年成就展',
          sceneCode: '1264',
        },
        {
          bgImgUrl: require('@/assets/images/entries/di-biao-he-ying.png'),
          title: '地标合影',
          routeName: 'groupPhoto',
        },
        {
          bgImgUrl: require('@/assets/images/entries/wen-wu-shang-xi.png'),
          title: '文物赏析',
          routeName: 'RelicsList',
        },
      ]
    }
  },
  methods: {
    onClickClose() {
      this.$emit('close')
    },
    onClickEntry(entry) {
      if (entry.sceneCode) {
        this.$router.push({
          name: 'Home',
          query: {
            ...this.$route.query,
            ...{
              m: entry.sceneCode,
            }
          }
        })
        location.reload()
      } else {
        this.$router.push({
          name: entry.routeName
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.entry-list {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(248, 241, 235, 0.90);
  backdrop-filter: blur(1.8vw);
  > ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 10.6vw;
    padding-left: 4.9vw;
    overflow: auto;
    > li {
      margin-right: 3.2vw;
      margin-bottom: 5.3vw;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      > img {
        width: 43.6vw;
        height: 32vw;
        margin-bottom: 2.7vw;
      }
      > span {
        font-size: 3.6vw;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #666666;
      }
    }
  }
  > button.close {
    position: fixed;
    width: 13.3vw;
    height: 13.3vw;
    left: 50%;
    bottom: 5vh;
    transform: translateX(-50%);
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>