From ee5a16f9a078e956daebfd28318b0a012869822f Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 21 Jul 2026 19:51:08 +0800 Subject: [PATCH] fix(ui): center float QR titles and repair UC VIP layout --- assets/css/frontend/floating-buttons.css | 25 +++ assets/css/frontend/vip-modal.css | 29 +++- assets/css/routes/user-center/credits.css | 154 +++++++++++++++--- assets/js/widget-set.js | 6 +- footer.php | 8 +- inc/helpers/user-center-renderers/vip-tab.php | 23 +-- 6 files changed, 203 insertions(+), 42 deletions(-) diff --git a/assets/css/frontend/floating-buttons.css b/assets/css/frontend/floating-buttons.css index 7ddad783..4a1629a1 100644 --- a/assets/css/frontend/floating-buttons.css +++ b/assets/css/frontend/floating-buttons.css @@ -176,6 +176,7 @@ font-size: 13px; line-height: 1.6; color: var(--color-ink-3); + text-align: center; } .float-btn-qrcode { @@ -193,8 +194,32 @@ .float-right .service-qq .hover-show-con, .float-right .qrcode-btn .hover-show-con { padding: 14px; + text-align: center; } +/* Page QR hover card: keep title/caption centered under the code */ +.float-right .qrcode-btn .hover-show-con { + display: flex; + flex-direction: column; + align-items: center; +} + +.float-right .qrcode-btn .hover-show-con p { + width: 100%; + text-align: center; + margin-top: 2px; +} + +.float-right .qrcode-btn .hover-show-con .float-btn-qrcode__title { + width: 100%; + text-align: center; + margin: 2px 0 0; + font-size: 13px; + line-height: 1.6; + color: var(--color-ink-3); +} + + .float-right .service-wechat .hover-show-con img, .float-right .service-qq .hover-show-con img { margin: 0 auto; diff --git a/assets/css/frontend/vip-modal.css b/assets/css/frontend/vip-modal.css index 07ea7f1a..c7f102a1 100644 --- a/assets/css/frontend/vip-modal.css +++ b/assets/css/frontend/vip-modal.css @@ -102,12 +102,35 @@ background: linear-gradient(135deg, rgba(156, 39, 176, 0.12), rgba(63, 81, 181, 0.08)); } -.v-equity { - margin: 0; - padding-left: 1.1em; +/* Modal-only equity list (UC tab has its own stronger rules under .uc-vip-tab) */ +.payvip-modal .v-equity, +.aksrt-vip-modal-dialog .v-equity { + display: block; + list-style: none; + margin: 8px 0 0; + padding: 0; font-size: 12px; line-height: 1.6; } +.payvip-modal .v-equity > li, +.aksrt-vip-modal-dialog .v-equity > li { + display: block; + margin: 0 0 6px; + padding-left: 12px; + position: relative; +} +.payvip-modal .v-equity > li::before, +.aksrt-vip-modal-dialog .v-equity > li::before { + content: ""; + position: absolute; + left: 0; + top: 0.55em; + width: 5px; + height: 5px; + border-radius: 50%; + background: currentColor; + opacity: 0.45; +} .aksrt-vip-products { display: grid; diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css index 23d88404..50a7f3a6 100644 --- a/assets/css/routes/user-center/credits.css +++ b/assets/css/routes/user-center/credits.css @@ -1076,55 +1076,122 @@ body.uc-modal-open { background: linear-gradient(90deg, #22c55e, #16a34a); } -/* VIP tab — zibll 我的会员 */ +/* VIP tab — zibll 我的会员 (scoped; no dependence on homepage-only utilities) */ +.uc-vip-tab { + min-width: 0; +} .uc-vip-tab .user-content-myvip { position: relative; + display: flex; + align-items: center; + gap: 16px; padding: 16px 18px; margin-bottom: 16px; + overflow: hidden; +} +.uc-vip-tab .user-content-myvip .vip-img { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + opacity: 0.08; + font-size: 3em; + line-height: 1; + pointer-events: none; + z-index: 0; +} +.uc-vip-tab .user-content-myvip .uc-vip-user-row { + position: relative; + z-index: 1; + display: flex; + align-items: center; + gap: 12px; + min-width: 0; + flex: 1 1 auto; +} +.uc-vip-tab .user-content-myvip .avatar-img { + flex: 0 0 auto; } .uc-vip-tab .user-content-myvip .avatar-img img { border-radius: 50%; display: block; + width: 56px; + height: 56px; + object-fit: cover; +} +.uc-vip-tab .user-content-myvip .min-w-0 { + min-width: 0; +} +.uc-vip-tab .mb3 { + margin-bottom: 3px; } .uc-vip-status { display: flex; flex-direction: column; - gap: 4px; + align-items: flex-start; + gap: 6px; } -.uc-vip-status .flex.ac { +.uc-vip-status__title { display: inline-flex; align-items: center; gap: 6px; + font-size: 1.05em; + line-height: 1.3; +} +.uc-vip-status .badg { + display: inline-flex; + align-items: center; + gap: 4px; + width: auto; + max-width: 100%; } .uc-vip-level-cards { display: flex; flex-wrap: wrap; gap: 12px; + align-items: stretch; } .uc-vip-level-card { position: relative; flex: 1 1 240px; + min-width: 0; padding: 20px 16px 18px; overflow: hidden; text-align: center; + box-sizing: border-box; +} +/* Defensive: modal stylesheet also styles .pay-vip-info; keep UC cards independent */ +.uc-vip-tab .uc-vip-level-card.pay-vip-info { + display: block; + background: var(--main-bg-color, var(--surface-1, #fff)); } .uc-vip-level-card.level-1 { - background: linear-gradient(180deg, rgba(246, 196, 83, 0.14), rgba(255,255,255,0.02)); + background: linear-gradient(180deg, rgba(246, 196, 83, 0.16), rgba(255, 255, 255, 0.02)) !important; } .uc-vip-level-card.level-2 { - background: linear-gradient(180deg, rgba(142, 68, 173, 0.10), rgba(255,255,255,0.02)); + background: linear-gradient(180deg, rgba(142, 68, 173, 0.12), rgba(255, 255, 255, 0.02)) !important; } .uc-vip-level-card .vip-baicon { - position: absolute; - right: 10px; - top: 8px; + position: absolute !important; + left: auto !important; + right: 8px !important; + top: 6px !important; + bottom: auto !important; + width: auto !important; + transform: none !important; opacity: 0.08; font-size: 64px; + line-height: 1; pointer-events: none; + z-index: 0; } .uc-vip-level-card__inner { position: relative; z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100%; } .uc-vip-level-card .v-iconbox { display: flex; @@ -1132,6 +1199,7 @@ body.uc-modal-open { justify-content: center; gap: 10px; margin-bottom: 10px; + width: 100%; } .uc-vip-level-card .v-icon { width: 36px; @@ -1140,8 +1208,17 @@ body.uc-modal-open { display: inline-flex; align-items: center; justify-content: center; - background: rgba(0,0,0,0.05); + background: rgba(0, 0, 0, 0.05); flex: 0 0 auto; + color: inherit; +} +.uc-vip-level-card.level-1 .v-icon { + background: rgba(246, 196, 83, 0.22); + color: #866127; +} +.uc-vip-level-card.level-2 .v-icon { + background: rgba(142, 68, 173, 0.16); + color: #6b4aa8; } .uc-vip-level-card .v-info { text-align: left; @@ -1150,40 +1227,45 @@ body.uc-modal-open { .uc-vip-level-card .v-name { font-size: 16px; line-height: 1.3; + font-weight: 700; } .uc-vip-level-card .v-desc { margin-top: 2px; } /* CRITICAL: equity must stack as list, never one jammed line */ -.uc-vip-level-card .v-equity, -.pay-vip-info .v-equity { +.uc-vip-tab .uc-vip-level-card .v-equity, +.uc-vip-tab .pay-vip-info .v-equity { display: block !important; - list-style: none; - margin: 12px auto 16px; - padding: 0; + list-style: none !important; + margin: 12px auto 16px !important; + padding: 0 !important; max-width: 240px; + width: 100%; text-align: left; font-size: 13px; line-height: 1.55; color: var(--muted-2-color, #888); + flex: 1 1 auto; } -.uc-vip-level-card .v-equity > li, -.pay-vip-info .v-equity > li { +.uc-vip-tab .uc-vip-level-card .v-equity > li, +.uc-vip-tab .pay-vip-info .v-equity > li { display: block !important; position: relative; - margin: 0 0 8px; - padding: 0 0 0 14px; - list-style: none; - white-space: normal; + margin: 0 0 8px !important; + padding: 0 0 0 14px !important; + list-style: none !important; + white-space: normal !important; word-break: break-word; + float: none !important; + width: auto !important; } -.uc-vip-level-card .v-equity > li:last-child, -.pay-vip-info .v-equity > li:last-child { - margin-bottom: 0; +.uc-vip-tab .uc-vip-level-card .v-equity > li:last-child, +.uc-vip-tab .pay-vip-info .v-equity > li:last-child { + margin-bottom: 0 !important; } -.uc-vip-level-card .v-equity > li::before, -.pay-vip-info .v-equity > li::before { +.uc-vip-tab .uc-vip-level-card .v-equity > li::before, +.uc-vip-tab .pay-vip-info .v-equity > li::before { content: ""; position: absolute; left: 0; @@ -1205,14 +1287,19 @@ body.uc-modal-open { border: 0; text-decoration: none; font-weight: 600; + margin-top: auto; } .uc-vip-cta > i { margin: 0 !important; line-height: 1; } .uc-vip-points-link { + display: flex; + align-items: center; + justify-content: space-between; padding: 12px 16px; gap: 12px; + margin-top: 10px; } .uc-vip-points-link a { display: inline-flex; @@ -1224,6 +1311,12 @@ body.uc-modal-open { .uc-vip-assets-entry { gap: 12px; } +.uc-vip-tab .mt15 { + margin-top: 15px; +} +.uc-vip-tab .font-bold { + font-weight: 700; +} .jb-vip1 { background: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%); @@ -1236,6 +1329,14 @@ body.uc-modal-open { border: none; } +/* Light theme contrast for VIP badges/status */ +html:not(.dark):not(.theme-dark) .uc-vip-level-card.level-1 .v-name { + color: #6b4e16; +} +html:not(.dark):not(.theme-dark) .uc-vip-level-card.level-2 .v-name { + color: #4c3a7a; +} + @media (max-width: 767px) { .uc-vip-level-cards { flex-direction: column; @@ -1243,4 +1344,7 @@ body.uc-modal-open { .uc-vip-level-card { flex: 1 1 auto; } + .uc-vip-tab .user-content-myvip { + padding: 14px; + } } diff --git a/assets/js/widget-set.js b/assets/js/widget-set.js index aea86eeb..eab96e74 100644 --- a/assets/js/widget-set.js +++ b/assets/js/widget-set.js @@ -476,7 +476,11 @@ wrap.querySelectorAll('.float-btn-qrcode').forEach(function (node) { if (node.dataset.qrReady === '1') return; - var qrText = node.getAttribute('data-qr-text') || window.location.href; + // footer.php uses data-qrcode-url; keep data-qr-text as fallback alias + var qrText = + node.getAttribute('data-qrcode-url') || + node.getAttribute('data-qr-text') || + window.location.href; var qrSize = parseInt(node.getAttribute('data-qr-size') || '120', 10); if (!qrText || !qrSize) return; diff --git a/footer.php b/footer.php index a95e84ef..8778740d 100644 --- a/footer.php +++ b/footer.php @@ -466,8 +466,12 @@ if ($floating_enabled) : >
-
-

+
+

0) { . esc_html(sprintf(__('到期时间：%s', 'aksrt'), wp_date('Y年m月d日', $expires))) . ''; $btn_type = 'renew_' . $level; } - $status_html = '
' - . '
' . esc_html($lv_name) . '
' + $status_html = '
' + . '
' . esc_html($lv_name) . '
' . $badge . ($lv_desc !== '' ? '
' . esc_html($lv_desc) . '
' : '') . '
'; @@ -120,14 +120,14 @@ if ($level > 0) { $exp_label = $expires > 0 ? sprintf(__('过期时间：%s', 'aksrt'), wp_date('Y年m月d日', $expires)) : __('已过期', 'aksrt'); - $status_html = '
' + $status_html = '
' . '
' . esc_html__('会员已过期', 'aksrt') . '
' . '
' . esc_html($exp_label) . '
' . ($desc_top !== '' ? '
' . esc_html($desc_top) . '
' : '') . '
'; $btn_type = 'pay'; } else { - $status_html = '
' + $status_html = '
' . '
' . esc_html__('开通会员', 'aksrt') . '
' . ($desc_top !== '' ? '
' . esc_html($desc_top) . '
' : '
' . esc_html__('开通会员，尊享专属特权', 'aksrt') . '
') . '
'; @@ -174,9 +174,10 @@ foreach ([1, 2] as $lv) { } $cards .= '
'; - $cards .= ''; + // Decorative gem: do NOT use .abs-center (that utility is full-width header/search placement). + $cards .= ''; $cards .= '
'; - $cards .= '
'; + $cards .= '
'; $cards .= '
'; $cards .= '
' . esc_html($lv_name) . '
'; if ($lv_desc !== '') { @@ -194,16 +195,16 @@ foreach ([1, 2] as $lv) { $points_html = ''; if ($level <= 0 && !empty($vip_settings['points_exchange']['enabled'])) { $points_html = '
' - . '
' . esc_html__('积分兑换会员', 'aksrt') . '
' + . '
' . esc_html__('积分兑换会员', 'aksrt') . '
' . '' . esc_html__('立即兑换', 'aksrt') . '
'; } ?>
-
- -
+
+ +
@@ -212,7 +213,7 @@ if ($level <= 0 && !empty($vip_settings['points_exchange']['enabled'])) {
-
+