<template>
|
<div id="cryptos" class="mt-20">
|
<div class="nav mb-40">
|
<div v-for="(item, index) in navList" :key="index" class="list" @click="goPath(item.name)">
|
<div class="imgBox"><img :src="handleImage(item.icon)" alt=""></div>
|
<div class="mt-15 text-center title">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
symbolType: {
|
type: String,
|
default: 'cryptos'
|
},
|
},
|
data() {
|
return {
|
navList: [
|
{
|
name: this.$t('买入'),
|
icon: new URL('@/assets/image/exNav/icon01.png', import.meta.url),
|
},
|
{
|
name: this.$t('卖出'),
|
icon: new URL('@/assets/image/exNav/icon02.png', import.meta.url),
|
},
|
// {
|
// name: this.$t('撤单'),
|
// icon: new URL('@/assets/image/exNav/icon03.png', import.meta.url),
|
// },
|
{
|
name: this.$t('持仓'),
|
icon: new URL('@/assets/image/exNav/icon04.png', import.meta.url),
|
},
|
{
|
name: this.$t('查询'),
|
icon: new URL('@/assets/image/exNav/icon05.png', import.meta.url),
|
},
|
],
|
pathList: {
|
'indices': {
|
[this.$t('买入')]: '/quotes/openTrade?tabActive=0&symbol=GlobalETF500&from=trade&type=indices',
|
[this.$t('卖出')]: '/quotes/openTrade?tabActive=1&symbol=GlobalETF500&from=trade&type=indices',
|
// [this.$t('撤单')]: '/quotes/openTrade?tabActive=2&symbol=GlobalETF500&from=trade&type=indices',
|
[this.$t('持仓')]: '/quotes/openTrade?tabActive=3&symbol=GlobalETF500&from=trade&type=indices',
|
[this.$t('查询')]: '/quotes/openTrade?tabActive=4&symbol=GlobalETF500&from=trade&type=indices',
|
},
|
'cryptos': {
|
[this.$t('买入')]: '/cryptos/perpetualContract/btcusdt?tabActive=0&from=trade',
|
[this.$t('卖出')]: '/cryptos/perpetualContract/btcusdt?tabActive=1&from=trade',
|
// [this.$t('撤单')]: '/quotes/openTrade?tabActive=2&from=trade',
|
[this.$t('持仓')]: '/cryptos/perpetualContract/btcusdt?from=trade&type=cryptos&tradeTabActive=1&navActive=0',
|
[this.$t('查询')]: '/cryptos/perpetualHistory?symbol=btcusdt&type=cryptos&tradeTabActive=1&navActive=2',
|
},
|
'forex': {
|
[this.$t('买入')]: '/foreign/coinChart?symbol=BTCUSD&tabActive=0&from=trade',
|
[this.$t('卖出')]: '/foreign/coinChart?symbol=BTCUSD&tabActive=1&from=trade',
|
// [this.$t('撤单')]: '/quotes/openTrade?tbActive=2&symbol=BTCUSD&from=trade',
|
[this.$t('持仓')]: '/position/index?tabActive=3&from=trade',
|
[this.$t('查询')]: '/history/list?tabActive=4&from=trade',
|
},
|
'US-stocks': {
|
[this.$t('买入')]: '/quotes/openTrade?tabActive=0&symbol=AAPL&from=trade&type=US-stocks',
|
[this.$t('卖出')]: '/quotes/openTrade?tabActive=1&symbol=AAPL&from=trade&type=US-stocks',
|
// [this.$t('撤单')]: '/quotes/openTrade?tabActive=2&symbol=AAPL&from=trade&type=US-stocks',
|
[this.$t('持仓')]: '/quotes/openTrade?tabActive=3&symbol=AAPL&from=trade&type=US-stocks',
|
[this.$t('查询')]: '/quotes/openTrade?tabActive=4&symbol=AAPL&from=trade&type=US-stocks',
|
},
|
}
|
}
|
},
|
methods: {
|
handleImage(url) {
|
return new URL(url, import.meta.url).href
|
},
|
goPath(name) {
|
const pathName = this.pathList[this.symbolType][name]
|
if (!pathName) return
|
this.$router.push(pathName)
|
}
|
},
|
// activated() {
|
// this.navList = [
|
// {
|
// name: this.$t('买入'),
|
// icon: `./img/icon01.png`,
|
// path: '/cryptos/exchangePage'
|
// },
|
// {
|
// name: this.$t('卖出'),
|
// icon: `./img/icon02.png`,
|
// path: '/cryptos/accountChange'
|
// },
|
// {
|
// name: this.$t('撤单'),
|
// icon: `./img/icon03.png`,
|
// path: '/cryptos/funds'
|
// },
|
// {
|
// name: this.$t('持仓'),
|
// icon: `./img/icon04.png`,
|
|
// path: '/cryptos/funds'
|
// },
|
// {
|
// name: this.$t('查询'),
|
// icon: `./img/icon05.png`,
|
// path: '/cryptos/trendDetails/btc'
|
// },
|
// ]
|
// },
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/init.scss";
|
|
#cryptos {
|
.nav {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 26px;
|
color: #21262F;
|
}
|
|
.list {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
flex: 1;
|
color: $text_color;
|
|
&:last-child {
|
margin-right: 0px;
|
}
|
|
.title {
|
font-family: 'PingFang HK';
|
font-style: normal;
|
font-weight: 600;
|
font-size: 12px;
|
line-height: 17px;
|
text-align: center;
|
}
|
}
|
|
.imgBox {
|
width: 48px;
|
height: 48px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
