宽屏(桌面/平板): - 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 <noreply@anthropic.com>
36 lines
738 B
Vue
36 lines
738 B
Vue
<script>
|
|
export default {
|
|
onLaunch: function(e) {
|
|
console.log('App Launch')
|
|
},
|
|
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: 宽屏适配 —— 配合 pages.json 的 rpxCalcMaxDeviceWidth(宽屏时 rpx 基准锁定 375px),
|
|
// 页面容器居中展示,两侧露出底色形成"手机框"视觉
|
|
@media screen and (min-width: 751px) {
|
|
body {
|
|
background: #dfe4ea;
|
|
}
|
|
|
|
uni-page-body {
|
|
width: 750rpx;
|
|
margin: 0 auto;
|
|
min-height: 100vh;
|
|
box-shadow: 0 0 80rpx rgba(31, 45, 61, 0.16);
|
|
}
|
|
}
|
|
/* #endif */
|
|
</style>
|