<div class="transfer-card-wrapper">
<div class="char-avatar" style="background-image: url('https://files.catbox.moe/$1')"></div>
<div class="transfer-card">
<div class="transfer-header">
<svg class="transfer-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M4,10V7H6V10H4M10,10V7H12V10H10M16,10V7H18V10H16M20,20H2V12L11,3.05L20,12V20M4,18H8V14H4V18M10,18H14V14H10V18M16,18H20V14H16V18Z"/>
</svg>
<div class="transfer-title">转账给{{user}}</div>
</div>
<div class="transfer-amount">$2</div>
<div class="transfer-to">转账成功</div>
<div class="transfer-note">备注: $3</div>
</div>
</div>
<style>
.transfer-card-wrapper {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 16px;
}
.transfer-card {
background: #fff;
border: 1px solid #e9e4f0;
border-radius: 10px;
padding: 12px 16px;
width: fit-content;
min-width: 180px; /* 添加一个最小宽度,防止内容过少时卡片太窄 */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
display: inline-flex;
flex-direction: column;
gap: 4px;
}
.transfer-header {
display: flex;
align-items: center;
gap: 6px;
align-self: flex-start; /* 保持标题靠左 */
}
.transfer-icon {
width: 18px;
height: 18px;
color: #555;
}
.transfer-title {
font-size: 14px;
font-weight: 500;
color: #333;
}
/* 【【【关键修正】】】 */
.transfer-amount,
.transfer-to,
.transfer-note {
width: 100%; /* 强制占满卡片宽度 */
text-align: center; /* 内部文本水平居中 */
margin: 0;
box-sizing: border-box;
}
.transfer-amount {
font-size: 24px;
font-weight: 700;
color: #000;
line-height: 1.2;
}
.transfer-to {
font-size: 13px;
color: #2E8B57;
line-height: 1.2;
}
.transfer-note {
font-size: 12px;
color: #888;
line-height: 1.2;
}
.char-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background-size: cover;
background-position: center;
border: 1px solid rgba(0,0,0,0.05);
margin-top: 4px;
flex-shrink: 0;
}
</style>
index.html
style.css
index.js
index.html