fix(user-center): embed official certification panel
This commit is contained in:
kate522 committed
1 parent
d3bf75fbea
commit
0a04c3e4cc
22 files changed
+415
-461
No files matched your search
@@ -1,80 +0,0 @@
|
||||
/**
|
||||
* User identity auth page styles (zibll user-auth).
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
.aksrt-user-auth-panel {
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .colorful-bg.c-blue {
|
||||
background: linear-gradient(135deg, #4e9bff 0%, #2f6df6 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .muted-2-color {
|
||||
color: var(--muted-2-color, #888);
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .form-control {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--main-border-color, #ddd);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .mb6 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .but.c-blue,
|
||||
.aksrt-user-auth-panel button.but {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
background: var(--focus-color, #2f6df6);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
padding: 10px 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel__imgs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel__imgs .preview-item {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--main-border-color, #eee);
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel__imgs img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aksrt-user-auth-panel .c-red {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
/* Dual-column geometry owned by layout.css site-layout float rules (Zibll). */
|
||||
@@ -359,3 +359,79 @@
|
||||
margin-right: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
/* ==================== 官方认证面板 ==================== */
|
||||
.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));
|
||||
}
|
||||
|
||||
.uc-auth-card__art {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: linear-gradient(150deg, #3988f4, #7567de);
|
||||
color: #fff;
|
||||
font-size: 46px;
|
||||
}
|
||||
|
||||
.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 .aksrt-modal__dialog { width: min(620px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 40px)); overflow: auto; }
|
||||
.uc-auth-modal__header > div { display: flex; align-items: center; gap: 10px; }
|
||||
.uc-auth-modal__header > div > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-primary); }
|
||||
.uc-auth-modal__body { padding: 22px; }
|
||||
|
||||
.uc-auth-form { display: grid; gap: 17px; }
|
||||
.uc-auth-form > label { display: grid; gap: 7px; color: var(--color-ink-2); font-size: 13px; font-weight: 600; }
|
||||
.uc-auth-form .form-control { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.1)); border-radius: 9px; background: var(--surface-1); color: var(--color-ink); font: inherit; font-weight: 400; box-sizing: border-box; }
|
||||
.uc-auth-form textarea.form-control { resize: vertical; }
|
||||
.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 .aksrt-modal__dialog { position: fixed; inset: auto 0 0; width: 100%; max-height: 88vh; margin: 0; border-radius: 18px 18px 0 0; }
|
||||
}
|
||||
@@ -631,10 +631,15 @@ body.aksrt-user-center .uc-content,
|
||||
.uc-service-grid__item--profile .uc-service-grid__icon { color: #6550c7; background: rgba(124, 92, 220, 0.12); }
|
||||
.uc-service-grid__item--security .uc-service-grid__icon { color: #16816c; background: rgba(16, 185, 129, 0.12); }
|
||||
|
||||
.uc-service-grid__item:hover {
|
||||
.uc-service-grid__item:hover,
|
||||
.uc-service-grid__item.is-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.uc-service-grid__item.is-active .uc-service-grid__icon {
|
||||
box-shadow: 0 0 0 2px var(--color-primary-soft), 0 5px 14px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.uc-order-grid__icon { transition: none; }
|
||||
}
|
||||
Reference in new issue
Block a user