feat: 更新 '@capp/eden' 依赖至 0.0.14，优化资产中心页面钱包展示样式和信息
This commit is contained in:
@@ -70,23 +70,52 @@ function handleAction(actionId: string) {
|
||||
</div>
|
||||
</div>
|
||||
<empty v-if="wallets.length === 0" class="my-10" />
|
||||
<div v-else class="flex flex-col gap-4">
|
||||
<div v-else class="wallet-grid">
|
||||
<div
|
||||
v-for="wallet in wallets"
|
||||
:key="wallet.id"
|
||||
class="card rounded-2xl overflow-hidden shadow-sm p-5"
|
||||
class="wallet-card"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="text-sm text-[#666] mb-1 flex items-center gap-2 font-bold">
|
||||
<ion-icon :icon="cardOutline" class="text-xl text-primary" />
|
||||
<!-- 卡片头部 -->
|
||||
<div class="wallet-header">
|
||||
<div class="wallet-icon-wrapper">
|
||||
<ion-icon :icon="cardOutline" class="wallet-icon" />
|
||||
</div>
|
||||
<div class="wallet-title">
|
||||
<div class="wallet-name">
|
||||
{{ wallet.walletType.name }}
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-[#1a1a1a]">
|
||||
¥ {{ formatAmount(wallet.available) }}
|
||||
<div class="wallet-code">
|
||||
{{ wallet.walletType.code }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 余额信息 -->
|
||||
<div class="balance-section">
|
||||
<div class="balance-label">
|
||||
可用余额
|
||||
</div>
|
||||
<div class="balance-amount">
|
||||
<span class="currency">¥</span>
|
||||
<span class="amount">{{ formatAmount(wallet.available) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 额外信息 -->
|
||||
<div class="wallet-footer">
|
||||
<div class="footer-item">
|
||||
<span class="footer-label">冻结：</span>
|
||||
<span class="footer-value">¥{{ formatAmount(wallet.frozen || 0) }}</span>
|
||||
</div>
|
||||
<div class="footer-item">
|
||||
<span class="footer-label">总额：</span>
|
||||
<span class="footer-value">¥{{ formatAmount(wallet.available || 0) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 装饰元素 -->
|
||||
<div class="card-decoration" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -101,7 +130,147 @@ function handleAction(actionId: string) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
/* background: linear-gradient(45deg, #ffffff, #ffdbdb 100%); */
|
||||
|
||||
.wallet-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.wallet-card {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fff9f9 100%);
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(196, 30, 58, 0.08);
|
||||
}
|
||||
|
||||
.wallet-card:active {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.wallet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.wallet-icon-wrapper {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(196, 30, 58, 0.25);
|
||||
}
|
||||
|
||||
.wallet-icon {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wallet-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wallet-name {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 1px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.wallet-code {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.balance-section {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.balance-label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.balance-amount {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #c41e3a;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: #c41e3a;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wallet-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.footer-label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-value {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-decoration {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: -20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: radial-gradient(circle, rgba(196, 30, 58, 0.05) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 为不同的钱包添加不同的装饰颜色 */
|
||||
.wallet-card:nth-child(2) .card-decoration {
|
||||
background: radial-gradient(circle, rgba(255, 140, 0, 0.05) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.wallet-card:nth-child(3) .card-decoration {
|
||||
background: radial-gradient(circle, rgba(30, 136, 229, 0.05) 0%, transparent 70%);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user