<template>
|
<div class="mt-20 font-28">
|
<div class="nav mb-10">
|
<div v-for="(item, index) in navList" :key="index" class="list" @click="goPath(item.path, item.isLogin)">
|
<div class="imgBox"><img :src="handleImage(item.icon)" alt=""></div>
|
<div class="mt-15 text-center">{{ item.name }}</div>
|
</div>
|
</div>
|
<div class="nav mb-10">
|
<div v-for="(item, index) in navList1" :key="index" class="list" @click="goPath(item.path, item.isLogin)">
|
<div class="imgBox"><img :src="handleImage(item.icon)" alt="" v-if="item.icon"></div>
|
<div class="mt-15 text-center">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {mapGetters } from 'vuex'
|
export default {
|
props: {
|
|
},
|
components: {
|
|
},
|
computed: {
|
...mapGetters('user', ['userInfo']),
|
},
|
data() {
|
return {
|
navList: [
|
{
|
name: this.$t('闪兑'),
|
icon: new URL(`../../../assets/theme/dark/image/nav/exchange.png`, import.meta.url),
|
path: '/cryptos/exchangePage',
|
isLogin: true
|
},
|
{
|
name: this.$t('账变记录'),
|
icon: new URL('@/assets/theme/dark/image/nav/record.png', import.meta.url),
|
path: '/cryptos/accountChange?type=cryptos',
|
isLogin: true
|
},
|
// {
|
// name: this.$t('现货账户'),
|
// icon: `../../../assets/theme/dark/image/nav/account.png`,
|
// path: '/cryptos/funds'
|
// },
|
{
|
name: this.$t('SpotTrading'),
|
icon: new URL('@/assets/theme/dark/image/nav/coin.png', import.meta.url),
|
path: '/cryptos/trade/btcusdt'
|
},
|
{
|
name: this.$t('永续合约'),
|
icon: new URL('@/assets/theme/dark/image/nav/trading.png', import.meta.url),
|
path: '/cryptos/perpetualContract/btcusdt'
|
},
|
{
|
name: this.$t('交割合约'),
|
icon: new URL('@/assets/theme/dark/image/nav/delivery.png', import.meta.url),
|
path: '/cryptos/perpetualContract/btcusdt?selectIndex=2'
|
},
|
|
],
|
navList1: [
|
{
|
name: this.$t('资金'),
|
icon: new URL('@/assets/theme/dark/image/nav/asset.png', import.meta.url),
|
path: '/cryptos/funds',
|
isLogin: true
|
},
|
// {
|
// name: this.$t('基金理财'),
|
// icon: new URL('@/assets/theme/dark/image/nav/financialmanagement.png', import.meta.url),
|
// path: '/cryptos/fm-home'
|
// },
|
// {
|
// name: this.$t('智能矿池'),
|
// icon: new URL('@/assets/theme/dark/image/nav/SmartKuangchi.png', import.meta.url),
|
// path: '/cryptos/machine'
|
// },
|
// {
|
// name: this.$t('质押借币'),
|
// icon: new URL('@/assets/theme/dark/image/nav/PledgeLoan.png', import.meta.url),
|
// path: '/cryptos/pledgeLoan'
|
// },
|
// {
|
// name: this.$t('助力贷'),
|
// icon: new URL('@/assets/theme/dark/image/nav/Helpoan.png', import.meta.url),
|
// path: '/cryptos/loan'
|
// },
|
// {
|
// name: this.$t('C2C'),
|
// icon: new URL('@/assets/theme/dark/image/nav/c2c.png', import.meta.url),
|
// path: '/cryptos/wantBuy'
|
// },
|
{
|
name: this.$t('更多'),
|
icon: new URL('@/assets/theme/dark/image/nav/more.png', import.meta.url),
|
path: '/more'
|
}
|
]
|
}
|
},
|
methods: {
|
handleImage(url) {
|
return new URL(url, import.meta.url).href
|
},
|
goPath(path, isLogin) {
|
if (!path) {
|
return
|
} else if (isLogin) {
|
if (!this.userInfo.token) {
|
this.$router.push('/login')
|
} else {
|
this.$router.push(path)
|
}
|
} else {
|
this.$router.push(path)
|
}
|
}
|
},
|
activated() {
|
this.navList = [
|
{
|
name: this.$t('闪兑'),
|
icon: `../../../assets/theme/dark/image/nav/exchange.png`,
|
path: '/cryptos/exchangePage',
|
isLogin: true
|
},
|
{
|
name: this.$t('账变记录'),
|
icon: `../../../assets/theme/dark/image/nav/record.png`,
|
path: '/cryptos/accountChange?type=cryptos',
|
isLogin: true
|
},
|
// {
|
// name: this.$t('现货账户'),
|
// icon: `../../../assets/theme/dark/image/nav/account.png`,
|
// path: '/cryptos/funds'
|
// },
|
{
|
name: this.$t('SpotTrading'),
|
icon: `../../../assets/theme/dark/image/nav/coin.png`,
|
path: '/cryptos/funds'
|
},
|
{
|
name: this.$t('永续合约'),
|
icon: `../../../assets/theme/dark/image/nav/trading.png`,
|
path: '/cryptos/trendDetails/btc'
|
},
|
{
|
name: this.$t('交割合约'),
|
icon: `../../../assets/theme/dark/image/nav/delivery.png`,
|
path: '/cryptos/trendDetails/btc?selectIndex=2'
|
},
|
]
|
this.navList1 = [
|
{
|
name: this.$t('资金'),
|
icon: new URL('@/assets/theme/dark/image/nav/asset.png', import.meta.url),
|
path: '/cryptos/funds',
|
isLogin: true
|
},
|
// {
|
// name: this.$t('基金理财'),
|
// icon: new URL('@/assets/theme/dark/image/nav/financialmanagement.png', import.meta.url),
|
// path: '/cryptos/fund'
|
// },
|
// {
|
// name: this.$t('智能矿池'),
|
// icon: new URL('@/assets/theme/dark/image/nav/SmartKuangchi.png', import.meta.url),
|
// path: '/cryptos/machine'
|
// },
|
// {
|
// name: this.$t('质押借币'),
|
// icon: new URL('@/assets/theme/dark/image/nav/PledgeLoan.png', import.meta.url),
|
// path: '/cryptos/pledgeLoan'
|
// },
|
// {
|
// name: this.$t('助力贷'),
|
// icon: `../../../assets/theme/dark/image/nav/Helpoan.png`,
|
// path: '/cryptos/loan'
|
// },
|
]
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/init.scss";
|
|
#cryptos {
|
.nav {
|
display: flex;
|
align-items: center;
|
font-size: 26px;
|
color: #21262F;
|
}
|
|
.list {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
// margin-right: 50px;
|
width: 20%;
|
color: $text_color;
|
|
&:last-child {
|
margin-right: 0px;
|
}
|
|
.text-center {
|
height: 70px;
|
word-wrap: break-word;
|
white-space: normal;
|
width: 100%;
|
line-height: 30px;
|
text-align: center;
|
}
|
}
|
|
.imgBox {
|
width: 90px;
|
height: 90px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
