From 6a39094090bb96721acd11941d84c84336faefd0 Mon Sep 17 00:00:00 2001
From: zj <1772600164@qq.com>
Date: Fri, 09 Jan 2026 18:59:24 +0800
Subject: [PATCH] 1
---
src/views/Wallet.vue | 217 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 134 insertions(+), 83 deletions(-)
diff --git a/src/views/Wallet.vue b/src/views/Wallet.vue
index b832e0b..482fb1c 100644
--- a/src/views/Wallet.vue
+++ b/src/views/Wallet.vue
@@ -1,81 +1,91 @@
<template>
<div class="wallet-page">
<!-- 账户信息 -->
- <div class="account-info">
+ <Card class="account-info">
<div class="account-left">
- <div class="account-icon">⚪</div>
+ <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">
- <span class="dropdown">▼</span>
- <span class="copy-icon">📋</span>
- <span class="menu-icon">☰</span>
+ <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>
- </div>
+ </Card>
<!-- 余额显示 -->
- <div class="balance-display">
+ <Card class="balance-display">
<div class="balance-amount">¥0.00</div>
- </div>
+ </Card>
<!-- 充值按钮 -->
<div class="recharge-section">
- <button class="recharge-btn">去充值</button>
+ <AppButton variant="primary" size="large" full-width class="recharge-btn">去充值</AppButton>
</div>
<!-- 快捷操作 -->
<div class="quick-actions">
<div class="action-item">
- <div class="action-icon">→</div>
+ <div class="action-icon">
+ <WalletIcons type="send" />
+ </div>
<span>转账</span>
</div>
<div class="action-item">
- <div class="action-icon receive">↓</div>
+ <div class="action-icon receive">
+ <WalletIcons type="receive" />
+ </div>
<span>收款</span>
</div>
<div class="action-item">
- <div class="action-icon">L</div>
+ <div class="action-icon">
+ <WalletIcons type="history" />
+ </div>
<span>交易历史</span>
</div>
<div class="action-item">
- <div class="action-icon">☰</div>
+ <div class="action-icon">
+ <WalletIcons type="more" />
+ </div>
<span>更多</span>
</div>
</div>
<!-- 金融服务卡片 -->
<div class="finance-cards">
- <div class="finance-card bank">
+ <Card hoverable class="finance-card bank">
<div class="card-header">
<span class="card-title">银行卡</span>
- <div class="card-icon">☐</div>
+ <Icon icon="solar:card-bold" class="card-icon" />
</div>
<div class="card-content">
<div class="card-main">去开卡</div>
<div class="card-desc">线上线下随时支付</div>
</div>
- </div>
- <div class="finance-card wealth">
+ </Card>
+ <Card hoverable class="finance-card wealth">
<div class="card-header">
<span class="card-title">理财</span>
- <div class="card-icon">🐷</div>
+ <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>
- </div>
+ </Card>
</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>
+ <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>
@@ -97,10 +107,10 @@
</div>
<!-- 理财推广横幅 -->
- <div class="finance-banner">
+ <Card hoverable class="finance-banner">
<span>立享10%年化收益率</span>
- <span>></span>
- </div>
+ <Icon icon="solar:arrow-right-linear" />
+ </Card>
</div>
<!-- 底部导航 -->
@@ -110,7 +120,11 @@
<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' },
@@ -129,10 +143,11 @@
}
.account-info {
+ margin: $spacing-lg;
+ padding: $spacing-lg !important;
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px;
.account-left {
display: flex;
@@ -140,15 +155,19 @@
gap: 12px;
.account-icon {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: linear-gradient(135deg, $primary-blue 0%, $success-green 100%);
+ 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;
- font-size: 20px;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
}
.account-details {
@@ -161,63 +180,63 @@
.account-right {
display: flex;
- gap: 12px;
+ 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: 24px 16px;
+ padding: $spacing-xxl $spacing-lg !important;
+ background: $primary-light;
.balance-amount {
- font-size: 48px;
+ font-size: $font-display;
font-weight: bold;
+ color: $text-primary;
}
}
.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;
- }
+ padding: 0 $spacing-lg $spacing-xxl;
}
.quick-actions {
display: flex;
justify-content: space-around;
- padding: 16px;
- border-bottom: 1px solid $border-light;
+ padding: $spacing-lg;
+ margin-bottom: $spacing-lg;
+ background: $bg-tertiary;
.action-item {
display: flex;
flex-direction: column;
align-items: center;
- gap: 8px;
+ gap: $spacing-sm;
.action-icon {
- width: 48px;
- height: 48px;
- border-radius: 50%;
- background: $bg-secondary;
+ width: 56px;
+ height: 56px;
+ border-radius: $radius-round;
+ background: $primary-light;
display: flex;
align-items: center;
justify-content: center;
- font-size: 24px;
- color: $text-secondary;
+
+ :deep(svg) {
+ width: 24px;
+ height: 24px;
+ }
&.receive {
- background: #14f195;
- color: white;
+ background: $success-light;
}
}
@@ -230,15 +249,12 @@
.finance-cards {
display: flex;
- gap: 12px;
- padding: 16px;
+ gap: $spacing-md;
+ padding: 0 $spacing-lg $spacing-lg;
.finance-card {
flex: 1;
- background: $bg-primary;
- border: 1px solid $border-light;
- border-radius: $radius-lg;
- padding: 16px;
+ padding: $spacing-lg !important;
.card-header {
display: flex;
@@ -270,21 +286,37 @@
}
&.bank {
+ background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
+ color: $text-white;
+
+ .card-title, .card-main, .card-desc {
+ color: $text-white;
+ }
+
.card-icon {
- background: $bg-dark;
- color: white;
+ color: $text-white;
width: 24px;
height: 24px;
- border-radius: $radius-sm;
- display: flex;
- align-items: center;
- justify-content: center;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
}
}
&.wealth {
+ background: linear-gradient(135deg, $success 0%, $success-light 100%);
+
.card-icon {
- font-size: 24px;
+ width: 24px;
+ height: 24px;
+ color: $text-primary;
+
+ svg {
+ width: 24px;
+ height: 24px;
+ }
}
}
}
@@ -294,31 +326,44 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px;
+ padding: $spacing-lg;
+ margin-bottom: $spacing-sm;
.token-title {
font-size: $font-lg;
- font-weight: 500;
+ font-weight: 600;
}
.token-actions {
display: flex;
- gap: 16px;
+ gap: $spacing-lg;
.action-icon {
- font-size: 20px;
+ 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: 16px;
- border-bottom: 1px solid $border-light;
+ 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;
@@ -340,7 +385,7 @@
}
&.usdc {
- background: $primary-blue;
+ background: $primary;
}
&.eth {
@@ -385,15 +430,21 @@
}
.finance-banner {
- margin: 16px;
- background: $primary-light-blue;
- border-radius: $radius-lg;
- padding: 12px 16px;
+ margin: $spacing-lg;
+ padding: $spacing-md $spacing-lg !important;
display: flex;
justify-content: space-between;
align-items: center;
- color: $primary-blue;
+ background: $primary-light;
+ color: $primary;
font-size: $font-sm;
+ font-weight: 500;
+
+ svg {
+ width: 18px;
+ height: 18px;
+ color: $primary;
+ }
}
}
</style>
--
Gitblit v1.9.3