wctdreamlandwebsite-front/components/m-nav.vue

<template>
  <OutMask :bg="'bg'">
    <div v-if="!showCode" class="mobile_nav">
      <!-- <div class="navContent"> -->
      <ul class="navContent">
        <li
          v-for="(item, index) in navList"
          :key="index"
          :style="{ backgroundImage: 'url(' + item.src + ')' }"
          class="navItem"
          :class="'nav-' + item.class"
          @click="toViewSwiper(index)"
        >
          <!-- v-lazy:background-image="item.src" -->
          <p v-if="index < 3" class="dashed">·····</p>
        </li>
      </ul>
      <div class="communityList">
        <div
          v-for="(item, index) in communityList"
          :key="index"
          class="communityItem"
        >
          <a
            v-if="item.href"
            :href="item.href"
            target="_blank"
            rel="noopener noreferrer"
            >{{ item.txt }}</a
          >
          <p v-else @click="showCode = true">{{ item.txt }}</p>
        </div>
      </div>
      <!-- </div> -->
      <div class="mb_close_btn" @click="closeMobileNav()"></div>
    </div>
    <div v-else class="weCode">
      <div class="border">
        <img src="../assets/footer/code.png" class="codeImg" alt="" />
      </div>
      <p class="codeTxt">扫码关注微信公众号</p>
      <div class="we_close_btn" @click="showCode = false"></div>
    </div>
  </OutMask>
</template>

<script>
export default {
  components: {
    OutMask: () => import("./outMask.vue"),
  },
 props: {
    mobileCheck: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showCode: false,
      navList: [
        {
          class: "home",
          src: require("../assets/mask/home.png"),
        },
        {
          class: "trailer",
          src: require("../assets/mask/news.png"),
        },
        {
          class: "world",
          src: require("../assets/mask/world.png"),
        },
        {
          class: "Characters",
          src: require("../assets/mask/Characters.png"),
        },
      ],
      communityList: [
        {
          txt: "官方微博",
          href: "https://weibo.com/p/1006067514307100/",
        },
        {
          txt: "官方QQ群",
          href: "https://jq.qq.com/?_wv=1027&k=BgdhvKj5",
        },
        {
          txt: "官方B站",
          href: "https://space.bilibili.com/1988649931/dynamic",
        },
        {
          txt: "官方公众号",
        },
      ],
    };
  },
  
  methods: {
    closeMobileNav() {
      this.$emit("closeMobileNav");
    },
    toViewSwiper(activeIndex) {
      if (this.mobileCheck) {
        this.$router.push({
          name: "m",
          params: { id: activeIndex, mNav: true },
        });
      } else {
        this.$emit("toViewSwiper", activeIndex);
      }
    },
  },
};
</script>

<style lang="scss">
p {
  margin: 0;
  padding: 0;
}
.mobile_nav {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .navContent {
    padding: 0 0 55px;
    margin: 0;
    width: 642px;
    border-bottom: 1px solid RGBA(255, 208, 152, 0.5);
    li {
      list-style: none;
      background-position: center;
      background-size: contain;
      height: 74px;
      margin: 110px auto 0;
      background-repeat: no-repeat;
      transform: translate3d(0, 0, 0);
      position: relative;
      .dashed {
        width: 6px;
        height: 56px;
        position: absolute;
        bottom: 0;
        left: 50%;
        font-size: 33px;
        color: #ffffff;
        word-wrap: break-word;
        word-break: normal;
        line-height: 0.4;
        transform: translate(-50%, 140%);
        padding: 0;
        margin: 0;
      }
    }
    .nav-home {
      width: 276px;
    }
    .nav-trailer {
      width: 392px;
    }
    .nav-world {
      width: 309px;
    }
    .nav-Characters {
      width: 336px;
    }
  }

  .communityList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 59px 83px;
    .communityItem {
      text-decoration: none;
      font-size: 26px;
      color: #eeccae;
      width: 269px;
      height: 52px;
      text-align: center;
      line-height: 52px;
      margin-bottom: 38px;

      a,
      p {
        width: 269px;
        height: 52px;
        display: block;
        background: url("@/assets/mask/communityItem.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        color: #eeccae;
      }
    }
  }

  .mb_close_btn {
    background: url("@/assets/mask/close.png") center no-repeat;
    background-size: contain;
    width: 58px;
    height: 60px;
    margin-bottom: 20px;
  }
}

.weCode {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  align-items: center;
  position: relative;
  .border {
    width: 340px;
    height: 347px;
    background: url("@/assets/footer/code_border.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .codeImg {
    width: 234px;
    height: 234px;
  }
  .codeTxt {
    height: 32px;
    font-size: 33px;
    font-family: "Noto Serif SC", serif;
    font-weight: bold;
    color: #ffffdc;
    text-shadow: 0px 0px 5px #b96f47;
  }
  .we_close_btn {
    width: 58px;
    height: 147px;
    background: url("@/assets/mobile/mask_close.png");
    background-size: contain;
    background-position: center;
    margin-top: 36px;
  }
}
</style>