<template>
|
<div class="home-page">
|
<!-- 顶部视频背景区域 -->
|
<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>
|
<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="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="announcement-indicators">
|
<span
|
v-for="(announcement, index) in announcements"
|
:key="index"
|
class="indicator"
|
:class="{ active: currentAnnouncement === index }"
|
></span>
|
</div>
|
</div>
|
|
<!-- 理财 -->
|
<div class="finance-section">
|
<div class="section-title-wrapper">
|
<div class="section-title">热门理财</div>
|
<Icon icon="solar:arrow-right-linear" class="section-arrow" />
|
</div>
|
<div class="finance-cards">
|
<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>
|
</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>
|
</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>
|
|
<!-- 全链榜单 -->
|
<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"
|
: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 currentLeaderboardData" :key="item.id">
|
<div class="item-left">
|
<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-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" @click="handleViewAll"></div>
|
</Card>
|
|
<!-- 合约交易 -->
|
<div class="contract-section">
|
<div class="section-title">合约交易 totodex</div>
|
<div class="contract-card">
|
<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>
|
<Icon icon="mdi:chart-line" class="contract-chart" />
|
<div class="contract-buttons">
|
<AppButton variant="primary" size="medium" class="contract-btn long">做多</AppButton>
|
<AppButton variant="outline" size="medium" class="contract-btn short">做空</AppButton>
|
</div>
|
</div>
|
</div>
|
|
<!-- 底部导航 -->
|
<BottomNav />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
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 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>
|
@import '@/styles/variables.scss';
|
|
.home-page {
|
background: $bg-primary;
|
padding-bottom: 60px;
|
min-height: 100vh;
|
}
|
|
.top-video-section {
|
position: relative;
|
width: 100%;
|
height: 350px;
|
overflow: visible;
|
border-radius: 0 0 $radius-lg $radius-lg;
|
margin-bottom: 120px; // 为快捷入口留出空间
|
|
.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; // 视频底部圆角
|
}
|
|
.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: $spacing-sm;
|
background: rgba(255, 255, 255, 0.95);
|
border-radius: $radius-pill;
|
padding: $spacing-sm $spacing-md;
|
backdrop-filter: blur(10px);
|
|
.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-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%;
|
}
|
}
|
}
|
}
|
|
// 搜索栏样式已移到.top-video-section中
|
|
.banner-swiper {
|
margin: 0 $spacing-lg $spacing-lg;
|
position: relative;
|
border-radius: $radius-lg;
|
overflow: hidden;
|
height: 200px;
|
|
.banner-container {
|
display: flex;
|
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;
|
|
.banner-content {
|
position: relative;
|
z-index: 1;
|
height: 100%;
|
display: flex;
|
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);
|
}
|
}
|
}
|
}
|
|
.quick-access {
|
display: flex;
|
justify-content: space-around;
|
padding: $spacing-lg;
|
margin-bottom: $spacing-lg;
|
|
.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%;
|
}
|
}
|
}
|
|
.announcement-swiper {
|
margin: 0 $spacing-lg $spacing-lg;
|
position: relative;
|
border-radius: $radius-lg;
|
overflow: hidden;
|
height: 130px;
|
margin-bottom: $spacing-xxl;
|
|
.announcement-container {
|
display: flex;
|
transition: transform 0.5s ease;
|
height: 100%;
|
}
|
|
.announcement-card {
|
min-width: 100%;
|
flex-shrink: 0;
|
height: 100%;
|
padding: $spacing-lg $spacing-xl !important;
|
display: flex;
|
align-items: center;
|
gap: $spacing-md;
|
background: $primary-light;
|
|
.announcement-icon {
|
font-size: 28px;
|
width: 28px;
|
height: 28px;
|
flex-shrink: 0;
|
}
|
|
.announcement-content {
|
flex: 1;
|
|
.announcement-title {
|
font-size: $font-lg;
|
font-weight: 600;
|
margin-bottom: $spacing-xs;
|
color: $text-primary;
|
}
|
|
.announcement-desc {
|
font-size: $font-md;
|
color: $text-secondary;
|
}
|
}
|
|
.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, .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: 600;
|
margin-bottom: $spacing-md;
|
}
|
}
|
|
.finance-cards {
|
display: flex;
|
gap: $spacing-md;
|
overflow-x: auto;
|
padding-bottom: $spacing-xs;
|
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
|
-ms-overflow-style: none;
|
scrollbar-width: none;
|
}
|
|
.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;
|
|
&.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: $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: #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;
|
}
|
|
&.bnb {
|
background: #F3BA2F;
|
color: white;
|
}
|
|
&.ada {
|
background: #0033AD;
|
color: white;
|
}
|
}
|
|
.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: 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: $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;
|
justify-content: center;
|
gap: $spacing-md;
|
margin-bottom: $spacing-lg;
|
|
.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;
|
background: $bg-secondary;
|
}
|
}
|
}
|
|
.leaderboard-list {
|
.leaderboard-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: $spacing-md 0;
|
|
.item-left {
|
display: flex;
|
align-items: center;
|
gap: $spacing-md;
|
|
.item-icon {
|
width: 40px;
|
height: 40px;
|
border-radius: $radius-round;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: $font-lg;
|
font-weight: bold;
|
color: white;
|
flex-shrink: 0;
|
|
&.btc {
|
background: #F7931A;
|
}
|
|
&.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-row {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
gap: $spacing-sm;
|
|
.item-price {
|
font-size: $font-md;
|
font-weight: 500;
|
color: $text-primary;
|
}
|
|
.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);
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.view-all {
|
text-align: center;
|
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;
|
}
|
}
|
|
|
.contract-section {
|
.contract-card {
|
background: $bg-card;
|
border-radius: $radius-lg;
|
padding: $spacing-lg;
|
box-shadow: $card-shadow;
|
|
.contract-pair {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 8px;
|
}
|
|
.contract-price {
|
font-size: $font-lg;
|
font-weight: 500;
|
margin-bottom: 8px;
|
|
.contract-change {
|
font-size: $font-sm;
|
|
&.down {
|
color: $down-red;
|
}
|
}
|
}
|
|
.contract-desc {
|
font-size: $font-sm;
|
color: $text-secondary;
|
margin-bottom: 12px;
|
}
|
|
.contract-chart {
|
height: 60px;
|
margin-bottom: 12px;
|
width: 60px;
|
height: 60px;
|
|
svg {
|
width: 60px;
|
height: 60px;
|
}
|
}
|
|
.contract-buttons {
|
display: flex;
|
gap: $spacing-md;
|
|
.contract-btn {
|
flex: 1;
|
|
&.short {
|
background: $error;
|
color: $text-white;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
