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/mining-exchange-input/index.vue | 170 +++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 131 insertions(+), 39 deletions(-)
diff --git a/src/components/Transform/mining-exchange-input/index.vue b/src/components/Transform/mining-exchange-input/index.vue
index a219b85..ed33a0b 100644
--- a/src/components/Transform/mining-exchange-input/index.vue
+++ b/src/components/Transform/mining-exchange-input/index.vue
@@ -1,35 +1,26 @@
<template>
- <div id="cryptos">
- <div class="flex mt-30 items-center">
- <p class=" font-18 flex-1 textColor">{{ title }}</p>
- <!-- <div class="money-bag" v-if="isMoney">
- 现货钱包
- <img src="@/assets/image/exchange/icon_4.png" alt="" class="w-25 h-25" />
- </div> -->
- <div v-if="available.length > 0" class="labelColor">
- {{ $t('可用数量') }}：
- <span>{{ available }}</span>
+ <div id="cryptos" class="exchange-input-card">
+ <div class="exchange-input-head">
+ <span class="exchange-input-title">{{ title }}</span>
+ <span class="exchange-input-balance">{{ $t('balance') }}: {{ available || '0' }}</span>
+ </div>
+ <div class="exchange-input-row">
+ <div class="exchange-input-coin" @click="type === 1 && onShowActionSheet()">
+ <img :src="`${HOST_URL}/symbol/${type == 1 ? iconImg1 : iconImg2}.png`" alt=""
+ class="exchange-input-coin-icon" />
+ <span class="exchange-input-coin-symbol">{{ type == 1 ? coin.toUpperCase() : coin1.toUpperCase() }}</span>
+ <van-icon v-if="type === 1" name="arrow-down" class="exchange-input-arrow" />
+ </div>
+ <div class="exchange-input-value">
+ <input v-if="type == 1" type="number" class="exchange-input-field"
+ v-model="oneValue" @input="onInput" :disabled="disabled" placeholder="0" />
+ <span v-else class="exchange-input-result">≈ {{ value || '0' }}</span>
</div>
</div>
- <div style="box-sizing: border-box" class="w-full rounded mt-22 flex items-center box-border py-3 inputBackground">
- <div class="flex border-r-gray border-white items-center" @click="onShowActionSheet">
- <img :src="`${HOST_URL}/symbol/${type == 1 ? iconImg1 : iconImg2}.png`" alt="logo"
- class="rounded-full mr-5 currency-icon" />
- <span class="font-16 mr-10 w-62 textColor">{{ type == 1 ? coin.toUpperCase() : coin1.toUpperCase() }}</span>
- <img src="./icon-arrow.png" alt="logo" class="w-12 h-8 icon-arrow" />
- </div>
- <div class="input-wrap flex justify-between flex-1 items-center ml-10">
- <input placeholder="" v-if="type == 1" type="number" class="h-40 pl-10 border-none inputBackground textColor"
- v-model="oneValue" @input="onInput" :disabled="disabled" />
- <input placeholder="" v-if="type == 2" type="number" class="h-40 pl-10 border-none inputBackground textColor"
- :value="value" @input="onInput" :disabled="disabled" />
- </div>
- <!-- <div v-if="showMax" class="pr-20" @click="onMax">{{ $t('最大') }}</div> -->
+ <div class="exchange-input-max" v-if="showMax">
+ <span @click="onMax">{{ $t('最大') }}</span>
</div>
- <div class="flex justify-end" v-if="showMax">
- <van-button type="default" round size="small" @click="onMax">{{ $t('最大') }}</van-button>
- </div>
- <div class="flex justify-between font-22 mt-15 text-grey">
+ <div class="flex justify-between font-22 mt-15 text-grey" v-if="tips && tips.length">
<p v-for="(tip, index) in tips" :key="index">{{ tip }}</p>
</div>
<!-- <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> -->
@@ -72,7 +63,7 @@
class="w-30 h-30 rounded-full mr-10 currency-icon" />
</div>
<div>
- <div class="item-title textColor">{{ item.symbol_data.toUpperCase() }}</div>
+ <div class="item-title textColor">{{ strToArr(item.name.toUpperCase(), '/')[0] }}</div>
</div>
</div>
<div class="text-right" v-if="activeIndex == 0">
@@ -234,10 +225,96 @@
} else {
this.currencyList = this.allCurrencyList
}
- }
+ },
+ strToArr(str, separator = ',') {
+ if (typeof str !== 'string') return [];
+ return str.split(separator);
+ },
},
};
</script>
+<style lang="scss" scoped>
+.exchange-input-card {
+ background-color: #fff !important;
+ font-size: 2rem;
+ padding: 40px 0;
+}
+.exchange-input-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 17px;
+}
+.exchange-input-title {
+ color: #888;
+ font-size: 2rem;
+}
+.exchange-input-balance {
+ color: #888;
+ font-size: 2rem;
+}
+.exchange-input-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 7px 0;
+ min-height: 53px;
+}
+.exchange-input-coin {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ cursor: pointer;
+}
+.exchange-input-coin-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+.exchange-input-coin-symbol {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #333;
+}
+.exchange-input-arrow {
+ color: #666;
+ font-size: 1.6rem;
+}
+.exchange-input-value {
+ flex: 1;
+ text-align: right;
+ min-width: 0;
+ margin-left: 19px;
+}
+.exchange-input-field {
+ width: 100%;
+ border: none;
+ background: transparent;
+ font-size: 2rem;
+ font-weight: 600;
+ color: #333;
+ text-align: right;
+ outline: none;
+}
+.exchange-input-field::placeholder {
+ color: #bbb;
+}
+.exchange-input-result {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #666;
+}
+.exchange-input-max {
+ text-align: right;
+ margin-top: 7px;
+}
+.exchange-input-max span {
+ font-size: 2rem;
+ color: #5e2bc8;
+ cursor: pointer;
+}
+</style>
<style lang="scss">
@import "@/assets/init.scss";
@@ -246,13 +323,15 @@
font-size: 30px;
.input-wrap {
- // border-left: 1px solid #3E4968;
padding-left: 30px;
}
.van-action-sheet__item {
background: #0D1323;
- color: $text_color;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
@@ -264,37 +343,50 @@
.exchange-pop {
.tab-list {
- background: $inp-b;
+ // background: $inp-b;
$tab-r: 90px;
border-radius: $tab-r;
height: 180px;
color: $text_color;
+ @include themify() {
+ background: themed("input_background");
+ }
+
.tab-item {
text-align: center;
border-radius: $tab-r;
+
+ @include themify() {
+ background: themed("input_background");
+ }
}
.active {
- background: $bg_yellow;
-
+ background: $bg_yellow !important;
border-radius: $tab-r;
}
}
.title {
- color: $text_color;
- padding: 30px 0 !important
+ padding: 30px 0 !important;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.search-input {
- color: $text_color;
- background: $inp-b;
border-radius: 80px;
height: 100px !important;
display: flex;
align-items: center;
padding-left: 30px !important;
+
+ @include themify() {
+ background: themed("input_background");
+ color: themed("text_color");
+ }
}
.list {
--
Gitblit v1.9.3