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

Merge pull request 'fix(ui): center float QR titles and repair UC VIP layout' (#251) from worktree-float-qr-uc-vip into main

Browse Source 
Reviewed-on: CYL/wordpress-theme-aksrt#251
This commit is contained in:
kate522
2026-07-21 19:53:39 +08:00
parent 4bbfecb922 ee5a16f9a0
commit bee63a29d6
6 changed files with 203 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/floating-buttons.css
+25
View File
@@ -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;
assets/css/frontend/vip-modal.css
+26 -3
View File
@@ -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;
assets/css/routes/user-center/credits.css
+128 -24
View File
@@ -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;
@@ -1142,6 +1210,15 @@ body.uc-modal-open {
justify-content: center;
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;
}
}
assets/js/widget-set.js
+5 -1
View File
@@ -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;
footer.php
+6 -2
View File
@@ -466,8 +466,12 @@ if ($floating_enabled) :
<a href="#" class="<?php echo esc_attr($item_class); ?>" role="button" aria-label="<?php echo esc_attr($item_text ?: __('二维码', 'aksrt')); ?>"<?php echo $style_attr; ?>>
<i class="<?php echo esc_attr($item_icon); ?>" aria-hidden="true"></i>
<div class="hover-show-con">
<div class="float-btn-qrcode" data-qrcode-url="<?php echo esc_attr(get_permalink() ?: home_url('/')); ?>"></div>
<?php if ($item_text !== '') : ?><p><?php echo esc_html($item_text); ?></p><?php endif; ?>
<div
class="float-btn-qrcode"
data-qrcode-url="<?php echo esc_attr(get_permalink() ?: home_url('/')); ?>"
data-qr-text="<?php echo esc_attr(get_permalink() ?: home_url('/')); ?>"
></div>
<?php if ($item_text !== '') : ?><p class="float-btn-qrcode__title"><?php echo esc_html($item_text); ?></p><?php endif; ?>
</div>
</a>
<?php else :
inc/helpers/user-center-renderers/vip-tab.php
+12 -11
View File
@@ -111,8 +111,8 @@ if ($level > 0) {
. esc_html(sprintf(__('到期时间：%s', 'aksrt'), wp_date('Y年m月d日', $expires))) . '</span>';
$btn_type = 'renew_' . $level;
}
$status_html = '<div class="uc-vip-status flex xx gap6">'
. '<div class="em16 flex ac"><i class="fas fa-crown" aria-hidden="true"></i><span class="font-bold ml6">' . esc_html($lv_name) . '</span></div>'
$status_html = '<div class="uc-vip-status">'
. '<div class="uc-vip-status__title flex ac"><i class="fas fa-crown" aria-hidden="true"></i><span class="font-bold ml6">' . esc_html($lv_name) . '</span></div>'
. $badge
. ($lv_desc !== '' ? '<div class="muted-color em09">' . esc_html($lv_desc) . '</div>' : '')
. '</div>';
@@ -120,14 +120,14 @@ if ($level > 0) {
$exp_label = $expires > 0
? sprintf(__('过期时间：%s', 'aksrt'), wp_date('Y年m月d日', $expires))
: __('已过期', 'aksrt');
$status_html = '<div class="uc-vip-status flex xx gap6">'
$status_html = '<div class="uc-vip-status">'
. '<div class="font-bold c-red">' . esc_html__('会员已过期', 'aksrt') . '</div>'
. '<div class="badg c-red em09"><i class="fas fa-clock" aria-hidden="true"></i> ' . esc_html($exp_label) . '</div>'
. ($desc_top !== '' ? '<div class="muted-color em09">' . esc_html($desc_top) . '</div>' : '')
. '</div>';
$btn_type = 'pay';
} else {
$status_html = '<div class="uc-vip-status flex xx gap6">'
$status_html = '<div class="uc-vip-status">'
. '<div class="font-bold">' . esc_html__('开通会员', 'aksrt') . '</div>'
. ($desc_top !== '' ? '<div class="muted-color em09">' . esc_html($desc_top) . '</div>' : '<div class="muted-color em09">' . esc_html__('开通会员，尊享专属特权', 'aksrt') . '</div>')
. '</div>';
@@ -174,9 +174,10 @@ foreach ([1, 2] as $lv) {
}
$cards .= '<div class="zib-widget text-center pay-vip-info flex1 level-' . $lv . ' uc-vip-level-card">';
$cards .= '<div class="abs-center vip-baicon" aria-hidden="true"><i class="fas fa-gem"></i></div>';
// Decorative gem: do NOT use .abs-center (that utility is full-width header/search placement).
$cards .= '<div class="vip-baicon" aria-hidden="true"><i class="fas fa-gem"></i></div>';
$cards .= '<div class="relative uc-vip-level-card__inner">';
$cards .= '<div class="v-iconbox mb10 flex jc ac gap10">';
$cards .= '<div class="v-iconbox mb10 flex jc ac">';
$cards .= '<div class="v-icon flex jc ac"><i class="fas fa-crown" aria-hidden="true"></i></div>';
$cards .= '<div class="v-info text-left"><div class="v-name font-bold">' . esc_html($lv_name) . '</div>';
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 = '<div class="c-yellow zib-widget flex ac jsb uc-vip-points-link mt10">'
. '<div class="flex1 em12 flex ac gap6"><i class="fas fa-coins" aria-hidden="true"></i><span>' . esc_html__('积分兑换会员', 'aksrt') . '</span></div>'
. '<div class="flex1 em12 flex ac"><i class="fas fa-coins" aria-hidden="true"></i><span class="ml6">' . esc_html__('积分兑换会员', 'aksrt') . '</span></div>'
. '<a class="badg radius c-yellow pay-vip" href="javascript:;" vip-level="1">'
. esc_html__('立即兑换', 'aksrt')
. ' <i class="fas fa-chevron-circle-right" aria-hidden="true"></i></a></div>';
}
?>
<div class="uc-vip-tab" data-aksrt-vip-tab>
<div class="zib-widget flex ac gap20 user-content-myvip overflow-hidden mb15">
<div class="vip-img abs-right opacity3" aria-hidden="true"><i class="fas fa-crown em3x"></i></div>
<div class="flex ac gap12 flex1 relative">
<div class="zib-widget flex ac user-content-myvip overflow-hidden">
<div class="vip-img abs-right" aria-hidden="true"><i class="fas fa-crown"></i></div>
<div class="flex ac flex1 relative uc-vip-user-row">
<div class="avatar-img"><?php echo $avatar; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div>
<div class="flex1 min-w-0">
<div class="font-bold mb3"><?php echo esc_html($display); ?></div>
@@ -212,7 +213,7 @@ if ($level <= 0 && !empty($vip_settings['points_exchange']['enabled'])) {
</div>
</div>
<div class="flex gap20 gap10-sm uc-vip-level-cards">
<div class="uc-vip-level-cards">
<?php echo $cards; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>