优化领取页第一步布局与第二步操作提示

- 去掉与顶部重复的商品信息,压缩间距便于一屏展示
- 移动端步骤指示器保持右上角
- 更新 UID、换绑角色增加悬浮功能说明
This commit is contained in:
yml2213
2026-07-10 20:58:29 +08:00
parent a445196512
commit 5ed6890cc5
5 changed files with 117 additions and 49 deletions
+77 -9
View File
@@ -779,10 +779,25 @@ select {
font-weight: 600;
}
.claim-uid-step .ant-card-body {
gap: 10px;
}
.claim-uid-step-title.ant-typography {
margin: 0 !important;
font-size: 20px !important;
line-height: 1.3 !important;
}
.claim-uid-step-desc {
font-size: 13px;
line-height: 1.45;
}
.claim-uid-guide {
margin: 14px 0 0;
padding: 8px;
border-radius: 10px;
margin: 4px 0 0;
padding: 6px;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #e5e7eb;
}
@@ -790,28 +805,81 @@ select {
.claim-uid-guide-image {
display: block;
width: 100%;
max-width: 420px;
max-width: 360px;
max-height: 160px;
margin: 0 auto;
border-radius: 8px;
border-radius: 6px;
border: 1px solid #e2e8f0;
object-fit: contain;
background: #fff;
}
.claim-uid-guide-caption {
margin: 8px 0 0;
margin: 6px 0 0;
text-align: center;
color: #64748b;
font-size: 12px;
line-height: 1.4;
line-height: 1.35;
}
.claim-uid-warning {
margin: 14px 0 0;
margin: 2px 0 0;
color: #ff4d4f;
font-size: 13px;
font-weight: 600;
line-height: 1.5;
line-height: 1.45;
}
@media (max-width: 480px) {
.claim-page {
padding: 12px;
gap: 10px;
}
.claim-header-card .ant-card-body,
.claim-content-card .ant-card-body {
gap: 12px;
}
.claim-header-copy {
/* 为右上角步骤条预留空间 */
padding-right: 112px;
}
.claim-header-copy h1 {
font-size: 22px;
}
.claim-step-indicator {
position: absolute;
top: 16px;
right: 16px;
max-width: 100px;
align-items: flex-end;
}
.claim-step-dot {
width: 26px;
height: 26px;
font-size: 12px;
}
.claim-step-dots {
gap: 5px;
}
.claim-step-progress-text {
text-align: right;
font-size: 12px;
}
.claim-uid-step-title.ant-typography {
font-size: 18px !important;
}
.claim-uid-guide-image {
max-height: 140px;
}
}
.claim-info-item {