1

zj

2026-01-09 6a39094090bb96721acd11941d84c84336faefd0

 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>