From 349c48e168b9f2580334422228acde7d1b21bede Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Fri, 05 Jun 2026 11:19:15 +0800
Subject: [PATCH] 1
---
src/components/Transform/assetsCenter/overview.vue | 414 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 246 insertions(+), 168 deletions(-)
diff --git a/src/components/Transform/assetsCenter/overview.vue b/src/components/Transform/assetsCenter/overview.vue
index d9b9cc2..4c792e3 100644
--- a/src/components/Transform/assetsCenter/overview.vue
+++ b/src/components/Transform/assetsCenter/overview.vue
@@ -1,86 +1,97 @@
<template>
- <div class="box-border">
- <div class="pl-33 pr-33 total_wrap">
- <div class="flex justify-between text-grey relative">
- <div class="flex">
- <span class="text-grey font-30">{{ $t('总资产') }}（USDT）</span>
- <div @click.stop="changeEyes">
- <img :src="handleImage('../../../assets/image/assets-center/eye-open.png')" class="w-32 h-18"
- v-show="!eyetel" />
- <img :src="handleImage('../../../assets/image/assets-center/eye-close.png')" class="w-32 h-18"
- v-show="eyetel" />
+ <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="right-clock" @click="goRouter('/cryptos/exchangeHistory')">
- <img :src="handleImage('../../../assets/image/assets-center/Subtract.png')" class="w-34 h-40" />
+ <div class="history-btn" @click="goRouter('/cryptos/exchangeHistory')">
+ <img :src="handleImage('../../../assets/image/assets-center/Subtract.png')" />
</div>
</div>
- <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">{{ funds.total || '--' }}
- <span class="font-40 text-grey">≈{{ currency.currency_symbol }}{{ funds.total ? (funds.total *
- currency.rate).toFixed(2) : ' --' }}</span>
+ <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="font-70 font-66 mt-18 textColor" v-else>********</div>
+ <div class="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>
</div>
- <div class="pl-33 pr-33 btn-box flex justify-between">
- <div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/recharge/rechargeList')">
- <div class="word-wrap">
- <img :src="handleImage(`../../../assets/theme/dark/image/assets/up.png`)" alt="">
- <span> {{ $t('充币') }}</span>
+
+ <!-- 快捷操作 -->
+ <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="text-white font-25 textColor tabBackground" @click="withdrawBtn">
- <div class="word-wrap">
- <img :src="handleImage(`../../../assets/theme/dark/image/assets/down.png`)" alt="">
- <span>{{ $t('提币') }}</span>
+ <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="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/exchangePage')">
- <div class="word-wrap">
- <img :src="handleImage(`../../../assets/theme/dark/image/assets/l_r.png`)" alt="">
- <span>{{ $t('闪兑') }}</span>
+ <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="divider-line"></div>-->
- <div class="pl-30 pr-30">
- <div class="assets-content-title font-35 titleColor">{{ $t('投资组合') }}</div>
- <div class="assets-list font-30 flex justify-between" v-for="(item, index) in list" :key="index">
- <div class="items-center">
- <img :src="handleImage('../../../assets/image/assets-center/funds/' + item.icon + '.png')" class="w-44 h-44" />
- <div class="text-grey symbol-name font-30 textColor2">{{ $t(item.text) }}</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="flex-col font-30 text-right" v-if="!eyetel">
- <div class="textColor">{{ funds[item.key] || '--' }} USDT</div>
- <div class="text-grey font-30 font-400 mb-0">≈{{ currency.currency_symbol }} {{ funds[item.key] ?
- (funds[item.key]
- * currency.rate).toFixed(2) : ' --' }}</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="flex-col font-30 text-right" v-if="eyetel">
- <div class="textColor">******** USDT</div>
- <div class="text-grey">≈{{ currency.currency_symbol }} ********</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 { _getWallet } from '@/service/fund.api';
-import { Dialog } from 'vant';
-import { mapGetters } from "vuex";
+import { Dialog } from 'vant'
+import { mapGetters } from 'vuex'
import { THEME } from '@/config/theme'
+
export default {
name: 'AssetsPage',
components: {
- [Dialog.name]: Dialog,
+ [Dialog.name]: Dialog
},
props: ['funds'],
data() {
return {
THEME,
- // total:"",
- // status:"", //身份认证状态 0已申请未审核，1审核中，2审核通过，3审核未通过
- eyetel: false,
- active: 0,
+ eyetel: false
}
},
computed: {
@@ -91,159 +102,226 @@
{ 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' },
+ { id: 5, text: this.$t('矿机资产'), icon: 'mining', key: 'money_miner' }
]
- },
- },
- mounted() {
- // this.getData();
- // this.getList();
+ }
},
methods: {
handleImage(url) {
return new URL(url, import.meta.url).href
},
- onClickLeft() {
- this.$router.go(-1);
- },
goRouter(parmas) {
if (parmas === '/cryptos/exchangeHistory') {
this.$router.push({ path: parmas, query: { type: 0 } })
} else {
- this.$router.push(parmas);
+ this.$router.push(parmas)
}
- },
- getList() {
- _getWallet().then((data) => {
- this.list = data.extends;
- });
},
changeEyes() {
- this.eyetel = !this.eyetel;
+ this.eyetel = !this.eyetel
},
- beforeClose(action, done) {
- if (action === 'confirm') {
- setTimeout(done, 1000);
- } else {
- done();
- }
- },
- //跳转提币页面
withdrawBtn() {
- //身份已认证，直接跳转，未认证则提示跳身份认证页
- // if(this.funds.status==2) {
- // this.$router.push({
- // path:'/cryptos/withdraw/withdrawPage'
- // });
- // }else{
- // Dialog.confirm({
- // confirmButtonText:this.$t('确定'),
- // cancelButtonText:this.$t('取消'),
- // title: this.$t('提示'),
- // message: this.$t('请进行身份KYC认证'),
- // beforeClose: (action, done) => {
- // if (action === 'confirm') {
- // done();
- // this.$router.push({
- // path:'/authentication'
- // });
- // } else {
- // done();
- // }
- // },
- // });
- // }
- this.$router.push({
- path: '/cryptos/withdraw/withdrawPage'
- });
- },
-
- },
-
+ this.$router.push({ path: '/cryptos/withdraw/withdrawPage' })
+ }
+ }
}
</script>
<style lang="scss" scoped>
-@import "@/assets/init.scss";
+@import '@/assets/init.scss';
-#cryptos {
- .right-clock {
- position: absolute;
- top: 0;
- right: -3px;
+.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);
- .total_wrap {
- margin-top: 44px;
- }
-
- .asset-title-box {
- margin: 40px 0;
- }
-
- .btn-box {
- margin-top: 44px;
- }
-
- .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;
-
- .word-wrap {
- display: flex;
- align-items: center;
- justify-content: center;
-
- img {
- width: 40px;
- height: 40px;
- margin-right: 22px;
- }
-
- span {
- font-size: 26.5px;
- }
+ span {
+ font-size: 24px;
+ @include themify() {
+ color: themed('text_color');
}
}
+}
- .mr60 {
- margin-right: 60px;
+.action-icon {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 40px;
+ height: 40px;
}
- .divider-line {
- border-bottom: 1px solid $border-grey;
- padding-bottom: 80px;
+ &.deposit {
+ background: rgba(26, 109, 255, 0.12);
}
- .assets-content-title {
- margin-top: 60px;
- margin-bottom: 55px;
+ &.withdraw {
+ background: rgba(230, 84, 97, 0.12);
}
- .assets-list {
- margin-bottom: 35px;
+ &.swap {
+ background: rgba(46, 189, 133, 0.12);
}
- .assets-list>div {
- display: flex;
+ &.transfer {
+ background: rgba(255, 152, 0, 0.12);
}
+}
- .assets-list>div:nth-child(2) div:nth-child(1) {
- margin-bottom: 16px;
- font-size: 30px;
- font-weight: 700;
+.section-header {
+ margin-bottom: 20px;
+}
+
+.section-title {
+ font-size: 32px;
+ font-weight: 600;
+ @include themify() {
+ color: themed('text_color');
}
+}
- .symbol-name {
- margin-left: 17px;
- //margin-top:10px;
+.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>
--
Gitblit v1.9.3