<template>
|
<div class="funds-overview">
|
<!-- 总资产卡片 -->
|
<div class="balance-hero">
|
<div class="balance-hero-top">
|
<div class="balance-label">
|
<span>{{ $t('总资产') }}（USDT）</span>
|
<div class="eye-btn" @click.stop="changeEyes">
|
<img :src="handleImage('../../../assets/image/assets-center/eye-open.png')" v-show="!eyetel" />
|
<img :src="handleImage('../../../assets/image/assets-center/eye-close.png')" v-show="eyetel" />
|
</div>
|
</div>
|
<div class="history-btn" @click="goRouter('/cryptos/exchangeHistory')">
|
<img :src="handleImage('../../../assets/image/assets-center/Subtract.png')" />
|
</div>
|
</div>
|
<div class="balance-amount" v-if="!eyetel">{{ funds.total || '--' }}</div>
|
<div class="balance-amount" v-else>********</div>
|
<div class="balance-fiat" v-if="!eyetel">
|
≈{{ currency.currency_symbol }}{{ funds.total ? (funds.total * currency.rate).toFixed(2) : ' --' }}
|
</div>
|
<div class="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>
|
</div>
|
|
<!-- 快捷操作 -->
|
<div class="quick-actions">
|
<div class="action-item" @click="goRouter('/cryptos/recharge/rechargeList')">
|
<div class="action-icon deposit">
|
<img :src="handleImage(`../../../assets/theme/${THEME}/image/assets/up.png`)" alt="" />
|
</div>
|
<span>{{ $t('充币') }}</span>
|
</div>
|
<div class="action-item" @click="withdrawBtn">
|
<div class="action-icon withdraw">
|
<img :src="handleImage(`../../../assets/theme/${THEME}/image/assets/down.png`)" alt="" />
|
</div>
|
<span>{{ $t('提币') }}</span>
|
</div>
|
<div class="action-item" @click="goRouter('/cryptos/exchangePage')">
|
<div class="action-icon swap">
|
<img :src="handleImage(`../../../assets/theme/${THEME}/image/assets/l_r.png`)" alt="" />
|
</div>
|
<span>{{ $t('闪兑') }}</span>
|
</div>
|
<div class="action-item" @click="goRouter('/my/transfer')">
|
<div class="action-icon transfer">
|
<img :src="handleImage('../../../assets/imgs/assets/huazhuan.png')" alt="" />
|
</div>
|
<span>{{ $t('划转') }}</span>
|
</div>
|
</div>
|
|
<!-- 账户分布 -->
|
<div class="section-header">
|
<span class="section-title">{{ $t('投资组合') }}</span>
|
</div>
|
<div class="portfolio-list">
|
<div class="portfolio-card" v-for="(item, index) in list" :key="index">
|
<div class="portfolio-left">
|
<div class="portfolio-icon">
|
<img :src="handleImage('../../../assets/image/assets-center/funds/' + item.icon + '.png')" />
|
</div>
|
<span class="portfolio-name">{{ $t(item.text) }}</span>
|
</div>
|
<div class="portfolio-right" v-if="!eyetel">
|
<div class="portfolio-value">{{ funds[item.key] || '--' }} USDT</div>
|
<div class="portfolio-fiat">
|
≈{{ currency.currency_symbol }} {{ funds[item.key] ? (funds[item.key] * currency.rate).toFixed(2) : ' --' }}
|
</div>
|
</div>
|
<div class="portfolio-right" v-else>
|
<div class="portfolio-value">********</div>
|
<div class="portfolio-fiat">≈{{ currency.currency_symbol }} ********</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Dialog } from 'vant'
|
import { mapGetters } from 'vuex'
|
import { THEME } from '@/config/theme'
|
|
export default {
|
name: 'AssetsPage',
|
components: {
|
[Dialog.name]: Dialog
|
},
|
props: ['funds'],
|
data() {
|
return {
|
THEME,
|
eyetel: false
|
}
|
},
|
computed: {
|
...mapGetters('home', ['currency']),
|
list() {
|
return [
|
{ id: 1, text: this.$t('现货账户'), icon: 'spot', key: 'money_all_coin' },
|
{ id: 2, text: this.$t('合约账户 (U本位)'), icon: 'contract_u', key: 'money_contract' },
|
{ id: 3, text: this.$t('交割合约账户'), icon: 'contract_d', key: 'money_futures' },
|
{ id: 4, text: this.$t('理财账户'), icon: 'invest', key: 'money_finance' },
|
{ id: 5, text: this.$t('矿机资产'), icon: 'mining', key: 'money_miner' }
|
]
|
}
|
},
|
methods: {
|
handleImage(url) {
|
return new URL(url, import.meta.url).href
|
},
|
goRouter(parmas) {
|
if (parmas === '/cryptos/exchangeHistory') {
|
this.$router.push({ path: parmas, query: { type: 0 } })
|
} else {
|
this.$router.push(parmas)
|
}
|
},
|
changeEyes() {
|
this.eyetel = !this.eyetel
|
},
|
withdrawBtn() {
|
this.$router.push({ path: '/cryptos/withdraw/withdrawPage' })
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/init.scss';
|
|
.funds-overview {
|
padding-top: 16px;
|
padding-bottom: 40px;
|
}
|
|
.balance-hero {
|
padding: 36px 32px;
|
border-radius: 24px;
|
background: linear-gradient(135deg, #1a6dff 0%, #004aee 55%, #0035b8 100%);
|
color: #fff;
|
box-shadow: 0 16px 40px rgba(0, 74, 238, 0.28);
|
margin-bottom: 28px;
|
}
|
|
.balance-hero-top {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16px;
|
}
|
|
.balance-label {
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
font-size: 26px;
|
opacity: 0.9;
|
}
|
|
.eye-btn img {
|
width: 36px;
|
height: 22px;
|
}
|
|
.history-btn img {
|
width: 36px;
|
height: 42px;
|
opacity: 0.85;
|
}
|
|
.balance-amount {
|
font-size: 64px;
|
font-weight: 700;
|
line-height: 1.15;
|
word-break: break-all;
|
}
|
|
.balance-fiat {
|
margin-top: 10px;
|
font-size: 28px;
|
opacity: 0.85;
|
}
|
|
.quick-actions {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 16px;
|
margin-bottom: 36px;
|
}
|
|
.action-item {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 10px;
|
padding: 20px 8px;
|
border-radius: 20px;
|
@include themify() {
|
background: themed('cont_background');
|
}
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
|
span {
|
font-size: 24px;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
}
|
|
.action-icon {
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 40px;
|
height: 40px;
|
}
|
|
&.deposit {
|
background: rgba(26, 109, 255, 0.12);
|
}
|
|
&.withdraw {
|
background: rgba(230, 84, 97, 0.12);
|
}
|
|
&.swap {
|
background: rgba(46, 189, 133, 0.12);
|
}
|
|
&.transfer {
|
background: rgba(255, 152, 0, 0.12);
|
}
|
}
|
|
.section-header {
|
margin-bottom: 20px;
|
}
|
|
.section-title {
|
font-size: 32px;
|
font-weight: 600;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
|
.portfolio-list {
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
}
|
|
.portfolio-card {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 28px 24px;
|
border-radius: 20px;
|
@include themify() {
|
background: themed('cont_background');
|
}
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
}
|
|
.portfolio-left {
|
display: flex;
|
align-items: center;
|
gap: 20px;
|
flex: 1;
|
min-width: 0;
|
}
|
|
.portfolio-icon {
|
width: 72px;
|
height: 72px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: rgba(0, 74, 238, 0.08);
|
flex-shrink: 0;
|
|
img {
|
width: 44px;
|
height: 44px;
|
}
|
}
|
|
.portfolio-name {
|
font-size: 28px;
|
line-height: 1.3;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
|
.portfolio-right {
|
text-align: right;
|
flex-shrink: 0;
|
margin-left: 16px;
|
}
|
|
.portfolio-value {
|
font-size: 30px;
|
font-weight: 600;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
|
.portfolio-fiat {
|
margin-top: 6px;
|
font-size: 24px;
|
@include themify() {
|
color: themed('text_color1');
|
}
|
}
|
</style>
|
