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/financial.vue | 293 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 182 insertions(+), 111 deletions(-)
diff --git a/src/components/Transform/assetsCenter/financial.vue b/src/components/Transform/assetsCenter/financial.vue
index f0e8be1..b8e396e 100644
--- a/src/components/Transform/assetsCenter/financial.vue
+++ b/src/components/Transform/assetsCenter/financial.vue
@@ -1,91 +1,67 @@
<template>
- <div class="financial">
- <div class="flex justify-between box-border px-30 mt-43">
- <div @click="onTab(0)" :class="{ active: tapIndex === 0 }"
- class=" w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20">{{ $t('货币理财') }}</div>
- <div @click="onTab(1)" :class="{ active: tapIndex === 1 }" class=" w-370 h-75 lh-75 rounded-lg font-27 text-center">
- {{ $t('矿池理财') }}</div>
+ <div class="funds-financial">
+ <div class="sub-tabs">
+ <div @click="onTab(0)" :class="{ active: tapIndex === 0 }" class="sub-tab-item">{{ $t('货币理财') }}</div>
+ <div @click="onTab(1)" :class="{ active: tapIndex === 1 }" class="sub-tab-item">{{ $t('矿池理财') }}</div>
</div>
- <div class="box-border px-30 mt-42">
- <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="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">
- <img v-if="tapIndex === 0" @click="$router.push({ path: '/cryptos/financialHistory', query: { type: 0 } })"
- :src="handleImage('../../../assets/image/assets-center/Subtract.png')" class="w-36 h-40" />
- <img v-if="tapIndex === 1" @click="$router.push({ path: '/cryptos/financialHistory', query: { type: 1 } })"
- :src="handleImage('../../../assets/image/assets-center/Subtract.png')" class="w-36 h-40" />
+ <div class="history-btn" @click="goHistory">
+ <img :src="handleImage('../../../assets/image/assets-center/Subtract.png')" />
</div>
</div>
- <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
+ <div class="balance-amount" v-if="!eyetel">
<template v-if="tapIndex === 0">{{ funds.money_finance || '--' }}</template>
<template v-if="tapIndex === 1">{{ funds.money_miner || '--' }}</template>
- <span class="font-39 text-grey" v-if="tapIndex === 0">≈{{ currency.currency_symbol }}{{ funds.money_finance ?
- (funds.money_finance *
- currency.rate).toFixed(2) : ' --' }}</span>
- <span class="font-39 text-grey" v-if="tapIndex === 1">≈{{ currency.currency_symbol }}{{ funds.money_miner ?
- (funds.money_miner *
- currency.rate).toFixed(2) : ' --' }}</span>
</div>
- <div class="font-70 font-66 mt-18" v-else>********</div>
- <div class="flex font-26 lh-32 mb-35 mt-40">
- <div class="flex flex-col ">
- <div>{{ $t('预计日收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
- <template v-if="!eyetel">
- <div class="font-40 mt-17 mb-9 textColor">{{ finData.today_profit || '--' }}</div>
- <!-- <div>≈{{currency.currency_symbol}}{{ finData.today_profit ? (finData.today_profit *
- currency.rate).toFixed(2) : ' --' }}</div> -->
- </template>
- <template v-else>
- <div class="font-40 mt-17 mb-9 textColor">********</div>
- </template>
- </div>
- <div class="flex flex-col ml-110">
- <div>{{ $t('累计收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
- <template v-if="!eyetel">
- <div class="font-40 mt-17 mb-9 textColor">{{ finData.aready_profit || '0.00' }}</div>
- <!-- <div>≈{{currency.currency_symbol}}{{ finData.aready_profit ? (finData.aready_profit *
- currency.rate).toFixed(2) : '0.00' }}</div> -->
- </template>
- <template v-else>
- <div class="font-40 mt-17 mb-9 textColor">********</div>
- </template>
- </div>
+ <div class="balance-amount" v-else>********</div>
+ <div class="balance-fiat" v-if="!eyetel">
+ ≈{{ currency.currency_symbol }}{{
+ tapIndex === 0
+ ? (funds.money_finance ? (funds.money_finance * currency.rate).toFixed(2) : ' --')
+ : (funds.money_miner ? (funds.money_miner * currency.rate).toFixed(2) : ' --')
+ }}
</div>
- <div class="flex flex-col lh-32 mb-35 ">
- <div>{{ $t('托管中总订单') }}</div>
- <template v-if="!eyetel">
- <div class="font-40 mt-17 mb-9 textColor">{{ finData.order_sum || 0 }}</div>
- </template>
- <template v-else>
- <div class="font-40 mt-17 mb-9 textColor">********</div>
- </template>
+ <div class="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>
+
+ <div class="stats-grid">
+ <div class="stat-block">
+ <div class="stat-block-label">{{ $t('预计日收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
+ <div class="stat-block-value" v-if="!eyetel">{{ finData.today_profit || '--' }}</div>
+ <div class="stat-block-value" v-else>********</div>
+ </div>
+ <div class="stat-block">
+ <div class="stat-block-label">{{ $t('累计收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
+ <div class="stat-block-value" v-if="!eyetel">{{ finData.aready_profit || '0.00' }}</div>
+ <div class="stat-block-value" v-else>********</div>
+ </div>
+ <div class="stat-block">
+ <div class="stat-block-label">{{ $t('托管中总订单') }}</div>
+ <div class="stat-block-value" v-if="!eyetel">{{ finData.order_sum || 0 }}</div>
+ <div class="stat-block-value" v-else>********</div>
+ </div>
</div>
</div>
- <div class="w-full h-13 contBackground"></div>
- <div class="px-30">
- <div class="flex justify-between h-36 mt-37">
- <div v-if="tapIndex === 0" class=" font-6 h-36 lh-36 textColor">{{ $t('所有理财') }}</div>
- <div v-if="tapIndex === 0" class="font-26 blue h-36 lh-36 colorMain"
- @click="$router.push({ path: '/cryptos/fund-rule', query: { back: 0 } })">{{ $t('规则') }}</div>
- <div v-if="tapIndex === 1" class=" font-6 h-36 lh-36 textColor">{{ $t('所有矿机') }}</div>
- <div v-if="tapIndex === 1" class="font-26 blue h-36 lh-36 colorMain"
- @click="$router.push({ path: '/cryptos/machine-rule', query: { back: 0 } })">{{ $t('规则') }}</div>
+
+ <div class="order-section">
+ <div class="section-header">
+ <span class="section-title">{{ tapIndex === 0 ? $t('所有理财') : $t('所有矿机') }}</span>
+ <span v-if="tapIndex === 0" class="section-link" @click="goRule">{{ $t('规则') }}</span>
</div>
<template v-if="tapIndex === 0">
- <financial-list :list="finList" :type="tapIndex" :btnShow="true"></financial-list>
+ <financial-list :list="finList" :type="tapIndex" :btnShow="true" />
</template>
<template v-else>
- <financial-list :list="machineList" :type="tapIndex" :btnShow="true"></financial-list>
+ <financial-list :list="machineList" :type="tapIndex" :btnShow="true" />
</template>
-
</div>
</div>
</template>
@@ -166,58 +142,153 @@
})
},
changeEyes() {
- this.eyetel = !this.eyetel;
+ this.eyetel = !this.eyetel
},
+ goHistory() {
+ this.$router.push({ path: '/cryptos/financialHistory', query: { type: this.tapIndex } })
+ },
+ goRule() {
+ if (this.tapIndex === 0) {
+ this.$router.push({ path: '/cryptos/fund-rule', query: { back: 0 } })
+ } else {
+ this.$router.push({ path: '/cryptos/machine-rule', query: { back: 0 } })
+ }
+ }
}
}
</script>
-<style lang="scss" scoped>
-@import "@/assets/init.scss";
+<style lang="scss" scoped>
+@import '@/assets/init.scss';
-#cryptos {
- .w-370 {
- border: 1px solid #EAEDF2;
- color: $text_color1;
+.funds-financial {
+ padding-top: 16px;
+ padding-bottom: 40px;
+}
+
+.sub-tabs {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 24px;
+}
+
+.sub-tab-item {
+ flex: 1;
+ text-align: center;
+ padding: 20px 16px;
+ border-radius: 16px;
+ font-size: 28px;
+ transition: all 0.2s ease;
+ @include themify() {
+ background: themed('cont_background');
+ color: themed('text_color1');
}
- .active {
- color: $text_color;
- background: $btn_main;
- border-color: $btn_main;
- }
-
- .lh-32 {
- color: $text_color5;
- }
-
- .font-40 {
- font-weight: 700;
- }
-
- .cl {
- color: $text_color4;
- background: #EBECF0;
- }
-
- .mr-13 {
+ &.active {
+ color: #fff;
+ background: linear-gradient(135deg, #1a6dff 0%, #004aee 100%);
font-weight: 600;
- color: $text_color4;
+ box-shadow: 0 6px 16px rgba(0, 74, 238, 0.28);
}
+}
- .col {
- color: $text_color5;
- }
+.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;
+}
- .font-6 {
- font-weight: 600;
- }
+.balance-hero-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+}
- .font-4 {
- font-weight: 400;
- }
+.balance-label {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ font-size: 26px;
+ opacity: 0.9;
+}
- .cl-33 {
- color: $text_color4;
+.eye-btn img {
+ width: 36px;
+ height: 22px;
+}
+
+.history-btn img {
+ width: 36px;
+ height: 42px;
+ opacity: 0.85;
+}
+
+.balance-amount {
+ font-size: 56px;
+ font-weight: 700;
+ line-height: 1.15;
+}
+
+.balance-fiat {
+ margin-top: 8px;
+ font-size: 26px;
+ opacity: 0.85;
+}
+
+.stats-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 28px;
+ padding-top: 24px;
+ border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.stat-block {
+ flex: 1;
+ min-width: 40%;
+ padding: 16px;
+ border-radius: 14px;
+ background: rgba(255, 255, 255, 0.12);
+}
+
+.stat-block-label {
+ font-size: 22px;
+ opacity: 0.85;
+ line-height: 1.3;
+}
+
+.stat-block-value {
+ margin-top: 8px;
+ font-size: 28px;
+ font-weight: 600;
+}
+
+.order-section {
+ margin-top: 8px;
+}
+
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.section-title {
+ font-size: 32px;
+ font-weight: 600;
+ @include themify() {
+ color: themed('text_color');
}
-}</style>
+}
+
+.section-link {
+ font-size: 26px;
+ color: #004aee;
+}
+</style>
--
Gitblit v1.9.3