From f767aa93defff90ae5e46be69dba7613952eb3fc Mon Sep 17 00:00:00 2001 From: xuchao Date: Tue, 21 Jul 2026 08:57:40 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=BE=E5=A4=87=E9=80=82=E9=85=8D=20?= =?UTF-8?q?=E2=80=94=E2=80=94=20=E5=AE=BD=E5=B1=8F=E5=B1=85=E4=B8=AD?= =?UTF-8?q?=E9=94=81=E5=AE=9A=E6=89=8B=E6=9C=BA=E5=B0=BA=E5=AF=B8=20+=20?= =?UTF-8?q?=E5=85=A8=E9=9D=A2=E5=B1=8F=E5=BA=95=E9=83=A8=E5=AE=89=E5=85=A8?= =?UTF-8?q?=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 宽屏（桌面/平板）： - pages.json 配置 rpxCalcMaxDeviceWidth=750/rpxCalcBaseDeviceWidth=375， 窗口超过 750px 时 rpx 换算基准锁定为 375px（uni-app 官方机制），不再随屏幕拉伸 - 页面列宽 750rpx 居中展示，两侧露出底色+阴影形成手机框视觉 - 固定底栏统一 left/right:0+margin:auto 视口居中，与页面列对齐 - 悬浮球及菜单项宽屏时锚定到页面列左缘 全面屏（iPhone 刘海屏）： - 订单底栏/订单详情按钮栏/弹窗确认栏用同色边框向下延伸覆盖 home 指示条区域 - 悬浮按钮（完成/选择）整体上移避开安全区 - 确认订单页底栏改为 bottom 锚定（原来用 JS 计算 top） Co-Authored-By: Claude Opus 4.8 --- App.vue | 21 +++++++++++++++++-- .../gmy-float-touch/gmy-float-touch.vue | 17 +++++++++++++++ pages.json | 5 ++++- pages/ticket/orderdetail.vue | 9 +++++++- pages/ticket/ordersure.vue | 13 ++++++++++-- pages/ticket/person.vue | 9 ++++++-- pages/ticket/select.vue | 2 +- 7 files changed, 67 insertions(+), 9 deletions(-) diff --git a/App.vue b/App.vue index aab2510..e8e9027 100644 --- a/App.vue +++ b/App.vue @@ -13,6 +13,23 @@ diff --git a/components/gmy-float-touch/gmy-float-touch.vue b/components/gmy-float-touch/gmy-float-touch.vue index 2ff174d..92a2c45 100644 --- a/components/gmy-float-touch/gmy-float-touch.vue +++ b/components/gmy-float-touch/gmy-float-touch.vue @@ -186,4 +186,21 @@ right: 20upx; transition: top 0.2s, right 0.2s, opacity 0.2s; } + + /* #ifdef H5 */ + // xuchao: 宽屏时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面 + @media screen and (min-width: 751px) { + .box { + left: calc(50vw - 184px) !important; + } + .menu0, .menu0R { + left: calc(50vw - 184px) !important; + right: auto !important; + } + .menu4, .menu4R { + left: calc(50vw - 134px) !important; + right: auto !important; + } + } + /* #endif */ diff --git a/pages.json b/pages.json index 0baf8a7..9498e90 100644 --- a/pages.json +++ b/pages.json @@ -69,6 +69,9 @@ "navigationBarTextStyle": "black", "navigationBarTitleText": "质惠游", "navigationBarBackgroundColor": "#ffffff", - "backgroundColor": "#ffffff" + "backgroundColor": "#ffffff", + // xuchao: 宽屏适配 —— 窗口超过 750px 时 rpx 换算基准锁定为 375px（手机尺寸），不随屏幕拉大 + "rpxCalcMaxDeviceWidth": 750, + "rpxCalcBaseDeviceWidth": 375 } } diff --git a/pages/ticket/orderdetail.vue b/pages/ticket/orderdetail.vue index 669ef8d..eba6511 100644 --- a/pages/ticket/orderdetail.vue +++ b/pages/ticket/orderdetail.vue @@ -167,7 +167,7 @@ + style="width: 654rpx;position: fixed;height: 88rpx;line-height: 88rpx;background: #fff;bottom: 0rpx;left: 0rpx;right: 0rpx;margin: 0 auto;border-bottom: constant(safe-area-inset-bottom) solid #fff;border-bottom: env(safe-area-inset-bottom) solid #fff;"> 确定 @@ -488,6 +488,13 @@ background-color: #fff; position: fixed; bottom: 0rpx; + // xuchao: 视口水平居中（宽屏下与页面列对齐）+ 全面屏底部安全区 + left: 0rpx; + right: 0rpx; + margin-left: auto; + margin-right: auto; + border-bottom: constant(safe-area-inset-bottom) solid #fff; + border-bottom: env(safe-area-inset-bottom) solid #fff; gap: 20rpx; padding-right: 24rpx; justify-content: flex-end; diff --git a/pages/ticket/ordersure.vue b/pages/ticket/ordersure.vue index 9a4d7df..ae4253d 100644 --- a/pages/ticket/ordersure.vue +++ b/pages/ticket/ordersure.vue @@ -136,7 +136,7 @@ + style="width: 654rpx;position: fixed;height: 88rpx;line-height: 88rpx;background: #fff;bottom: 0rpx;left: 0rpx;right: 0rpx;margin: 0 auto;border-bottom: constant(safe-area-inset-bottom) solid #fff;border-bottom: env(safe-area-inset-bottom) solid #fff;"> 确定 @@ -559,7 +559,16 @@ background-color: #fff; height: 62px; position: fixed; - // bottom: 0rpx; + // xuchao: 改为底部锚定（原来用 JS 算 top，宽屏缩放后会错位），并给全面屏留出底部安全区 + top: auto !important; + bottom: 0; + // xuchao: 视口水平居中 —— 宽屏下与居中的页面列对齐 + left: 0rpx; + right: 0rpx; + margin-left: auto; + margin-right: auto; + border-bottom: constant(safe-area-inset-bottom) solid #fff; + border-bottom: env(safe-area-inset-bottom) solid #fff; padding: 14rpx 24rpx; } diff --git a/pages/ticket/person.vue b/pages/ticket/person.vue index 05aea0d..e980b14 100644 --- a/pages/ticket/person.vue +++ b/pages/ticket/person.vue @@ -208,8 +208,13 @@ color: #fff; font-size: 28rpx; background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%); - margin-left: 30rpx; + // xuchao: 视口水平居中（宽屏下与页面列对齐） + left: 0rpx; + right: 0rpx; + margin: 0 auto; position: fixed; - bottom: 25rpx; + // xuchao: 全面屏底部安全区 —— 悬浮按钮整体上移 + bottom: calc(25rpx + constant(safe-area-inset-bottom)); + bottom: calc(25rpx + env(safe-area-inset-bottom)); } \ No newline at end of file diff --git a/pages/ticket/select.vue b/pages/ticket/select.vue index 409888b..1207ae3 100644 --- a/pages/ticket/select.vue +++ b/pages/ticket/select.vue @@ -13,7 +13,7 @@ - + 完成