feat(user-center): 官方认证面板 1:1 复刻参考主题视觉

- 面板主体改为 Zibll 同款 colorful-bg hero 卡片(大图标/标题/状态区)
- 保留云认证 modal 流程与 data-* 功能钩子,13 个钩子一一对应
- 清理旧 uc-auth-card 面板样式与无引用的 uc-auth-upload/apply-detail 死样式
- 新增 #panel-auth 去壳样式,去除外层白卡使卡片成为唯一内容
This commit is contained in:
2026-09-16 18:06:48 +08:00
parent 098df7f921
commit fb5cdf247d
2 changed files with 88 additions and 115 deletions
+11 -49
View File
@@ -504,43 +504,21 @@
/* ==================== 官方认证面板 ==================== */
.uc-auth-panel { overflow: hidden; }
.uc-auth-card {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
min-height: 210px;
overflow: hidden;
border-radius: 14px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), rgba(124, 92, 220, 0.08));
/* 面板内容为 Zibll 同款 colorful-bg hero 卡片(参考主题 1:1),去掉外层白卡壳 */
.uc-content #panel-auth.dashboard-panel {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.uc-auth-card__art {
display: grid;
place-items: center;
background: linear-gradient(150deg, #3988f4, #7567de);
color: #fff;
font-size: 46px;
/* 认证按钮(Zibll .but.jb-blue.padding-lg.btn-block 工具类) */
.uc-content #panel-auth .but[data-auth-modal-open] {
width: 100%;
margin: 20px 0 0;
}
.uc-auth-card__content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 28px;
}
.uc-auth-card__content small { color: var(--color-primary); font-weight: 700; }
.uc-auth-card__content h2 { margin: 5px 0 9px; font-size: 24px; }
.uc-auth-card__content p,
.uc-auth-card__content time { margin: 0; color: var(--color-ink-4); font-size: 13px; line-height: 1.7; }
.uc-auth-card__notice { margin-top: 14px; color: var(--color-error, #dc2626); font-size: 13px; }
.uc-auth-apply-open { margin-top: 18px; min-width: 112px; }
.uc-auth-card--verified { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08)); }
.uc-auth-card--verified .uc-auth-card__art { background: linear-gradient(150deg, #20a77d, #3287df); }
.uc-auth-modal { z-index: 620; }
.uc-auth-modal__dialog { width: min(620px, calc(100vw - 28px)); max-width: 620px; max-height: min(760px, calc(100vh - 40px)); overflow: auto; background: var(--surface-1, #fff); }
.aksrt-identity-modal-shell .aksrt-modal-runtime__dialog { width: min(620px, calc(100vw - 28px)); max-width: 620px; }
.aksrt-identity-modal-shell .uc-auth-modal__dialog { width: auto; max-width: none; max-height: none; overflow: visible; background: transparent; }
@@ -556,30 +534,14 @@
.uc-auth-form textarea.form-control { resize: vertical; }
.uc-auth-consent { display: flex; align-items: flex-start; gap: 8px; color: var(--color-ink-3); font-size: 13px; font-weight: 400; line-height: 1.6; }
.uc-auth-consent input { flex: 0 0 auto; margin-top: 3px; }
.uc-auth-upload small { color: var(--color-ink-4); font-weight: 400; }
.uc-auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; }
.uc-auth-form__message { min-height: 18px; color: var(--color-error, #dc2626); font-size: 12px; text-align: center; }
.uc-auth-upload__previews { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-auth-upload__previews img,
.uc-auth-proof-list .preview-item { width: 82px; height: 82px; border-radius: 8px; overflow: hidden; object-fit: cover; }
.uc-auth-proof-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.uc-auth-proof-list img { width: 100%; height: 100%; object-fit: cover; }
.uc-auth-pending { text-align: center; padding: 4px 0 18px; }
.uc-auth-pending > span { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; background: rgba(245, 158, 11, 0.14); color: #a66e0b; font-size: 24px; }
.uc-auth-pending h3 { margin: 0 0 7px; }
.uc-auth-pending p { margin: 0; color: var(--color-ink-4); font-size: 13px; }
.uc-auth-apply-detail { display: grid; gap: 0; border-top: 1px solid var(--color-line-soft); }
.uc-auth-apply-detail dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--color-line-soft); font-size: 13px; }
.uc-auth-apply-detail dt { color: var(--color-ink-4); }
.uc-auth-apply-detail dd { margin: 0; color: var(--color-ink-2); }
.uc-auth-modal__confirm { width: 100%; margin-top: 20px; }
@media (max-width: 640px) {
.uc-auth-card { grid-template-columns: 92px minmax(0, 1fr); min-height: 180px; }
.uc-auth-card__art { font-size: 34px; }
.uc-auth-card__content { padding: 20px 17px; }
.uc-auth-card__content h2 { font-size: 20px; }
.uc-auth-modal__dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 88vh; margin: 0; border-radius: 18px 18px 0 0; }
}