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:
1 parent
db0d63b99f
commit
ec1107c65a
2 files changed
+23
-7
No files matched your search
@@ -2,16 +2,25 @@
|
|||||||
* VIP pay modal + hover cards (legacy payvip-modal / vip-card).
|
* 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 {
|
.aksrt-modal-runtime.aksrt-vip-modal-shell {
|
||||||
z-index: 1200;
|
z-index: 1200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aksrt-modal-runtime.aksrt-vip-modal-shell .aksrt-modal-runtime__dialog {
|
.aksrt-modal-runtime.aksrt-vip-modal-shell .aksrt-modal-runtime__dialog {
|
||||||
width: min(560px, 100%);
|
width: min(600px, calc(100vw - 20px));
|
||||||
max-height: min(90vh, 760px);
|
max-height: calc(100vh - 20px);
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
background: var(--main-bg-color, #fff);
|
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);
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -24,13 +33,12 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: calc(100vh - 20px);
|
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 {
|
.payvip-modal {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 18px 16px 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.aksrt-vip-points-modal__title {
|
.aksrt-vip-points-modal__title {
|
||||||
|
|||||||
@@ -163,7 +163,15 @@ test('VIP purchase modal matches legacy desktop-center and mobile-bottom positio
|
|||||||
|
|
||||||
assert.doesNotMatch(purchaseModal, /mobileBottom:\s*false/)
|
assert.doesNotMatch(purchaseModal, /mobileBottom:\s*false/)
|
||||||
assert.match(modalRuntimeJs, /options\.mobileBottom !== false && isMobile\(\)/)
|
assert.match(modalRuntimeJs, /options\.mobileBottom !== false && isMobile\(\)/)
|
||||||
assert.match(vipModalCss, /@media \(max-width: 768px\)[\s\S]*?\.aksrt-vip-modal-shell\.aksrt-modal-runtime--bottom \.aksrt-modal-runtime__dialog\s*\{[\s\S]*?width:\s*100%;[\s\S]*?max-height:\s*calc\(100vh - 20px\);[\s\S]*?border-radius:\s*16px 16px 0 0;/)
|
// 壳几何 1:1 对齐 Zibll modal_pay_uservip:桌面 600px(bootstrap3 ≥768px
|
||||||
|
// .modal-dialog)+ max-width calc(100% - 20px)(.modal.flex .modal-dialog);
|
||||||
|
// 高度/滚动 = .modal.flex .modal-content 的 max-height calc(100vh - 20px)
|
||||||
|
// + overflow-y auto(阈值放宽到整屏,正常内容不出现滚动条);
|
||||||
|
// 圆角 = .modal-content 的 var(--main-radius)(8px)。
|
||||||
|
assert.match(vipModalCss, /\.aksrt-vip-modal-shell \.aksrt-modal-runtime__dialog\s*\{[\s\S]*?width:\s*min\(600px, calc\(100vw - 20px\)\);[\s\S]*?max-height:\s*calc\(100vh - 20px\);[\s\S]*?overflow:\s*hidden;[\s\S]*?overflow-y:\s*auto;[\s\S]*?border-radius:\s*var\(--main-radius, 8px\);/)
|
||||||
|
// 内边距由 .box-body 15px 提供(参考主题无 .payvip-modal 专属 padding)。
|
||||||
|
assert.doesNotMatch(vipModalCss, /\.payvip-modal\s*\{[^}]*padding:/)
|
||||||
|
assert.match(vipModalCss, /@media \(max-width: 768px\)[\s\S]*?\.aksrt-vip-modal-shell\.aksrt-modal-runtime--bottom \.aksrt-modal-runtime__dialog\s*\{[\s\S]*?width:\s*100%;[\s\S]*?max-height:\s*calc\(100vh - 20px\);[\s\S]*?border-radius:\s*var\(--main-radius, 8px\) var\(--main-radius, 8px\) 0 0;/)
|
||||||
})
|
})
|
||||||
|
|
||||||
test('schema REST saves are privileged, section-whitelisted, and deeply sanitized', () => {
|
test('schema REST saves are privileged, section-whitelisted, and deeply sanitized', () => {
|
||||||
|
|||||||
Reference in new issue
Block a user