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/Discover.vue | 28
src/views/Contract.vue | 43
src/views/Settings.vue | 81 +
src/views/Trade.vue | 97 +-
src/views/Market.vue | 138 ++-
package-lock.json | 22
src/components/BottomNav.vue | 58
package.json | 11
src/styles/variables.scss | 92 +
src/views/Home.vue | 1475 ++++++++++++++++++++++++--------------
src/views/Wallet.vue | 217 +++--
11 files changed, 1,410 insertions(+), 852 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index e524c4f..1084470 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "bitget-wallet",
"version": "1.0.0",
"dependencies": {
+ "@iconify/vue": "^5.0.0",
"lightweight-charts": "^4.1.3",
"pinia": "^2.1.7",
"vue": "^3.4.0",
@@ -458,6 +459,27 @@
"node": ">=12"
}
},
+ "node_modules/@iconify/types": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+ "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+ "license": "MIT"
+ },
+ "node_modules/@iconify/vue": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+ "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+ "license": "MIT",
+ "dependencies": {
+ "@iconify/types": "^2.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/cyberalien"
+ },
+ "peerDependencies": {
+ "vue": ">=3"
+ }
+ },
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
diff --git a/package.json b/package.json
index 15e2d01..20ce1af 100644
--- a/package.json
+++ b/package.json
@@ -8,16 +8,17 @@
"preview": "vite preview"
},
"dependencies": {
- "vue": "^3.4.0",
- "vue-router": "^4.2.5",
+ "@iconify/vue": "^5.0.0",
+ "lightweight-charts": "^4.1.3",
"pinia": "^2.1.7",
- "lightweight-charts": "^4.1.3"
+ "vue": "^3.4.0",
+ "vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
+ "sass": "^1.69.5",
"typescript": "^5.3.0",
- "vue-tsc": "^1.8.27",
"vite": "^5.0.0",
- "sass": "^1.69.5"
+ "vue-tsc": "^1.8.27"
}
}
diff --git a/src/components/BottomNav.vue b/src/components/BottomNav.vue
index 252f7bb..2693c29 100644
--- a/src/components/BottomNav.vue
+++ b/src/components/BottomNav.vue
@@ -7,7 +7,9 @@
:class="{ active: $route.path === item.path }"
@click="$router.push(item.path)"
>
- <div class="nav-icon" v-html="item.icon"></div>
+ <div class="nav-icon">
+ <Icon :icon="item.icon" />
+ </div>
<span class="nav-label">{{ item.label }}</span>
</div>
</div>
@@ -15,34 +17,35 @@
<script setup lang="ts">
import { useRoute } from 'vue-router'
+import { Icon } from '@iconify/vue'
const route = useRoute()
const navItems = [
{
path: '/',
- label: '首页',
- icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/></svg>'
+ label: '首页',
+ icon: 'solar:home-bold'
},
{
path: '/market',
- label: '行情',
- icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z" fill="currentColor"/></svg>'
+ label: '行情',
+ icon: 'solar:graph-up-bold'
},
{
path: '/trade',
- label: '交易',
- icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" fill="currentColor"/></svg>'
+ label: '交易',
+ icon: 'solar:transfer-horizontal-bold'
},
{
path: '/discover',
- label: '发现',
- icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>'
+ label: '发现',
+ icon: 'solar:compass-bold'
},
{
path: '/wallet',
- label: '钱包',
- icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" fill="currentColor"/></svg>'
+ label: '钱包',
+ icon: 'solar:wallet-bold'
}
]
</script>
@@ -55,14 +58,15 @@
bottom: 0;
left: 0;
right: 0;
- height: 60px;
+ min-height: 70px;
+ padding: 8px 0;
background: #ffffff;
border-top: 1px solid $border-light;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1000;
- padding-bottom: env(safe-area-inset-bottom);
+ padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.nav-item {
@@ -74,29 +78,35 @@
cursor: pointer;
&.active {
- .nav-icon {
- color: $primary-blue;
- }
.nav-label {
- color: $primary-blue;
+ color: $text-primary;
+ font-weight: 600;
}
}
}
.nav-icon {
- width: 24px;
- height: 24px;
+ width: 32px;
+ height: 32px;
+ margin-bottom: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
color: $text-tertiary;
- margin-bottom: 2px;
- svg {
- width: 100%;
- height: 100%;
+ :deep(svg) {
+ width: 32px;
+ height: 32px;
+ color: inherit;
}
}
+.nav-item.active .nav-icon {
+ color: $primary;
+}
+
.nav-label {
- font-size: $font-xs;
+ font-size: $font-sm;
color: $text-tertiary;
}
</style>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index fa283bd..9a6208a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,55 +1,75 @@
-// 根据截图提取的精确颜色值
-$bg-primary: #ffffff;
-$bg-secondary: #f5f5f5;
-$bg-tertiary: #fafafa;
-$bg-dark: #1a1a1a;
+// ===== 主色调系统 =====
+$primary: #64EDFB;
+$primary-light: #E2FDFE;
+$primary-dark: #4DD5E8;
+$primary-hover: #7DF0FF;
+// ===== 背景色系统 =====
+$bg-primary: #ffffff;
+$bg-secondary: #F8F9FA;
+$bg-tertiary: #E2FDFE;
+$bg-card: #ffffff;
+$bg-card-hover: #F8F9FA;
+$bg-dark: #1a1a1a;
+$bg-overlay: rgba(0, 0, 0, 0.4);
+
+// ===== 文本颜色系统 =====
$text-primary: #1a1a1a;
$text-secondary: #666666;
$text-tertiary: #999999;
+$text-disabled: #CCCCCC;
$text-white: #ffffff;
+$text-on-primary: #1a1a1a;
-// 主色调 - 根据截图中的蓝色按钮
-$primary-blue: #1890ff;
-$primary-light-blue: #e6f7ff;
-$primary-dark-blue: #096dd9;
+// ===== 语义化颜色 =====
+$success: #10B981;
+$success-light: #D1FAE5;
+$warning: #F59E0B;
+$warning-light: #FEF3C7;
+$error: #EF4444;
+$error-light: #FEE2E2;
+$info: #3B82F6;
+$info-light: #DBEAFE;
-// 功能色
-$success-green: #52c41a;
-$error-red: #ff4d4f;
-$warning-orange: #faad14;
-$info-blue: #1890ff;
+// ===== 涨跌颜色 =====
+$up-green: #10B981;
+$down-red: #EF4444;
-// 涨跌颜色
-$up-green: #52c41a;
-$down-red: #ff4d4f;
+// ===== 边框颜色 =====
+$border-color: #E5E7EB;
+$border-light: #F3F4F6;
+$border-dark: #D1D5DB;
+$border-focus: #64EDFB;
-// 边框
-$border-color: #e8e8e8;
-$border-light: #f0f0f0;
-$border-dark: #d9d9d9;
+// ===== 阴影系统 =====
+$shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+$button-shadow: 0 2px 4px rgba(100, 237, 251, 0.2);
+$button-shadow-hover: 0 4px 8px rgba(100, 237, 251, 0.3);
-// 阴影
-$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-$shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-// 间距
+// ===== 间距系统 =====
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-xxl: 24px;
+$spacing-xxxl: 32px;
-// 圆角
-$radius-sm: 4px;
-$radius-md: 8px;
-$radius-lg: 12px;
-$radius-xl: 16px;
+// ===== 圆角系统 =====
+$radius-xs: 4px;
+$radius-sm: 8px;
+$radius-md: 12px;
+$radius-lg: 16px;
+$radius-xl: 20px;
+$radius-pill: 24px;
$radius-round: 50%;
-// 字体大小
+// ===== 字体大小系统 =====
$font-xs: 10px;
$font-sm: 12px;
$font-md: 14px;
@@ -57,3 +77,9 @@
$font-xl: 18px;
$font-xxl: 20px;
$font-title: 24px;
+$font-display: 28px;
+
+// ===== 过渡动画 =====
+$transition-fast: 0.15s ease;
+$transition-base: 0.2s ease;
+$transition-slow: 0.3s ease;
diff --git a/src/views/Contract.vue b/src/views/Contract.vue
index 6467992..53bcd7c 100644
--- a/src/views/Contract.vue
+++ b/src/views/Contract.vue
@@ -338,9 +338,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;
@@ -437,9 +438,10 @@
.timeframes {
display: flex;
align-items: center;
- padding: 8px 16px;
- gap: 16px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-sm $spacing-lg;
+ gap: $spacing-lg;
+ margin-bottom: $spacing-sm;
+ background: $bg-tertiary;
.timeframe {
font-size: $font-sm;
@@ -449,8 +451,8 @@
cursor: pointer;
&.active {
- background: $primary-light-blue;
- color: $primary-blue;
+ background: $primary-light;
+ color: $primary;
}
}
@@ -478,7 +480,10 @@
padding: 8px 16px;
font-size: $font-sm;
color: $text-secondary;
- border-bottom: 1px solid $border-light;
+ margin-bottom: $spacing-sm;
+ padding: $spacing-sm $spacing-lg;
+ background: $bg-tertiary;
+ border-radius: $radius-md;
}
.position-buttons {
@@ -508,7 +513,8 @@
&.short {
background: $bg-primary;
color: $text-secondary;
- border: 1px solid $border-light;
+ background: $bg-card;
+ border-radius: $radius-md;
&.active {
background: $down-red;
@@ -559,9 +565,10 @@
.orderbook-price {
text-align: center;
padding: 8px 0;
- border-top: 1px solid $border-light;
- border-bottom: 1px solid $border-light;
- margin: 8px 0;
+ background: $bg-tertiary;
+ border-radius: $radius-md;
+ margin: $spacing-sm 0;
+ padding: $spacing-sm 0;
.current-price {
font-size: $font-lg;
@@ -612,8 +619,8 @@
cursor: pointer;
&.active {
- background: $primary-light-blue;
- color: $primary-blue;
+ background: $primary-light;
+ color: $primary;
}
}
@@ -708,7 +715,7 @@
.slider-fill {
height: 100%;
- background: $primary-blue;
+ background: $primary;
border-radius: 2px;
}
}
@@ -749,8 +756,8 @@
display: flex;
padding: 12px 16px;
gap: 24px;
- border-top: 1px solid $border-light;
- border-bottom: 1px solid $border-light;
+ background: $bg-tertiary;
+ margin-top: $spacing-lg;
.bottom-tab {
font-size: $font-md;
diff --git a/src/views/Discover.vue b/src/views/Discover.vue
index 5528297..ef9590f 100644
--- a/src/views/Discover.vue
+++ b/src/views/Discover.vue
@@ -236,8 +236,9 @@
.icon-grid {
display: flex;
justify-content: space-around;
- padding: 16px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-lg;
+ margin-bottom: $spacing-lg;
+ background: $bg-tertiary;
.grid-item {
display: flex;
@@ -255,15 +256,15 @@
font-size: 28px;
&.gift {
- background: $primary-blue;
+ background: $primary;
}
&.shopping {
- background: $primary-blue;
+ background: $primary;
}
&.faucet {
- background: $primary-blue;
+ background: $primary;
}
}
@@ -276,21 +277,24 @@
.category-tabs {
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-lg;
+ background: $bg-tertiary;
.category-tab {
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: $text-primary;
- font-weight: 500;
- border-bottom: 2px solid $primary-blue;
- padding-bottom: 8px;
+ color: $primary;
+ font-weight: 600;
+ background: $primary-light;
}
}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fd8d4c9..d943fb1 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,196 +1,201 @@
<template>
<div class="home-page">
- <!-- 搜索栏 -->
- <div class="search-bar">
- <div class="search-left">
- <span class="grid-icon">☰</span>
+ <!-- 顶部视频背景区域 -->
+ <div class="top-video-section">
+ <!-- 搜索栏 - 叠加在视频上方 -->
+ <div class="search-bar">
+ <div class="search-left">
+ <QuickAccessIcons type="more" />
+ </div>
+ <div class="search-input-wrapper">
+ <Icon icon="solar:search-bold" class="search-icon" />
+ <span class="search-placeholder">全局搜索</span>
+ </div>
+ <div class="search-right">
+ <Icon icon="solar:bell-bold" class="bell-icon" />
+ </div>
</div>
- <div class="search-input-wrapper">
- <span class="search-icon">🔍</span>
- <span class="search-placeholder">全局搜索</span>
- </div>
- <div class="search-right">
- <span class="bell-icon">🔔</span>
- </div>
- </div>
-
- <!-- 主Banner -->
- <div class="main-banner">
- <div class="banner-content">
- <h1 class="banner-title">Crypto for Everyone</h1>
- <button class="recharge-btn">去充值</button>
- <div class="payment-icons">
- <span>💳</span>
- <span>💳</span>
- <span>💳</span>
- <span>💳</span>
+ <video
+ class="background-video"
+ autoplay
+ loop
+ muted
+ playsinline
+ :style="{ objectPosition: 'center center' }"
+ >
+ <source src="@/mp4/顶部视频.mp4" type="video/mp4" />
+ </video>
+ <div class="video-overlay"></div>
+
+ <!-- 快捷入口 - 叠加在视频上 -->
+ <div class="quick-access">
+ <div class="access-item">
+ <div class="access-icon">
+ <QuickAccessIcons type="pay" />
+ </div>
+ <span>Pay</span>
+ </div>
+ <div class="access-item">
+ <div class="access-icon">
+ <QuickAccessIcons type="contract" />
+ </div>
+ <span>合约</span>
+ </div>
+ <div class="access-item">
+ <div class="access-icon">
+ <QuickAccessIcons type="earn" />
+ </div>
+ <span>赚币</span>
+ </div>
+ <div class="access-item">
+ <div class="access-icon">
+ <QuickAccessIcons type="more" />
+ </div>
+ <span>更多</span>
</div>
</div>
</div>
- <!-- 快捷入口 -->
- <div class="quick-access">
- <div class="access-item">
- <div class="access-icon">✈️</div>
- <span>Pay</span>
+ <!-- 公告卡片轮播 -->
+ <div class="announcement-swiper">
+ <div class="announcement-container" :style="{ transform: `translateX(-${currentAnnouncement * 100}%)` }">
+ <Card hoverable class="announcement-card" v-for="(announcement, index) in announcements" :key="index">
+ <Icon icon="solar:graph-up-bold" class="announcement-icon" />
+ <div class="announcement-content">
+ <div class="announcement-title">{{ announcement.title }}</div>
+ <div class="announcement-desc">{{ announcement.desc }}</div>
+ </div>
+ <Icon icon="solar:arrow-right-linear" class="announcement-arrow" />
+ </Card>
</div>
- <div class="access-item">
- <div class="access-icon">📄</div>
- <span>合约</span>
- </div>
- <div class="access-item">
- <div class="access-icon">💰</div>
- <span>赚币</span>
- <span class="badge">●</span>
- </div>
- <div class="access-item">
- <div class="access-icon">☰</div>
- <span>更多</span>
+ <div class="announcement-indicators">
+ <span
+ v-for="(announcement, index) in announcements"
+ :key="index"
+ class="indicator"
+ :class="{ active: currentAnnouncement === index }"
+ ></span>
</div>
</div>
- <!-- 公告卡片 -->
- <div class="announcement-card">
- <div class="announcement-icon">📈</div>
- <div class="announcement-content">
- <div class="announcement-title">拼多多等最热中概股,全网首发</div>
- <div class="announcement-desc">新增支持 98 支代币化股票</div>
- </div>
- <div class="announcement-arrow">></div>
- </div>
-
- <!-- 绑定邀请码 -->
- <div class="invite-card">
- <div class="invite-title">绑定邀请码</div>
- <div class="invite-input-wrapper">
- <input type="text" placeholder="输入/粘贴邀请码" class="invite-input" />
- <span class="copy-icon">📋</span>
- </div>
- <div class="invite-buttons">
- <button class="invite-btn later">稍后再说</button>
- <button class="invite-btn bind">绑定</button>
- </div>
- </div>
-
- <!-- 加密一点通 -->
- <div class="crypto-guide">
- <div class="guide-title">加密一点通</div>
- <div class="guide-content">
- <div class="guide-text">
- <div>从0到1抽出貨</div>
- <div>1分钟了解 Bitget Wallet</div>
- </div>
- <div class="guide-cat">🐱</div>
- </div>
- </div>
-
- <!-- 热门理财 -->
+ <!-- 理财 -->
<div class="finance-section">
- <div class="section-title">热门理财</div>
+ <div class="section-title-wrapper">
+ <div class="section-title">热门理财</div>
+ <Icon icon="solar:arrow-right-linear" class="section-arrow" />
+ </div>
<div class="finance-cards">
- <div class="finance-card">
- <div class="finance-icon">$</div>
- <div class="finance-name">稳定币理财 Plus</div>
+ <Card hoverable class="finance-card usdt" @click="handleFinanceClick('usdt')">
+ <SunburstIcon type="usdt" color="#64EDFB">
+ <div class="finance-icon">
+ <span class="icon-main">$</span>
+ <span class="icon-overlay">-</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">稳定币理财</span>
+ <span class="finance-badge">Plus</span>
+ </div>
<div class="finance-apy">10% APY</div>
- </div>
- <div class="finance-card">
- <div class="finance-icon sol">SOL</div>
- <div class="finance-name">SOL</div>
+ </Card>
+ <Card hoverable class="finance-card sol" @click="handleFinanceClick('sol')">
+ <SunburstIcon type="sol" color="#9945FF">
+ <div class="finance-icon sol">
+ <span class="icon-main">S</span>
+ <span class="icon-overlay">-</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">SOL</span>
+ </div>
<div class="finance-apy">6.28% APY</div>
- </div>
+ </Card>
+ <Card hoverable class="finance-card eth" @click="handleFinanceClick('eth')">
+ <SunburstIcon type="eth" color="#627EEA">
+ <div class="finance-icon">
+ <span class="icon-main">ETH</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">ETH</span>
+ </div>
+ <div class="finance-apy">5.5% APY</div>
+ </Card>
+ <Card hoverable class="finance-card btc" @click="handleFinanceClick('btc')">
+ <SunburstIcon type="usdt" color="#F7931A">
+ <div class="finance-icon btc">
+ <span class="icon-main">BTC</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">BTC</span>
+ </div>
+ <div class="finance-apy">8.2% APY</div>
+ </Card>
+ <Card hoverable class="finance-card bnb" @click="handleFinanceClick('bnb')">
+ <SunburstIcon type="usdt" color="#F3BA2F">
+ <div class="finance-icon bnb">
+ <span class="icon-main">BNB</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">BNB</span>
+ </div>
+ <div class="finance-apy">7.5% APY</div>
+ </Card>
+ <Card hoverable class="finance-card ada" @click="handleFinanceClick('ada')">
+ <SunburstIcon type="usdt" color="#0033AD">
+ <div class="finance-icon ada">
+ <span class="icon-main">ADA</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">ADA</span>
+ </div>
+ <div class="finance-apy">6.8% APY</div>
+ </Card>
</div>
</div>
<!-- 全链榜单 -->
- <div class="leaderboard-section">
- <div class="section-title">全链榜单</div>
+ <Card padding class="leaderboard-section">
+ <div class="leaderboard-title">最多热币</div>
+ <div class="leaderboard-subtitle">2,520现货 772合约</div>
<div class="leaderboard-tabs">
- <span class="tab-item">收藏</span>
- <span class="tab-item active">Hot Picks</span>
- <span class="tab-item">新币榜</span>
- <span class="tab-item">涨幅榜</span>
- <span class="tab-item">AI&大妻</span>
- </div>
- <div class="leaderboard-header">
- <span>市值:</span>
- <span>交易额:</span>
- <span>最新价格</span>
- <span>涨跌幅:</span>
+ <span
+ class="tab-item"
+ :class="{ active: activeTab === 'hot' }"
+ @click="activeTab = 'hot'"
+ >热门榜</span>
+ <span
+ class="tab-item"
+ :class="{ active: activeTab === 'gainers' }"
+ @click="activeTab = 'gainers'"
+ >涨幅榜</span>
+ <span
+ class="tab-item"
+ :class="{ active: activeTab === 'new' }"
+ @click="activeTab = 'new'"
+ >新币榜</span>
</div>
<div class="leaderboard-list">
- <div class="leaderboard-item" v-for="item in leaderboardData" :key="item.id">
+ <div class="leaderboard-item" v-for="item in currentLeaderboardData" :key="item.id">
<div class="item-left">
- <div class="item-icon">{{ item.icon }}</div>
- <div class="item-info">
- <div class="item-name">{{ item.name }}</div>
- <div class="item-meta">
- <span>{{ item.marketCap }}</span>
- <span>{{ item.volume }}</span>
- </div>
- </div>
+ <div class="item-icon" :class="item.iconClass">{{ item.icon }}</div>
+ <div class="item-name">{{ item.pair }}</div>
</div>
<div class="item-right">
- <div class="item-price">{{ item.price }}</div>
- <div class="item-change" :class="item.change > 0 ? 'up' : 'down'">
- {{ item.change > 0 ? '+' : '' }}{{ item.change }}%
+ <div class="item-price-row">
+ <span class="item-price">{{ item.price }}</span>
+ <span class="item-change" :class="item.change > 0 ? 'up' : 'down'">
+ {{ item.change > 0 ? '+' : '' }}{{ item.change }}%
+ </span>
</div>
</div>
</div>
</div>
- <div class="view-all">查看全部 ></div>
- </div>
-
- <!-- 新用户都在买 -->
- <div class="new-user-section">
- <div class="section-title">新用户都在买</div>
- <div class="new-user-cards">
- <div class="new-user-card">
- <div class="coin-icon sol">SOL</div>
- <div class="coin-name">SOL</div>
- <div class="coin-change up">+1.96%</div>
- <div class="coin-price">$138.26</div>
- </div>
- <div class="new-user-card">
- <div class="coin-icon bnb">BNB</div>
- <div class="coin-name">BNB</div>
- <div class="coin-change down">-0.94%</div>
- <div class="coin-price">$5891.03</div>
- </div>
- </div>
- </div>
-
- <!-- 赚币中心 -->
- <div class="earn-center">
- <div class="earn-banner">
- <div class="earn-icon">🎀</div>
- <div class="earn-content">
- <div class="earn-title">合约升级:年末吃鸡战</div>
- <div class="earn-desc">距结束: 22时50分55秒 交易赢战场</div>
- <div class="earn-prize">$120,000</div>
- <div class="earn-meta">1分钟 23,920</div>
- </div>
- <button class="earn-btn">立即参与</button>
- </div>
- </div>
-
- <!-- 热搜代币 -->
- <div class="trending-section">
- <div class="section-title">热搜代币</div>
- <div class="trending-cards">
- <div class="trending-card">
- <div class="trending-icon">🍄</div>
- <div class="trending-name">MUSH</div>
- <div class="trending-change up">+41.54%</div>
- <div class="trending-price">¥0.0097</div>
- </div>
- <div class="trending-card">
- <div class="trending-icon">🐋</div>
- <div class="trending-name">WHITEWHALE</div>
- <div class="trending-change up">+19.96%</div>
- <div class="trending-price">¥0.74</div>
- </div>
- </div>
- </div>
+ <div class="view-all" @click="handleViewAll"></div>
+ </Card>
<!-- 合约交易 -->
<div class="contract-section">
@@ -199,25 +204,10 @@
<div class="contract-pair">ZECUSDT Trending</div>
<div class="contract-price">426.77 <span class="contract-change down">-11.57%</span></div>
<div class="contract-desc">22分钟前用户 0x00****5 盈利 收益率+75.62%</div>
- <div class="contract-chart">📉</div>
+ <Icon icon="mdi:chart-line" class="contract-chart" />
<div class="contract-buttons">
- <button class="contract-btn long">做多久</button>
- <button class="contract-btn short">做空</button>
- </div>
- </div>
- </div>
-
- <!-- 帮助中心 -->
- <div class="help-section">
- <div class="section-title">帮助中心</div>
- <div class="help-cards">
- <div class="help-card">
- <div class="help-icon">💼+</div>
- <div class="help-text">创建第一个钱包</div>
- </div>
- <div class="help-card">
- <div class="help-icon">💼→</div>
- <div class="help-text">获得第一笔加密资产</div>
+ <AppButton variant="primary" size="medium" class="contract-btn long">做多</AppButton>
+ <AppButton variant="outline" size="medium" class="contract-btn short">做空</AppButton>
</div>
</div>
</div>
@@ -228,16 +218,129 @@
</template>
<script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Icon } from '@iconify/vue'
import BottomNav from '@/components/BottomNav.vue'
+import QuickAccessIcons from '@/components/QuickAccessIcons.vue'
+import Card from '@/components/Card.vue'
+import AppButton from '@/components/Button.vue'
+import SunburstIcon from '@/components/SunburstIcon.vue'
-const leaderboardData = ref([
- { id: 1, icon: '🐴', name: '我路马来了', marketCap: '$705.7475', volume: '$2,500.6275', price: '$0.007057', change: 205.02 },
- { id: 2, icon: '●', name: 'Shitcoin', marketCap: '$287.48万', volume: '$536.85万', price: '$0.002875', change: 775.67 },
- { id: 3, icon: '⚙️', name: 'FACTORY', marketCap: '$30.83万', volume: '$331.14万', price: '$0.0005084', change: 7404.36 },
- { id: 4, icon: '🐟', name: 'fish', marketCap: '$949.24万', volume: '$511.36万', price: '$0.009493', change: 25.78 },
- { id: 5, icon: '🍄', name: 'MUSH', marketCap: '$137.79万', volume: '$251.96万', price: '$0.001378', change: 39.93 }
+const router = useRouter()
+
+const handleFinanceClick = (type: string) => {
+ // 可以跳转到理财详情页或处理点击事件
+ console.log('Finance clicked:', type)
+}
+
+const currentBanner = ref(0)
+const currentAnnouncement = ref(0)
+const banners = ref([
+ {
+ title: 'Crypto for Everyone',
+ buttonText: '去充值',
+ icons: ['💳', '💳', '💳', '💳']
+ },
+ {
+ title: '合约升级:年末吃鸡战',
+ buttonText: '立即参与',
+ icons: ['🎁', '🎁', '🎁', '🎁']
+ },
+ {
+ title: '稳定币理财 Plus',
+ buttonText: '立即理财',
+ icons: ['💰', '💰', '💰', '💰']
+ }
])
+
+const announcements = ref([
+ {
+ title: '拼多多等最热中概股,全网首发',
+ desc: '新增支持 98 支代币化股票'
+ },
+ {
+ title: '新功能上线',
+ desc: '更多交易选项等你来体验'
+ },
+ {
+ title: '限时优惠活动',
+ desc: '交易手续费低至0.1%'
+ },
+ {
+ title: '新币上线公告',
+ desc: '支持更多主流加密货币'
+ }
+])
+
+let bannerTimer: number | null = null
+let announcementTimer: number | null = null
+
+onMounted(() => {
+ bannerTimer = setInterval(() => {
+ currentBanner.value = (currentBanner.value + 1) % banners.value.length
+ }, 3000)
+
+ announcementTimer = setInterval(() => {
+ currentAnnouncement.value = (currentAnnouncement.value + 1) % announcements.value.length
+ }, 4000)
+})
+
+onUnmounted(() => {
+ if (bannerTimer) {
+ clearInterval(bannerTimer)
+ }
+ if (announcementTimer) {
+ clearInterval(announcementTimer)
+ }
+})
+
+const activeTab = ref('hot')
+
+const hotListData = ref([
+ { id: 1, icon: 'B', iconClass: 'btc', pair: 'BTC/USDT', price: '91,008.37', change: 0.22 },
+ { id: 2, icon: 'X', iconClass: 'xrp', pair: 'XRP/BTC', price: '0.000023273', change: -0.61 },
+ { id: 3, icon: 'M', iconClass: 'mx', pair: 'MX/ETH', price: '0.00067568', change: 0.71 },
+ { id: 4, icon: 'B', iconClass: 'btc', pair: 'BTC/USDC', price: '90,933.26', change: 0.26 },
+ { id: 5, icon: 'E', iconClass: 'eth', pair: 'ETH/USDT', price: '2,456.78', change: 1.25 },
+ { id: 6, icon: 'S', iconClass: 'sol', pair: 'SOL/USDT', price: '138.26', change: 1.96 }
+])
+
+const gainersListData = ref([
+ { id: 1, icon: 'B', iconClass: 'btc', pair: 'BTC/USDT', price: '91,500.00', change: 5.23 },
+ { id: 2, icon: 'E', iconClass: 'eth', pair: 'ETH/USDT', price: '2,500.00', change: 8.45 },
+ { id: 3, icon: 'S', iconClass: 'sol', pair: 'SOL/USDT', price: '145.00', change: 12.36 },
+ { id: 4, icon: 'B', iconClass: 'bnb', pair: 'BNB/USDT', price: '600.00', change: 3.21 },
+ { id: 5, icon: 'A', iconClass: 'ada', pair: 'ADA/USDT', price: '0.52', change: 6.78 },
+ { id: 6, icon: 'D', iconClass: 'doge', pair: 'DOGE/USDT', price: '0.085', change: 9.12 }
+])
+
+const newListData = ref([
+ { id: 1, icon: 'N', iconClass: 'new', pair: 'NEW/USDT', price: '0.0012', change: 15.67 },
+ { id: 2, icon: 'T', iconClass: 'token', pair: 'TOKEN/USDT', price: '0.0023', change: 22.34 },
+ { id: 3, icon: 'C', iconClass: 'coin', pair: 'COIN/USDT', price: '0.0034', change: 18.90 },
+ { id: 4, icon: 'P', iconClass: 'pump', pair: 'PUMP/USDT', price: '0.0045', change: 25.67 },
+ { id: 5, icon: 'M', iconClass: 'moon', pair: 'MOON/USDT', price: '0.0056', change: 30.12 },
+ { id: 6, icon: 'R', iconClass: 'rocket', pair: 'ROCKET/USDT', price: '0.0067', change: 35.45 }
+])
+
+const currentLeaderboardData = computed(() => {
+ switch (activeTab.value) {
+ case 'hot':
+ return hotListData.value
+ case 'gainers':
+ return gainersListData.value
+ case 'new':
+ return newListData.value
+ default:
+ return hotListData.value
+ }
+})
+
+const handleViewAll = () => {
+ // 可以跳转到完整列表页面
+ console.log('View all clicked', activeTab.value)
+}
</script>
<style lang="scss" scoped>
@@ -249,84 +352,241 @@
min-height: 100vh;
}
-.search-bar {
- display: flex;
- align-items: center;
- padding: 12px 16px;
- gap: 12px;
+.top-video-section {
+ position: relative;
+ width: 100%;
+ height: 350px;
+ overflow: visible;
+ border-radius: 0 0 $radius-lg $radius-lg;
+ margin-bottom: 120px; // 为快捷入口留出空间
- .search-left, .search-right {
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
+ .background-video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center center;
+ z-index: 0;
+ min-width: 100%;
+ min-height: 100%;
+ border-radius: 0 0 $radius-lg $radius-lg; // 视频底部圆角
}
- .search-input-wrapper {
- flex: 1;
- background: $bg-secondary;
- border-radius: 20px;
- padding: 8px 16px;
+ .video-overlay {
+ display: none; // 去掉朦胧感
+ }
+
+ .search-bar {
+ position: fixed;
+ top: $spacing-lg;
+ left: $spacing-lg;
+ right: $spacing-lg;
+ z-index: 1001;
display: flex;
align-items: center;
- gap: 8px;
+ gap: $spacing-sm;
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: $radius-pill;
+ padding: $spacing-sm $spacing-md;
+ backdrop-filter: blur(10px);
- .search-icon {
- font-size: 16px;
+ .search-left {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: $radius-round;
+
+ :deep(svg) {
+ width: 24px;
+ height: 24px;
+ }
}
- .search-placeholder {
- color: $text-tertiary;
- font-size: $font-md;
+ .search-right {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: $radius-round;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ .search-input-wrapper {
+ flex: 1;
+ background: rgba(245, 245, 245, 0.8);
+ border-radius: $radius-pill;
+ padding: $spacing-sm $spacing-md;
+ display: flex;
+ align-items: center;
+ gap: $spacing-xs;
+
+ .search-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ }
+
+ .search-placeholder {
+ color: $text-tertiary;
+ font-size: $font-md;
+ }
+ }
+ }
+
+
+ .quick-access {
+ position: absolute;
+ bottom: -80px; // 更靠下，一半在视频内，一半在视频外
+ left: 50%;
+ transform: translateX(-50%);
+ width: calc(100% - #{$spacing-lg * 2});
+ max-width: 600px;
+ z-index: 2;
+ display: flex;
+ justify-content: space-between;
+ gap: $spacing-xs;
+ padding: $spacing-md $spacing-lg;
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: $radius-lg;
+ backdrop-filter: blur(10px);
+ box-shadow: $shadow-md;
+
+ .access-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: $spacing-sm;
+ position: relative;
+ flex: 1;
+
+ .access-icon {
+ width: 80px;
+ height: 80px;
+ background: rgba(226, 253, 254, 0.5);
+ border-radius: $radius-md;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto;
+ position: relative;
+
+ :deep(svg) {
+ width: 48px;
+ height: 48px;
+ display: block;
+ margin: 0 auto;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+
+ span:last-child {
+ font-size: $font-md;
+ font-weight: 500;
+ color: $text-primary;
+ text-align: center;
+ width: 100%;
+ }
}
}
}
-.main-banner {
- margin: 0 16px 16px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border-radius: $radius-lg;
- padding: 24px;
- color: $text-white;
+// 搜索栏样式已移到.top-video-section中
+
+.banner-swiper {
+ margin: 0 $spacing-lg $spacing-lg;
position: relative;
+ border-radius: $radius-lg;
overflow: hidden;
+ height: 200px;
- .banner-content {
- position: relative;
- z-index: 1;
- }
-
- .banner-title {
- font-size: $font-xxl;
- font-weight: bold;
- margin-bottom: 16px;
- }
-
- .recharge-btn {
- background: $primary-blue;
- color: $text-white;
- border: none;
- border-radius: $radius-md;
- padding: 10px 24px;
- font-size: $font-md;
- font-weight: 500;
- margin-bottom: 16px;
- cursor: pointer;
- }
-
- .payment-icons {
+ .banner-container {
display: flex;
- gap: 8px;
+ transition: transform 0.5s ease;
+ height: 100%;
+ }
+
+ .banner-slide {
+ min-width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ padding: $spacing-xxl;
+ color: $text-white;
+ position: relative;
+ overflow: hidden;
- span {
- width: 32px;
- height: 32px;
- background: rgba(255, 255, 255, 0.2);
- border-radius: $radius-round;
+ .banner-content {
+ position: relative;
+ z-index: 1;
+ height: 100%;
display: flex;
- align-items: center;
- justify-content: center;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .banner-title {
+ font-size: $font-title;
+ font-weight: bold;
+ margin-bottom: $spacing-lg;
+ }
+
+ .recharge-btn {
+ margin-bottom: $spacing-lg;
+ }
+
+ .payment-icons {
+ display: flex;
+ gap: $spacing-sm;
+
+ span {
+ width: 36px;
+ height: 36px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: $radius-round;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ }
+ }
+ }
+
+ .banner-indicators {
+ position: absolute;
+ bottom: $spacing-md;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: $spacing-xs;
+ padding: $spacing-xs $spacing-sm;
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: $radius-pill;
+ backdrop-filter: blur(4px);
+
+ .indicator {
+ width: 6px;
+ height: 6px;
+ border-radius: $radius-round;
+ background: rgba(255, 255, 255, 0.5);
+ transition: all $transition-slow;
+ cursor: pointer;
+
+ &.active {
+ width: 20px;
+ background: rgba(255, 255, 255, 1);
+ }
}
}
}
@@ -334,216 +594,304 @@
.quick-access {
display: flex;
justify-content: space-around;
- padding: 16px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-lg;
+ margin-bottom: $spacing-lg;
.access-item {
display: flex;
flex-direction: column;
align-items: center;
- gap: 8px;
+ justify-content: center;
+ gap: $spacing-sm;
position: relative;
+ flex: 1;
.access-icon {
- width: 48px;
- height: 48px;
- background: $bg-secondary;
- border-radius: $radius-round;
+ width: 80px;
+ height: 80px;
+ background: rgba(226, 253, 254, 0.5);
+ border-radius: $radius-md;
display: flex;
align-items: center;
justify-content: center;
- font-size: 24px;
- }
-
- .badge {
- position: absolute;
- top: 0;
- right: 0;
- width: 8px;
- height: 8px;
- background: $error-red;
- border-radius: 50%;
+ margin: 0 auto;
+ position: relative;
+
+ :deep(svg) {
+ width: 48px;
+ height: 48px;
+ display: block;
+ margin: 0 auto;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
}
span:last-child {
- font-size: $font-sm;
- color: $text-primary;
- }
- }
-}
-
-.announcement-card {
- margin: 16px;
- background: $bg-primary;
- border: 1px solid $border-light;
- border-radius: $radius-lg;
- padding: 16px;
- display: flex;
- align-items: center;
- gap: 12px;
-
- .announcement-icon {
- font-size: 24px;
- }
-
- .announcement-content {
- flex: 1;
-
- .announcement-title {
font-size: $font-md;
font-weight: 500;
- margin-bottom: 4px;
+ color: $text-primary;
+ text-align: center;
+ width: 100%;
}
-
- .announcement-desc {
- font-size: $font-sm;
- color: $text-secondary;
- }
- }
-
- .announcement-arrow {
- color: $text-tertiary;
- font-size: 18px;
}
}
-.invite-card {
- margin: 16px;
- background: $bg-primary;
- border: 1px solid $border-light;
+.announcement-swiper {
+ margin: 0 $spacing-lg $spacing-lg;
+ position: relative;
border-radius: $radius-lg;
- padding: 16px;
+ overflow: hidden;
+ height: 130px;
+ margin-bottom: $spacing-xxl;
- .invite-title {
- font-size: $font-lg;
- font-weight: 500;
- margin-bottom: 12px;
+ .announcement-container {
+ display: flex;
+ transition: transform 0.5s ease;
+ height: 100%;
}
- .invite-input-wrapper {
+ .announcement-card {
+ min-width: 100%;
+ flex-shrink: 0;
+ height: 100%;
+ padding: $spacing-lg $spacing-xl !important;
display: flex;
align-items: center;
- background: $bg-secondary;
- border-radius: $radius-md;
- padding: 12px;
- margin-bottom: 12px;
+ gap: $spacing-md;
+ background: $primary-light;
- .invite-input {
- flex: 1;
- border: none;
- background: transparent;
- font-size: $font-md;
-
- &::placeholder {
- color: $text-tertiary;
- }
+ .announcement-icon {
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+ flex-shrink: 0;
}
- .copy-icon {
- font-size: 18px;
- color: $text-tertiary;
- }
- }
-
- .invite-buttons {
- display: flex;
- gap: 12px;
-
- .invite-btn {
+ .announcement-content {
flex: 1;
- padding: 10px;
- border: none;
- border-radius: $radius-md;
- font-size: $font-md;
- cursor: pointer;
- &.later {
- background: $bg-secondary;
+ .announcement-title {
+ font-size: $font-lg;
+ font-weight: 600;
+ margin-bottom: $spacing-xs;
color: $text-primary;
}
- &.bind {
- background: $primary-blue;
- color: $text-white;
- }
- }
- }
-}
-
-.crypto-guide {
- margin: 16px;
-
- .guide-title {
- font-size: $font-lg;
- font-weight: 500;
- margin-bottom: 12px;
- }
-
- .guide-content {
- background: $bg-primary;
- border: 1px solid $border-light;
- border-radius: $radius-lg;
- padding: 16px;
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .guide-text {
- div:first-child {
+ .announcement-desc {
font-size: $font-md;
- font-weight: 500;
- margin-bottom: 4px;
- }
-
- div:last-child {
- font-size: $font-sm;
color: $text-secondary;
}
}
- .guide-cat {
- font-size: 48px;
+ .announcement-arrow {
+ color: $text-tertiary;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+ }
+ }
+
+ .announcement-indicators {
+ position: absolute;
+ bottom: $spacing-md;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: $spacing-xs;
+ z-index: 2;
+
+ .indicator {
+ width: 6px;
+ height: 6px;
+ border-radius: $radius-round;
+ background: rgba(0, 0, 0, 0.2);
+ transition: all 0.3s ease;
+ cursor: pointer;
+
+ &.active {
+ width: 20px;
+ background: rgba(0, 0, 0, 0.6);
+ border-radius: $radius-pill;
+ }
}
}
}
-.finance-section, .new-user-section, .trending-section, .contract-section, .help-section {
- margin: 24px 16px 16px;
+.finance-section, .contract-section {
+ margin: $spacing-xxl $spacing-lg $spacing-lg;
+
+ .section-title-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: $spacing-md;
+
+ .section-title {
+ font-size: $font-lg;
+ font-weight: 600;
+ color: $text-primary;
+ }
+
+ .section-arrow {
+ width: 20px;
+ height: 20px;
+ color: $text-tertiary;
+ }
+ }
.section-title {
font-size: $font-lg;
- font-weight: 500;
- margin-bottom: 12px;
+ font-weight: 600;
+ margin-bottom: $spacing-md;
}
}
-.finance-cards, .new-user-cards, .trending-cards, .help-cards {
+.finance-cards {
display: flex;
- gap: 12px;
+ gap: $spacing-md;
overflow-x: auto;
+ padding-bottom: $spacing-xs;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
-.finance-card, .new-user-card, .trending-card, .help-card {
- background: $bg-primary;
- border: 1px solid $border-light;
- border-radius: $radius-lg;
- padding: 16px;
- min-width: 140px;
+.finance-card {
+ min-width: 160px;
+ width: 160px;
+ height: 160px;
+ padding: 24px 20px !important;
text-align: center;
+ position: relative;
+ overflow: visible;
+ cursor: pointer;
+ border-radius: $radius-lg !important;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ flex-shrink: 0;
- .finance-icon, .coin-icon, .trending-icon, .help-icon {
- width: 48px;
- height: 48px;
- margin: 0 auto 12px;
+ &.usdt {
+ background: rgba(100, 237, 251, 0.08) !important;
+ }
+
+ &.sol {
+ background: rgba(153, 69, 255, 0.08) !important;
+ }
+
+ &.eth {
+ background: rgba(98, 126, 234, 0.08) !important;
+ }
+
+ &:hover {
+ transform: translateY(-4px);
+ box-shadow: $shadow-lg;
+ }
+
+ :deep(.sunburst-icon) {
+ margin: 0 auto 20px;
+ position: relative;
+ width: 120px;
+ height: 120px;
+
+ .sunburst-svg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 0;
+ width: 120px;
+ height: 120px;
+ }
+
+ .icon-content {
+ position: relative;
+ z-index: 1;
+ }
+ }
+
+ .finance-icon {
+ width: 72px;
+ height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: $radius-round;
- background: $bg-secondary;
- font-size: 24px;
+ background: $primary;
+ font-size: 32px;
+ font-weight: bold;
+ color: white;
+ position: relative;
+ margin: 0 auto;
+
+ .icon-main {
+ position: relative;
+ z-index: 2;
+ }
+
+ .icon-overlay {
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
+ width: 20px;
+ height: 20px;
+ border-radius: $radius-round;
+ background: rgba(26, 26, 26, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ color: white;
+ z-index: 3;
+ font-weight: 500;
+ }
&.sol {
- background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
+ background: #1a1a1a;
+ color: white;
+ position: relative;
+
+ .icon-main {
+ position: relative;
+ z-index: 2;
+ font-size: 32px;
+ font-weight: 700;
+ background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ display: inline-block;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 60%;
+ height: 60%;
+ background: linear-gradient(135deg, rgba(153, 69, 255, 0.3) 0%, rgba(20, 241, 149, 0.3) 100%);
+ border-radius: 4px;
+ z-index: 1;
+ }
+
+ .icon-overlay {
+ background: rgba(26, 26, 26, 0.9);
+ color: white;
+ }
+ }
+
+ &.btc {
+ background: #F7931A;
color: white;
}
@@ -551,126 +899,201 @@
background: #F3BA2F;
color: white;
}
+
+ &.ada {
+ background: #0033AD;
+ color: white;
+ }
}
- .finance-name, .coin-name, .trending-name {
- font-size: $font-md;
- font-weight: 500;
- margin-bottom: 8px;
+ .finance-name-row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: $spacing-xs;
+ margin-bottom: 12px;
+ flex-wrap: wrap;
+ max-width: 100%;
+ overflow: hidden;
+
+ .finance-name {
+ font-size: $font-sm;
+ font-weight: 500;
+ color: $text-primary;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+ flex-shrink: 1;
+ min-width: 0;
+ }
+
+ .finance-badge {
+ background: $success;
+ color: white;
+ font-size: 10px;
+ padding: 2px 6px;
+ border-radius: $radius-sm;
+ font-weight: 600;
+ line-height: 1.4;
+ flex-shrink: 0;
+ }
}
.finance-apy {
- font-size: $font-sm;
- color: $primary-blue;
- }
-
- .coin-change, .trending-change {
- font-size: $font-sm;
- margin-bottom: 4px;
-
- &.up {
- color: $up-green;
- }
-
- &.down {
- color: $down-red;
- }
- }
-
- .coin-price, .trending-price {
- font-size: $font-md;
- font-weight: 500;
+ font-size: clamp(14px, 4vw, 20px);
+ font-weight: 700;
+ color: $text-primary;
+ letter-spacing: 0;
+ line-height: 1.2;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+ text-align: center;
}
}
+
.leaderboard-section {
- margin: 24px 16px 16px;
+ margin: $spacing-xxl $spacing-lg $spacing-lg;
+ text-align: center;
+
+ .leaderboard-title {
+ font-size: $font-xxl;
+ font-weight: 600;
+ color: $text-primary;
+ margin-bottom: $spacing-xs;
+ text-align: center;
+ }
+
+ .leaderboard-subtitle {
+ font-size: $font-sm;
+ color: $text-secondary;
+ margin-bottom: $spacing-md;
+ text-align: center;
+ }
.leaderboard-tabs {
display: flex;
- gap: 16px;
- margin-bottom: 12px;
- overflow-x: auto;
+ justify-content: center;
+ gap: $spacing-md;
+ margin-bottom: $spacing-lg;
.tab-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;
+ color: $text-primary;
font-weight: 500;
+ background: $bg-secondary;
}
}
}
- .leaderboard-header {
- display: grid;
- grid-template-columns: 2fr 2fr 1.5fr 1fr;
- gap: 8px;
- padding: 8px 0;
- font-size: $font-xs;
- color: $text-tertiary;
- border-bottom: 1px solid $border-light;
- }
-
.leaderboard-list {
- .leaderboard-item {
- display: grid;
- grid-template-columns: 2fr 1fr;
- gap: 8px;
- padding: 12px 0;
- border-bottom: 1px solid $border-light;
+ .leaderboard-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: $spacing-md 0;
.item-left {
display: flex;
- gap: 12px;
+ align-items: center;
+ gap: $spacing-md;
.item-icon {
width: 40px;
height: 40px;
border-radius: $radius-round;
- background: $bg-secondary;
display: flex;
align-items: center;
justify-content: center;
- font-size: 20px;
- }
-
- .item-info {
- .item-name {
- font-size: $font-md;
- font-weight: 500;
- margin-bottom: 4px;
+ font-size: $font-lg;
+ font-weight: bold;
+ color: white;
+ flex-shrink: 0;
+
+ &.btc {
+ background: #F7931A;
}
- .item-meta {
- font-size: $font-xs;
- color: $text-secondary;
- display: flex;
- gap: 8px;
+ &.xrp {
+ background: #1a1a1a;
}
+
+ &.mx {
+ background: #00D2FF;
+ }
+
+ &.eth {
+ background: #627EEA;
+ }
+
+ &.sol {
+ background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
+ }
+
+ &.bnb {
+ background: #F3BA2F;
+ }
+
+ &.ada {
+ background: #0033AD;
+ }
+
+ &.doge {
+ background: #C2A633;
+ }
+
+ &.new, &.token, &.coin, &.pump, &.moon, &.rocket {
+ background: $primary;
+ }
+ }
+
+ .item-name {
+ font-size: $font-md;
+ font-weight: 500;
+ color: $text-primary;
}
}
.item-right {
text-align: right;
- .item-price {
- font-size: $font-md;
- font-weight: 500;
- margin-bottom: 4px;
- }
-
- .item-change {
- font-size: $font-sm;
+ .item-price-row {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: $spacing-sm;
- &.up {
- color: $up-green;
+ .item-price {
+ font-size: $font-md;
+ font-weight: 500;
+ color: $text-primary;
}
- &.down {
- color: $down-red;
+ .item-change {
+ font-size: $font-sm;
+ font-weight: 500;
+ padding: 2px $spacing-sm;
+ border-radius: $radius-sm;
+ white-space: nowrap;
+
+ &.up {
+ color: $down-red; // 红涨
+ background: rgba(255, 77, 79, 0.1);
+ }
+
+ &.down {
+ color: $up-green; // 绿跌
+ background: rgba(82, 196, 26, 0.1);
+ }
}
}
}
@@ -679,73 +1102,41 @@
.view-all {
text-align: center;
- padding: 16px;
- color: $primary-blue;
- font-size: $font-md;
+ padding: $spacing-lg 0 0;
+ margin-top: $spacing-lg;
+ cursor: pointer;
+ transition: all $transition-base;
+
+ &::before {
+ content: '查看全部 >';
+ display: inline-block;
+ padding: $spacing-sm $spacing-xxl;
+ background: $primary-light;
+ color: $primary;
+ border-radius: $radius-pill;
+ font-size: $font-md;
+ font-weight: 500;
+ transition: all $transition-base;
+ }
+
+ &:hover::before {
+ background: rgba(100, 237, 251, 0.2);
+ transform: translateY(-1px);
+ }
+ }
+
+ .tab-item {
+ cursor: pointer;
}
}
-.earn-center {
- margin: 24px 16px 16px;
-
- .earn-banner {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border-radius: $radius-lg;
- padding: 20px;
- color: $text-white;
- display: flex;
- gap: 16px;
-
- .earn-icon {
- font-size: 32px;
- }
-
- .earn-content {
- flex: 1;
-
- .earn-title {
- font-size: $font-lg;
- font-weight: 500;
- margin-bottom: 8px;
- }
-
- .earn-desc {
- font-size: $font-sm;
- opacity: 0.9;
- margin-bottom: 8px;
- }
-
- .earn-prize {
- font-size: $font-xl;
- font-weight: bold;
- margin-bottom: 4px;
- }
-
- .earn-meta {
- font-size: $font-xs;
- opacity: 0.8;
- }
- }
-
- .earn-btn {
- background: $primary-blue;
- color: $text-white;
- border: none;
- border-radius: $radius-md;
- padding: 10px 20px;
- font-size: $font-md;
- height: fit-content;
- cursor: pointer;
- }
- }
-}
.contract-section {
.contract-card {
- background: $bg-primary;
- border: 1px solid $border-light;
+ background: $bg-card;
border-radius: $radius-lg;
- padding: 16px;
+ padding: $spacing-lg;
+ box-shadow: $card-shadow;
.contract-pair {
font-size: $font-md;
@@ -776,27 +1167,24 @@
.contract-chart {
height: 60px;
margin-bottom: 12px;
+ width: 60px;
+ height: 60px;
+
+ svg {
+ width: 60px;
+ height: 60px;
+ }
}
.contract-buttons {
display: flex;
- gap: 12px;
+ gap: $spacing-md;
.contract-btn {
flex: 1;
- padding: 10px;
- border: none;
- border-radius: $radius-md;
- font-size: $font-md;
- cursor: pointer;
-
- &.long {
- background: $primary-blue;
- color: $text-white;
- }
&.short {
- background: #ff6b9d;
+ background: $error;
color: $text-white;
}
}
@@ -804,3 +1192,4 @@
}
}
</style>
+
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;
}
}
}
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 7167b11..ea4ebfe 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -2,49 +2,54 @@
<div class="settings-page">
<!-- 标题栏 -->
<div class="header">
- <span class="back-icon" @click="$router.back()">←</span>
+ <Icon icon="solar:arrow-left-linear" class="back-icon" @click="$router.back()" />
<h1 class="page-title">设置</h1>
</div>
<!-- 用户信息 -->
- <div class="user-section">
- <div class="user-avatar">⚪</div>
+ <Card class="user-section">
+ <div class="user-avatar">
+ <Icon icon="solar:user-circle-bold" />
+ </div>
<div class="user-details">
<div class="user-email">zj0***@gmail.com</div>
<div class="user-id">
<span>ID: e505...9b3a</span>
- <span class="copy-icon">📋</span>
+ <Icon icon="solar:copy-bold" class="copy-icon" />
</div>
</div>
- <span class="arrow-icon">></span>
- </div>
+ <Icon icon="solar:arrow-right-linear" class="arrow-icon" />
+ </Card>
<!-- 绑定交易所 -->
- <div class="bind-section">
+ <Card class="bind-section">
<div class="bind-content">
<span>绑定 Bitget 交易所账号</span>
</div>
- <button class="bind-btn">去绑定</button>
- </div>
+ <AppButton variant="primary" size="small" class="bind-btn">去绑定</AppButton>
+ </Card>
<!-- 设置列表 -->
<div class="settings-list">
- <div class="setting-item" v-for="item in settingsList" :key="item.id">
+ <Card hoverable class="setting-item" v-for="item in settingsList" :key="item.id">
<div class="setting-left">
<span class="setting-icon">{{ item.icon }}</span>
<span class="setting-text">{{ item.text }}</span>
</div>
<div class="setting-right">
<span v-if="item.version" class="setting-version">{{ item.version }}</span>
- <span class="arrow-icon">></span>
+ <Icon icon="solar:arrow-right-linear" class="arrow-icon" />
</div>
- </div>
+ </Card>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
+import { Icon } from '@iconify/vue'
+import Card from '@/components/Card.vue'
+import AppButton from '@/components/Button.vue'
const settingsList = ref([
{ id: 1, icon: '①', text: '钱包安全' },
@@ -74,8 +79,10 @@
gap: 16px;
.back-icon {
- font-size: 24px;
+ width: 24px;
+ height: 24px;
cursor: pointer;
+ color: $text-primary;
}
.page-title {
@@ -85,22 +92,26 @@
}
.user-section {
+ margin: $spacing-lg;
+ padding: $spacing-lg !important;
display: flex;
align-items: center;
- padding: 16px;
- gap: 12px;
- border-bottom: 1px solid $border-light;
+ gap: $spacing-md;
.user-avatar {
width: 60px;
height: 60px;
- border-radius: 50%;
- background: linear-gradient(135deg, $primary-blue 0%, $success-green 100%);
+ border-radius: $radius-round;
+ background: linear-gradient(135deg, $primary 0%, $success 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
- font-size: 30px;
+
+ svg {
+ width: 30px;
+ height: 30px;
+ }
}
.user-details {
@@ -120,46 +131,42 @@
color: $text-secondary;
.copy-icon {
- font-size: 16px;
+ width: 16px;
+ height: 16px;
+ color: $text-secondary;
}
}
}
.arrow-icon {
color: $text-tertiary;
- font-size: 18px;
+ width: 18px;
+ height: 18px;
}
}
.bind-section {
+ margin: 0 $spacing-lg $spacing-lg;
+ padding: $spacing-lg !important;
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px;
- border-bottom: 1px solid $border-light;
.bind-content {
font-size: $font-md;
- }
-
- .bind-btn {
- background: $primary-blue;
- color: white;
- border: none;
- border-radius: $radius-md;
- padding: 8px 16px;
- font-size: $font-sm;
- cursor: pointer;
+ font-weight: 500;
}
}
.settings-list {
+ padding: 0 $spacing-lg;
+
.setting-item {
+ margin-bottom: $spacing-sm;
+ padding: $spacing-lg !important;
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px;
- border-bottom: 1px solid $border-light;
.setting-left {
display: flex;
@@ -189,9 +196,11 @@
.arrow-icon {
color: $text-tertiary;
- font-size: 18px;
+ width: 18px;
+ height: 18px;
}
}
}
}
</style>
+
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>
diff --git a/src/views/Wallet.vue b/src/views/Wallet.vue
index b832e0b..482fb1c 100644
--- a/src/views/Wallet.vue
+++ b/src/views/Wallet.vue
@@ -1,81 +1,91 @@
<template>
<div class="wallet-page">
<!-- 账户信息 -->
- <div class="account-info">
+ <Card class="account-info">
<div class="account-left">
- <div class="account-icon">⚪</div>
+ <div class="account-icon">
+ <Icon icon="solar:user-circle-bold" />
+ </div>
<div class="account-details">
<div class="account-email">zj0***@gmail.com</div>
</div>
</div>
<div class="account-right">
- <span class="dropdown">▼</span>
- <span class="copy-icon">📋</span>
- <span class="menu-icon">☰</span>
+ <Icon icon="solar:alt-arrow-down-linear" class="dropdown" />
+ <Icon icon="solar:copy-bold" class="copy-icon" />
+ <Icon icon="solar:hamburger-menu-bold" class="menu-icon" />
</div>
- </div>
+ </Card>
<!-- 余额显示 -->
- <div class="balance-display">
+ <Card class="balance-display">
<div class="balance-amount">¥0.00</div>
- </div>
+ </Card>
<!-- 充值按钮 -->
<div class="recharge-section">
- <button class="recharge-btn">去充值</button>
+ <AppButton variant="primary" size="large" full-width class="recharge-btn">去充值</AppButton>
</div>
<!-- 快捷操作 -->
<div class="quick-actions">
<div class="action-item">
- <div class="action-icon">→</div>
+ <div class="action-icon">
+ <WalletIcons type="send" />
+ </div>
<span>转账</span>
</div>
<div class="action-item">
- <div class="action-icon receive">↓</div>
+ <div class="action-icon receive">
+ <WalletIcons type="receive" />
+ </div>
<span>收款</span>
</div>
<div class="action-item">
- <div class="action-icon">L</div>
+ <div class="action-icon">
+ <WalletIcons type="history" />
+ </div>
<span>交易历史</span>
</div>
<div class="action-item">
- <div class="action-icon">☰</div>
+ <div class="action-icon">
+ <WalletIcons type="more" />
+ </div>
<span>更多</span>
</div>
</div>
<!-- 金融服务卡片 -->
<div class="finance-cards">
- <div class="finance-card bank">
+ <Card hoverable class="finance-card bank">
<div class="card-header">
<span class="card-title">银行卡</span>
- <div class="card-icon">☐</div>
+ <Icon icon="solar:card-bold" class="card-icon" />
</div>
<div class="card-content">
<div class="card-main">去开卡</div>
<div class="card-desc">线上线下随时支付</div>
</div>
- </div>
- <div class="finance-card wealth">
+ </Card>
+ <Card hoverable class="finance-card wealth">
<div class="card-header">
<span class="card-title">理财</span>
- <div class="card-icon">🐷</div>
+ <Icon icon="solar:wallet-money-bold" class="card-icon" />
</div>
<div class="card-content">
<div class="card-main">10% 年化收益率</div>
<div class="card-desc">稳定币理财 Plus</div>
</div>
- </div>
+ </Card>
</div>
<!-- 代币列表标题 -->
<div class="token-header">
<span class="token-title">代币 ¥0.00</span>
<div class="token-actions">
- <span class="action-icon">🔍</span>
- <span class="action-icon">⚙️</span>
- <span class="action-icon">+</span>
+ <Icon icon="solar:magnifer-bold" class="action-icon" />
+ <Icon icon="solar:settings-bold" class="action-icon" />
+ <Icon icon="solar:add-circle-bold" class="action-icon" />
</div>
</div>
@@ -97,10 +107,10 @@
</div>
<!-- 理财推广横幅 -->
- <div class="finance-banner">
+ <Card hoverable class="finance-banner">
<span>立享10%年化收益率</span>
- <span>></span>
- </div>
+ <Icon icon="solar:arrow-right-linear" />
+ </Card>
</div>
<!-- 底部导航 -->
@@ -110,7 +120,11 @@
<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'
+import AppButton from '@/components/Button.vue'
+import WalletIcons from '@/components/icons/WalletIcons.vue'
const tokenList = ref([
{ id: 1, icon: 'T', iconClass: 'usdt', name: 'USDT', value: '0.00', price: '¥6.97', change: '0.00%', fiat: '¥0.00' },
@@ -129,10 +143,11 @@
}
.account-info {
+ margin: $spacing-lg;
+ padding: $spacing-lg !important;
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px;
.account-left {
display: flex;
@@ -140,15 +155,19 @@
gap: 12px;
.account-icon {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: linear-gradient(135deg, $primary-blue 0%, $success-green 100%);
+ width: 48px;
+ height: 48px;
+ border-radius: $radius-round;
+ background: linear-gradient(135deg, $primary 0%, $success 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
- font-size: 20px;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
}
.account-details {
@@ -161,63 +180,63 @@
.account-right {
display: flex;
- gap: 12px;
+ gap: $spacing-md;
align-items: center;
+
+ svg {
+ width: 20px;
+ height: 20px;
+ color: $text-secondary;
+ }
}
}
.balance-display {
+ margin: 0 $spacing-lg $spacing-lg;
text-align: center;
- padding: 24px 16px;
+ padding: $spacing-xxl $spacing-lg !important;
+ background: $primary-light;
.balance-amount {
- font-size: 48px;
+ font-size: $font-display;
font-weight: bold;
+ color: $text-primary;
}
}
.recharge-section {
- padding: 0 16px 24px;
-
- .recharge-btn {
- width: 100%;
- background: $primary-blue;
- color: white;
- border: none;
- border-radius: $radius-xl;
- padding: 16px;
- font-size: $font-lg;
- font-weight: 500;
- cursor: pointer;
- }
+ padding: 0 $spacing-lg $spacing-xxl;
}
.quick-actions {
display: flex;
justify-content: space-around;
- padding: 16px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-lg;
+ margin-bottom: $spacing-lg;
+ background: $bg-tertiary;
.action-item {
display: flex;
flex-direction: column;
align-items: center;
- gap: 8px;
+ gap: $spacing-sm;
.action-icon {
- width: 48px;
- height: 48px;
- border-radius: 50%;
- background: $bg-secondary;
+ width: 56px;
+ height: 56px;
+ border-radius: $radius-round;
+ background: $primary-light;
display: flex;
align-items: center;
justify-content: center;
- font-size: 24px;
- color: $text-secondary;
+
+ :deep(svg) {
+ width: 24px;
+ height: 24px;
+ }
&.receive {
- background: #14f195;
- color: white;
+ background: $success-light;
}
}
@@ -230,15 +249,12 @@
.finance-cards {
display: flex;
- gap: 12px;
- padding: 16px;
+ gap: $spacing-md;
+ padding: 0 $spacing-lg $spacing-lg;
.finance-card {
flex: 1;
- background: $bg-primary;
- border: 1px solid $border-light;
- border-radius: $radius-lg;
- padding: 16px;
+ padding: $spacing-lg !important;
.card-header {
display: flex;
@@ -270,21 +286,37 @@
}
&.bank {
+ background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
+ color: $text-white;
+
+ .card-title, .card-main, .card-desc {
+ color: $text-white;
+ }
+
.card-icon {
- background: $bg-dark;
- color: white;
+ color: $text-white;
width: 24px;
height: 24px;
- border-radius: $radius-sm;
- display: flex;
- align-items: center;
- justify-content: center;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
}
}
&.wealth {
+ background: linear-gradient(135deg, $success 0%, $success-light 100%);
+
.card-icon {
- font-size: 24px;
+ width: 24px;
+ height: 24px;
+ color: $text-primary;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
}
}
}
@@ -294,31 +326,44 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px;
+ padding: $spacing-lg;
+ margin-bottom: $spacing-sm;
.token-title {
font-size: $font-lg;
- font-weight: 500;
+ font-weight: 600;
}
.token-actions {
display: flex;
- gap: 16px;
+ gap: $spacing-lg;
.action-icon {
- font-size: 20px;
+ width: 20px;
+ height: 20px;
color: $text-secondary;
}
}
}
.token-list {
+ padding: 0 $spacing-lg;
+
.token-item {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-lg;
+ margin-bottom: $spacing-sm;
+ background: $bg-card;
+ border-radius: $radius-md;
+ box-shadow: $shadow-xs;
+ transition: all $transition-base;
+
+ &:hover {
+ background: $bg-card-hover;
+ box-shadow: $shadow-sm;
+ }
.token-left {
display: flex;
@@ -340,7 +385,7 @@
}
&.usdc {
- background: $primary-blue;
+ background: $primary;
}
&.eth {
@@ -385,15 +430,21 @@
}
.finance-banner {
- margin: 16px;
- background: $primary-light-blue;
- border-radius: $radius-lg;
- padding: 12px 16px;
+ margin: $spacing-lg;
+ padding: $spacing-md $spacing-lg !important;
display: flex;
justify-content: space-between;
align-items: center;
- color: $primary-blue;
+ background: $primary-light;
+ color: $primary;
font-size: $font-sm;
+ font-weight: 500;
+
+ svg {
+ width: 18px;
+ height: 18px;
+ color: $primary;
+ }
}
}
</style>
--
Gitblit v1.9.3