From 6a39094090bb96721acd11941d84c84336faefd0 Mon Sep 17 00:00:00 2001
From: zj <1772600164@qq.com>
Date: Fri, 09 Jan 2026 18:59:24 +0800
Subject: [PATCH] 1
---
src/views/Home.vue | 1475 +++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 932 insertions(+), 543 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fd8d4c9..d943fb1 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,196 +1,201 @@
<template>
<div class="home-page">
- <!-- 搜索栏 -->
- <div class="search-bar">
- <div class="search-left">
- <span class="grid-icon">☰</span>
+ <!-- 顶部视频背景区域 -->
+ <div class="top-video-section">
+ <!-- 搜索栏 - 叠加在视频上方 -->
+ <div class="search-bar">
+ <div class="search-left">
+ <QuickAccessIcons type="more" />
+ </div>
+ <div class="search-input-wrapper">
+ <Icon icon="solar:search-bold" class="search-icon" />
+ <span class="search-placeholder">全局搜索</span>
+ </div>
+ <div class="search-right">
+ <Icon icon="solar:bell-bold" class="bell-icon" />
+ </div>
</div>
- <div class="search-input-wrapper">
- <span class="search-icon">🔍</span>
- <span class="search-placeholder">全局搜索</span>
- </div>
- <div class="search-right">
- <span class="bell-icon">🔔</span>
- </div>
- </div>
-
- <!-- 主Banner -->
- <div class="main-banner">
- <div class="banner-content">
- <h1 class="banner-title">Crypto for Everyone</h1>
- <button class="recharge-btn">去充值</button>
- <div class="payment-icons">
- <span>💳</span>
- <span>💳</span>
- <span>💳</span>
- <span>💳</span>
+ <video
+ class="background-video"
+ autoplay
+ loop
+ muted
+ playsinline
+ :style="{ objectPosition: 'center center' }"
+ >
+ <source src="@/mp4/顶部视频.mp4" type="video/mp4" />
+ </video>
+ <div class="video-overlay"></div>
+
+ <!-- 快捷入口 - 叠加在视频上 -->
+ <div class="quick-access">
+ <div class="access-item">
+ <div class="access-icon">
+ <QuickAccessIcons type="pay" />
+ </div>
+ <span>Pay</span>
+ </div>
+ <div class="access-item">
+ <div class="access-icon">
+ <QuickAccessIcons type="contract" />
+ </div>
+ <span>合约</span>
+ </div>
+ <div class="access-item">
+ <div class="access-icon">
+ <QuickAccessIcons type="earn" />
+ </div>
+ <span>赚币</span>
+ </div>
+ <div class="access-item">
+ <div class="access-icon">
+ <QuickAccessIcons type="more" />
+ </div>
+ <span>更多</span>
</div>
</div>
</div>
- <!-- 快捷入口 -->
- <div class="quick-access">
- <div class="access-item">
- <div class="access-icon">✈️</div>
- <span>Pay</span>
+ <!-- 公告卡片轮播 -->
+ <div class="announcement-swiper">
+ <div class="announcement-container" :style="{ transform: `translateX(-${currentAnnouncement * 100}%)` }">
+ <Card hoverable class="announcement-card" v-for="(announcement, index) in announcements" :key="index">
+ <Icon icon="solar:graph-up-bold" class="announcement-icon" />
+ <div class="announcement-content">
+ <div class="announcement-title">{{ announcement.title }}</div>
+ <div class="announcement-desc">{{ announcement.desc }}</div>
+ </div>
+ <Icon icon="solar:arrow-right-linear" class="announcement-arrow" />
+ </Card>
</div>
- <div class="access-item">
- <div class="access-icon">📄</div>
- <span>合约</span>
- </div>
- <div class="access-item">
- <div class="access-icon">💰</div>
- <span>赚币</span>
- <span class="badge">●</span>
- </div>
- <div class="access-item">
- <div class="access-icon">☰</div>
- <span>更多</span>
+ <div class="announcement-indicators">
+ <span
+ v-for="(announcement, index) in announcements"
+ :key="index"
+ class="indicator"
+ :class="{ active: currentAnnouncement === index }"
+ ></span>
</div>
</div>
- <!-- 公告卡片 -->
- <div class="announcement-card">
- <div class="announcement-icon">📈</div>
- <div class="announcement-content">
- <div class="announcement-title">拼多多等最热中概股,全网首发</div>
- <div class="announcement-desc">新增支持 98 支代币化股票</div>
- </div>
- <div class="announcement-arrow">></div>
- </div>
-
- <!-- 绑定邀请码 -->
- <div class="invite-card">
- <div class="invite-title">绑定邀请码</div>
- <div class="invite-input-wrapper">
- <input type="text" placeholder="输入/粘贴邀请码" class="invite-input" />
- <span class="copy-icon">📋</span>
- </div>
- <div class="invite-buttons">
- <button class="invite-btn later">稍后再说</button>
- <button class="invite-btn bind">绑定</button>
- </div>
- </div>
-
- <!-- 加密一点通 -->
- <div class="crypto-guide">
- <div class="guide-title">加密一点通</div>
- <div class="guide-content">
- <div class="guide-text">
- <div>从0到1抽出貨</div>
- <div>1分钟了解 Bitget Wallet</div>
- </div>
- <div class="guide-cat">🐱</div>
- </div>
- </div>
-
- <!-- 热门理财 -->
+ <!-- 理财 -->
<div class="finance-section">
- <div class="section-title">热门理财</div>
+ <div class="section-title-wrapper">
+ <div class="section-title">热门理财</div>
+ <Icon icon="solar:arrow-right-linear" class="section-arrow" />
+ </div>
<div class="finance-cards">
- <div class="finance-card">
- <div class="finance-icon">$</div>
- <div class="finance-name">稳定币理财 Plus</div>
+ <Card hoverable class="finance-card usdt" @click="handleFinanceClick('usdt')">
+ <SunburstIcon type="usdt" color="#64EDFB">
+ <div class="finance-icon">
+ <span class="icon-main">$</span>
+ <span class="icon-overlay">-</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">稳定币理财</span>
+ <span class="finance-badge">Plus</span>
+ </div>
<div class="finance-apy">10% APY</div>
- </div>
- <div class="finance-card">
- <div class="finance-icon sol">SOL</div>
- <div class="finance-name">SOL</div>
+ </Card>
+ <Card hoverable class="finance-card sol" @click="handleFinanceClick('sol')">
+ <SunburstIcon type="sol" color="#9945FF">
+ <div class="finance-icon sol">
+ <span class="icon-main">S</span>
+ <span class="icon-overlay">-</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">SOL</span>
+ </div>
<div class="finance-apy">6.28% APY</div>
- </div>
+ </Card>
+ <Card hoverable class="finance-card eth" @click="handleFinanceClick('eth')">
+ <SunburstIcon type="eth" color="#627EEA">
+ <div class="finance-icon">
+ <span class="icon-main">ETH</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">ETH</span>
+ </div>
+ <div class="finance-apy">5.5% APY</div>
+ </Card>
+ <Card hoverable class="finance-card btc" @click="handleFinanceClick('btc')">
+ <SunburstIcon type="usdt" color="#F7931A">
+ <div class="finance-icon btc">
+ <span class="icon-main">BTC</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">BTC</span>
+ </div>
+ <div class="finance-apy">8.2% APY</div>
+ </Card>
+ <Card hoverable class="finance-card bnb" @click="handleFinanceClick('bnb')">
+ <SunburstIcon type="usdt" color="#F3BA2F">
+ <div class="finance-icon bnb">
+ <span class="icon-main">BNB</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">BNB</span>
+ </div>
+ <div class="finance-apy">7.5% APY</div>
+ </Card>
+ <Card hoverable class="finance-card ada" @click="handleFinanceClick('ada')">
+ <SunburstIcon type="usdt" color="#0033AD">
+ <div class="finance-icon ada">
+ <span class="icon-main">ADA</span>
+ </div>
+ </SunburstIcon>
+ <div class="finance-name-row">
+ <span class="finance-name">ADA</span>
+ </div>
+ <div class="finance-apy">6.8% APY</div>
+ </Card>
</div>
</div>
<!-- 全链榜单 -->
- <div class="leaderboard-section">
- <div class="section-title">全链榜单</div>
+ <Card padding class="leaderboard-section">
+ <div class="leaderboard-title">最多热币</div>
+ <div class="leaderboard-subtitle">2,520现货 772合约</div>
<div class="leaderboard-tabs">
- <span class="tab-item">收藏</span>
- <span class="tab-item active">Hot Picks</span>
- <span class="tab-item">新币榜</span>
- <span class="tab-item">涨幅榜</span>
- <span class="tab-item">AI&大妻</span>
- </div>
- <div class="leaderboard-header">
- <span>市值:</span>
- <span>交易额:</span>
- <span>最新价格</span>
- <span>涨跌幅:</span>
+ <span
+ class="tab-item"
+ :class="{ active: activeTab === 'hot' }"
+ @click="activeTab = 'hot'"
+ >热门榜</span>
+ <span
+ class="tab-item"
+ :class="{ active: activeTab === 'gainers' }"
+ @click="activeTab = 'gainers'"
+ >涨幅榜</span>
+ <span
+ class="tab-item"
+ :class="{ active: activeTab === 'new' }"
+ @click="activeTab = 'new'"
+ >新币榜</span>
</div>
<div class="leaderboard-list">
- <div class="leaderboard-item" v-for="item in leaderboardData" :key="item.id">
+ <div class="leaderboard-item" v-for="item in currentLeaderboardData" :key="item.id">
<div class="item-left">
- <div class="item-icon">{{ item.icon }}</div>
- <div class="item-info">
- <div class="item-name">{{ item.name }}</div>
- <div class="item-meta">
- <span>{{ item.marketCap }}</span>
- <span>{{ item.volume }}</span>
- </div>
- </div>
+ <div class="item-icon" :class="item.iconClass">{{ item.icon }}</div>
+ <div class="item-name">{{ item.pair }}</div>
</div>
<div class="item-right">
- <div class="item-price">{{ item.price }}</div>
- <div class="item-change" :class="item.change > 0 ? 'up' : 'down'">
- {{ item.change > 0 ? '+' : '' }}{{ item.change }}%
+ <div class="item-price-row">
+ <span class="item-price">{{ item.price }}</span>
+ <span class="item-change" :class="item.change > 0 ? 'up' : 'down'">
+ {{ item.change > 0 ? '+' : '' }}{{ item.change }}%
+ </span>
</div>
</div>
</div>
</div>
- <div class="view-all">查看全部 ></div>
- </div>
-
- <!-- 新用户都在买 -->
- <div class="new-user-section">
- <div class="section-title">新用户都在买</div>
- <div class="new-user-cards">
- <div class="new-user-card">
- <div class="coin-icon sol">SOL</div>
- <div class="coin-name">SOL</div>
- <div class="coin-change up">+1.96%</div>
- <div class="coin-price">$138.26</div>
- </div>
- <div class="new-user-card">
- <div class="coin-icon bnb">BNB</div>
- <div class="coin-name">BNB</div>
- <div class="coin-change down">-0.94%</div>
- <div class="coin-price">$5891.03</div>
- </div>
- </div>
- </div>
-
- <!-- 赚币中心 -->
- <div class="earn-center">
- <div class="earn-banner">
- <div class="earn-icon">🎀</div>
- <div class="earn-content">
- <div class="earn-title">合约升级:年末吃鸡战</div>
- <div class="earn-desc">距结束: 22时50分55秒 交易赢战场</div>
- <div class="earn-prize">$120,000</div>
- <div class="earn-meta">1分钟 23,920</div>
- </div>
- <button class="earn-btn">立即参与</button>
- </div>
- </div>
-
- <!-- 热搜代币 -->
- <div class="trending-section">
- <div class="section-title">热搜代币</div>
- <div class="trending-cards">
- <div class="trending-card">
- <div class="trending-icon">🍄</div>
- <div class="trending-name">MUSH</div>
- <div class="trending-change up">+41.54%</div>
- <div class="trending-price">¥0.0097</div>
- </div>
- <div class="trending-card">
- <div class="trending-icon">🐋</div>
- <div class="trending-name">WHITEWHALE</div>
- <div class="trending-change up">+19.96%</div>
- <div class="trending-price">¥0.74</div>
- </div>
- </div>
- </div>
+ <div class="view-all" @click="handleViewAll"></div>
+ </Card>
<!-- 合约交易 -->
<div class="contract-section">
@@ -199,25 +204,10 @@
<div class="contract-pair">ZECUSDT Trending</div>
<div class="contract-price">426.77 <span class="contract-change down">-11.57%</span></div>
<div class="contract-desc">22分钟前用户 0x00****5 盈利 收益率+75.62%</div>
- <div class="contract-chart">📉</div>
+ <Icon icon="mdi:chart-line" class="contract-chart" />
<div class="contract-buttons">
- <button class="contract-btn long">做多久</button>
- <button class="contract-btn short">做空</button>
- </div>
- </div>
- </div>
-
- <!-- 帮助中心 -->
- <div class="help-section">
- <div class="section-title">帮助中心</div>
- <div class="help-cards">
- <div class="help-card">
- <div class="help-icon">💼+</div>
- <div class="help-text">创建第一个钱包</div>
- </div>
- <div class="help-card">
- <div class="help-icon">💼→</div>
- <div class="help-text">获得第一笔加密资产</div>
+ <AppButton variant="primary" size="medium" class="contract-btn long">做多</AppButton>
+ <AppButton variant="outline" size="medium" class="contract-btn short">做空</AppButton>
</div>
</div>
</div>
@@ -228,16 +218,129 @@
</template>
<script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Icon } from '@iconify/vue'
import BottomNav from '@/components/BottomNav.vue'
+import QuickAccessIcons from '@/components/QuickAccessIcons.vue'
+import Card from '@/components/Card.vue'
+import AppButton from '@/components/Button.vue'
+import SunburstIcon from '@/components/SunburstIcon.vue'
-const leaderboardData = ref([
- { id: 1, icon: '🐴', name: '我路马来了', marketCap: '$705.7475', volume: '$2,500.6275', price: '$0.007057', change: 205.02 },
- { id: 2, icon: '●', name: 'Shitcoin', marketCap: '$287.48万', volume: '$536.85万', price: '$0.002875', change: 775.67 },
- { id: 3, icon: '⚙️', name: 'FACTORY', marketCap: '$30.83万', volume: '$331.14万', price: '$0.0005084', change: 7404.36 },
- { id: 4, icon: '🐟', name: 'fish', marketCap: '$949.24万', volume: '$511.36万', price: '$0.009493', change: 25.78 },
- { id: 5, icon: '🍄', name: 'MUSH', marketCap: '$137.79万', volume: '$251.96万', price: '$0.001378', change: 39.93 }
+const router = useRouter()
+
+const handleFinanceClick = (type: string) => {
+ // 可以跳转到理财详情页或处理点击事件
+ console.log('Finance clicked:', type)
+}
+
+const currentBanner = ref(0)
+const currentAnnouncement = ref(0)
+const banners = ref([
+ {
+ title: 'Crypto for Everyone',
+ buttonText: '去充值',
+ icons: ['💳', '💳', '💳', '💳']
+ },
+ {
+ title: '合约升级:年末吃鸡战',
+ buttonText: '立即参与',
+ icons: ['🎁', '🎁', '🎁', '🎁']
+ },
+ {
+ title: '稳定币理财 Plus',
+ buttonText: '立即理财',
+ icons: ['💰', '💰', '💰', '💰']
+ }
])
+
+const announcements = ref([
+ {
+ title: '拼多多等最热中概股,全网首发',
+ desc: '新增支持 98 支代币化股票'
+ },
+ {
+ title: '新功能上线',
+ desc: '更多交易选项等你来体验'
+ },
+ {
+ title: '限时优惠活动',
+ desc: '交易手续费低至0.1%'
+ },
+ {
+ title: '新币上线公告',
+ desc: '支持更多主流加密货币'
+ }
+])
+
+let bannerTimer: number | null = null
+let announcementTimer: number | null = null
+
+onMounted(() => {
+ bannerTimer = setInterval(() => {
+ currentBanner.value = (currentBanner.value + 1) % banners.value.length
+ }, 3000)
+
+ announcementTimer = setInterval(() => {
+ currentAnnouncement.value = (currentAnnouncement.value + 1) % announcements.value.length
+ }, 4000)
+})
+
+onUnmounted(() => {
+ if (bannerTimer) {
+ clearInterval(bannerTimer)
+ }
+ if (announcementTimer) {
+ clearInterval(announcementTimer)
+ }
+})
+
+const activeTab = ref('hot')
+
+const hotListData = ref([
+ { id: 1, icon: 'B', iconClass: 'btc', pair: 'BTC/USDT', price: '91,008.37', change: 0.22 },
+ { id: 2, icon: 'X', iconClass: 'xrp', pair: 'XRP/BTC', price: '0.000023273', change: -0.61 },
+ { id: 3, icon: 'M', iconClass: 'mx', pair: 'MX/ETH', price: '0.00067568', change: 0.71 },
+ { id: 4, icon: 'B', iconClass: 'btc', pair: 'BTC/USDC', price: '90,933.26', change: 0.26 },
+ { id: 5, icon: 'E', iconClass: 'eth', pair: 'ETH/USDT', price: '2,456.78', change: 1.25 },
+ { id: 6, icon: 'S', iconClass: 'sol', pair: 'SOL/USDT', price: '138.26', change: 1.96 }
+])
+
+const gainersListData = ref([
+ { id: 1, icon: 'B', iconClass: 'btc', pair: 'BTC/USDT', price: '91,500.00', change: 5.23 },
+ { id: 2, icon: 'E', iconClass: 'eth', pair: 'ETH/USDT', price: '2,500.00', change: 8.45 },
+ { id: 3, icon: 'S', iconClass: 'sol', pair: 'SOL/USDT', price: '145.00', change: 12.36 },
+ { id: 4, icon: 'B', iconClass: 'bnb', pair: 'BNB/USDT', price: '600.00', change: 3.21 },
+ { id: 5, icon: 'A', iconClass: 'ada', pair: 'ADA/USDT', price: '0.52', change: 6.78 },
+ { id: 6, icon: 'D', iconClass: 'doge', pair: 'DOGE/USDT', price: '0.085', change: 9.12 }
+])
+
+const newListData = ref([
+ { id: 1, icon: 'N', iconClass: 'new', pair: 'NEW/USDT', price: '0.0012', change: 15.67 },
+ { id: 2, icon: 'T', iconClass: 'token', pair: 'TOKEN/USDT', price: '0.0023', change: 22.34 },
+ { id: 3, icon: 'C', iconClass: 'coin', pair: 'COIN/USDT', price: '0.0034', change: 18.90 },
+ { id: 4, icon: 'P', iconClass: 'pump', pair: 'PUMP/USDT', price: '0.0045', change: 25.67 },
+ { id: 5, icon: 'M', iconClass: 'moon', pair: 'MOON/USDT', price: '0.0056', change: 30.12 },
+ { id: 6, icon: 'R', iconClass: 'rocket', pair: 'ROCKET/USDT', price: '0.0067', change: 35.45 }
+])
+
+const currentLeaderboardData = computed(() => {
+ switch (activeTab.value) {
+ case 'hot':
+ return hotListData.value
+ case 'gainers':
+ return gainersListData.value
+ case 'new':
+ return newListData.value
+ default:
+ return hotListData.value
+ }
+})
+
+const handleViewAll = () => {
+ // 可以跳转到完整列表页面
+ console.log('View all clicked', activeTab.value)
+}
</script>
<style lang="scss" scoped>
@@ -249,84 +352,241 @@
min-height: 100vh;
}
-.search-bar {
- display: flex;
- align-items: center;
- padding: 12px 16px;
- gap: 12px;
+.top-video-section {
+ position: relative;
+ width: 100%;
+ height: 350px;
+ overflow: visible;
+ border-radius: 0 0 $radius-lg $radius-lg;
+ margin-bottom: 120px; // 为快捷入口留出空间
- .search-left, .search-right {
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
+ .background-video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center center;
+ z-index: 0;
+ min-width: 100%;
+ min-height: 100%;
+ border-radius: 0 0 $radius-lg $radius-lg; // 视频底部圆角
}
- .search-input-wrapper {
- flex: 1;
- background: $bg-secondary;
- border-radius: 20px;
- padding: 8px 16px;
+ .video-overlay {
+ display: none; // 去掉朦胧感
+ }
+
+ .search-bar {
+ position: fixed;
+ top: $spacing-lg;
+ left: $spacing-lg;
+ right: $spacing-lg;
+ z-index: 1001;
display: flex;
align-items: center;
- gap: 8px;
+ gap: $spacing-sm;
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: $radius-pill;
+ padding: $spacing-sm $spacing-md;
+ backdrop-filter: blur(10px);
- .search-icon {
- font-size: 16px;
+ .search-left {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: $radius-round;
+
+ :deep(svg) {
+ width: 24px;
+ height: 24px;
+ }
}
- .search-placeholder {
- color: $text-tertiary;
- font-size: $font-md;
+ .search-right {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: $radius-round;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ .search-input-wrapper {
+ flex: 1;
+ background: rgba(245, 245, 245, 0.8);
+ border-radius: $radius-pill;
+ padding: $spacing-sm $spacing-md;
+ display: flex;
+ align-items: center;
+ gap: $spacing-xs;
+
+ .search-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ }
+
+ .search-placeholder {
+ color: $text-tertiary;
+ font-size: $font-md;
+ }
+ }
+ }
+
+
+ .quick-access {
+ position: absolute;
+ bottom: -80px; // 更靠下，一半在视频内，一半在视频外
+ left: 50%;
+ transform: translateX(-50%);
+ width: calc(100% - #{$spacing-lg * 2});
+ max-width: 600px;
+ z-index: 2;
+ display: flex;
+ justify-content: space-between;
+ gap: $spacing-xs;
+ padding: $spacing-md $spacing-lg;
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: $radius-lg;
+ backdrop-filter: blur(10px);
+ box-shadow: $shadow-md;
+
+ .access-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: $spacing-sm;
+ position: relative;
+ flex: 1;
+
+ .access-icon {
+ width: 80px;
+ height: 80px;
+ background: rgba(226, 253, 254, 0.5);
+ border-radius: $radius-md;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto;
+ position: relative;
+
+ :deep(svg) {
+ width: 48px;
+ height: 48px;
+ display: block;
+ margin: 0 auto;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+
+ span:last-child {
+ font-size: $font-md;
+ font-weight: 500;
+ color: $text-primary;
+ text-align: center;
+ width: 100%;
+ }
}
}
}
-.main-banner {
- margin: 0 16px 16px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border-radius: $radius-lg;
- padding: 24px;
- color: $text-white;
+// 搜索栏样式已移到.top-video-section中
+
+.banner-swiper {
+ margin: 0 $spacing-lg $spacing-lg;
position: relative;
+ border-radius: $radius-lg;
overflow: hidden;
+ height: 200px;
- .banner-content {
- position: relative;
- z-index: 1;
- }
-
- .banner-title {
- font-size: $font-xxl;
- font-weight: bold;
- margin-bottom: 16px;
- }
-
- .recharge-btn {
- background: $primary-blue;
- color: $text-white;
- border: none;
- border-radius: $radius-md;
- padding: 10px 24px;
- font-size: $font-md;
- font-weight: 500;
- margin-bottom: 16px;
- cursor: pointer;
- }
-
- .payment-icons {
+ .banner-container {
display: flex;
- gap: 8px;
+ transition: transform 0.5s ease;
+ height: 100%;
+ }
+
+ .banner-slide {
+ min-width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ padding: $spacing-xxl;
+ color: $text-white;
+ position: relative;
+ overflow: hidden;
- span {
- width: 32px;
- height: 32px;
- background: rgba(255, 255, 255, 0.2);
- border-radius: $radius-round;
+ .banner-content {
+ position: relative;
+ z-index: 1;
+ height: 100%;
display: flex;
- align-items: center;
- justify-content: center;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .banner-title {
+ font-size: $font-title;
+ font-weight: bold;
+ margin-bottom: $spacing-lg;
+ }
+
+ .recharge-btn {
+ margin-bottom: $spacing-lg;
+ }
+
+ .payment-icons {
+ display: flex;
+ gap: $spacing-sm;
+
+ span {
+ width: 36px;
+ height: 36px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: $radius-round;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ }
+ }
+ }
+
+ .banner-indicators {
+ position: absolute;
+ bottom: $spacing-md;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: $spacing-xs;
+ padding: $spacing-xs $spacing-sm;
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: $radius-pill;
+ backdrop-filter: blur(4px);
+
+ .indicator {
+ width: 6px;
+ height: 6px;
+ border-radius: $radius-round;
+ background: rgba(255, 255, 255, 0.5);
+ transition: all $transition-slow;
+ cursor: pointer;
+
+ &.active {
+ width: 20px;
+ background: rgba(255, 255, 255, 1);
+ }
}
}
}
@@ -334,216 +594,304 @@
.quick-access {
display: flex;
justify-content: space-around;
- padding: 16px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-lg;
+ margin-bottom: $spacing-lg;
.access-item {
display: flex;
flex-direction: column;
align-items: center;
- gap: 8px;
+ justify-content: center;
+ gap: $spacing-sm;
position: relative;
+ flex: 1;
.access-icon {
- width: 48px;
- height: 48px;
- background: $bg-secondary;
- border-radius: $radius-round;
+ width: 80px;
+ height: 80px;
+ background: rgba(226, 253, 254, 0.5);
+ border-radius: $radius-md;
display: flex;
align-items: center;
justify-content: center;
- font-size: 24px;
- }
-
- .badge {
- position: absolute;
- top: 0;
- right: 0;
- width: 8px;
- height: 8px;
- background: $error-red;
- border-radius: 50%;
+ margin: 0 auto;
+ position: relative;
+
+ :deep(svg) {
+ width: 48px;
+ height: 48px;
+ display: block;
+ margin: 0 auto;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
}
span:last-child {
- font-size: $font-sm;
- color: $text-primary;
- }
- }
-}
-
-.announcement-card {
- margin: 16px;
- background: $bg-primary;
- border: 1px solid $border-light;
- border-radius: $radius-lg;
- padding: 16px;
- display: flex;
- align-items: center;
- gap: 12px;
-
- .announcement-icon {
- font-size: 24px;
- }
-
- .announcement-content {
- flex: 1;
-
- .announcement-title {
font-size: $font-md;
font-weight: 500;
- margin-bottom: 4px;
+ color: $text-primary;
+ text-align: center;
+ width: 100%;
}
-
- .announcement-desc {
- font-size: $font-sm;
- color: $text-secondary;
- }
- }
-
- .announcement-arrow {
- color: $text-tertiary;
- font-size: 18px;
}
}
-.invite-card {
- margin: 16px;
- background: $bg-primary;
- border: 1px solid $border-light;
+.announcement-swiper {
+ margin: 0 $spacing-lg $spacing-lg;
+ position: relative;
border-radius: $radius-lg;
- padding: 16px;
+ overflow: hidden;
+ height: 130px;
+ margin-bottom: $spacing-xxl;
- .invite-title {
- font-size: $font-lg;
- font-weight: 500;
- margin-bottom: 12px;
+ .announcement-container {
+ display: flex;
+ transition: transform 0.5s ease;
+ height: 100%;
}
- .invite-input-wrapper {
+ .announcement-card {
+ min-width: 100%;
+ flex-shrink: 0;
+ height: 100%;
+ padding: $spacing-lg $spacing-xl !important;
display: flex;
align-items: center;
- background: $bg-secondary;
- border-radius: $radius-md;
- padding: 12px;
- margin-bottom: 12px;
+ gap: $spacing-md;
+ background: $primary-light;
- .invite-input {
- flex: 1;
- border: none;
- background: transparent;
- font-size: $font-md;
-
- &::placeholder {
- color: $text-tertiary;
- }
+ .announcement-icon {
+ font-size: 28px;
+ width: 28px;
+ height: 28px;
+ flex-shrink: 0;
}
- .copy-icon {
- font-size: 18px;
- color: $text-tertiary;
- }
- }
-
- .invite-buttons {
- display: flex;
- gap: 12px;
-
- .invite-btn {
+ .announcement-content {
flex: 1;
- padding: 10px;
- border: none;
- border-radius: $radius-md;
- font-size: $font-md;
- cursor: pointer;
- &.later {
- background: $bg-secondary;
+ .announcement-title {
+ font-size: $font-lg;
+ font-weight: 600;
+ margin-bottom: $spacing-xs;
color: $text-primary;
}
- &.bind {
- background: $primary-blue;
- color: $text-white;
- }
- }
- }
-}
-
-.crypto-guide {
- margin: 16px;
-
- .guide-title {
- font-size: $font-lg;
- font-weight: 500;
- margin-bottom: 12px;
- }
-
- .guide-content {
- background: $bg-primary;
- border: 1px solid $border-light;
- border-radius: $radius-lg;
- padding: 16px;
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .guide-text {
- div:first-child {
+ .announcement-desc {
font-size: $font-md;
- font-weight: 500;
- margin-bottom: 4px;
- }
-
- div:last-child {
- font-size: $font-sm;
color: $text-secondary;
}
}
- .guide-cat {
- font-size: 48px;
+ .announcement-arrow {
+ color: $text-tertiary;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+ }
+ }
+
+ .announcement-indicators {
+ position: absolute;
+ bottom: $spacing-md;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: $spacing-xs;
+ z-index: 2;
+
+ .indicator {
+ width: 6px;
+ height: 6px;
+ border-radius: $radius-round;
+ background: rgba(0, 0, 0, 0.2);
+ transition: all 0.3s ease;
+ cursor: pointer;
+
+ &.active {
+ width: 20px;
+ background: rgba(0, 0, 0, 0.6);
+ border-radius: $radius-pill;
+ }
}
}
}
-.finance-section, .new-user-section, .trending-section, .contract-section, .help-section {
- margin: 24px 16px 16px;
+.finance-section, .contract-section {
+ margin: $spacing-xxl $spacing-lg $spacing-lg;
+
+ .section-title-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: $spacing-md;
+
+ .section-title {
+ font-size: $font-lg;
+ font-weight: 600;
+ color: $text-primary;
+ }
+
+ .section-arrow {
+ width: 20px;
+ height: 20px;
+ color: $text-tertiary;
+ }
+ }
.section-title {
font-size: $font-lg;
- font-weight: 500;
- margin-bottom: 12px;
+ font-weight: 600;
+ margin-bottom: $spacing-md;
}
}
-.finance-cards, .new-user-cards, .trending-cards, .help-cards {
+.finance-cards {
display: flex;
- gap: 12px;
+ gap: $spacing-md;
overflow-x: auto;
+ padding-bottom: $spacing-xs;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
-.finance-card, .new-user-card, .trending-card, .help-card {
- background: $bg-primary;
- border: 1px solid $border-light;
- border-radius: $radius-lg;
- padding: 16px;
- min-width: 140px;
+.finance-card {
+ min-width: 160px;
+ width: 160px;
+ height: 160px;
+ padding: 24px 20px !important;
text-align: center;
+ position: relative;
+ overflow: visible;
+ cursor: pointer;
+ border-radius: $radius-lg !important;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ flex-shrink: 0;
- .finance-icon, .coin-icon, .trending-icon, .help-icon {
- width: 48px;
- height: 48px;
- margin: 0 auto 12px;
+ &.usdt {
+ background: rgba(100, 237, 251, 0.08) !important;
+ }
+
+ &.sol {
+ background: rgba(153, 69, 255, 0.08) !important;
+ }
+
+ &.eth {
+ background: rgba(98, 126, 234, 0.08) !important;
+ }
+
+ &:hover {
+ transform: translateY(-4px);
+ box-shadow: $shadow-lg;
+ }
+
+ :deep(.sunburst-icon) {
+ margin: 0 auto 20px;
+ position: relative;
+ width: 120px;
+ height: 120px;
+
+ .sunburst-svg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 0;
+ width: 120px;
+ height: 120px;
+ }
+
+ .icon-content {
+ position: relative;
+ z-index: 1;
+ }
+ }
+
+ .finance-icon {
+ width: 72px;
+ height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: $radius-round;
- background: $bg-secondary;
- font-size: 24px;
+ background: $primary;
+ font-size: 32px;
+ font-weight: bold;
+ color: white;
+ position: relative;
+ margin: 0 auto;
+
+ .icon-main {
+ position: relative;
+ z-index: 2;
+ }
+
+ .icon-overlay {
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
+ width: 20px;
+ height: 20px;
+ border-radius: $radius-round;
+ background: rgba(26, 26, 26, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ color: white;
+ z-index: 3;
+ font-weight: 500;
+ }
&.sol {
- background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
+ background: #1a1a1a;
+ color: white;
+ position: relative;
+
+ .icon-main {
+ position: relative;
+ z-index: 2;
+ font-size: 32px;
+ font-weight: 700;
+ background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ display: inline-block;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 60%;
+ height: 60%;
+ background: linear-gradient(135deg, rgba(153, 69, 255, 0.3) 0%, rgba(20, 241, 149, 0.3) 100%);
+ border-radius: 4px;
+ z-index: 1;
+ }
+
+ .icon-overlay {
+ background: rgba(26, 26, 26, 0.9);
+ color: white;
+ }
+ }
+
+ &.btc {
+ background: #F7931A;
color: white;
}
@@ -551,126 +899,201 @@
background: #F3BA2F;
color: white;
}
+
+ &.ada {
+ background: #0033AD;
+ color: white;
+ }
}
- .finance-name, .coin-name, .trending-name {
- font-size: $font-md;
- font-weight: 500;
- margin-bottom: 8px;
+ .finance-name-row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: $spacing-xs;
+ margin-bottom: 12px;
+ flex-wrap: wrap;
+ max-width: 100%;
+ overflow: hidden;
+
+ .finance-name {
+ font-size: $font-sm;
+ font-weight: 500;
+ color: $text-primary;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+ flex-shrink: 1;
+ min-width: 0;
+ }
+
+ .finance-badge {
+ background: $success;
+ color: white;
+ font-size: 10px;
+ padding: 2px 6px;
+ border-radius: $radius-sm;
+ font-weight: 600;
+ line-height: 1.4;
+ flex-shrink: 0;
+ }
}
.finance-apy {
- font-size: $font-sm;
- color: $primary-blue;
- }
-
- .coin-change, .trending-change {
- font-size: $font-sm;
- margin-bottom: 4px;
-
- &.up {
- color: $up-green;
- }
-
- &.down {
- color: $down-red;
- }
- }
-
- .coin-price, .trending-price {
- font-size: $font-md;
- font-weight: 500;
+ font-size: clamp(14px, 4vw, 20px);
+ font-weight: 700;
+ color: $text-primary;
+ letter-spacing: 0;
+ line-height: 1.2;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+ text-align: center;
}
}
+
.leaderboard-section {
- margin: 24px 16px 16px;
+ margin: $spacing-xxl $spacing-lg $spacing-lg;
+ text-align: center;
+
+ .leaderboard-title {
+ font-size: $font-xxl;
+ font-weight: 600;
+ color: $text-primary;
+ margin-bottom: $spacing-xs;
+ text-align: center;
+ }
+
+ .leaderboard-subtitle {
+ font-size: $font-sm;
+ color: $text-secondary;
+ margin-bottom: $spacing-md;
+ text-align: center;
+ }
.leaderboard-tabs {
display: flex;
- gap: 16px;
- margin-bottom: 12px;
- overflow-x: auto;
+ justify-content: center;
+ gap: $spacing-md;
+ margin-bottom: $spacing-lg;
.tab-item {
font-size: $font-md;
color: $text-secondary;
- white-space: nowrap;
+ padding: $spacing-xs $spacing-md;
+ border-radius: $radius-pill;
+ transition: all $transition-base;
&.active {
- color: $primary-blue;
+ color: $text-primary;
font-weight: 500;
+ background: $bg-secondary;
}
}
}
- .leaderboard-header {
- display: grid;
- grid-template-columns: 2fr 2fr 1.5fr 1fr;
- gap: 8px;
- padding: 8px 0;
- font-size: $font-xs;
- color: $text-tertiary;
- border-bottom: 1px solid $border-light;
- }
-
.leaderboard-list {
- .leaderboard-item {
- display: grid;
- grid-template-columns: 2fr 1fr;
- gap: 8px;
- padding: 12px 0;
- border-bottom: 1px solid $border-light;
+ .leaderboard-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: $spacing-md 0;
.item-left {
display: flex;
- gap: 12px;
+ align-items: center;
+ gap: $spacing-md;
.item-icon {
width: 40px;
height: 40px;
border-radius: $radius-round;
- background: $bg-secondary;
display: flex;
align-items: center;
justify-content: center;
- font-size: 20px;
- }
-
- .item-info {
- .item-name {
- font-size: $font-md;
- font-weight: 500;
- margin-bottom: 4px;
+ font-size: $font-lg;
+ font-weight: bold;
+ color: white;
+ flex-shrink: 0;
+
+ &.btc {
+ background: #F7931A;
}
- .item-meta {
- font-size: $font-xs;
- color: $text-secondary;
- display: flex;
- gap: 8px;
+ &.xrp {
+ background: #1a1a1a;
}
+
+ &.mx {
+ background: #00D2FF;
+ }
+
+ &.eth {
+ background: #627EEA;
+ }
+
+ &.sol {
+ background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
+ }
+
+ &.bnb {
+ background: #F3BA2F;
+ }
+
+ &.ada {
+ background: #0033AD;
+ }
+
+ &.doge {
+ background: #C2A633;
+ }
+
+ &.new, &.token, &.coin, &.pump, &.moon, &.rocket {
+ background: $primary;
+ }
+ }
+
+ .item-name {
+ font-size: $font-md;
+ font-weight: 500;
+ color: $text-primary;
}
}
.item-right {
text-align: right;
- .item-price {
- font-size: $font-md;
- font-weight: 500;
- margin-bottom: 4px;
- }
-
- .item-change {
- font-size: $font-sm;
+ .item-price-row {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: $spacing-sm;
- &.up {
- color: $up-green;
+ .item-price {
+ font-size: $font-md;
+ font-weight: 500;
+ color: $text-primary;
}
- &.down {
- color: $down-red;
+ .item-change {
+ font-size: $font-sm;
+ font-weight: 500;
+ padding: 2px $spacing-sm;
+ border-radius: $radius-sm;
+ white-space: nowrap;
+
+ &.up {
+ color: $down-red; // 红涨
+ background: rgba(255, 77, 79, 0.1);
+ }
+
+ &.down {
+ color: $up-green; // 绿跌
+ background: rgba(82, 196, 26, 0.1);
+ }
}
}
}
@@ -679,73 +1102,41 @@
.view-all {
text-align: center;
- padding: 16px;
- color: $primary-blue;
- font-size: $font-md;
+ padding: $spacing-lg 0 0;
+ margin-top: $spacing-lg;
+ cursor: pointer;
+ transition: all $transition-base;
+
+ &::before {
+ content: '查看全部 >';
+ display: inline-block;
+ padding: $spacing-sm $spacing-xxl;
+ background: $primary-light;
+ color: $primary;
+ border-radius: $radius-pill;
+ font-size: $font-md;
+ font-weight: 500;
+ transition: all $transition-base;
+ }
+
+ &:hover::before {
+ background: rgba(100, 237, 251, 0.2);
+ transform: translateY(-1px);
+ }
+ }
+
+ .tab-item {
+ cursor: pointer;
}
}
-.earn-center {
- margin: 24px 16px 16px;
-
- .earn-banner {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- border-radius: $radius-lg;
- padding: 20px;
- color: $text-white;
- display: flex;
- gap: 16px;
-
- .earn-icon {
- font-size: 32px;
- }
-
- .earn-content {
- flex: 1;
-
- .earn-title {
- font-size: $font-lg;
- font-weight: 500;
- margin-bottom: 8px;
- }
-
- .earn-desc {
- font-size: $font-sm;
- opacity: 0.9;
- margin-bottom: 8px;
- }
-
- .earn-prize {
- font-size: $font-xl;
- font-weight: bold;
- margin-bottom: 4px;
- }
-
- .earn-meta {
- font-size: $font-xs;
- opacity: 0.8;
- }
- }
-
- .earn-btn {
- background: $primary-blue;
- color: $text-white;
- border: none;
- border-radius: $radius-md;
- padding: 10px 20px;
- font-size: $font-md;
- height: fit-content;
- cursor: pointer;
- }
- }
-}
.contract-section {
.contract-card {
- background: $bg-primary;
- border: 1px solid $border-light;
+ background: $bg-card;
border-radius: $radius-lg;
- padding: 16px;
+ padding: $spacing-lg;
+ box-shadow: $card-shadow;
.contract-pair {
font-size: $font-md;
@@ -776,27 +1167,24 @@
.contract-chart {
height: 60px;
margin-bottom: 12px;
+ width: 60px;
+ height: 60px;
+
+ svg {
+ width: 60px;
+ height: 60px;
+ }
}
.contract-buttons {
display: flex;
- gap: 12px;
+ gap: $spacing-md;
.contract-btn {
flex: 1;
- padding: 10px;
- border: none;
- border-radius: $radius-md;
- font-size: $font-md;
- cursor: pointer;
-
- &.long {
- background: $primary-blue;
- color: $text-white;
- }
&.short {
- background: #ff6b9d;
+ background: $error;
color: $text-white;
}
}
@@ -804,3 +1192,4 @@
}
}
</style>
+
--
Gitblit v1.9.3