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/contract.vue | 281 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 150 insertions(+), 131 deletions(-)
diff --git a/src/components/Transform/assetsCenter/contract.vue b/src/components/Transform/assetsCenter/contract.vue
index 73f49b9..d678bce 100644
--- a/src/components/Transform/assetsCenter/contract.vue
+++ b/src/components/Transform/assetsCenter/contract.vue
@@ -1,85 +1,64 @@
<template>
- <div class="contract">
- <div class="flex justify-between box-border px-30 mt-43">
- <div @click="onTap(0)" :class="{ active: tapIndex === 0 }"
- class=" w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20">{{ $t('永续合约') }}</div>
- <div @click="onTap(1)" :class="{ active: tapIndex === 1 }" class=" w-370 h-75 lh-75 rounded-lg font-27 text-center">
- {{ $t('交割合约') }}</div>
+ <div class="funds-contract">
+ <div class="sub-tabs">
+ <div @click="onTap(0)" :class="{ active: tapIndex === 0 }" class="sub-tab-item">{{ $t('永续合约') }}</div>
+ <div @click="onTap(1)" :class="{ active: tapIndex === 1 }" class="sub-tab-item">{{ $t('交割合约') }}</div>
</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>
- </div>
- <div class="right-clock">
- <img @click="goHistory" :src="handleImage('../../../assets/image/assets-center/Subtract.png')"
- class="w-34 h-40" />
+
+ <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="font-700 font-66 mt-18 textColor" v-if="!eyetel">
- {{ tapIndex === 0 ? funds.money_contract : funds.money_futures }}
- <span class="font-39 text-grey">≈{{ currency.currency_symbol }}{{ funds.money_contract ? (((tapIndex === 0 ?
- funds.money_contract :
- funds.money_futures) * currency.rate).toFixed(2)) : ' --' }}</span>
- </div>
- <div class="font-70 font-66 mt-18 textColor" v-else>******** </div>
- <div class="flex font-26 lh-32 mb-35 mt-40">
- <div class="flex flex-col ">
- <div>{{ tapIndex === 0 ? $t('保证金余额') : $t('全部未实现盈亏') }}（USDT）</div>
- <template v-if="!eyetel">
- <div class="font-40 mt-17 mb-9 textColor">{{ tapIndex === 0 ? funds.money_contract_deposit :
- funds.money_futures_profit }}</div>
- <div>≈{{ currency.currency_symbol }}{{ funds.money_contract_deposit ? (((tapIndex === 0 ?
- funds.money_contract_deposit :
- funds.money_futures_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('钱包余额(USDT)') }}</div>
- <template v-if="!eyetel">
- <div class="font-40 mt-17 mb-9 textColor">{{ funds.money_wallet }}</div>
- <div>≈{{ currency.currency_symbol }}{{ funds.money_wallet ? (funds.money_wallet * currency.rate).toFixed(2)
- :
- ' --' }}</div>
- </template>
- <template v-else>
- <div class="font-40 mt-17 mb-9 textColor">*********</div>
- </template>
- </div>
- </div>
- <div v-if="tapIndex === 0" class="flex flex-col lh-32 mb-35 ">
- <template v-if="!eyetel">
- <div>{{ $t('全部未实现盈亏') }}（USDT）</div>
- <div class="font-40 mt-17 mb-9 textColor">{{ funds.money_contract_profit }}</div>
- <div>≈{{ currency.currency_symbol }}{{ funds.money_contract_profit ? (funds.money_contract_profit *
- currency.rate).toFixed(2) : ' --' }}</div>
- </template>
- <template v-else>
- <div class="font-40 mt-17 mb-9 textColor">*********</div>
- </template>
+ <div class="history-btn" @click="goHistory">
+ <img :src="handleImage('../../../assets/image/assets-center/Subtract.png')" />
</div>
</div>
- <div class="w-full h-13 contBackground"></div>
- <!--永续合约持有仓位-->
- <div class="px-30">
- <template v-if="tapIndex === 0">
- <PerpetualPositionList :list-data="orderHold" @sell="onRecall"></PerpetualPositionList>
- </template>
- <!--交割合约持有仓位-->
- <template v-else>
- <futrue-hold-list :list-data="futrueHold" />
- </template>
+ <div class="balance-amount" v-if="!eyetel">
+ {{ tapIndex === 0 ? funds.money_contract : funds.money_futures }}
</div>
+ <div class="balance-amount" v-else>********</div>
+ <div class="balance-fiat" v-if="!eyetel">
+ ≈{{ currency.currency_symbol }}{{
+ (tapIndex === 0 ? funds.money_contract : funds.money_futures)
+ ? (((tapIndex === 0 ? funds.money_contract : funds.money_futures) * currency.rate).toFixed(2))
+ : ' --'
+ }}
+ </div>
+ <div class="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>
+
+ <div class="stats-grid">
+ <div class="stat-block">
+ <div class="stat-block-label">{{ tapIndex === 0 ? $t('保证金余额') : $t('全部未实现盈亏') }}（USDT）</div>
+ <div class="stat-block-value" v-if="!eyetel">
+ {{ tapIndex === 0 ? funds.money_contract_deposit : funds.money_futures_profit }}
+ </div>
+ <div class="stat-block-value" v-else>********</div>
+ </div>
+ <div class="stat-block">
+ <div class="stat-block-label">{{ $t('钱包余额(USDT)') }}</div>
+ <div class="stat-block-value" v-if="!eyetel">{{ funds.money_wallet }}</div>
+ <div class="stat-block-value" v-else>********</div>
+ </div>
+ <div class="stat-block" v-if="tapIndex === 0">
+ <div class="stat-block-label">{{ $t('全部未实现盈亏') }}（USDT）</div>
+ <div class="stat-block-value" v-if="!eyetel">{{ funds.money_contract_profit }}</div>
+ <div class="stat-block-value" v-else>********</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="position-section">
+ <template v-if="tapIndex === 0">
+ <PerpetualPositionList :list-data="orderHold" @sell="onRecall" />
+ </template>
+ <template v-else>
+ <futrue-hold-list :list-data="futrueHold" />
+ </template>
</div>
</div>
</template>
@@ -205,74 +184,114 @@
<style lang="scss" scoped>
@import "@/assets/init.scss";
-#cryptos {
- .w-370 {
- border: 1px solid #EAEDF2;
- color: $text_color1;
+.funds-contract {
+ 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;
+}
- .num {
- font-weight: 600;
- color: $text_color4;
- }
+.balance-hero-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+}
- .font-4 {
- font-weight: 400;
- color: $text_color4;
- }
+.balance-label {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ font-size: 26px;
+ opacity: 0.9;
+}
- .blue {
- color: $color_main;
- }
+.eye-btn img {
+ width: 36px;
+ height: 22px;
+}
- .active_green {
- color: $green;
- }
+.history-btn img {
+ width: 36px;
+ height: 42px;
+ opacity: 0.85;
+}
- .active_red {
- color: $red;
- }
+.balance-amount {
+ font-size: 56px;
+ font-weight: 700;
+ line-height: 1.15;
+}
- .active_tab1 {
- background: $red;
- color: $text_color;
- }
+.balance-fiat {
+ margin-top: 8px;
+ font-size: 26px;
+ opacity: 0.85;
+}
- .active_tab2 {
- background: $green;
- color: $text_color;
- }
+.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);
+}
- .font-6 {
- font-weight: 600;
- }
+.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;
+}
+
+.position-section {
+ margin-top: 8px;
}
</style>
--
Gitblit v1.9.3