diff --git a/assets/css/frontend/vip-modal.css b/assets/css/frontend/vip-modal.css index 5fe62f40..9e47702e 100644 --- a/assets/css/frontend/vip-modal.css +++ b/assets/css/frontend/vip-modal.css @@ -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 { diff --git a/tests/widget-system/page-display-contract.test.cjs b/tests/widget-system/page-display-contract.test.cjs index e9c4ecd4..9af3cb19 100644 --- a/tests/widget-system/page-display-contract.test.cjs +++ b/tests/widget-system/page-display-contract.test.cjs @@ -163,7 +163,15 @@ test('VIP purchase modal matches legacy desktop-center and mobile-bottom positio assert.doesNotMatch(purchaseModal, /mobileBottom:\s*false/) 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', () => {