From 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Fri, 28 Jun 2024 09:28:04 +0800
Subject: [PATCH] 123
---
src/components/ex-nav/index.vue | 226 +++++++++++++++++++++++++++++++------------------------
1 files changed, 127 insertions(+), 99 deletions(-)
diff --git a/src/components/ex-nav/index.vue b/src/components/ex-nav/index.vue
index f5a5b00..06c0c81 100644
--- a/src/components/ex-nav/index.vue
+++ b/src/components/ex-nav/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="mt-20">
- <div class="nav mb-40">
+ <div class="nav mb-40" style="margin-bottom: 15px">
<div
v-for="(item, index) in navList"
:key="index"
@@ -8,10 +8,10 @@
@click="goPath(item.path, item.name)"
>
<div class="imgBox"><img :src="item.icon" alt="" /></div>
- <div class="mt-15 text-center font-20 textColor3">{{ item.name }}</div>
+ <div class="mt-15 text-center font-20 ">{{ 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"
@@ -19,7 +19,20 @@
@click="goPath(item.path, item.name)"
>
<div class="imgBox"><img :src="item.icon" alt="" /></div>
- <div class="mt-15 text-center font-20 textColor3 h-64">
+ <div class="mt-15 text-center font-20 ">
+ {{ item.name }}
+ </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 ">
{{ item.name }}
</div>
</div>
@@ -29,6 +42,8 @@
<script>
import { mapGetters } from "vuex";
+import Axios from "@/API/userCenter";
+
export default {
props: {},
computed: {
@@ -38,111 +53,117 @@
},
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("资金"),
+ icon: require(`@/assets/3x/资源 7@3x.png`),
+ path: "/funds",
+ },
+
+ {
+ name: this.$t("闪兑"),
+ icon: require(`@/assets/3x/资源 1@3x.png`),
+ path: "/exchange/exchangePage",
+ },
+ {
+ 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",
+ // },
+ {
+ name: this.$t("理财"),
+ icon: require(`@/assets/3x/资源 3@3x.png`),
+ path: "/fm-home",
+ },
+ ];
+ 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/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/theme/${this.theme}/image/nav/exchange.png`),
- path: "/exchange/exchangePage",
- },
- {
- name: this.$t("理财"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/finance.png`),
- path: "/fm-home",
- },
- {
- name: this.$t("合约交易"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/trading.png`),
- path: "/trendDetails/btc",
- },
- {
- name: this.$t("分享"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/share.png`),
- path: "/promote",
- },
- ];
- this.navList1 = [
- {
- name: this.$t("在线客服"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/account.png`),
- path: "/customerService",
- },
- {
- // name: this.$t('质押借币'),
- name: "市场",
- icon: require(`../../assets/theme/${this.theme}/image/nav/pledge.png`),
- path: "/quotes?active=2",
- },
- {
- name: this.$t("账变记录"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/record.png`),
- path: "/accountChange",
- },
- {
- name: this.$t("现货账户"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/pool.png`),
- path: "/funds",
- },
- ];
+ this.getNavlist();
+ this.getUrl();
},
activated() {
- this.navList = [
- {
- name: this.$t("闪兑"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/exchange.png`),
- path: "/exchange/exchangePage",
- },
- {
- name: this.$t("理财"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/finance.png`),
- path: "/fm-home",
- },
- {
- name: this.$t("合约交易"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/trading.png`),
- path: "/trendDetails/btc",
- },
- {
- name: this.$t("分享"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/share.png`),
- path: "/promote",
- },
- ];
- this.navList1 = [
- {
- name: this.$t("在线客服"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/account.png`),
- path: "/customerService",
- },
- {
- name: this.$t("市场"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/pledge.png`),
- path: "/quotes?active=2",
- },
- {
- name: this.$t("账变记录"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/record.png`),
- path: "/accountChange",
- },
- {
- name: this.$t("现货账户"),
- icon: require(`../../assets/theme/${this.theme}/image/nav/pool.png`),
- path: "/funds",
- },
- ];
+ this.getNavlist();
},
};
</script>
@@ -150,19 +171,25 @@
<style lang="scss" scoped>
.nav {
display: flex;
- justify-content: center;
+
+ //justify-content: center;
align-items: center;
font-size: 26px;
color: #21262f;
+ padding: 10px 0;
+ margin: 0 15px;
+ box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
}
.list {
+ max-width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
- margin-right: 50px;
+ // margin-right: 50px;
flex: 1;
+ border-right: 1px solid #f6f6f6;
@include themify() {
color: themed("text_color");
@@ -174,12 +201,13 @@
}
.imgBox {
- width: 72px;
+ width: 50px;
height: 72px;
+ display: flex;
+ align-items: center;
img {
width: 100%;
- height: 100%;
}
}
</style>
--
Gitblit v1.9.3