hn_museum_game/web/src/components/Vmenu.vue

<template>
  <ul class="menu">
    <li @click="onClickItem(item)" v-for="item in list" :key="item.id">
      <img
        :src="`${config.cdn_url}images/${
          routeName == item.id ? item.active : item.normal
        }.png`"
        alt=""
      />
    </li>
  </ul>
</template>

<script setup>
import { reactive, computed } from "vue";

import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const emit = defineEmits(["clickIntro"]);
const routeName = computed(() => route.name);
const list = reactive([
  {
    id: "Introduce",
    name: "文物介绍",
    normal: "icon_introduction_normal",
    active: "icon_introduction_active",
  },
  {
    id: "Courtyard",
    name: "我的庭院",
    normal: "icon_mine_normal",
    active: "icon_mine_active",
  },
  {
    id: "Integral",
    name: "到处逛逛",
    normal: "icon_hangout_normal",
    active: "icon_hangout_active",
  },
]);

let ifrDom = document.querySelector("#ifr");

const postMsg = (source, data) => {
  ifrDom.contentWindow.postMessage(
    {
      source,
      data,
    },
    "*"
  );
};

const onClickItem = (item) => {
  if (item.id == "Introduce") {
    emit("clickIntro");
  } else {
    // 每次点击我的庄园 拿到自己的模型数据
    if (item.id === "Courtyard") {
      const userInfo = JSON.parse(
        localStorage.getItem("HN_GAME_USER_INFO") || "{}"
      );
      postMsg("ShowUserData", userInfo.id);
    }

    router.push({ name: item.id });
  }
};
</script>

<style lang="scss" scoped>
.menu {
  position: absolute;
  right: 20px;
  top: 2%;
  z-index: 9;
  display: flex;
  flex-direction: column;
  width: 10%;
  > li {
    width: 100%;
    margin: 2px 0;
    > img {
      width: 100%;
    }
  }
}
</style>