1

zj

2026-01-09 6a39094090bb96721acd11941d84c84336faefd0

 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>