From 7fc6bfe900790ec7c92bce85d5b20a95fbc06e65 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Wed, 15 Oct 2025 10:29:30 +0800
Subject: [PATCH] 其他人改的版本
---
src/components/Transform/trade-order-area/index.vue | 144 ++++++++++++++++++++++++++---------------------
1 files changed, 79 insertions(+), 65 deletions(-)
diff --git a/src/components/Transform/trade-order-area/index.vue b/src/components/Transform/trade-order-area/index.vue
index 1681343..6318606 100644
--- a/src/components/Transform/trade-order-area/index.vue
+++ b/src/components/Transform/trade-order-area/index.vue
@@ -11,7 +11,7 @@
<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" />
+ <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20" />
</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 }}
@@ -26,52 +26,57 @@
<div class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2">
<span>{{ title }}</span>
</div>
- <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>
- <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">{{ symbol.toLocaleUpperCase() }}</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>
- <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>
- </div>
- <div class="flex justify-between items-center mt-40">
- <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 }} {{
- symbol.toLocaleUpperCase() }}</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>
- <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()">
- {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
- </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>
+ <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">{{ symbol.toLocaleUpperCase() }}</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>
+ <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>
+ </div>
+ <div class="flex justify-between items-center mt-40">
+ <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 }} {{
+ symbol.toLocaleUpperCase() }}</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>
+ <div style="border-radius: 6px;"
+ 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()">
+ {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
+ </div>
+ </template>
</div>
</template>
@@ -364,19 +369,19 @@
@import "@/assets/init.scss";
.area_tabs {
- border-radius: 2.5rem;
+ // border-radius: 2.5rem;
.open,
.close {
- border-radius: 2.5rem;
+ // border-radius: 2.5rem;
}
.open {
- background: #06CDA5;
+ background: #24c18d;
}
.close {
- background: #f43368;
+ background: #f14b3f;
}
}
@@ -521,7 +526,7 @@
}
.option-box>div:hover {
- background-color: rgba($color: $bg_yellow, $alpha: 0.6);
+ background-color: rgba($color: $bg_yellow, $alpha: 0.6);
}
.num-text-color {
@@ -555,7 +560,8 @@
}
.inputBackground {
- border-radius: 2.5rem;
+ // border-radius: 2.5rem;
+
input {
background: transparent !important;
}
@@ -565,35 +571,41 @@
display: flex;
align-items: center;
justify-content: center;
- background: $input_background;
- border-radius: 2.5rem;
+ // background: $input_background;
+ // border-radius: 2.5rem;
margin-right: 10px !important;
padding: 10px 0;
+
+ @include themify() {
+ background: themed("input_background");
+ }
}
.total-list {
background: transparent;
-
display: flex;
-
- color: $text_color;
-
font-size: 26px;
align-items: center;
justify-content: center;
margin-bottom: 20px !important;
position: relative;
- .total-div {
- flex: 1;
- text-align: center;
- padding: 20px 0 !important;
+ @include themify() {
+ color: themed("text_color1");
}
}
+.total-div {
+ flex: 1;
+ text-align: center;
+ padding: 20px 0 !important;
+}
+
.active-bg {
- background: $input_background;
- border-radius: 2.5rem;
+ @include themify() {
+ background: themed("input_background");
+ color: themed("text_color");
+ }
}
.buyandSell {
@@ -602,6 +614,8 @@
}
.select-active {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
</style>
--
Gitblit v1.9.3