<template>
|
<div class="wallet-page">
|
<!-- 账户信息 -->
|
<div class="account-info">
|
<div class="account-left">
|
<div class="account-icon">⚪</div>
|
<div class="account-details">
|
<div class="account-email">zj0***@gmail.com</div>
|
</div>
|
</div>
|
<div class="account-right">
|
<span class="dropdown">▼</span>
|
<span class="copy-icon">📋</span>
|
<span class="menu-icon">☰</span>
|
</div>
|
</div>
|
|
<!-- 余额显示 -->
|
<div class="balance-display">
|
<div class="balance-amount">¥0.00</div>
|
</div>
|
|
<!-- 充值按钮 -->
|
<div class="recharge-section">
|
<button class="recharge-btn">去充值</button>
|
</div>
|
|
<!-- 快捷操作 -->
|
<div class="quick-actions">
|
<div class="action-item">
|
<div class="action-icon">→</div>
|
<span>转账</span>
|
</div>
|
<div class="action-item">
|
<div class="action-icon receive">↓</div>
|
<span>收款</span>
|
</div>
|
<div class="action-item">
|
<div class="action-icon">L</div>
|
<span>交易历史</span>
|
</div>
|
<div class="action-item">
|
<div class="action-icon">☰</div>
|
<span>更多</span>
|
</div>
|
</div>
|
|
<!-- 金融服务卡片 -->
|
<div class="finance-cards">
|
<div class="finance-card bank">
|
<div class="card-header">
|
<span class="card-title">银行卡</span>
|
<div class="card-icon">☐</div>
|
</div>
|
<div class="card-content">
|
<div class="card-main">去开卡</div>
|
<div class="card-desc">线上线下随时支付</div>
|
</div>
|
</div>
|
<div class="finance-card wealth">
|
<div class="card-header">
|
<span class="card-title">理财</span>
|
<div class="card-icon">🐷</div>
|
</div>
|
<div class="card-content">
|
<div class="card-main">10% 年化收益率</div>
|
<div class="card-desc">稳定币理财 Plus</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 代币列表标题 -->
|
<div class="token-header">
|
<span class="token-title">代币 ¥0.00</span>
|
<div class="token-actions">
|
<span class="action-icon">🔍</span>
|
<span class="action-icon">⚙️</span>
|
<span class="action-icon">+</span>
|
</div>
|
</div>
|
|
<!-- 代币列表 -->
|
<div class="token-list">
|
<div class="token-item" v-for="token in tokenList" :key="token.id">
|
<div class="token-left">
|
<div class="token-icon" :class="token.iconClass">{{ token.icon }}</div>
|
<div class="token-info">
|
<div class="token-name">{{ token.name }}</div>
|
<div class="token-value">{{ token.value }}</div>
|
</div>
|
</div>
|
<div class="token-right">
|
<div class="token-price">{{ token.price }}</div>
|
<div class="token-change">{{ token.change }}</div>
|
<div class="token-fiat">{{ token.fiat }}</div>
|
</div>
|
</div>
|
|
<!-- 理财推广横幅 -->
|
<div class="finance-banner">
|
<span>立享10%年化收益率</span>
|
<span>></span>
|
</div>
|
</div>
|
|
<!-- 底部导航 -->
|
<BottomNav />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import BottomNav from '@/components/BottomNav.vue'
|
|
const tokenList = ref([
|
{ id: 1, icon: 'T', iconClass: 'usdt', name: 'USDT', value: '0.00', price: '¥6.97', change: '0.00%', fiat: '¥0.00' },
|
{ id: 2, icon: '$', iconClass: 'usdc', name: 'USDC', value: '0.00', price: '¥6.98', change: '0.00%', fiat: '¥0.00' },
|
{ id: 3, icon: 'Ξ', iconClass: 'eth', name: 'ETH', value: '0.00', price: '¥...', change: '...', fiat: '¥0.00' }
|
])
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/styles/variables.scss';
|
|
.wallet-page {
|
background: $bg-primary;
|
padding-bottom: 60px;
|
min-height: 100vh;
|
}
|
|
.account-info {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px;
|
|
.account-left {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
|
.account-icon {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
background: linear-gradient(135deg, $primary-blue 0%, $success-green 100%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
font-size: 20px;
|
}
|
|
.account-details {
|
.account-email {
|
font-size: $font-md;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.account-right {
|
display: flex;
|
gap: 12px;
|
align-items: center;
|
}
|
}
|
|
.balance-display {
|
text-align: center;
|
padding: 24px 16px;
|
|
.balance-amount {
|
font-size: 48px;
|
font-weight: bold;
|
}
|
}
|
|
.recharge-section {
|
padding: 0 16px 24px;
|
|
.recharge-btn {
|
width: 100%;
|
background: $primary-blue;
|
color: white;
|
border: none;
|
border-radius: $radius-xl;
|
padding: 16px;
|
font-size: $font-lg;
|
font-weight: 500;
|
cursor: pointer;
|
}
|
}
|
|
.quick-actions {
|
display: flex;
|
justify-content: space-around;
|
padding: 16px;
|
border-bottom: 1px solid $border-light;
|
|
.action-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 8px;
|
|
.action-icon {
|
width: 48px;
|
height: 48px;
|
border-radius: 50%;
|
background: $bg-secondary;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24px;
|
color: $text-secondary;
|
|
&.receive {
|
background: #14f195;
|
color: white;
|
}
|
}
|
|
span {
|
font-size: $font-sm;
|
color: $text-primary;
|
}
|
}
|
}
|
|
.finance-cards {
|
display: flex;
|
gap: 12px;
|
padding: 16px;
|
|
.finance-card {
|
flex: 1;
|
background: $bg-primary;
|
border: 1px solid $border-light;
|
border-radius: $radius-lg;
|
padding: 16px;
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px;
|
|
.card-title {
|
font-size: $font-md;
|
font-weight: 500;
|
}
|
|
.card-icon {
|
font-size: 20px;
|
}
|
}
|
|
.card-content {
|
.card-main {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.card-desc {
|
font-size: $font-xs;
|
color: $text-secondary;
|
}
|
}
|
|
&.bank {
|
.card-icon {
|
background: $bg-dark;
|
color: white;
|
width: 24px;
|
height: 24px;
|
border-radius: $radius-sm;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
&.wealth {
|
.card-icon {
|
font-size: 24px;
|
}
|
}
|
}
|
}
|
|
.token-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px;
|
|
.token-title {
|
font-size: $font-lg;
|
font-weight: 500;
|
}
|
|
.token-actions {
|
display: flex;
|
gap: 16px;
|
|
.action-icon {
|
font-size: 20px;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.token-list {
|
.token-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 16px;
|
border-bottom: 1px solid $border-light;
|
|
.token-left {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
|
.token-icon {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: bold;
|
color: white;
|
|
&.usdt {
|
background: #26a17b;
|
}
|
|
&.usdc {
|
background: $primary-blue;
|
}
|
|
&.eth {
|
background: #627eea;
|
}
|
}
|
|
.token-info {
|
.token-name {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.token-value {
|
font-size: $font-sm;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.token-right {
|
text-align: right;
|
|
.token-price {
|
font-size: $font-md;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.token-change {
|
font-size: $font-sm;
|
color: $text-secondary;
|
margin-bottom: 4px;
|
}
|
|
.token-fiat {
|
font-size: $font-sm;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.finance-banner {
|
margin: 16px;
|
background: $primary-light-blue;
|
border-radius: $radius-lg;
|
padding: 12px 16px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
color: $primary-blue;
|
font-size: $font-sm;
|
}
|
}
|
</style>
|
