临时edit icon

创建者:
用户FOELZYVQ
Fork(复制)
下载
嵌入
BUG反馈
index.html
style.css
index.js
index.html
            
            <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>
        
编辑器加载中
预览
控制台