<template>
|
<div class="wallet-page">
|
<!-- 账户信息 -->
|
<Card class="account-info">
|
<div class="account-left">
|
<div class="account-icon">
|
<Icon icon="solar:user-circle-bold" />
|
</div>
|
<div class="account-details">
|
<div class="account-email">zj0***@gmail.com</div>
|
</div>
|
</div>
|
<div class="account-right">
|
<Icon icon="solar:alt-arrow-down-linear" class="dropdown" />
|
<Icon icon="solar:copy-bold" class="copy-icon" />
|
<Icon icon="solar:hamburger-menu-bold" class="menu-icon" />
|
</div>
|
</Card>
|
|
<!-- 余额显示 -->
|
<Card class="balance-display">
|
<div class="balance-amount">¥0.00</div>
|
</Card>
|
|
<!-- 充值按钮 -->
|
<div class="recharge-section">
|
<AppButton variant="primary" size="large" full-width class="recharge-btn">去充值</AppButton>
|
</div>
|
|
<!-- 快捷操作 -->
|
<div class="quick-actions">
|
<div class="action-item">
|
<div class="action-icon">
|
<WalletIcons type="send" />
|
</div>
|
<span>转账</span>
|
</div>
|
<div class="action-item">
|
<div class="action-icon receive">
|
<WalletIcons type="receive" />
|
</div>
|
<span>收款</span>
|
</div>
|
<div class="action-item">
|
<div class="action-icon">
|
<WalletIcons type="history" />
|
</div>
|
<span>交易历史</span>
|
</div>
|
<div class="action-item">
|
<div class="action-icon">
|
<WalletIcons type="more" />
|
</div>
|
<span>更多</span>
|
</div>
|
</div>
|
|
<!-- 金融服务卡片 -->
|
<div class="finance-cards">
|
<Card hoverable class="finance-card bank">
|
<div class="card-header">
|
<span class="card-title">银行卡</span>
|
<Icon icon="solar:card-bold" class="card-icon" />
|
</div>
|
<div class="card-content">
|
<div class="card-main">去开卡</div>
|
<div class="card-desc">线上线下随时支付</div>
|
</div>
|
</Card>
|
<Card hoverable class="finance-card wealth">
|
<div class="card-header">
|
<span class="card-title">理财</span>
|
<Icon icon="solar:wallet-money-bold" class="card-icon" />
|
</div>
|
<div class="card-content">
|
<div class="card-main">10% 年化收益率</div>
|
<div class="card-desc">稳定币理财 Plus</div>
|
</div>
|
</Card>
|
</div>
|
|
<!-- 代币列表标题 -->
|
<div class="token-header">
|
<span class="token-title">代币 ¥0.00</span>
|
<div class="token-actions">
|
<Icon icon="solar:magnifer-bold" class="action-icon" />
|
<Icon icon="solar:settings-bold" class="action-icon" />
|
<Icon icon="solar:add-circle-bold" class="action-icon" />
|
</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>
|
|
<!-- 理财推广横幅 -->
|
<Card hoverable class="finance-banner">
|
<span>立享10%年化收益率</span>
|
<Icon icon="solar:arrow-right-linear" />
|
</Card>
|
</div>
|
|
<!-- 底部导航 -->
|
<BottomNav />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import { Icon } from '@iconify/vue'
|
import BottomNav from '@/components/BottomNav.vue'
|
import Card from '@/components/Card.vue'
|
import AppButton from '@/components/Button.vue'
|
import WalletIcons from '@/components/icons/WalletIcons.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 {
|
margin: $spacing-lg;
|
padding: $spacing-lg !important;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.account-left {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
|
.account-icon {
|
width: 48px;
|
height: 48px;
|
border-radius: $radius-round;
|
background: linear-gradient(135deg, $primary 0%, $success 100%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
|
svg {
|
width: 24px;
|
height: 24px;
|
}
|
}
|
|
.account-details {
|
.account-email {
|
font-size: $font-md;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.account-right {
|
display: flex;
|
gap: $spacing-md;
|
align-items: center;
|
|
svg {
|
width: 20px;
|
height: 20px;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.balance-display {
|
margin: 0 $spacing-lg $spacing-lg;
|
text-align: center;
|
padding: $spacing-xxl $spacing-lg !important;
|
background: $primary-light;
|
|
.balance-amount {
|
font-size: $font-display;
|
font-weight: bold;
|
color: $text-primary;
|
}
|
}
|
|
.recharge-section {
|
padding: 0 $spacing-lg $spacing-xxl;
|
}
|
|
.quick-actions {
|
display: flex;
|
justify-content: space-around;
|
padding: $spacing-lg;
|
margin-bottom: $spacing-lg;
|
background: $bg-tertiary;
|
|
.action-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: $spacing-sm;
|
|
.action-icon {
|
width: 56px;
|
height: 56px;
|
border-radius: $radius-round;
|
background: $primary-light;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
:deep(svg) {
|
width: 24px;
|
height: 24px;
|
}
|
|
&.receive {
|
background: $success-light;
|
}
|
}
|
|
span {
|
font-size: $font-sm;
|
color: $text-primary;
|
}
|
}
|
}
|
|
.finance-cards {
|
display: flex;
|
gap: $spacing-md;
|
padding: 0 $spacing-lg $spacing-lg;
|
|
.finance-card {
|
flex: 1;
|
padding: $spacing-lg !important;
|
|
.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 {
|
background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
|
color: $text-white;
|
|
.card-title, .card-main, .card-desc {
|
color: $text-white;
|
}
|
|
.card-icon {
|
color: $text-white;
|
width: 24px;
|
height: 24px;
|
|
svg {
|
width: 24px;
|
height: 24px;
|
}
|
}
|
}
|
|
&.wealth {
|
background: linear-gradient(135deg, $success 0%, $success-light 100%);
|
|
.card-icon {
|
width: 24px;
|
height: 24px;
|
color: $text-primary;
|
|
svg {
|
width: 24px;
|
height: 24px;
|
}
|
}
|
}
|
}
|
}
|
|
.token-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: $spacing-lg;
|
margin-bottom: $spacing-sm;
|
|
.token-title {
|
font-size: $font-lg;
|
font-weight: 600;
|
}
|
|
.token-actions {
|
display: flex;
|
gap: $spacing-lg;
|
|
.action-icon {
|
width: 20px;
|
height: 20px;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.token-list {
|
padding: 0 $spacing-lg;
|
|
.token-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: $spacing-lg;
|
margin-bottom: $spacing-sm;
|
background: $bg-card;
|
border-radius: $radius-md;
|
box-shadow: $shadow-xs;
|
transition: all $transition-base;
|
|
&:hover {
|
background: $bg-card-hover;
|
box-shadow: $shadow-sm;
|
}
|
|
.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;
|
}
|
|
&.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: $spacing-lg;
|
padding: $spacing-md $spacing-lg !important;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
background: $primary-light;
|
color: $primary;
|
font-size: $font-sm;
|
font-weight: 500;
|
|
svg {
|
width: 18px;
|
height: 18px;
|
color: $primary;
|
}
|
}
|
}
|
</style>
|
