fix(ui): center float QR titles and repair UC VIP layout

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;

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 {
+/* Modal-only equity list (UC tab has its own stronger rules under .uc-vip-tab) */
-  margin: 0;
+.payvip-modal .v-equity,
-  padding-left: 1.1em;
+.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

@@ -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;
+  position: absolute !important;
-  right: 10px;
+  left: auto !important;
-  top: 8px;
+  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,
+.uc-vip-tab .uc-vip-level-card .v-equity,
-.pay-vip-info .v-equity {
+.uc-vip-tab .pay-vip-info .v-equity {
   display: block !important;
-  list-style: none;
+  list-style: none !important;
-  margin: 12px auto 16px;
+  margin: 12px auto 16px !important;
-  padding: 0;
+  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,
+.uc-vip-tab .uc-vip-level-card .v-equity > li,
-.pay-vip-info .v-equity > li {
+.uc-vip-tab .pay-vip-info .v-equity > li {
   display: block !important;
   position: relative;
-  margin: 0 0 8px;
+  margin: 0 0 8px !important;
-  padding: 0 0 0 14px;
+  padding: 0 0 0 14px !important;
-  list-style: none;
+  list-style: none !important;
-  white-space: normal;
+  white-space: normal !important;
   word-break: break-word;
+  float: none !important;
+  width: auto !important;
 }
-.uc-vip-level-card .v-equity > li:last-child,
+.uc-vip-tab .uc-vip-level-card .v-equity > li:last-child,
-.pay-vip-info .v-equity > li:last-child {
+.uc-vip-tab .pay-vip-info .v-equity > li:last-child {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
-.uc-vip-level-card .v-equity > li::before,
+.uc-vip-tab .uc-vip-level-card .v-equity > li::before,
-.pay-vip-info .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

@@ -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

@@ -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>
+			<div
-			<?php if ($item_text !== '') : ?><p><?php echo esc_html($item_text); ?></p><?php endif; ?>
+				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

@@ -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">'
+	$status_html = '<div class="uc-vip-status">'
-		. '<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>'
+		. '<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="zib-widget flex ac user-content-myvip overflow-hidden">
-		<div class="vip-img abs-right opacity3" aria-hidden="true"><i class="fas fa-crown em3x"></i></div>
+		<div class="vip-img abs-right" aria-hidden="true"><i class="fas fa-crown"></i></div>
-		<div class="flex ac gap12 flex1 relative">
+		<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>