From 30d1ee7be942d7a2201e1ab2ca7d96badff8bf50 Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Sat, 23 May 2026 11:23:00 +0800
Subject: [PATCH] 1
---
src/components/Transform/mining-account/index.vue | 170 +++++++++++++++++++++++++-------------------------------
1 files changed, 77 insertions(+), 93 deletions(-)
diff --git a/src/components/Transform/mining-account/index.vue b/src/components/Transform/mining-account/index.vue
index 49ddca7..392a6cf 100644
--- a/src/components/Transform/mining-account/index.vue
+++ b/src/components/Transform/mining-account/index.vue
@@ -1,37 +1,32 @@
<template>
- <div id="cryptos">
- <div id="mining-account">
- <div style="position: relative" class="px-30 pb-104">
- <div class="account_card">
- <mining-exchange-input :title="$t('从')" :value1="form.volume" :actions="actions"
- @select="onSelect('symbol', $event)" @input="onInput" :type="1" @max="onMax" :coin="form.symbol"
- :coin1="form.symbol_to" :tips="[]" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2"
- :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="true" />
- <!-- <div v-if="show" class="font-28 text-grey">
- {{ $t('可用数量') }}：
- <span class="textColor">{{ amountAvailable }} {{ form.symbol.toUpperCase() }}</span>
- </div> -->
- </div>
-
- <div class="flex justify-center convert-box">
- <img src="../../../assets/image/assets-center/convert-two.png" alt="" @click="onSwitch" />
- </div>
-
- <div class="account_card">
- <mining-exchange-input :title="$t('至')"
- :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''" :actions="actions"
- @select="onSelect('symbol_to', $event)" :disabled="true" :type="2" :coin="form.symbol"
- :coin1="form.symbol_to" :tips="[]" :showMax="false" :iconImg1="form.iconImg1"
- :iconImg2="form.iconImg2" />
- </div>
-
- <div class="exchange-btn w-full flex justify-center mt-116">
- <p class="h-100 btnMain mx-auto flex justify-center items-center text-white w-768"
- @click="onConfirm">
- {{ $t('询价') }}
- </p>
- </div>
+ <div id="cryptos" class="mining-account-wrap">
+ <div id="mining-account" class="mining-account-inner">
+ <!-- 上卡片：from user wallet -->
+ <div class="exchange-card exchange-card-from">
+ <mining-exchange-input :title="$t('from user wallet')" :value1="form.volume" :actions="actions"
+ @select="onSelect('symbol', $event)" @input="onInput" :type="1" @max="onMax" :coin="form.symbol"
+ :coin1="form.symbol_to" :tips="[]" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2"
+ :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="false" />
</div>
+
+ <!-- 中间：紫色互换图标 -->
+ <div class="exchange-swap-circle" @click="onSwitch">
+ <van-icon name="exchange" size="22" color="#fff" />
+ </div>
+
+ <!-- 下卡片：至用户钱包（与目标图一致） -->
+ <div class="exchange-card exchange-card-to">
+ <mining-exchange-input :title="$t('to user wallet')"
+ :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''" :actions="actions"
+ @select="onSelect('symbol_to', $event)" :disabled="true" :type="2" :coin="form.symbol"
+ :coin1="form.symbol_to" :tips="[]" :showMax="false" :iconImg1="form.iconImg1"
+ :iconImg2="form.iconImg2" :available="toWalletBalance" />
+ </div>
+
+ <!-- 提交按钮 -->
+ <button class="exchange-submit-btn" @click="onConfirm">
+ {{ $t('提交') }}
+ </button>
</div>
</div>
</template>
@@ -109,6 +104,10 @@
}
return res
+ },
+ toWalletBalance() {
+ let dataInfo = this.wallets.find(item => item.symbol_data.toUpperCase() == this.form.iconImg2.toUpperCase())
+ return dataInfo ? `${dataInfo.usable} ${(this.form.symbol_to || '').toUpperCase()}` : `0 ${(this.form.symbol_to || '').toUpperCase()}`
},
},
data() {
@@ -263,66 +262,51 @@
</script>
<style scoped lang="scss">
-@import "@/assets/init.scss";
-
-#cryptos {
- .account_card {
- background: $inp-b !important;
- border-radius: 2.5rem;
- padding: 1.2rem 2.5rem;
-
- div {
- background: $inp-b !important;
- }
- }
-
- .exchange-btn {
- bottom: 48px;
- left: 0;
-
- font-size: 36px;
-
- p {
- border-radius: 4rem;
- }
- }
-
- .active {
- color: $black;
-
- &:after {
- content: '';
- display: block;
- position: absolute;
- bottom: 0;
- width: 140px;
- height: 8px;
- background: $active_line;
- margin: 0 auto;
- }
- }
-
- .convert-box {
- background: $mainbgWhiteColor;
- margin: -2rem auto;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 6rem;
- height: 6rem;
- position: relative;
-
- img {
- width: 50%;
- height: 50%;
- }
- }
-
- .btnMain {
- background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
- border-radius: 5px;
- font-weight: bold;
- }
+.mining-account-wrap {
+ background: transparent;
+}
+.mining-account-inner {
+ position: relative;
+ padding-bottom: 0;
+}
+.exchange-card {
+ background: #fff;
+ border-radius: 14px;
+ padding: 24px 24px 29px;
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
+}
+.exchange-card-from {
+ margin-bottom: 0;
+}
+.exchange-swap-circle {
+ width: 84px;
+ height: 84px;
+ margin: -42px auto 0;
+ position: relative;
+ z-index: 2;
+ background: linear-gradient(135deg, #a443cf, #5e2bc8);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 5px 14px rgba(94, 43, 200, 0.35);
+ cursor: pointer;
+}
+.exchange-card-to {
+ margin-top: 0;
+ padding-top: 42px;
+}
+.exchange-submit-btn {
+ width: 100%;
+ height: auto;
+ padding: 18px 0;
+ margin: 38px 0 48px;
+ border: none;
+ border-radius: 14px;
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff;
+ font-size: 2rem;
+ font-weight: 600;
+ cursor: pointer;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3