first

zzzz

2024-04-15 136d5835ef62ecfb9932526c5f48a434988b1be7

 src/components/ex-nav/index.vue

@@ -11,7 +11,7 @@
        <div class="mt-15 text-center font-20 newcolor1">{{ item.name }}</div>
      </div>
    </div>
    <div class="nav mb-44">
    <div class="nav mb-44" style="margin-bottom: 15px">
      <div
        v-for="(item, index) in navList1"
        :key="index"
@@ -24,11 +24,26 @@
        </div>
      </div>
    </div>
    <div class="nav mb-44" v-if="isLock">
      <div
        v-for="(item, index) in navList2"
        :key="index"
        class="list"
        @click="goPath(item.path, item.router)"
      >
        <div class="imgBox"><img :src="item.icon" alt="" /></div>
        <div class="mt-15 text-center font-20 newcolor1">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Axios from "@/API/userCenter";

export default {
  props: {},
  computed: {
@@ -38,113 +53,115 @@
  },
  data() {
    return {
      isLock: false,
      navList: [],
      navList1: [],
      navList2: [],
      zbUrl: "",
      bsUrl: "",
    };
  },
  methods: {
    goPath(path, name) {
    async getUrl() {
      const res = await Axios.getConfigurationByKey();
      res.map((val) => {
        if (val.configKey === "zb") {
          this.zbUrl = val.configValue;
        }
        if (val.configKey === "bs") {
          this.bsUrl = val.configValue;
        }
      });
    },
    getNavlist() {
      this.navList = [
        {
          name: this.$t("ICO"),
          icon: require(`@/assets/3x/资源 7@3x.png`),

          path: "/new-urrency",
        },

        {
          name: this.$t("理财"),
          icon: require(`@/assets/3x/资源 3@3x.png`),
          path: "/fm-home",
        },
        {
          name: this.$t("合约交易"),
          icon: require(`@/assets/3x/资源 5@3x.png`),
          path: "/trendDetails/btc",
        },
        {
          name: this.$t("分享"),
          icon: require(`@/assets/3x/资源 2@3x.png`),
          path: "/promote",
        },
      ];
      this.navList1 = [
        {
          name: this.$t("在线客服"),
          icon: require(`@/assets/3x/资源 8@3x.png`),

          path: "/customerService",
        },
        {
          name: this.$t("质押借币"),
          icon: require(`@/assets/3x/资源 6@3x.png`),
          path: "/pledgeLoan",
        },
        {
          name: this.$t("账变记录"),
          icon: require(`@/assets/3x/资源 9@3x.png`),
          path: "/accountChange",
        },

        {
          name: this.$t("更多"),
          icon: require(`@/assets/3x/Artboard 2@33x copy 3.png`),
          path: "/more",
        },
      ];
      this.navList2 = [
        {
          name: this.$t("闪兑"),
          icon: require(`@/assets/3x/资源 1@3x.png`),
          path: "/exchange/exchangePage",
        },
        {
          name: this.$t("直播"),
          icon: require(`@/assets/3x/Artboard 3@33x copy 3.png`),
          id: "zb",
          path: "/zb",
          router: "",
        },
        {
          name: this.$t("比赛"),
          icon: require(`@/assets/3x/Artboard 4@33x copy 3.png`),
          id: "bs",
          path: "/bs",
          router: "",
        },
      ];
    },
    goPath(path, router) {
      if (path == "/more") {
        this.$toast(this.$t("敬请期待"));
        this.isLock = !this.isLock;
      } else if (path === "/zb") {
        if (this.zbUrl) window.open(this.zbUrl);
      } else if (path === "/bs") {
        if (this.bsUrl) window.open(this.bsUrl);
      } else {
        this.$router.push(path);
      }
    },
  },
  mounted() {
    this.navList = [
      {
        name: this.$t("闪兑"),
        icon: require(`@/assets/3x/资源 1@3x.png`),
        path: "/exchange/exchangePage",
      },
      {
        name: this.$t("理财"),
        icon: require(`@/assets/3x/资源 3@3x.png`),
        path: "/fm-home",
      },
      {
        name: this.$t("合约交易"),
        icon: require(`@/assets/3x/资源 5@3x.png`),
        path: "/trendDetails/btc",
      },
      {
        name: this.$t("分享"),
        icon: require(`@/assets/3x/资源 2@3x.png`),
        path: "/promote",
      },
    ];
    this.navList1 = [
      {
        name: this.$t("在线客服"),
        icon: require(`@/assets/3x/资源 8@3x.png`),

        path: "/customerService",
      },
      {
        name: this.$t("质押借币"),
        icon: require(`@/assets/3x/资源 6@3x.png`),
        path: "/pledgeLoan",
      },
      {
        name: this.$t("账变记录"),
        icon: require(`@/assets/3x/资源 9@3x.png`),
        path: "/accountChange",
      },
      {
        name: this.$t("ICO"),
        icon: require(`@/assets/3x/资源 7@3x.png`),

        path: "/new-urrency",
      },
    ];
    this.getNavlist();
    this.getUrl();
  },
  activated() {
    this.navList = [
      {
        name: this.$t("闪兑"),
        icon: require(`@/assets/3x/资源 1@3x.png`),
        path: "/exchange/exchangePage",
      },
      {
        name: this.$t("理财"),
        icon: require(`@/assets/3x/资源 3@3x.png`),
        path: "/fm-home",
      },
      {
        name: this.$t("合约交易"),
        icon: require(`@/assets/3x/资源 5@3x.png`),
        path: "/trendDetails/btc",
      },
      {
        name: this.$t("分享"),
        icon: require(`@/assets/3x/资源 2@3x.png`),
        path: "/promote",
      },
    ];
    this.navList1 = [
      {
        name: this.$t("在线客服"),
        icon: require(`@/assets/3x/资源 8@3x.png`),
        path: "/customerService",
      },
      {
        name: this.$t("质押借币"),
        icon: require(`@/assets/3x/资源 6@3x.png`),
        path: "/pledgeLoan",
      },
      {
        name: this.$t("账变记录"),
        icon: require(`@/assets/3x/资源 9@3x.png`),
        path: "/accountChange",
      },
      {
        name: this.$t("ICO"),
        icon: require(`@/assets/3x/资源 7@3x.png`),

        path: "/new-urrency",
      },
    ];
    this.getNavlist();
  },
};
</script>
@@ -153,7 +170,7 @@
.nav {
  display: flex;

  justify-content: center;
  //justify-content: center;
  align-items: center;
  font-size: 26px;
  color: #21262f;
@@ -163,6 +180,7 @@
}

.list {
  max-width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;