nj_museum/src/components/menu.vue

<template>
  <ul class="menu" :class="currentid">
    <li :class="{active:currentid == item.id}" @click="onclick(item)" v-for="(item, i) in list" :key="i">
      <img :src="
        require(`@/assets/images/icon/${item.id+(currentid==item.id?'_active':'')}.png`)
      " alt="" />
      <p>{{item.name}}</p>
    </li>
  </ul>
</template>

<script>

export default {
  props: ["canMove", "canControls"],
  data() {
    return {
      currentid: "info",
      list: [
        {
          id: "history",
          name: "考古",
        },
        {
          id: "info",
          name: "简介",
        },
        {
          id: "pic",
          name: "纹饰",
        },
        {
          id: "collection",
          name: "关联文物",
        }
      ],
    };
  },
  methods: {
    onclick(item) {
      if (this.currentid == item.id) {
        return 
      }
      if (item.id == 'history' || item.id == 'collection') {
        this.$emit("notFinish");
        return
      }
      this.$emit("clickItem", item);
      this.currentid = item.id;
    },
  },
  mounted() {
    this.$bus.$on("resetcurrent", () => {
      this.currentid = "";
    });
  },
};
</script>

<style lang="less" scoped>
.menu {
  position: fixed;
  left: 42px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  transition: 0.3s ease all;

  >li {
    list-style: none;
    position: relative;
    width: 80px;
    display: inline-block;
    margin: 0 10px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    opacity: 0.7;

    >p {
      font-size: 14px;
    }

    &.active,
    &:hover {
      opacity: 1;
    }
  }
}


@media screen and (max-width: 1000px) {
  .menu {
    left: 6%;
    pointer-events: auto;
    transition: 0s ease all;

    >li {
      width: 6vw;
      margin: 0 5px;
      pointer-events: auto;

      >img {
        width: 100%;
      }
    }
  }

  .ming,
  .sheng,
  .yue,
  .zhi {
    top: 50%;
    flex-direction: column;
    margin: 5px 0;
    left: 6%;

    >li {
      margin: 5px 0;
    }
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    pointer-events: auto;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    pointer-events: none;
  }
}
</style>