fix(vip): 会员弹窗壳几何 1:1 对齐 Zibll(600px/整屏高度阈值/8px 圆角)

滚动条与尺寸偏差根因是 aksrt-modal-runtime 壳覆盖偏离参考主题
modal_pay_uservip 的几何:

- 宽度 min(560px,100%) → min(600px, calc(100vw - 20px)):对齐
  bootstrap3 ≥768px .modal-dialog 600px + .modal.flex .modal-dialog
  的 max-width calc(100% - 20px)
- 高度 min(90vh,760px) → calc(100vh - 20px):760px 阈值过低是侧边
  滚动条根因;对齐 .modal.flex .modal-content 的整屏阈值
- overflow auto → hidden + overflow-y auto + touch 滚动:对齐
  .modal.flex .modal-content,正常桌面内容不再出现滚动条
- 圆角 12px → var(--main-radius, 8px):对齐 .modal-content
- 移除 .payvip-modal 本地 padding(18/16px),内边距回归 .box-body
  15px(参考主题无 .payvip-modal 专属 padding)
- 契约测试同步锁定桌面壳几何、无本地 padding 与移动端 bottom 圆角
This commit is contained in:
kate522 committed 2026-09-18 17:34:00 +08:00
1 parent db0d63b99f
commit ec1107c65a
2 files changed
+23 -7

No files matched your search

+14 -6
View File
@@ -2,16 +2,25 @@
* VIP pay modal + hover cards (legacy payvip-modal / vip-card).
*/
/* VIP now uses the shared modal runtime host. */
/* VIP now uses the shared modal runtime host.
壳几何 1:1 对齐 Zibll modal_pay_uservip:
- 宽度 = bootstrap3 ≥768px 的 .modal-dialog 600px,配合
.modal.flex .modal-dialog 的 max-width: calc(100% - 20px)
- 高度 = .modal.flex .modal-content 的 max-height: calc(100vh - 20px)
+ overflow-y: auto(阈值放宽到整屏,正常桌面内容不触发滚动条)
- 圆角 = .modal-content 的 var(--main-radius)(8px) */
.aksrt-modal-runtime.aksrt-vip-modal-shell {
z-index: 1200;
}
.aksrt-modal-runtime.aksrt-vip-modal-shell .aksrt-modal-runtime__dialog {
width: min(560px, 100%);
max-height: min(90vh, 760px);
width: min(600px, calc(100vw - 20px));
max-height: calc(100vh - 20px);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--main-bg-color, #fff);
border-radius: 12px;
border-radius: var(--main-radius, 8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}
@@ -24,13 +33,12 @@
width: 100%;
max-width: 100%;
max-height: calc(100vh - 20px);
border-radius: 16px 16px 0 0;
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
}
}
.payvip-modal {
position: relative;
padding: 18px 16px 16px;
}
.aksrt-vip-points-modal__title {