From 6a39094090bb96721acd11941d84c84336faefd0 Mon Sep 17 00:00:00 2001
From: zj <1772600164@qq.com>
Date: Fri, 09 Jan 2026 18:59:24 +0800
Subject: [PATCH] 1
---
src/views/Trade.vue | 97 ++++++++++++++++++++++--------------------------
1 files changed, 45 insertions(+), 52 deletions(-)
diff --git a/src/views/Trade.vue b/src/views/Trade.vue
index 3bc78b2..4afe5ef 100644
--- a/src/views/Trade.vue
+++ b/src/views/Trade.vue
@@ -7,8 +7,8 @@
<span class="tab-item">股票</span>
<span class="tab-item red-dot">股票</span>
<div class="tab-right">
- <span class="tab-icon">?</span>
- <span class="tab-icon">☰</span>
+ <Icon icon="solar:question-circle-bold" class="tab-icon" />
+ <Icon icon="solar:hamburger-menu-bold" class="tab-icon" />
</div>
</div>
@@ -39,7 +39,7 @@
</div>
<!-- 互换按钮 -->
- <div class="swap-icon">⇅</div>
+ <Icon icon="solar:swap-bold" class="swap-icon" />
<!-- 下方输入 -->
<div class="trade-input bottom">
@@ -60,7 +60,7 @@
<!-- 交易按钮 -->
<div class="trade-button-wrapper">
- <button class="trade-button">交易</button>
+ <AppButton variant="primary" size="large" full-width class="trade-button">交易</AppButton>
</div>
<!-- 底部信息 -->
@@ -75,7 +75,10 @@
</template>
<script setup lang="ts">
+import { Icon } from '@iconify/vue'
import BottomNav from '@/components/BottomNav.vue'
+import Card from '@/components/Card.vue'
+import AppButton from '@/components/Button.vue'
</script>
<style lang="scss" scoped>
@@ -90,9 +93,10 @@
.main-tabs {
display: flex;
align-items: center;
- padding: 12px 16px;
- gap: 24px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-md $spacing-lg;
+ gap: $spacing-xxl;
+ margin-bottom: $spacing-lg;
+ background: $bg-tertiary;
.tab-item {
font-size: $font-md;
@@ -111,7 +115,7 @@
right: -8px;
width: 6px;
height: 6px;
- background: $error-red;
+ background: $error;
border-radius: 50%;
}
}
@@ -134,40 +138,35 @@
.sub-tabs {
display: flex;
- padding: 12px 16px;
- gap: 24px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-md $spacing-lg;
+ gap: $spacing-xxl;
+ margin-bottom: $spacing-lg;
+ background: $bg-tertiary;
.sub-tab-item {
font-size: $font-md;
color: $text-secondary;
- position: relative;
+ padding: $spacing-xs $spacing-md;
+ border-radius: $radius-pill;
+ transition: all $transition-base;
&.active {
- color: $primary-blue;
- font-weight: 500;
-
- &::after {
- content: '';
- position: absolute;
- bottom: -12px;
- left: 0;
- right: 0;
- height: 2px;
- background: $primary-blue;
- }
+ color: $primary;
+ font-weight: 600;
+ background: $primary-light;
}
}
}
.trade-area {
- padding: 24px 16px;
+ padding: $spacing-xxl $spacing-lg;
.trade-input {
- background: $bg-secondary;
+ background: $bg-card;
border-radius: $radius-lg;
- padding: 20px;
- margin-bottom: 16px;
+ padding: $spacing-xl;
+ margin-bottom: $spacing-lg;
+ box-shadow: $card-shadow;
&.top {
margin-bottom: 8px;
@@ -206,7 +205,7 @@
width: 32px;
height: 32px;
border-radius: 50%;
- background: $primary-blue;
+ background: $primary;
color: white;
display: flex;
align-items: center;
@@ -214,7 +213,7 @@
font-weight: bold;
&.usdt {
- background: $success-green;
+ background: $success;
}
}
@@ -238,7 +237,7 @@
width: 24px;
height: 24px;
border-radius: 50%;
- background: $primary-blue;
+ background: $primary;
color: white;
border: none;
display: flex;
@@ -251,44 +250,38 @@
}
.swap-icon {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: $bg-dark;
+ width: 48px;
+ height: 48px;
+ border-radius: $radius-round;
+ background: $primary;
color: white;
display: flex;
align-items: center;
justify-content: center;
- margin: -20px auto;
+ margin: -24px auto;
position: relative;
z-index: 1;
- font-size: 20px;
cursor: pointer;
+ box-shadow: $button-shadow;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
}
}
.trade-button-wrapper {
- padding: 0 16px 16px;
-
- .trade-button {
- width: 100%;
- background: $primary-blue;
- color: white;
- border: none;
- border-radius: $radius-lg;
- padding: 16px;
- font-size: $font-lg;
- font-weight: 500;
- cursor: pointer;
- }
+ padding: 0 $spacing-lg $spacing-lg;
}
.bottom-info {
display: flex;
justify-content: space-between;
- padding: 12px 16px;
+ padding: $spacing-md $spacing-lg;
font-size: $font-sm;
color: $text-secondary;
- border-top: 1px solid $border-light;
+ background: $bg-tertiary;
+ margin-top: $spacing-lg;
}
</style>
--
Gitblit v1.9.3