<template>
|
<div class="discover-page">
|
<!-- 标题栏 -->
|
<div class="header">
|
<h1 class="page-title">发现</h1>
|
<span class="chain-icon">🔗</span>
|
</div>
|
|
<!-- 搜索栏 -->
|
<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>
|
|
<!-- 广告Banner -->
|
<div class="ad-banner">
|
<div class="ad-header">
|
<div class="ad-brand">
|
<span class="ad-icon">🌲</span>
|
<span>Teller</span>
|
</div>
|
<span class="ad-tag">广告</span>
|
</div>
|
<div class="ad-content">
|
<h2 class="ad-title">Earn up to 20% on USDC</h2>
|
<p class="ad-desc">Compounding Yield. No IL. Withdraw Anytime.</p>
|
<h2 class="ad-title-large">Earn up to 20% On USDC</h2>
|
<div class="ad-frog">🐸</div>
|
<p class="ad-desc-small">Earn on USDC. No impermanent loss.</p>
|
</div>
|
<div class="ad-indicators">
|
<span class="indicator active">-</span>
|
<span class="indicator">-</span>
|
</div>
|
</div>
|
|
<!-- 图标网格 -->
|
<div class="icon-grid">
|
<div class="grid-item">
|
<div class="grid-icon gift">🎁</div>
|
<span>赚币中心</span>
|
</div>
|
<div class="grid-item">
|
<div class="grid-icon shopping">🛍️</div>
|
<span>购物</span>
|
</div>
|
<div class="grid-item">
|
<div class="grid-icon faucet">💧</div>
|
<span>领水中心</span>
|
</div>
|
</div>
|
|
<!-- 分类标签 -->
|
<div class="category-tabs">
|
<span class="category-tab active">精选</span>
|
<span class="category-tab">我的</span>
|
<span class="category-tab">GameFi</span>
|
<span class="category-tab">NFT</span>
|
<span class="category-tab">Exchange</span>
|
<span class="category-arrow">▼</span>
|
</div>
|
|
<!-- 链上飙升 -->
|
<div class="surge-section">
|
<div class="section-header">
|
<span class="section-title">链上飙升</span>
|
<span class="section-arrow">></span>
|
</div>
|
<div class="surge-item">
|
<div class="surge-icon">●</div>
|
<div class="surge-content">
|
<div class="surge-title">$BREV Airdrop claim</div>
|
<div class="surge-desc">$BREV 空投领取</div>
|
</div>
|
<div class="surge-pattern">🌀</div>
|
</div>
|
</div>
|
|
<!-- 底部导航 -->
|
<BottomNav />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import BottomNav from '@/components/BottomNav.vue'
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/styles/variables.scss';
|
|
.discover-page {
|
background: $bg-primary;
|
padding-bottom: 60px;
|
min-height: 100vh;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px;
|
|
.page-title {
|
font-size: $font-xxl;
|
font-weight: 500;
|
}
|
|
.chain-icon {
|
font-size: 24px;
|
}
|
}
|
|
.search-bar {
|
display: flex;
|
align-items: center;
|
padding: 0 16px 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;
|
}
|
}
|
|
.ad-banner {
|
margin: 0 16px 16px;
|
background: linear-gradient(135deg, #1a5f3f 0%, #2d8659 100%);
|
border-radius: $radius-lg;
|
padding: 20px;
|
color: white;
|
position: relative;
|
|
.ad-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16px;
|
|
.ad-brand {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: $font-sm;
|
|
.ad-icon {
|
font-size: 16px;
|
}
|
}
|
|
.ad-tag {
|
background: rgba(255, 255, 255, 0.2);
|
padding: 2px 8px;
|
border-radius: $radius-sm;
|
font-size: $font-xs;
|
}
|
}
|
|
.ad-content {
|
position: relative;
|
|
.ad-title {
|
font-size: $font-lg;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.ad-desc {
|
font-size: $font-sm;
|
opacity: 0.9;
|
margin-bottom: 12px;
|
}
|
|
.ad-title-large {
|
font-size: $font-xxl;
|
font-weight: bold;
|
margin-bottom: 8px;
|
}
|
|
.ad-frog {
|
position: absolute;
|
right: 0;
|
top: 0;
|
font-size: 48px;
|
}
|
|
.ad-desc-small {
|
font-size: $font-sm;
|
opacity: 0.9;
|
}
|
}
|
|
.ad-indicators {
|
display: flex;
|
gap: 4px;
|
margin-top: 16px;
|
|
.indicator {
|
width: 20px;
|
height: 3px;
|
background: rgba(255, 255, 255, 0.3);
|
border-radius: 2px;
|
|
&.active {
|
background: white;
|
}
|
}
|
}
|
}
|
|
.icon-grid {
|
display: flex;
|
justify-content: space-around;
|
padding: 16px;
|
border-bottom: 1px solid $border-light;
|
|
.grid-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 8px;
|
|
.grid-icon {
|
width: 56px;
|
height: 56px;
|
border-radius: $radius-lg;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 28px;
|
|
&.gift {
|
background: $primary-blue;
|
}
|
|
&.shopping {
|
background: $primary-blue;
|
}
|
|
&.faucet {
|
background: $primary-blue;
|
}
|
}
|
|
span {
|
font-size: $font-sm;
|
color: $text-primary;
|
}
|
}
|
}
|
|
.category-tabs {
|
display: flex;
|
padding: 12px 16px;
|
gap: 16px;
|
overflow-x: auto;
|
border-bottom: 1px solid $border-light;
|
|
.category-tab {
|
font-size: $font-md;
|
color: $text-secondary;
|
white-space: nowrap;
|
|
&.active {
|
color: $text-primary;
|
font-weight: 500;
|
border-bottom: 2px solid $primary-blue;
|
padding-bottom: 8px;
|
}
|
}
|
|
.category-arrow {
|
margin-left: auto;
|
color: $text-tertiary;
|
}
|
}
|
|
.surge-section {
|
padding: 16px;
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px;
|
|
.section-title {
|
font-size: $font-lg;
|
font-weight: 500;
|
}
|
|
.section-arrow {
|
color: $text-tertiary;
|
}
|
}
|
|
.surge-item {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
padding: 12px;
|
background: $bg-secondary;
|
border-radius: $radius-lg;
|
|
.surge-icon {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
background: $bg-dark;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
font-size: 20px;
|
}
|
|
.surge-content {
|
flex: 1;
|
|
.surge-title {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.surge-desc {
|
font-size: $font-sm;
|
color: $text-secondary;
|
}
|
}
|
|
.surge-pattern {
|
font-size: 32px;
|
}
|
}
|
}
|
</style>
|
