<template>
|
<div class="market-page">
|
<!-- 搜索栏 -->
|
<div class="search-bar">
|
<div class="search-input-wrapper">
|
<span class="search-icon">🔍</span>
|
<span class="search-placeholder">搜索代币/合约/股票/DApp</span>
|
</div>
|
<div class="search-scan">☐</div>
|
</div>
|
|
<!-- 主标签 -->
|
<div class="main-tabs">
|
<span class="tab-item active">代币</span>
|
<span class="tab-item">合约</span>
|
<span class="tab-item">股票</span>
|
</div>
|
|
<!-- 功能图标 -->
|
<div class="feature-icons">
|
<div class="feature-item">
|
<div class="feature-icon blue">G</div>
|
<span>金狗雷达</span>
|
</div>
|
<div class="feature-item">
|
<div class="feature-icon black">-</div>
|
<span>扫链</span>
|
</div>
|
<div class="feature-item">
|
<div class="feature-icon blue">👁</div>
|
<span>监控</span>
|
</div>
|
<div class="feature-arrow">></div>
|
</div>
|
|
<!-- 市场热度 -->
|
<div class="market-hotness">
|
<div class="section-title">市场热度</div>
|
<div class="hotness-cards">
|
<div class="hotness-card">
|
<div class="hotness-name">中文潮流</div>
|
<div class="hotness-change up">+39.68%</div>
|
<div class="hotness-volume">290.5K</div>
|
</div>
|
<div class="hotness-card">
|
<div class="hotness-name">日语文化</div>
|
<div class="hotness-change up">+0.75%</div>
|
<div class="hotness-volume">97.3K</div>
|
</div>
|
<div class="hotness-card">
|
<div class="hotness-name">鲸鱼</div>
|
<div class="hotness-change up">+131.09%</div>
|
<div class="hotness-volume">24.8K</div>
|
</div>
|
<div class="hotness-arrow">></div>
|
</div>
|
</div>
|
|
<!-- 二级导航 -->
|
<div class="secondary-nav">
|
<span class="nav-item">收藏</span>
|
<span class="nav-item active">Hot Picks</span>
|
<span class="nav-item">全链</span>
|
<span class="nav-item">新币榜</span>
|
<span class="nav-item">涨幅榜</span>
|
<span class="nav-item">A</span>
|
</div>
|
|
<!-- 数据筛选 -->
|
<div class="data-filters">
|
<div class="filter-item">
|
<span>☐</span>
|
<span>24h ▼</span>
|
</div>
|
<div class="filter-item">市值 ⇅</div>
|
<div class="filter-item">交易额 ⇅</div>
|
<div class="filter-item">最新价格 ⇅</div>
|
<div class="filter-item">涨跌幅 ⇅</div>
|
</div>
|
|
<!-- 提醒横幅 -->
|
<div class="alert-banner">
|
<span>开启提醒,第一时间获取 Hot Picks 上新 开启</span>
|
<span class="close-icon">×</span>
|
</div>
|
|
<!-- 代币列表 -->
|
<div class="token-list">
|
<div class="token-item" v-for="token in tokenData" :key="token.id">
|
<div class="token-left">
|
<div class="token-icon">{{ token.icon }}</div>
|
<div class="token-info">
|
<div class="token-name-row">
|
<span class="token-name">{{ token.name }}</span>
|
<span class="token-badge" :class="token.badgeType">{{ token.badge }}</span>
|
<span class="token-time">{{ token.time }}</span>
|
</div>
|
<div class="token-meta">
|
<span>{{ token.marketCap }}</span>
|
<span>{{ token.volume }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="token-right">
|
<div class="token-price">{{ token.price }}</div>
|
<div class="token-change" :class="token.change > 0 ? 'up' : 'down'">
|
{{ token.change > 0 ? '+' : '' }}{{ token.change }}%
|
</div>
|
</div>
|
<div class="token-arrow">></div>
|
</div>
|
</div>
|
|
<!-- 底部导航 -->
|
<BottomNav />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import BottomNav from '@/components/BottomNav.vue'
|
|
const tokenData = ref([
|
{ id: 1, icon: '🐴', name: '我踏马来了', badge: '👍', badgeType: 'green', time: '7D', marketCap: '$702.53万', volume: '$2,501.02万', price: '$0.0070253', change: 203.63 },
|
{ id: 2, icon: '●', name: 'Shitcoin', badge: '👍', badgeType: 'yellow', time: '1D', marketCap: '$298.38万', volume: '$538.05万', price: '$0.0029454', change: 808.85 },
|
{ id: 3, icon: '⚙️', name: 'FACTORY', badge: '$', badgeType: 'green', time: '14h', marketCap: '$52.73万', volume: '$331.15万', price: '$0.00052738', change: 7685.32 }
|
])
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/styles/variables.scss';
|
|
.market-page {
|
background: $bg-primary;
|
padding-bottom: 60px;
|
min-height: 100vh;
|
}
|
|
.search-bar {
|
display: flex;
|
align-items: center;
|
padding: 12px 16px;
|
gap: 12px;
|
|
.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;
|
}
|
}
|
|
.search-scan {
|
width: 24px;
|
height: 24px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 18px;
|
}
|
}
|
|
.main-tabs {
|
display: flex;
|
padding: 12px 16px;
|
gap: 24px;
|
border-bottom: 1px solid $border-light;
|
|
.tab-item {
|
font-size: $font-md;
|
color: $text-secondary;
|
|
&.active {
|
color: $text-primary;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.feature-icons {
|
display: flex;
|
align-items: center;
|
padding: 16px;
|
gap: 24px;
|
|
.feature-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 8px;
|
|
.feature-icon {
|
width: 48px;
|
height: 48px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
font-weight: bold;
|
|
&.blue {
|
background: $primary-blue;
|
}
|
|
&.black {
|
background: $bg-dark;
|
}
|
}
|
|
span {
|
font-size: $font-xs;
|
color: $text-primary;
|
}
|
}
|
|
.feature-arrow {
|
margin-left: auto;
|
color: $text-tertiary;
|
}
|
}
|
|
.market-hotness {
|
padding: 0 16px 16px;
|
|
.section-title {
|
font-size: $font-lg;
|
font-weight: 500;
|
margin-bottom: 12px;
|
}
|
|
.hotness-cards {
|
display: flex;
|
gap: 12px;
|
overflow-x: auto;
|
|
.hotness-card {
|
background: $primary-light-blue;
|
border-radius: $radius-lg;
|
padding: 12px 16px;
|
min-width: 100px;
|
|
.hotness-name {
|
font-size: $font-sm;
|
margin-bottom: 8px;
|
}
|
|
.hotness-change {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 4px;
|
|
&.up {
|
color: $up-green;
|
}
|
}
|
|
.hotness-volume {
|
font-size: $font-xs;
|
color: $text-secondary;
|
}
|
}
|
|
.hotness-arrow {
|
margin-left: auto;
|
color: $text-tertiary;
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
|
.secondary-nav {
|
display: flex;
|
padding: 12px 16px;
|
gap: 16px;
|
overflow-x: auto;
|
border-bottom: 1px solid $border-light;
|
|
.nav-item {
|
font-size: $font-md;
|
color: $text-secondary;
|
white-space: nowrap;
|
|
&.active {
|
color: $primary-blue;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.data-filters {
|
display: flex;
|
padding: 8px 16px;
|
gap: 12px;
|
font-size: $font-xs;
|
color: $text-secondary;
|
border-bottom: 1px solid $border-light;
|
|
.filter-item {
|
flex: 1;
|
text-align: center;
|
}
|
}
|
|
.alert-banner {
|
background: $primary-light-blue;
|
padding: 12px 16px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: $font-sm;
|
color: $primary-blue;
|
|
.close-icon {
|
font-size: 20px;
|
cursor: pointer;
|
}
|
}
|
|
.token-list {
|
.token-item {
|
display: flex;
|
align-items: center;
|
padding: 12px 16px;
|
border-bottom: 1px solid $border-light;
|
|
.token-left {
|
display: flex;
|
gap: 12px;
|
flex: 1;
|
|
.token-icon {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
background: $bg-secondary;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 20px;
|
}
|
|
.token-info {
|
flex: 1;
|
|
.token-name-row {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
margin-bottom: 4px;
|
|
.token-name {
|
font-size: $font-md;
|
font-weight: 500;
|
}
|
|
.token-badge {
|
font-size: $font-xs;
|
|
&.green {
|
color: $success-green;
|
}
|
|
&.yellow {
|
color: $warning-orange;
|
}
|
}
|
|
.token-time {
|
font-size: $font-xs;
|
color: $text-tertiary;
|
}
|
}
|
|
.token-meta {
|
font-size: $font-xs;
|
color: $text-secondary;
|
display: flex;
|
gap: 8px;
|
}
|
}
|
}
|
|
.token-right {
|
text-align: right;
|
margin-right: 8px;
|
|
.token-price {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.token-change {
|
font-size: $font-sm;
|
|
&.up {
|
color: $up-green;
|
}
|
|
&.down {
|
color: $down-red;
|
}
|
}
|
}
|
|
.token-arrow {
|
color: $text-tertiary;
|
font-size: 16px;
|
}
|
}
|
}
|
</style>
|
