feat(user-center): 1:1 port reference sidebar VIP bar and creator/promotion cards
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
5dd7d14334
commit
9fbfab54c2
4 files changed
+190
-200
No files matched your search
@@ -495,141 +495,73 @@ body.aksrt-user-center .uc-content,
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* VIP 入口：琥珀会员券，与下方中性资产卡形成主次层级 */
|
||||
.uc-sidebar .uc-sidebar-vip {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid rgba(255, 232, 177, 0.34);
|
||||
border-radius: var(--main-radius, var(--radius, 8px));
|
||||
background:
|
||||
radial-gradient(circle at 88% 12%, rgba(255, 239, 190, 0.2), transparent 34%),
|
||||
linear-gradient(122deg, #4a2b13 0%, #7c4a1c 48%, #a86d28 100%);
|
||||
box-shadow: 0 7px 18px rgba(91, 50, 15, 0.18);
|
||||
color: #fff8e8;
|
||||
/* VIP 入口：1:1 参考主题 zib_user_center_page_sidebar_vip()，外观全部来自
|
||||
payvip-icon / badg / btn-block / abs-right。这里只补 <a> 与侧栏 gap 带来的差异。 */
|
||||
.uc-sidebar .uc-sidebar-vip,
|
||||
.uc-sidebar .uc-sidebar-vip:hover,
|
||||
.uc-sidebar .uc-sidebar-vip:focus {
|
||||
color: #ece0e0;
|
||||
text-decoration: none;
|
||||
isolation: isolate;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.uc-sidebar .uc-sidebar-vip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -80%;
|
||||
left: 58%;
|
||||
width: 34px;
|
||||
height: 260%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 246, 211, 0.14), transparent);
|
||||
transform: rotate(24deg);
|
||||
pointer-events: none;
|
||||
/* 侧栏是 gap:12px 的纵向 flex，mb20 / mb10-sm 再叠加会翻倍，扣掉 gap 后与参考间距一致。 */
|
||||
.uc-sidebar > .uc-sidebar-vip.mb20 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.uc-sidebar-vip__icon {
|
||||
display: inline-flex;
|
||||
place-items: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* legacy-utilities 把 .abs-right 改成 top:0/right:0，恢复参考主题的垂直居中几何。 */
|
||||
.uc-sidebar-vip > .abs-right {
|
||||
top: 50%;
|
||||
right: 0.7em;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.uc-sidebar-vip .img-icon {
|
||||
height: 1em;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #ffd982;
|
||||
font-size: 16px;
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
|
||||
.uc-sidebar-vip__icon .aksrt-vip-level-icon {
|
||||
width: auto;
|
||||
height: 1.5em;
|
||||
max-width: 6em;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
/* 创作中心 / 推广中心：1:1 参考主题 zib_user_center_page_sidebar_income_rebate()。
|
||||
.zib-widget 在本站不是全局类，在侧栏内按参考原值落地。 */
|
||||
.uc-sidebar-centers > .zib-widget {
|
||||
clear: both;
|
||||
background-color: var(--main-bg-color);
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px var(--main-shadow);
|
||||
border-radius: var(--main-radius);
|
||||
margin-bottom: 8px;
|
||||
color: var(--main-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.uc-sidebar-vip__content {
|
||||
min-width: 0;
|
||||
.uc-sidebar-centers > .zib-widget:hover,
|
||||
.uc-sidebar-centers > .zib-widget:focus {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.uc-sidebar-vip__content strong,
|
||||
.uc-sidebar-vip__content small {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uc-sidebar-vip__content strong {
|
||||
color: #fffaf0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.uc-sidebar-vip__content small {
|
||||
margin-top: 3px;
|
||||
color: rgba(255, 244, 216, 0.76);
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.uc-sidebar-vip__arrow {
|
||||
color: rgba(255, 244, 216, 0.72);
|
||||
font-size: 12px;
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.uc-sidebar .uc-sidebar-vip:hover {
|
||||
border-color: rgba(255, 235, 180, 0.58);
|
||||
box-shadow: 0 10px 24px rgba(91, 50, 15, 0.25);
|
||||
color: #fff8e8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.uc-sidebar .uc-sidebar-vip:hover .uc-sidebar-vip__arrow {
|
||||
color: #fff4d8;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.uc-sidebar .uc-sidebar-vip:focus-visible {
|
||||
outline: 3px solid rgba(244, 180, 67, 0.42);
|
||||
outline-offset: 2px;
|
||||
@media (max-width: 767px) {
|
||||
.uc-sidebar > .uc-sidebar-vip.mb20,
|
||||
.uc-sidebar-centers > .zib-widget {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.uc-sidebar .uc-sidebar-vip {
|
||||
.uc-sidebar > .uc-sidebar-vip,
|
||||
.uc-sidebar > .uc-sidebar-centers {
|
||||
margin-right: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.uc-sidebar .uc-sidebar-vip,
|
||||
.uc-sidebar-vip__arrow {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.uc-sidebar .uc-sidebar-vip:hover,
|
||||
.uc-sidebar .uc-sidebar-vip:hover .uc-sidebar-vip__arrow {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.uc-sidebar__pair {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.uc-summary-card,
|
||||
.uc-center-card {
|
||||
.uc-summary-card {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.06));
|
||||
border-radius: var(--main-radius, var(--radius, 8px));
|
||||
@@ -673,36 +605,6 @@ body.aksrt-user-center .uc-content,
|
||||
.uc-summary-card--wallet .uc-summary-card__body { color: #3978d6; }
|
||||
.uc-summary-card--points .uc-summary-card__body { color: #ba7a0a; }
|
||||
|
||||
.uc-center-card {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 13px 12px;
|
||||
}
|
||||
|
||||
.uc-center-card__icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.uc-center-card strong,
|
||||
.uc-center-card small {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uc-center-card strong { font-size: 13px; }
|
||||
.uc-center-card small { margin-top: 3px; color: var(--color-ink-4); font-size: 10px; }
|
||||
.uc-center-card > i,
|
||||
.uc-center-card > svg { color: var(--color-ink-4); font-size: 11px; }
|
||||
.uc-center-card--creation .uc-center-card__icon { color: #6650c7; background: rgba(124, 92, 220, 0.12); }
|
||||
.uc-center-card--revenue .uc-center-card__icon { color: #ce6b35; background: rgba(234, 112, 55, 0.12); }
|
||||
|
||||
/* Services / settings grids, ported from the reference theme sidebar:
|
||||
four per row, no tinted tile behind the icon. */
|
||||
.user-icon-but-box > a {
|
||||
|
||||
Reference in new issue
Block a user