xuchao/h5-meike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 列表左右居中 + 悬浮订单按钮放大并直达

Browse Source 
实测修正（桌面+手机双端验证）：
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>
This commit is contained in:
xuchao
2026-07-21 11:15:40 +08:00
co-authored by Claude Opus 4.8
parent a800756958
commit 73be4f7d73
3 changed files with 70 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.vue
+10 -4
View File
@@ -53,15 +53,21 @@
// xuchao: 宽屏（>768px，框架此时把 rpx 基准锁在 375）下，把页面列居中、两侧露出底色
@media screen and (min-width: 769px) {
body {
background: #dfe4ea;
// xuchao: 页面级 page 背景会染到 body，需 !important 才能露出两侧底色
background: #dfe4ea !important;
}
uni-page-body {
// xuchao: !important 覆盖框架默认 width:100%，宽屏下把页面列收为 375 并居中
width: 750rpx !important;
// 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;
box-shadow: 0 0 60rpx rgba(31, 45, 61, 0.14);
overflow-x: hidden;
box-shadow: 0 0 24px rgba(31, 45, 61, 0.14);
}
}
/* #endif */