<template>
|
<div class="pb-120 assetsCenter">
|
<div class="price">
|
<div class="price_box" style="justify-content: flex-end;">
|
<img class="price_box_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IArs4c6QAAAEVQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////Up1zwgAAABZ0Uk5TABAgMEBPUF9gb3B/gI+Qn6Cwv8/f7xMcqe8AAAEdSURBVEjH7dXBcoQgEATQBiaRKFHDQv//p+awljqArp6SqqTPvBoYZAR+LObG2o8vAH6yF5fbyAjAM3WX1g+ZCyAvFJFEboAcDsh7ZwG4IZIaME1iACNBg0Aycc0OkGROZNJgpEoByArML0G+C/gPLoBU3/QtIEGlAyCTSsCvT1+dwXqVciY8XnXJ4exB7MGYmXMN/BHoEwMQ+CjH1gGIjhEAYlUitkEnDM8tS9mmNnDGOwBwvpw3JrdAFrumbGxogKTq9kWJxlzq1Wc/lVOyBn4myTzOTbC7PA26Zb8V2FqrgSzVa7AeQ4PP5QlPjX9JagFaywMAE2+C5XgFcO4EQNIG3k7vYSuSniCKnlfj8X9UAIgAsONu0lj82XwD7hxJmfCAhwIAAAAASUVORK5CYII="/>
|
</div>
|
<div class="price_box">
|
{{$t('总资产')}} （ USDT ）
|
<!-- <div @click="changeEyes">
|
<img :src="require('../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" />
|
<img :src="require('../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" />
|
</div> -->
|
</div>
|
<div class="price_box">
|
{{funds.total}} USDT
|
</div>
|
</div>
|
<div class="flex justify-between px-52 pt-31 box-border">
|
<div class="flex-1 items-center text-center textColor1" v-for="(item, index) in typeList " :key="'type' + index"
|
@click="onTabs(index)">
|
<div class="font-32 text-center lh-53">{{ item.type }}</div>
|
</div>
|
</div>
|
<div class="flex mx-52 mt-17">
|
<span class="flex-1 border-b-color " :class="{ active_color: tab === 0 }"></span>
|
<span class="flex-1 border-b-color" :class="{ active_color: tab === 1 }"></span>
|
<span class="flex-1 border-b-color" :class="{ active_color: tab === 2 }"></span>
|
<span class="flex-1 border-b-color" :class="{ active_color: tab === 3 }"></span>
|
</div>
|
<over-view v-if="tab === 0" :funds="funds" :key="tab"></over-view>
|
<as-sets v-if="tab === 1" :funds="funds" :key="tab"></as-sets>
|
<contract v-if="tab === 2" :funds="funds" :index="index" :key="tab"></contract>
|
<financial v-if="tab === 3" :funds="funds" :index="index" :key="tab"></financial>
|
|
</div>
|
</template>
|
|
<script>
|
|
import AsSets from "@/components/assetsCenter/assets"
|
import OverView from "@/components/assetsCenter/overview"
|
import Contract from "@/components/assetsCenter/contract"
|
import Financial from "@/components/assetsCenter/financial"
|
import Axios from "@/API/assets"
|
export default {
|
name: "assets-index",
|
components: {
|
AsSets,
|
OverView,
|
Contract,
|
Financial
|
},
|
data() {
|
return {
|
type: 'left', //left 从左往右 right 从有王座
|
list: [],
|
timer: null,
|
tab: 0,
|
index: 0, // 每个组件的二级tab
|
eyetel: false,
|
funds: {},
|
typeList: [
|
{
|
type: this.$t('总览'),
|
},
|
{
|
type: this.$t('现货账户'),
|
},
|
{
|
type: this.$t('合约'),
|
|
},
|
{
|
type: this.$t('理财'),
|
},
|
]
|
}
|
},
|
methods: {
|
onTabs(val) {
|
if (this.tab < val) {
|
this.type = 'right'
|
} else {
|
this.type = 'left'
|
}
|
console.log(val)
|
this.tab = val
|
},
|
getAssets() {
|
Axios.GetAllAssets().then((res) => {
|
const { code, data } = res
|
if (code) {
|
//console.log('总资产数据',data)
|
this.funds = data
|
}
|
})
|
},
|
},
|
created() {
|
this.getAssets()
|
this.timer = setInterval(() => {
|
this.getAssets()
|
}, 5000)
|
if (Object.hasOwnProperty.call(this.$route.query, 'tab')) {
|
this.tab = this.$route.query.tab / 1
|
this.index = this.$route.query.index ? this.$route.query.index * 1 : 0
|
}
|
},
|
changeEyes() {
|
this.eyetel = !this.eyetel;
|
},
|
activated() {
|
clearInterval(this.timer)
|
this.timer = setInterval(() => {
|
this.getAssets()
|
}, 5000)
|
this.index = 0
|
},
|
deactivated() {
|
clearInterval(this.timer)
|
this.timer = null
|
},
|
beforeDestroy() {
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.price_box_img{
|
width: 3.375rem;
|
}
|
.price_box{
|
font-size: 1.625rem;
|
margin-bottom: .875rem;
|
display: flex;
|
color:#Fff;
|
}
|
.price{
|
padding: 2rem 2rem 2.375rem;
|
margin: 2rem 2rem;
|
border-radius: 1.125rem;
|
background: #2b64fb;
|
}
|
.assetsCenter {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.active_color {
|
@include themify() {
|
border-bottom: 5px solid themed("color_main") !important;
|
}
|
|
border-radius: 2.208px;
|
}
|
|
.left-enter-active,
|
.left-leave-active,
|
.right-enter-active,
|
.right-leave-active {
|
will-change: transform;
|
transition: all 500ms;
|
}
|
|
.left-leave-active,
|
.right-leave-active {
|
display: none;
|
}
|
|
.left-enter {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
.left-leave {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0)
|
}
|
|
.right-enter {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0);
|
}
|
|
.right-leave {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0)
|
}
|
</style>
|
