<template>
|
<div class="home-page">
|
<!-- 搜索栏 -->
|
<div class="search-bar">
|
<div class="search-left">
|
<span class="grid-icon">☰</span>
|
</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>
|
</div>
|
</div>
|
</div>
|
|
<!-- 快捷入口 -->
|
<div class="quick-access">
|
<div class="access-item">
|
<div class="access-icon">✈️</div>
|
<span>Pay</span>
|
</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>
|
</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="finance-cards">
|
<div class="finance-card">
|
<div class="finance-icon">$</div>
|
<div class="finance-name">稳定币理财 Plus</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>
|
<div class="finance-apy">6.28% APY</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 全链榜单 -->
|
<div class="leaderboard-section">
|
<div class="section-title">全链榜单</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>
|
</div>
|
<div class="leaderboard-list">
|
<div class="leaderboard-item" v-for="item in leaderboardData" :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>
|
<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>
|
</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="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>
|
<div class="contract-chart">📉</div>
|
<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>
|
</div>
|
</div>
|
</div>
|
|
<!-- 底部导航 -->
|
<BottomNav />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import BottomNav from '@/components/BottomNav.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 }
|
])
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/styles/variables.scss';
|
|
.home-page {
|
background: $bg-primary;
|
padding-bottom: 60px;
|
min-height: 100vh;
|
}
|
|
.search-bar {
|
display: flex;
|
align-items: center;
|
padding: 12px 16px;
|
gap: 12px;
|
|
.search-left, .search-right {
|
width: 24px;
|
height: 24px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.search-input-wrapper {
|
flex: 1;
|
background: $bg-secondary;
|
border-radius: 20px;
|
padding: 8px 16px;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
|
.search-icon {
|
font-size: 16px;
|
}
|
|
.search-placeholder {
|
color: $text-tertiary;
|
font-size: $font-md;
|
}
|
}
|
}
|
|
.main-banner {
|
margin: 0 16px 16px;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border-radius: $radius-lg;
|
padding: 24px;
|
color: $text-white;
|
position: relative;
|
overflow: hidden;
|
|
.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 {
|
display: flex;
|
gap: 8px;
|
|
span {
|
width: 32px;
|
height: 32px;
|
background: rgba(255, 255, 255, 0.2);
|
border-radius: $radius-round;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
|
.quick-access {
|
display: flex;
|
justify-content: space-around;
|
padding: 16px;
|
border-bottom: 1px solid $border-light;
|
|
.access-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 8px;
|
position: relative;
|
|
.access-icon {
|
width: 48px;
|
height: 48px;
|
background: $bg-secondary;
|
border-radius: $radius-round;
|
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%;
|
}
|
|
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;
|
}
|
|
.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;
|
border-radius: $radius-lg;
|
padding: 16px;
|
|
.invite-title {
|
font-size: $font-lg;
|
font-weight: 500;
|
margin-bottom: 12px;
|
}
|
|
.invite-input-wrapper {
|
display: flex;
|
align-items: center;
|
background: $bg-secondary;
|
border-radius: $radius-md;
|
padding: 12px;
|
margin-bottom: 12px;
|
|
.invite-input {
|
flex: 1;
|
border: none;
|
background: transparent;
|
font-size: $font-md;
|
|
&::placeholder {
|
color: $text-tertiary;
|
}
|
}
|
|
.copy-icon {
|
font-size: 18px;
|
color: $text-tertiary;
|
}
|
}
|
|
.invite-buttons {
|
display: flex;
|
gap: 12px;
|
|
.invite-btn {
|
flex: 1;
|
padding: 10px;
|
border: none;
|
border-radius: $radius-md;
|
font-size: $font-md;
|
cursor: pointer;
|
|
&.later {
|
background: $bg-secondary;
|
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 {
|
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;
|
}
|
}
|
}
|
|
.finance-section, .new-user-section, .trending-section, .contract-section, .help-section {
|
margin: 24px 16px 16px;
|
|
.section-title {
|
font-size: $font-lg;
|
font-weight: 500;
|
margin-bottom: 12px;
|
}
|
}
|
|
.finance-cards, .new-user-cards, .trending-cards, .help-cards {
|
display: flex;
|
gap: 12px;
|
overflow-x: auto;
|
}
|
|
.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;
|
text-align: center;
|
|
.finance-icon, .coin-icon, .trending-icon, .help-icon {
|
width: 48px;
|
height: 48px;
|
margin: 0 auto 12px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: $radius-round;
|
background: $bg-secondary;
|
font-size: 24px;
|
|
&.sol {
|
background: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
|
color: white;
|
}
|
|
&.bnb {
|
background: #F3BA2F;
|
color: white;
|
}
|
}
|
|
.finance-name, .coin-name, .trending-name {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 8px;
|
}
|
|
.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;
|
}
|
}
|
|
.leaderboard-section {
|
margin: 24px 16px 16px;
|
|
.leaderboard-tabs {
|
display: flex;
|
gap: 16px;
|
margin-bottom: 12px;
|
overflow-x: auto;
|
|
.tab-item {
|
font-size: $font-md;
|
color: $text-secondary;
|
white-space: nowrap;
|
|
&.active {
|
color: $primary-blue;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.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;
|
|
.item-left {
|
display: flex;
|
gap: 12px;
|
|
.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;
|
}
|
|
.item-meta {
|
font-size: $font-xs;
|
color: $text-secondary;
|
display: flex;
|
gap: 8px;
|
}
|
}
|
}
|
|
.item-right {
|
text-align: right;
|
|
.item-price {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.item-change {
|
font-size: $font-sm;
|
|
&.up {
|
color: $up-green;
|
}
|
|
&.down {
|
color: $down-red;
|
}
|
}
|
}
|
}
|
}
|
|
.view-all {
|
text-align: center;
|
padding: 16px;
|
color: $primary-blue;
|
font-size: $font-md;
|
}
|
}
|
|
.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;
|
border-radius: $radius-lg;
|
padding: 16px;
|
|
.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;
|
}
|
|
.contract-buttons {
|
display: flex;
|
gap: 12px;
|
|
.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;
|
color: $text-white;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
