| | |
| | | <template> |
| | | <div class="pb-120 assetsCenter" > |
| | | <!-- <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 :funds="funds" ></over-view> |
| | | <as-sets :funds="funds" ></as-sets> |
| | | <!-- <contract :funds="funds" :index="index"></contract>--> |
| | | <!-- <financial :funds="funds" :index="index" ></financial>--> |
| | | <div class="pb-120 assetsCenter"> |
| | | <div class="flex justify-between px-52 pt-31 pb-31 box-border"> |
| | | <div class="flex items-center text-center textColor1" style="flex-direction: column;width: 50%;" |
| | | v-for="(item, index) in typeList " :key="'type' + index" @click="onTabs(index)"> |
| | | <div class="font-32 text-center lh-53">{{ item.type }}</div> |
| | | <div v-if="index == tab" |
| | | style="width: 20px;background-color: #1976D2;height: 4px;display: flex;justify-content: center;align-items: center;"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-if="tab==0"> |
| | | <over-view :funds="funds"></over-view> |
| | | <as-sets :funds="funds"></as-sets> |
| | | </div> |
| | | <div v-if="tab==1"> |
| | | <div class="" style="background:rgb(25, 118, 210);padding: 15px"> |
| | | <div class="flex justify-between text-white relative"> |
| | | <div class="flex"> |
| | | <span class="text-white font-40">{{ $t('总资产') }}</span> |
| | | <div @click.stop="changeEyes"> |
| | | <img :src="require('../../assets/image/assets-center/eye-open1.png')" style="height: 26px" |
| | | v-show="!eyetel" /> |
| | | <img :src="require('../../assets/image/assets-center/eye-close1.png')" style="height: 26px" |
| | | v-show="eyetel" /> |
| | | </div> |
| | | </div> |
| | | <div class="right-clock" @click="goRouter('/exchange/exchangeHistory')"> |
| | | <img :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" /> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 10px;color: white"> |
| | | {{$t("总资产估值")}} |
| | | </div> |
| | | <div class="font-700 font-50 mt-18 text-white" v-if="!eyetel"> |
| | | {{ fundsdata.totalMoney}} |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="font-70 font-66 mt-18 textColor" v-else>********</div> |
| | | </div> |
| | | <div class="pl-33 pr-33 btn-box flex justify-between" |
| | | style="border-bottom: #f0f0f0 1px solid;padding: 12px 10px;margin-top: 0"> |
| | | <div class="font-25 button" @click="goRouter('/recharge/rechargeList')"> |
| | | <div class="word-wrap"> |
| | | <!-- <img :src="require(`@/assets/theme/${theme}/image/assets/up.png`)" alt="">--> |
| | | <span> {{ $t('充币') }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="ont-25 button" @click="goRouter('/withdraw/withdrawPage')"> |
| | | <div class="word-wrap"> |
| | | <!-- <img :src="require(`@/assets/theme/${theme}/image/assets/down.png`)" alt="">--> |
| | | <span>{{ $t('提币') }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="font-25 button" @click="goRouter('/transfer')"> |
| | | <div class="word-wrap"> |
| | | <!-- <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">--> |
| | | <span>{{ $t('划转') }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style="display: flex;margin-bottom: 0px;flex-direction: column;border-bottom: 2px solid rgb(241, 241, 241); padding: 10px;"> |
| | | <div style="margin: 20px;color: rgba(25, 118, 210, 0.8);font-size: 18px;font-weight: bold;">USDT</div> |
| | | <div style="display: flex;justify-content: space-between;margin: 0 20px 20px 20px;"> |
| | | <div style="display: flex;justify-content: space-between;flex-direction: column;"> |
| | | <div class="text-grey" style="font-weight: normal">{{ $t('可用') }}</div> |
| | | <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999"> |
| | | {{fundsdata.usdtMoney}} |
| | | </div> |
| | | </div> |
| | | <div style="display: flex;justify-content: space-between;flex-direction: column;"> |
| | | <div class="text-grey" style="font-weight: normal">{{ $t('锁仓') }}</div> |
| | | <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999"> |
| | | 0.00 |
| | | </div> |
| | | </div> |
| | | <div style="display: flex;justify-content: space-between;flex-direction: column;"> |
| | | <div class="text-grey" style="font-weight: normal">{{ $t('冻结') }}</div> |
| | | <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999"> |
| | | 0.00 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style="display: flex;margin-bottom: 0px;flex-direction: column;border-bottom: 2px solid rgb(241, 241, 241); padding: 10px;"> |
| | | <div style="margin: 20px;color: rgba(25, 118, 210, 0.8);font-size: 18px;font-weight: bold;">ETH</div> |
| | | <div style="display: flex;justify-content: space-between;margin: 0 20px 20px 20px;"> |
| | | <div style="display: flex;justify-content: space-between;flex-direction: column;"> |
| | | <div class="text-grey" style="font-weight: normal">{{ $t('可用') }}</div> |
| | | <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999"> |
| | | {{fundsdata.ethMoney}} |
| | | </div> |
| | | </div> |
| | | <div style="display: flex;justify-content: space-between;flex-direction: column;"> |
| | | <div class="text-grey" style="font-weight: normal">{{ $t('锁仓') }}</div> |
| | | <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999"> |
| | | 0.00 |
| | | </div> |
| | | </div> |
| | | <div style="display: flex;justify-content: space-between;flex-direction: column;"> |
| | | <div class="text-grey" style="font-weight: normal">{{ $t('冻结') }}</div> |
| | | <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999"> |
| | | 0.00 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style="display: flex;margin-bottom: 0px;flex-direction: column;border-bottom: 2px solid rgb(241, 241, 241); padding: 10px;"> |
| | | <div style="margin: 20px;color: rgba(25, 118, 210, 0.8);font-size: 18px;font-weight: bold;">BTC</div> |
| | | <div style="display: flex;justify-content: space-between;margin: 0 20px 20px 20px;"> |
| | | <div style="display: flex;justify-content: space-between;flex-direction: column;"> |
| | | <div class="text-grey" style="font-weight: normal">{{ $t('可用') }}</div> |
| | | <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999"> |
| | | {{fundsdata.btcMoney}} |
| | | </div> |
| | | </div> |
| | | <div style="display: flex;justify-content: space-between;flex-direction: column;"> |
| | | <div class="text-grey" style="font-weight: normal">{{ $t('锁仓') }}</div> |
| | | <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999"> |
| | | 0.00 |
| | | </div> |
| | | </div> |
| | | <div style="display: flex;justify-content: space-between;flex-direction: column;"> |
| | | <div class="text-grey" style="font-weight: normal">{{ $t('冻结') }}</div> |
| | | <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999"> |
| | | 0.00 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | |
| | | </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: [], |
| | | eyetel: false, |
| | | timer: null, |
| | | zjlist: [], |
| | | tab: 1, |
| | | index: 0, // 每个组件的二级tab |
| | | funds: {}, |
| | | fundsdata: {}, |
| | | typeList: [{ |
| | | type: this.$t('交易账户'), |
| | | }, |
| | | { |
| | | type: this.$t('资金账户'), |
| | | }, |
| | | ] |
| | | } |
| | | }, |
| | | methods: { |
| | | goRouter(parmas) { |
| | | if (parmas === '/exchange/exchangeHistory') { |
| | | this.$router.push({ path: parmas, query: { type: 0 } }) |
| | | } else { |
| | | this.$router.push(parmas); |
| | | } |
| | | }, |
| | | changeEyes() { |
| | | this.eyetel = !this.eyetel; |
| | | }, |
| | | onTabs(val) { |
| | | console.log('111',val); |
| | | this.tab = val |
| | | }, |
| | | getAssetszj() { |
| | | Axios.GetWalletzj().then((res) => { |
| | | this.fundsdata = res.data |
| | | }) |
| | | |
| | | 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 |
| | | 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 |
| | | } |
| | | }, |
| | | 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 |
| | | } |
| | | } |
| | | }, |
| | | getAssets() { |
| | | Axios.GetAllAssets().then((res) => { |
| | | const { |
| | | code, |
| | | data |
| | | } = res |
| | | if (code) { |
| | | //console.log('总资产数据',data) |
| | | this.funds = data |
| | | } |
| | | }) |
| | | }, |
| | | }, |
| | | created() { |
| | | this.getAssets() |
| | | this.getAssetszj() |
| | | 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 |
| | | } |
| | | }, |
| | | 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> |
| | | .assetsCenter { |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | } |
| | | .tabBackground { |
| | | background: white; |
| | | } |
| | | |
| | | .active_color { |
| | | @include themify() { |
| | | border-bottom: 5px solid themed("color_main") !important; |
| | | } |
| | | .button { |
| | | border: 1px solid rgb(25, 118, 210); |
| | | background: white !important; |
| | | border-radius: 3px; |
| | | height: 60px; |
| | | color: rgb(25, 118, 210) !important; |
| | | } |
| | | |
| | | border-radius: 2.208px; |
| | | } |
| | | .right-clock { |
| | | position: absolute; |
| | | top: 0; |
| | | right: -3px; |
| | | } |
| | | |
| | | .left-enter-active, |
| | | .left-leave-active, |
| | | .right-enter-active, |
| | | .right-leave-active { |
| | | will-change: transform; |
| | | transition: all 500ms; |
| | | } |
| | | .total_wrap { |
| | | margin-top: 44px; |
| | | } |
| | | |
| | | .left-leave-active, |
| | | .right-leave-active { |
| | | display: none; |
| | | } |
| | | .asset-title-box { |
| | | margin: 40px 0; |
| | | } |
| | | |
| | | .left-enter { |
| | | opacity: 0; |
| | | transform: translate3d(-100%, 0, 0); |
| | | } |
| | | .btn-box { |
| | | margin-top: 44px; |
| | | } |
| | | |
| | | .left-leave { |
| | | opacity: 0; |
| | | transform: translate3d(100%, 0, 0) |
| | | } |
| | | .btn-box>div { |
| | | width: 234px; |
| | | padding: 20px 15px; |
| | | box-sizing: border-box; |
| | | text-align: center; |
| | | border-radius: 8.8px; |
| | | font-size: 26.5px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | .right-enter { |
| | | opacity: 0; |
| | | transform: translate3d(100%, 0, 0); |
| | | } |
| | | .word-wrap { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | .right-leave { |
| | | opacity: 0; |
| | | transform: translate3d(-100%, 0, 0) |
| | | } |
| | | </style> |
| | | img { |
| | | width: 40px; |
| | | height: 40px; |
| | | margin-right: 22px; |
| | | } |
| | | |
| | | span { |
| | | font-size: 26.5px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mr60 { |
| | | margin-right: 60px; |
| | | } |
| | | |
| | | .divider-line { |
| | | border-bottom: 1px solid #E5E7ED; |
| | | padding-bottom: 80px; |
| | | } |
| | | |
| | | .assets-content-title { |
| | | margin-top: 60px; |
| | | margin-bottom: 55px; |
| | | } |
| | | |
| | | .assets-list { |
| | | margin-bottom: 35px; |
| | | } |
| | | |
| | | .assets-list>div { |
| | | display: flex; |
| | | } |
| | | |
| | | .assets-list>div:nth-child(2) div:nth-child(1) { |
| | | margin-bottom: 16px; |
| | | font-size: 30px; |
| | | font-weight: 700; |
| | | } |
| | | |
| | | .symbol-name { |
| | | margin-left: 17px; |
| | | //margin-top:10px; |
| | | } |
| | | |
| | | .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> |