xuchaoandClaude Opus 4.8
73be4f7d73
实测修正（桌面+手机双端验证）： 1 列表左右宽度一致：宽屏下页面列居中、两侧等宽灰底加阴影。 踩坑：uni-page-body 框架默认 display:inline，使 width/margin 失效，需先改 block； 且居中宽度不能用 rpx（750rpx 恒等于整屏宽，会被编译成当前视口宽），改用固定 375px （等于框架 >768px 锁定的 rpx 基准）；body 底色加 important 压过页面级 page 背景。 2 悬浮订单按钮：整体放大 25%（80upx 改 100upx），单击直达门票订单列表， 去掉先点订单再点门票的两步展开菜单；保留拖拽并正确区分拖拽与点击； 清理因此废弃的展开逻辑与无用 imgLists。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<script>
|
||
// #ifdef H5
|
||
// xuchao: 宽屏适配 —— 本 HBuilderX 版本自带"宽屏锁定 375 基准"的响应式机制（>768px 生效），
|
||
// 桌面加载时整页已是手机尺寸但默认贴左。这里只补两件事：
|
||
// 1) 宽屏下把页面列居中（见样式）；
|
||
// 2) 跨越 768 阈值缩放窗口时重载一次，让 px 基准与当前视口一致。
|
||
let _wide = null
|
||
function adaptWideScreen() {
|
||
const w = document.documentElement.clientWidth
|
||
const wide = w > 768
|
||
if (_wide !== null && _wide !== wide) {
|
||
location.reload()
|
||
return
|
||
}
|
||
_wide = wide
|
||
}
|
||
// #endif
|
||
|
||
export default {
|
||
onLaunch: function(e) {
|
||
console.log('App Launch')
|
||
// #ifdef H5
|
||
adaptWideScreen()
|
||
window.addEventListener('resize', adaptWideScreen)
|
||
// #endif
|
||
},
|
||
onShow: function() {
|
||
console.log('App Show')
|
||
},
|
||
onHide: function() {
|
||
console.log('App Hide')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "uview-ui/index.scss";
|
||
@import "./unit/font/index.css";
|
||
|
||
/* #ifdef H5 */
|
||
// xuchao: 修复 uni-image 内部填充元素宽高为 0 导致图片不显示/溢出
|
||
uni-image {
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
}
|
||
|
||
uni-image > div,
|
||
uni-image > img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
// xuchao: 宽屏（>768px，框架此时把 rpx 基准锁在 375）下，把页面列居中、两侧露出底色
|
||
@media screen and (min-width: 769px) {
|
||
body {
|
||
// xuchao: 页面级 page 背景会染到 body，需 !important 才能露出两侧底色
|
||
background: #dfe4ea !important;
|
||
}
|
||
|
||
uni-page-body {
|
||
// xuchao: 框架默认 uni-page-body 为 display:inline，会使 width/margin 失效，先改 block
|
||
display: block !important;
|
||
// 不能用 rpx —— 750rpx 恒等于"整屏宽"，编译后会变成当前视口宽度而无法居中。
|
||
// 框架在 >768px 时把 rpx 基准锁在 375（rpxCalcBaseDeviceWidth 默认值），
|
||
// 故页面内容宽即 375px，这里用固定 375px 覆盖框架默认 width:100% 实现居中。
|
||
width: 375px !important;
|
||
margin: 0 auto !important;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
box-shadow: 0 0 24px rgba(31, 45, 61, 0.14);
|
||
}
|
||
}
|
||
/* #endif */
|
||
</style>
|