1

zj

2026-01-09 6a39094090bb96721acd11941d84c84336faefd0

1

 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",

 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"
  }
}

 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>

 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;

 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;

 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;
    }
  }
  

 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>


 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;
    }
  }
}

 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>


 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>

 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>