feat(user): complete growth level chain
This commit is contained in:
@@ -0,0 +1,91 @@
|
||||
/* User level — dedicated center panel */
|
||||
.aksrt-user-level-icon {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 1.35em;
|
||||
max-width: 6em;
|
||||
object-fit: contain;
|
||||
vertical-align: -.2em;
|
||||
}
|
||||
.aksrt-user-level-icon--admin { height: 22px; }
|
||||
|
||||
.uc-level-page { display: grid; gap: 16px; }
|
||||
.uc-level-page .zib-widget {
|
||||
margin: 0;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--color-line-soft, rgba(0,0,0,.06));
|
||||
border-radius: var(--main-radius, 10px);
|
||||
background: var(--main-bg-color, var(--surface-1, #fff));
|
||||
box-shadow: 0 0 10px var(--main-shadow, rgba(116,116,116,.08));
|
||||
}
|
||||
.uc-level-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(236,72,153,.10)) !important;
|
||||
}
|
||||
.uc-level-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
right: -80px;
|
||||
top: -100px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
.uc-level-hero__identity { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
|
||||
.uc-level-hero__identity p { margin: 0 0 3px; color: var(--muted-2-color, #8b9198); font-size: 12px; }
|
||||
.uc-level-hero__identity h2 { margin: 0; font-size: 22px; }
|
||||
.uc-level-hero__icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255,255,255,.62);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
|
||||
}
|
||||
.uc-level-hero__icon .aksrt-user-level-icon { max-width: 48px; height: 42px; }
|
||||
.uc-level-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 20px 0 16px; position: relative; z-index: 1; }
|
||||
.uc-level-hero__stats > div { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.46); }
|
||||
.uc-level-hero__stats strong, .uc-level-hero__stats span { display: block; }
|
||||
.uc-level-hero__stats strong { font-size: 18px; }
|
||||
.uc-level-hero__stats span { margin-top: 3px; font-size: 11px; color: var(--muted-2-color, #747b83); }
|
||||
.uc-level-hero__progress { position: relative; z-index: 1; }
|
||||
.uc-level-hero__progress-meta { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
|
||||
.uc-level-progress { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(127,127,127,.18); }
|
||||
.uc-level-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #ec4899); }
|
||||
|
||||
.uc-level-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
|
||||
.uc-level-section__head h3 { margin: 0; font-size: 16px; }
|
||||
.uc-level-section__head span { color: var(--muted-2-color, #8b9198); font-size: 11px; }
|
||||
.uc-level-road { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
|
||||
.uc-level-road__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px; border: 1px solid var(--color-line-soft, rgba(0,0,0,.06)); border-radius: 10px; opacity: .58; text-align: center; }
|
||||
.uc-level-road__item.is-done { opacity: .78; }
|
||||
.uc-level-road__item.is-current { opacity: 1; border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,.12); }
|
||||
.uc-level-road__item.is-current::after { content: '当前'; position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 999px; background: #8b5cf6; color: #fff; font-size: 9px; }
|
||||
.uc-level-road__icon { display: grid; place-items: center; height: 40px; }
|
||||
.uc-level-road__icon img { max-width: 52px; max-height: 38px; object-fit: contain; }
|
||||
.uc-level-road__icon span { font-weight: 800; color: #7c3aed; }
|
||||
.uc-level-road__item strong { font-size: 12px; }
|
||||
.uc-level-road__item small { color: var(--muted-2-color, #8b9198); font-size: 10px; }
|
||||
|
||||
.uc-level-history-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(240px,.65fr); gap: 16px; }
|
||||
.uc-level-ledger, .uc-level-dates { display: grid; }
|
||||
.uc-level-ledger__row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,.05)); }
|
||||
.uc-level-ledger__row:last-child, .uc-level-dates > div:last-child { border-bottom: 0; }
|
||||
.uc-level-ledger__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(124,58,237,.10); color: #7c3aed; }
|
||||
.uc-level-ledger__row strong, .uc-level-ledger__row time { display: block; }
|
||||
.uc-level-ledger__row strong { font-size: 13px; }
|
||||
.uc-level-ledger__row time { margin-top: 2px; color: var(--muted-2-color, #8b9198); font-size: 10px; }
|
||||
.uc-level-ledger__row b { color: #16a34a; font-size: 13px; }
|
||||
.uc-level-dates > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,.05)); font-size: 12px; }
|
||||
.uc-level-dates span { color: #16a34a; font-weight: 700; }
|
||||
.uc-level-empty { margin: 0; padding: 24px 0; color: var(--muted-2-color, #8b9198); text-align: center; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.uc-level-hero__stats { grid-template-columns: 1fr; }
|
||||
.uc-level-history-grid { grid-template-columns: 1fr; }
|
||||
.uc-level-road { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
}
|
||||
Reference in New Issue
Block a user