kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(users): style VIP sidebar card

Browse Source
This commit is contained in:
kate522
2026-08-03 22:11:09 +08:00
parent dafd0ad233
commit 9fa9a4cbaf
3 changed files with 122 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.specs/plans/user-center-sidebar-vip-entry.md
+5 -5
View File
@@ -41,11 +41,11 @@ Durable decisions that apply across all phases:
### Done when
- [ ] `assets/css/routes/user-center/shell.css` 包含限定在用户中心侧栏的 VIP 卡样式，覆盖会员渐变、图标、状态文本、右侧箭头、完整卡片悬停/聚焦状态和窄屏文本约束。
- [ ] `inc/helpers/user-center-renderers/profile-credits.php` 不再输出 `uc-vip-assets-entry` 导航卡，文件中原有余额、积分、签到和资产记录组合逻辑仍被保留。
- [ ] [agent:test-auditor] 人工在桌面宽度验收“统计信息 → VIP 入口 → 账户资产”的顺序、整卡跳转和 VIP 卡与余额/积分双卡的视觉区分。
- [ ] [agent:test-auditor] 人工在既有移动侧栏抽屉验收相同顺序、整卡可点击性、状态文本无溢出，并确认页面内容区没有额外复制 VIP 入口。
- [ ] 运行 `php tools/audit-admin-contracts.php`，命令退出码为 0 且报告为 `errors=0`。
- [x] `assets/css/routes/user-center/shell.css` 包含限定在用户中心侧栏的 VIP 卡样式，覆盖会员渐变、图标、状态文本、右侧箭头、完整卡片悬停/聚焦状态和窄屏文本约束。
- [x] `inc/helpers/user-center-renderers/profile-credits.php` 不再输出 `uc-vip-assets-entry` 导航卡，文件中原有余额、积分、签到和资产记录组合逻辑仍被保留。
- [x] [agent:test-auditor] 人工在桌面宽度验收“统计信息 → VIP 入口 → 账户资产”的顺序、整卡跳转和 VIP 卡与余额/积分双卡的视觉区分。
- [x] [agent:test-auditor] 人工在既有移动侧栏抽屉验收相同顺序、整卡可点击性、状态文本无溢出，并确认页面内容区没有额外复制 VIP 入口。
- [x] 运行 `php tools/audit-admin-contracts.php`，命令退出码为 0 且报告为 `errors=0`。
## Out of Scope
assets/css/routes/user-center/shell.css
+117
View File
@@ -450,6 +450,123 @@ 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;
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;
}
.uc-sidebar-vip__icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 240, 197, 0.46);
border-radius: 50%;
background: rgba(255, 244, 211, 0.12);
box-shadow: inset 0 0 0 4px rgba(255, 244, 211, 0.05);
color: #ffd982;
font-size: 16px;
}
.uc-sidebar-vip__content {
min-width: 0;
}
.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: 991.98px) {
.uc-sidebar .uc-sidebar-vip {
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-service-grid__icon small {
position: absolute;
top: -5px;
inc/helpers/user-center-renderers/profile-credits.php
-11
View File
@@ -38,17 +38,6 @@ if ($show_wallet || $show_credits) :
<?php
endif;
if (!empty($show_vip)) {
// Slim entry to dedicated VIP tab (full shop lives under tab=vip).
$vip_url = function_exists('aksrt_get_user_center_tab_url')
? aksrt_get_user_center_tab_url('vip')
: '#';
echo '<div class="zib-widget flex ac jsb padding-15 mb15 uc-vip-assets-entry">';
echo '<div class="flex ac gap10"><i class="fas fa-crown c-yellow"></i><div><div class="font-bold">' . esc_html__('我的会员', 'aksrt') . '</div>';
echo '<div class="muted-2-color em09">' . esc_html__('查看权益、续费与升级', 'aksrt') . '</div></div></div>';
echo '<a class="but jb-yellow radius" href="' . esc_url($vip_url) . '">' . esc_html__('进入会员中心', 'aksrt') . '</a>';
echo '</div>';
}
if ($show_credits) {
require $dir . '/credits-signin.php';
}