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/Market.vue | 138 ++++++++++++++++++++++++++++++---------------
1 files changed, 92 insertions(+), 46 deletions(-)
diff --git a/src/views/Market.vue b/src/views/Market.vue
index 45ea2a8..67aa995 100644
--- a/src/views/Market.vue
+++ b/src/views/Market.vue
@@ -3,10 +3,10 @@
<!-- 搜索栏 -->
<div class="search-bar">
<div class="search-input-wrapper">
- <span class="search-icon">🔍</span>
+ <Icon icon="solar:magnifer-bold" class="search-icon" />
<span class="search-placeholder">搜索代币/合约/股票/DApp</span>
</div>
- <div class="search-scan">☐</div>
+ <Icon icon="solar:qr-code-bold" class="search-scan" />
</div>
<!-- 主标签 -->
@@ -19,40 +19,40 @@
<!-- 功能图标 -->
<div class="feature-icons">
<div class="feature-item">
- <div class="feature-icon blue">G</div>
+ <Icon icon="solar:radar-bold" class="feature-icon blue" />
<span>金狗雷达</span>
</div>
<div class="feature-item">
- <div class="feature-icon black">-</div>
+ <Icon icon="solar:scanner-bold" class="feature-icon black" />
<span>扫链</span>
</div>
<div class="feature-item">
- <div class="feature-icon blue">👁</div>
+ <Icon icon="solar:eye-bold" class="feature-icon blue" />
<span>监控</span>
</div>
- <div class="feature-arrow">></div>
+ <Icon icon="solar:arrow-right-linear" class="feature-arrow" />
</div>
<!-- 市场热度 -->
<div class="market-hotness">
<div class="section-title">市场热度</div>
<div class="hotness-cards">
- <div class="hotness-card">
+ <Card hoverable class="hotness-card">
<div class="hotness-name">中文潮流</div>
<div class="hotness-change up">+39.68%</div>
<div class="hotness-volume">290.5K</div>
- </div>
- <div class="hotness-card">
+ </Card>
+ <Card hoverable class="hotness-card">
<div class="hotness-name">日语文化</div>
<div class="hotness-change up">+0.75%</div>
<div class="hotness-volume">97.3K</div>
- </div>
- <div class="hotness-card">
+ </Card>
+ <Card hoverable class="hotness-card">
<div class="hotness-name">鲸鱼</div>
<div class="hotness-change up">+131.09%</div>
<div class="hotness-volume">24.8K</div>
- </div>
- <div class="hotness-arrow">></div>
+ </Card>
+ <Icon icon="solar:arrow-right-linear" class="hotness-arrow" />
</div>
</div>
@@ -79,14 +79,14 @@
</div>
<!-- 提醒横幅 -->
- <div class="alert-banner">
+ <Card class="alert-banner">
<span>开启提醒,第一时间获取 Hot Picks 上新 开启</span>
- <span class="close-icon">×</span>
- </div>
+ <Icon icon="solar:close-circle-bold" class="close-icon" />
+ </Card>
<!-- 代币列表 -->
<div class="token-list">
- <div class="token-item" v-for="token in tokenData" :key="token.id">
+ <Card hoverable class="token-item" v-for="token in tokenData" :key="token.id">
<div class="token-left">
<div class="token-icon">{{ token.icon }}</div>
<div class="token-info">
@@ -107,8 +107,8 @@
{{ token.change > 0 ? '+' : '' }}{{ token.change }}%
</div>
</div>
- <div class="token-arrow">></div>
- </div>
+ <Icon icon="solar:arrow-right-linear" class="token-arrow" />
+ </Card>
</div>
<!-- 底部导航 -->
@@ -118,7 +118,9 @@
<script setup lang="ts">
import { ref } from 'vue'
+import { Icon } from '@iconify/vue'
import BottomNav from '@/components/BottomNav.vue'
+import Card from '@/components/Card.vue'
const tokenData = ref([
{ id: 1, icon: '🐴', name: '我踏马来了', badge: '👍', badgeType: 'green', time: '7D', marketCap: '$702.53万', volume: '$2,501.02万', price: '$0.0070253', change: 203.63 },
@@ -153,6 +155,8 @@
.search-icon {
font-size: 16px;
+ width: 16px;
+ height: 16px;
}
.search-placeholder {
@@ -168,22 +172,32 @@
align-items: center;
justify-content: center;
font-size: 18px;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
}
}
.main-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;
.tab-item {
font-size: $font-md;
color: $text-secondary;
+ padding: $spacing-xs $spacing-md;
+ border-radius: $radius-pill;
+ transition: all $transition-base;
&.active {
- color: $text-primary;
- font-weight: 500;
+ color: $primary;
+ font-weight: 600;
+ background: $primary-light;
}
}
}
@@ -191,8 +205,10 @@
.feature-icons {
display: flex;
align-items: center;
- padding: 16px;
- gap: 24px;
+ padding: $spacing-lg;
+ gap: $spacing-xxl;
+ margin-bottom: $spacing-lg;
+ background: $bg-tertiary;
.feature-item {
display: flex;
@@ -210,8 +226,13 @@
color: white;
font-weight: bold;
+ svg {
+ width: 24px;
+ height: 24px;
+ }
+
&.blue {
- background: $primary-blue;
+ background: $primary;
}
&.black {
@@ -228,6 +249,8 @@
.feature-arrow {
margin-left: auto;
color: $text-tertiary;
+ width: 18px;
+ height: 18px;
}
}
@@ -246,9 +269,9 @@
overflow-x: auto;
.hotness-card {
- background: $primary-light-blue;
+ background: $primary-light;
border-radius: $radius-lg;
- padding: 12px 16px;
+ padding: $spacing-md $spacing-lg !important;
min-width: 100px;
.hotness-name {
@@ -277,64 +300,86 @@
color: $text-tertiary;
display: flex;
align-items: center;
+ width: 20px;
+ height: 20px;
}
}
}
.secondary-nav {
display: flex;
- padding: 12px 16px;
- gap: 16px;
+ padding: $spacing-md $spacing-lg;
+ gap: $spacing-lg;
overflow-x: auto;
- border-bottom: 1px solid $border-light;
+ margin-bottom: $spacing-sm;
+ background: $bg-tertiary;
.nav-item {
font-size: $font-md;
color: $text-secondary;
white-space: nowrap;
+ padding: $spacing-xs $spacing-md;
+ border-radius: $radius-pill;
+ transition: all $transition-base;
&.active {
- color: $primary-blue;
- font-weight: 500;
+ color: $primary;
+ font-weight: 600;
+ background: $primary-light;
}
}
}
.data-filters {
display: flex;
- padding: 8px 16px;
- gap: 12px;
+ padding: $spacing-sm $spacing-lg;
+ gap: $spacing-md;
font-size: $font-xs;
color: $text-secondary;
- border-bottom: 1px solid $border-light;
+ margin-bottom: $spacing-sm;
+ background: $bg-tertiary;
+ border-radius: $radius-md;
.filter-item {
flex: 1;
text-align: center;
+ padding: $spacing-xs;
+ border-radius: $radius-sm;
+ transition: all $transition-base;
+
+ &:hover {
+ background: $bg-card;
+ }
}
}
.alert-banner {
- background: $primary-light-blue;
- padding: 12px 16px;
+ margin: 0 $spacing-lg $spacing-lg;
+ padding: $spacing-md $spacing-lg !important;
display: flex;
justify-content: space-between;
align-items: center;
font-size: $font-sm;
- color: $primary-blue;
+ background: $primary-light;
+ color: $primary;
+ font-weight: 500;
.close-icon {
- font-size: 20px;
+ width: 20px;
+ height: 20px;
cursor: pointer;
+ color: $primary;
}
}
.token-list {
+ padding: 0 $spacing-lg;
+
.token-item {
display: flex;
align-items: center;
- padding: 12px 16px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-md $spacing-lg !important;
+ margin-bottom: $spacing-sm;
.token-left {
display: flex;
@@ -370,11 +415,11 @@
font-size: $font-xs;
&.green {
- color: $success-green;
+ color: $success;
}
&.yellow {
- color: $warning-orange;
+ color: $warning;
}
}
@@ -418,7 +463,8 @@
.token-arrow {
color: $text-tertiary;
- font-size: 16px;
+ width: 18px;
+ height: 18px;
}
}
}
--
Gitblit v1.9.3