From ef52095f5e9f0a9fe2da779bb1573947d77d75b6 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 22 May 2026 10:53:01 +0800
Subject: [PATCH] 1
---
src/components/Transform/trade-order-area/index.vue | 364 ++++++++++++++++++++++++++++++++-------------------
1 files changed, 225 insertions(+), 139 deletions(-)
diff --git a/src/components/Transform/trade-order-area/index.vue b/src/components/Transform/trade-order-area/index.vue
index c543156..82cd039 100644
--- a/src/components/Transform/trade-order-area/index.vue
+++ b/src/components/Transform/trade-order-area/index.vue
@@ -1,85 +1,72 @@
<template>
- <div class="flex flex-col flex-1 font-28">
- <div class="flex items-center h-66 tabBackground text-grey area_tabs">
- <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
- :class="currentType == 'open' ? 'open' : ''" @click="changeTab('open')">{{ $t('买入') }}</p>
- <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
- :class="currentType == 'close' ? 'close' : ''" @click="changeTab('close')">{{ $t('卖出') }}</p>
+ <div class="order-area order-area-wrap flex flex-col flex-1 font-28">
+ <!-- 父：order-area_tabs；子1：两个按钮的 div；子2：中间图片 div（父相子绝，图片在中间） -->
+ <div class="order-area_tabs">
+ <div class="order-tabs-buttons">
+ <p class="order-tab order-tab--left font-28 flex items-center justify-center"
+ :class="currentType == 'open' ? 'order-tab--buy' : 'order-tab-buy'" @click="changeTab('open')">{{ $t('买入') }}</p>
+ <p class="order-tab order-tab--right font-28 flex items-center justify-center"
+ :class="currentType == 'close' ? 'order-tab--sell' : 'order-tab-sell'" @click="changeTab('close')">{{ $t('卖出') }}</p>
+ </div>
+ <div class="order-tabs-bg">
+ <img src="@/assets/imgs/new/contract-slash.png" alt="" class="order-tabs-bg-img" />
+ </div>
</div>
- <div class="mt-22 mb-22 inputBackground" style="position:relative;">
- <div class=" flex justify-between items-center w-full h-70" @click="selectBtn">
- <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
- <div class="pl-16 textColor" style="width:80%;">{{ title }}</div>
- <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
+ <!-- Limit 下拉 -->
+ <div class="order-field order-field--select mt-18 mb-18" style="position:relative;">
+ <div class="order-field-inner flex justify-between items-center w-full h-70 px-16" @click="selectBtn">
+ <div class="order-field-label">{{ title }}</div>
+ <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
</div>
<div class="option-box" v-if="isShow">
- <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}
- </div>
+ <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}</div>
</div>
</div>
- <div class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2">
- <input placeholder="" class="targetPrice w-full h-70 border-none" v-model="form.price"
- :disabled="type / 1 === 1" />
- <span>USDT</span>
+ <!-- 价格 -->
+ <div class="order-field h-70 lh-70 mb-18 flex items-center px-16">
+ <input placeholder="" class="order-input flex-1 border-none" v-model="form.price" :disabled="type / 1 === 1" />
+ <span class="order-unit">USDT</span>
</div>
- <div class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2">
+ <!-- 数量/总额 标题行 -->
+ <div class="order-field h-70 lh-70 mb-18 flex items-center px-16 textColor2">
<span>{{ title }}</span>
</div>
- <!-- <template v-if="initClose.status / 1 === 0">
- <div class="flex justify-center items-center h-66 buy-item">{{ $t('停牌中,禁止交易') }}</div>
- </template> -->
- <!-- <template v-else> -->
<div class="flex total-list">
- <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
- {{ $t('数量') }}
- </div>
- <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
- {{ $t('总额') }}
- </div>
+ <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">{{ $t('数量') }}</div>
+ <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">{{ $t('总额') }}</div>
</div>
- <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
- <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
- @input="onInput" />
- <span class="textColor font-28">{{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}</span>
+ <div v-if="!isTotal" class="order-field h-70 lh-70 mb-18 flex items-center px-16">
+ <input :placeholder="$t('数量')" class="order-input flex-1 border-none textColor font-28" v-model="form.volume" @input="onInput" />
+ <span class="order-unit textColor font-28">{{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}</span>
</div>
- <div v-if="isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
- <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor font-28" v-model="form.total"
- @input="onInputTotal" />
- <span class="textColor font-28">{{ 'USDT' }}</span>
+ <div v-if="isTotal" class="order-field h-70 lh-70 mb-18 flex items-center px-16">
+ <input :placeholder="$t('总额')" class="order-input flex-1 border-none textColor font-28" v-model="form.total" @input="onInputTotal" />
+ <span class="order-unit textColor font-28">USDT</span>
</div>
- <div class="font-24 w-full flex justify-between items-center textColor1">
- <!-- <span class="flex-1 text-left">0%</span> -->
- <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
- @click="exchangeVal(25)">25%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
- @click="exchangeVal(50)">50%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
- @click="exchangeVal(75)">75%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
- @click="exchangeVal(100)">100%</span>
+ <!-- 25% 50% 75% 100% -->
+ <div class="order-percent-row w-full flex justify-between items-center gap-8">
+ <span class="order-percent-btn" :class="{ 'order-percent-btn--active': percentageVal == 25 }" @click="exchangeVal(25)">25%</span>
+ <span class="order-percent-btn" :class="{ 'order-percent-btn--active': percentageVal == 50 }" @click="exchangeVal(50)">50%</span>
+ <span class="order-percent-btn" :class="{ 'order-percent-btn--active': percentageVal == 75 }" @click="exchangeVal(75)">75%</span>
+ <span class="order-percent-btn" :class="{ 'order-percent-btn--active': percentageVal == 100 }" @click="exchangeVal(100)">100%</span>
</div>
- <div class="flex justify-between items-center mt-40">
+ <!-- 可用 + 加号 -->
+ <div class="flex justify-between items-center mt-20 order-available-row">
<div class="flex flex-col font-24">
- <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
- {{ initOpen.volume }} USDT</span>
- </p>
- <p class="text-grey" v-else>{{ $t('可卖') }}
- <span class="textColor ml-8">
- {{ initClose.volume }} {{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}
- </span>
- </p>
+ <p v-if="currentType === 'open'"><span class="order-available-label">{{ $t('可用') }}</span><span class="order-available-value ml-8">{{ initOpen.volume }} USDT</span></p>
+ <p v-else><span class="order-available-label">{{ $t('可卖') }}</span><span class="order-available-value ml-8">{{ initClose.volume }} {{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}</span></p>
</div>
- <van-icon name="add-o" @click="$router.push('/cryptos/exchangePage')" class="font-30 add-icon" />
- <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
+ <div class="order-add-btn" @click="$router.push('/cryptos/exchangePage')">
+ <van-icon name="add-o" class="font-30" />
+ </div>
</div>
- <div style="border-radius: 3.5rem;"
- class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
- :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
+ <!-- 买入/卖出 主按钮 -->
+ <div class="order-submit-btn w-full h-68 lh-90 flex justify-center items-center text-white text-center font-28 mt-10"
+ :class="currentType === 'open' ? 'order-submit-btn--buy' : 'order-submit-btn--sell'" @click="order()">
{{ currentType == 'open' ? $t('买入') : $t('卖出') }}
</div>
- <!-- </template> -->
</div>
</template>
@@ -206,19 +193,29 @@
return
}
this.percentageVal = val
+ const isFull = (val === 100)
if (!this.isTotal) {
if (this.currentType == 'open') {
let sum = (parseFloat(this.initOpen.volume) * (val / 100) / parseFloat(this.form.price))
- this.form.volume = Math.floor(sum * 100000) / 100000
+ this.form.volume = isFull ? sum : (Math.floor(sum * 100000) / 100000)
} else {
- let sum = parseFloat(this.initClose.volume)
- this.form.volume = (Math.floor(sum * (val / 100) * 100000)) / 100000
+ let sum = parseFloat(this.initClose.volume) * (val / 100)
+ if (isFull) {
+ this.form.volume = this.initClose.volume != null ? String(this.initClose.volume) : sum
+ } else {
+ this.form.volume = Math.floor(sum * 100000) / 100000
+ }
}
} else {
if (this.currentType == 'open') {
- this.form.total = this.initOpen.volume * (val / 100)
+ if (isFull) {
+ this.form.total = this.initOpen.volume != null ? String(this.initOpen.volume) : (this.initOpen.volume * (val / 100))
+ } else {
+ this.form.total = this.initOpen.volume * (val / 100)
+ }
} else {
- this.form.total = Math.floor((this.initClose.volume * (val / 100) * parseFloat(this.form.price)) * 1000) / 1000
+ const total = this.initClose.volume * (val / 100) * parseFloat(this.form.price)
+ this.form.total = isFull ? total : (Math.floor(total * 1000) / 1000)
}
}
},
@@ -315,11 +312,12 @@
showFailToast(this.$t('请输入总额'))
return
}
+ const noDecimalLimit = (this.percentageVal === 100)
if (this.currentType === 'open') {
- this.form.volume = parseFloat(this.form.total).toFixed(5)
+ this.form.volume = noDecimalLimit ? parseFloat(this.form.total) : parseFloat(this.form.total).toFixed(5)
} else {
- this.form.volume = (parseFloat(this.form.total) / parseFloat(this.form.price))
- this.form.volume = this.form.volume.toFixed(5)
+ this.form.volume = parseFloat(this.form.total) / parseFloat(this.form.price)
+ this.form.volume = noDecimalLimit ? this.form.volume : this.form.volume.toFixed(5)
}
volume = this.form.volume
} else {
@@ -373,22 +371,145 @@
<style lang="scss">
@import "@/assets/init.scss";
-.area_tabs {
- border-radius: 2.5rem;
+/* 一比一还原图片样式：白底容器 + 绿/红标签 + 浅灰输入框 + 蓝字百分比 + 绿/红主按钮 */
+$order-input-bg: #f5f5f5;
+$order-input-border: #dcdcdc;
+$order-text: #333333;
+$order-unit: #666666;
+$order-placeholder: #999999;
+$order-buy: #38c172;
+$order-sell: #f4374b;
+$order-percent: #3b82f6;
+$order-add-border: #8a2be2;
- .open,
- .close {
- border-radius: 2.5rem;
+.order-area-wrap {
+ background: #fff;
+ border-radius: 12px;
+ padding: 0 0 0 0;
+ overflow: hidden;
+}
+
+.order-area_tabs {
+ position: relative; /* 父相 */
+ height: 66px;
+ border-radius: 8px 8px 0 0;
+ overflow: hidden;
+ /* 子1：两个按钮的 div，flex 左右分布，中间留缝 */
+ .order-tabs-buttons {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 0;
}
-
- .open {
- background: #06CDA5;
+ .order-tab {
+ flex: 0 0 calc(50% );
+ width: calc(50% );
+ font-weight: 500;
+ transition: background 0.2s, color 0.2s;
+ cursor: pointer;
}
-
- .close {
- background: #f43368;
+ .order-tab--left {
+ border-radius: 8px 0 0 0;
+ }
+ .order-tab--right {
+ border-radius: 0 8px 0 0;
+ }
+ .order-tab--buy {
+ background: $order-buy;
+ color: #fff;
+ }
+ .order-tab-buy {
+ background: #e8e8e8;
+ color: #000;
+ }
+ .order-tab--sell {
+ background: $order-sell;
+ color: #fff;
+ }
+ .order-tab-sell {
+ background: #e8e8e8;
+ color: #000;
+ }
+ /* 子2：中间图片 div，父相子绝，居中在两按钮中间，直接显示 img */
+ .order-tabs-bg {
+ position: absolute;
+ left: 49.3%;
+ transform: translateX(-50%);
+ width: 90px;
+ height: 130%;
+ top: -5px;
+ bottom: 0;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .order-tabs-bg-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
}
}
+
+.order-field {
+ background: $order-input-bg;
+ border: none;
+ border-radius: 8px;
+ color: $order-text;
+ .order-field-inner { color: $order-text; }
+ .order-field-label { color: $order-text; flex: 1; }
+ .order-input { background: transparent !important; color: $order-text; font-size: 28px; }
+ .order-unit { color: $order-unit; margin-left: 8px; font-size: 26px; }
+ input::placeholder { color: $order-placeholder; }
+}
+
+.order-field--select .order-field-inner {
+ min-height: 70px;
+}
+
+.order-percent-row {
+ margin-bottom: 4px;
+}
+.order-percent-btn {
+ flex: 1;
+ text-align: center;
+ padding: 2px 0;
+ background: $order-input-bg;
+ border: none;
+ border-radius: 8px;
+ color: $order-text;
+ font-size: 24px;
+ margin-right: 8px;
+ &:last-child { margin-right: 0; }
+}
+.order-percent-btn--active {
+ color: $order-text;
+ font-weight: 500;
+}
+
+.order-available-label { color: $order-placeholder; }
+.order-available-value { color: $order-unit; }
+.order-add-btn {
+ width: 44px;
+ height: 44px;
+ border-radius: 10px;
+ border: none;
+ background: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $order-add-border;
+}
+
+.order-submit-btn {
+ border-radius: 10px;
+ font-weight: 700;
+}
+.order-submit-btn--buy { background: $order-buy; }
+.order-submit-btn--sell { background: $order-sell; }
.bg-f3 {
background: $border-grey;
@@ -497,41 +618,30 @@
cursor: pointer;
}
-.open {
- background-color: $green;
- background: url(@/assets/image/public/open-bg.png) no-repeat right center;
- background-size: 100% 100%;
- color: white;
-}
+/* .open / .close 已由 .order-tab--buy / .order-tab--sell 替代 */
-.close {
- background-color: $green;
- background: url(@/assets/image/public/close-bg.png) no-repeat left center;
- background-size: 100% 100%;
- color: white;
-}
-
-// 下拉
.option-box {
position: absolute;
left: 0;
right: 0;
- top: 90px;
+ top: 100%;
+ margin-top: 4px;
width: 100%;
- background-color: $grey_bg;
+ background: #fff;
+ border: none;
+ border-radius: 8px;
text-align: center;
- box-shadow: 0px 0px 3px 3px $grey_bg;
- border-radius: 4px;
- color: $text-color;
+ color: $order-text;
z-index: 10;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
-.option-box>div {
- padding: 30px 0;
+.option-box > div {
+ padding: 24px 0;
}
-.option-box>div:hover {
- background-color: rgba($color: $bg_yellow, $alpha: 0.6);
+.option-box > div:hover {
+ background: $order-input-bg;
}
.num-text-color {
@@ -564,56 +674,32 @@
opacity: 1;
}
-.inputBackground {
- border-radius: 2.5rem;
-
- input {
- background: transparent !important;
- }
-}
-
-.tab-item {
- display: flex;
- align-items: center;
- justify-content: center;
- background: $input_background;
- border-radius: 2.5rem;
- margin-right: 10px !important;
- padding: 10px 0;
-}
+/* 输入框样式已统一到 .order-field */
.total-list {
- background: transparent;
-
display: flex;
-
- color: $text_color3;
-
+ color: $order-text;
font-size: 26px;
align-items: center;
justify-content: center;
margin-bottom: 20px !important;
- position: relative;
+ gap: 8px;
.total-div {
flex: 1;
text-align: center;
- padding: 20px 0 !important;
+ padding: 8px 0 !important;
+ background: $order-input-bg;
+ border: none;
+ border-radius: 8px;
+ color: $order-unit;
}
}
.active-bg {
- background: $input_background;
- border-radius: 2.5rem;
- color: $text_color;
-}
-
-.buyandSell {
- position: relative;
- z-index: 100;
-}
-
-.select-active {
- color: $text_color;
+ background: #fff !important;
+ border: none;
+ color: $order-text !important;
+ font-weight: 500;
}
</style>
--
Gitblit v1.9.3