From 21c330025520d55c5dfddc72e8b57addc02b8892 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 4 Aug 2026 19:34:53 +0800 Subject: [PATCH] fix(vip): scope redesign to summary card Restore the existing membership purchase cards and keep the UX refresh limited to the top membership summary. Co-Authored-By: Claude Fable 5 --- assets/css/routes/user-center/vip.css | 188 +----------------- inc/helpers/user-center-renderers/vip-tab.php | 25 +-- 2 files changed, 11 insertions(+), 202 deletions(-) diff --git a/assets/css/routes/user-center/vip.css b/assets/css/routes/user-center/vip.css index 070c4db7..697c8d7b 100644 --- a/assets/css/routes/user-center/vip.css +++ b/assets/css/routes/user-center/vip.css @@ -1,8 +1,8 @@ /** - * User Center — VIP page UX/UI. + * User Center — VIP summary card only. * - * The summary card is the membership status thesis: one calm surface, - * one state accent, and a quiet crown watermark behind the four key lines. + * The purchase cards below remain owned by the existing VIP/credits styles. + * This file deliberately scopes its UI to the top membership information card. */ .uc-content #panel-vip.dashboard-panel { @@ -178,167 +178,6 @@ font-size: 0.9em; } -/* Level purchase cards: one spacing system, no .zib-widget margin stacking. */ -.uc-vip-level-cards { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--space-4, 16px); - align-items: stretch; - margin: 0 0 var(--space-5, 20px); -} - -.uc-vip-tab .uc-vip-level-card.zib-widget, -.uc-vip-tab .uc-vip-level-card.pay-vip-info { - position: relative; - display: block; - min-width: 0; - height: 100%; - margin: 0; - padding: 22px 20px 20px; - overflow: hidden; - border: 1px solid var(--color-line-soft); - border-top: 3px solid var(--vip-card-accent, var(--color-primary)); - border-radius: var(--radius-lg, var(--radius, 8px)); - background-color: var(--surface-1) !important; - background-image: linear-gradient(145deg, var(--vip-card-soft), transparent 68%) !important; - box-shadow: var(--shadow-sm); - transition: transform var(--dur-fast, 0.15s) var(--ease, ease), box-shadow var(--dur-fast, 0.15s) var(--ease, ease), border-color var(--dur-fast, 0.15s) var(--ease, ease); -} - -.uc-vip-tab .uc-vip-level-card.level-1 { - --vip-card-accent: var(--aksrt-vip-gold-2, var(--color-warning)); - --vip-card-soft: color-mix(in srgb, var(--aksrt-vip-gold-1, var(--color-warning)) 15%, transparent); -} - -.uc-vip-tab .uc-vip-level-card.level-2 { - --vip-card-accent: var(--aksrt-indigo, var(--color-info)); - --vip-card-soft: color-mix(in srgb, var(--aksrt-indigo, var(--color-info)) 12%, transparent); -} - -.uc-vip-tab .uc-vip-level-card.zib-widget:hover, -.uc-vip-tab .uc-vip-level-card.pay-vip-info:hover { - border-color: color-mix(in srgb, var(--vip-card-accent) 42%, var(--color-line-soft)); - box-shadow: var(--shadow); - transform: translateY(-2px); -} - -.uc-vip-tab .uc-vip-level-card .vip-baicon { - color: var(--vip-card-accent); - opacity: 0.1; -} - -.uc-vip-level-card__inner { - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - align-items: stretch; - min-height: 100%; -} - -.uc-vip-tab .uc-vip-level-card .v-iconbox { - justify-content: flex-start; - gap: var(--space-3, 12px); - margin-bottom: var(--space-4, 16px); -} - -.uc-vip-tab .uc-vip-level-card .v-icon { - width: 40px; - height: 40px; - flex: 0 0 auto; - border: 1px solid color-mix(in srgb, var(--vip-card-accent) 28%, transparent); - border-radius: var(--radius-xl, 12px); - background: color-mix(in srgb, var(--vip-card-accent) 14%, transparent); - color: var(--vip-card-accent); -} - -.uc-vip-tab .uc-vip-level-card.level-1 .v-name, -.uc-vip-tab .uc-vip-level-card.level-2 .v-name { - color: var(--vip-card-accent); -} - -.uc-vip-tab .uc-vip-level-card .v-name { - font-size: var(--text-md, 1.125rem); - line-height: var(--leading-tight, 1.2); -} - -.uc-vip-tab .uc-vip-level-card .v-desc { - margin-top: 4px; - color: var(--color-ink-3); - line-height: var(--leading-snug, 1.4); -} - -.uc-vip-tab .uc-vip-level-card .v-equity { - flex: 1 1 auto; - max-width: none; - margin: 0 0 var(--space-5, 20px) !important; - color: var(--color-ink-3); -} - -.uc-vip-tab .uc-vip-level-card .v-equity > li { - margin-bottom: var(--space-2, 8px) !important; -} - -.uc-vip-tab .uc-vip-cta { - display: flex !important; - align-items: center; - justify-content: center; - gap: var(--space-2, 8px); - width: 100%; - min-width: 0; - min-height: var(--btn-lg-h, 44px); - margin-top: auto; - padding: 10px 16px !important; - border: 0; - border-radius: var(--radius, 8px); - font-weight: 700; - line-height: 1.2; - text-align: center; - text-decoration: none; - transition: filter var(--dur-fast, 0.15s) var(--ease, ease), box-shadow var(--dur-fast, 0.15s) var(--ease, ease), transform var(--dur-fast, 0.15s) var(--ease, ease); -} - -.uc-vip-tab .uc-vip-cta:hover { - filter: brightness(0.97) saturate(1.08); - box-shadow: var(--shadow-sm); - opacity: 1; - transform: translateY(-1px); -} - -.uc-vip-tab .uc-vip-cta:focus-visible { - outline: 3px solid var(--color-primary); - outline-offset: 3px; - box-shadow: var(--focus-ring); -} - -.uc-vip-tab .uc-vip-cta--current { - cursor: default; - background: var(--surface-3) !important; - color: var(--color-ink-3) !important; - filter: none; - opacity: 1; -} - -.uc-vip-tab .uc-vip-cta--current:hover { - box-shadow: none; - transform: none; -} - -.uc-vip-tab .uc-vip-points-link.zib-widget { - margin: 0 0 var(--space-5, 20px); - border: 1px solid color-mix(in srgb, var(--color-warning) 22%, var(--color-line-soft)); - border-radius: var(--radius-lg, var(--radius, 8px)); - background-color: var(--surface-1); - background-image: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 8%, transparent), transparent 70%); - box-shadow: none; -} - -.uc-vip-tab > .muted-box { - margin-top: 0; - border: 1px solid var(--color-line-soft); - background: var(--surface-4); -} - @media (max-width: 767px) { .uc-vip-summary { padding: 18px 14px; @@ -358,16 +197,6 @@ .uc-vip-status__label { font-size: var(--text-md, 1.125rem); } - - .uc-vip-level-cards { - grid-template-columns: 1fr; - gap: var(--space-3, 12px); - } - - .uc-vip-tab .uc-vip-level-card.zib-widget, - .uc-vip-tab .uc-vip-level-card.pay-vip-info { - padding: 20px 16px 16px; - } } @media (max-width: 420px) { @@ -381,16 +210,7 @@ } @media (prefers-reduced-motion: reduce) { - .uc-vip-summary, - .uc-vip-tab .uc-vip-level-card.zib-widget, - .uc-vip-tab .uc-vip-level-card.pay-vip-info, - .uc-vip-tab .uc-vip-cta { + .uc-vip-summary { transition: none; } - - .uc-vip-tab .uc-vip-level-card.zib-widget:hover, - .uc-vip-tab .uc-vip-level-card.pay-vip-info:hover, - .uc-vip-tab .uc-vip-cta:hover { - transform: none; - } } diff --git a/inc/helpers/user-center-renderers/vip-tab.php b/inc/helpers/user-center-renderers/vip-tab.php index 73a97f07..eed76ca5 100644 --- a/inc/helpers/user-center-renderers/vip-tab.php +++ b/inc/helpers/user-center-renderers/vip-tab.php @@ -95,9 +95,8 @@ foreach ([1, 2] as $lv) { $equity = function_exists('aksrt_format_vip_equity_html') ? aksrt_format_vip_equity_html($equity_raw) : ''; - $cta = sprintf(__('开通%s', 'aksrt'), $lv_name); - $vip_attr = $lv; - $cta_is_current = false; + $cta = sprintf(__('开通%s', 'aksrt'), $lv_name); + $vip_attr = $lv; if (str_starts_with($btn_type, 'renew_')) { $renew_lv = (int) substr($btn_type, 6); if ($lv === $renew_lv) { @@ -116,12 +115,7 @@ foreach ([1, 2] as $lv) { } elseif ($level > 0 && $lv < $level) { continue; } elseif ($level > 0 && $lv === $level) { - if ($vip_is_permanent) { - $cta = __('当前等级', 'aksrt'); - $cta_is_current = true; - } else { - $cta = sprintf(__('续费%s', 'aksrt'), $lv_name); - } + $cta = sprintf(__('续费%s', 'aksrt'), $lv_name); } $cards .= '
'; @@ -136,14 +130,9 @@ foreach ([1, 2] as $lv) { } $cards .= '
'; $cards .= $equity; - if ($cta_is_current) { - $cards .= '' - . '' . esc_html($cta) . ''; - } else { - $cards .= '' - . '' . esc_html($cta) . '' - . ' '; - } + $cards .= '' + . '' . esc_html($cta) . '' + . ' '; $cards .= ''; } @@ -152,7 +141,7 @@ $points_html = ''; if ($level <= 0 && !empty($vip_settings['points_exchange']['enabled'])) { $points_html = '
' . '
' . esc_html__('积分兑换会员', 'aksrt') . '
' - . '' + . '' . esc_html__('立即兑换', 'aksrt') . '
'; }