xuchaoandClaude Opus 4.8
85272c9363
实测：列表页 DOM 里有一个可见的"取消"，class 为 uni-actionsheet__cell， 来自 uni-app H5 在根节点全局挂载的 uni-actionsheet（供 uni.showActionSheet 用）。 它在从未调用时仍以普通文档流(position:static)渲染，取消栏漏在每页最底部。 全项目检索确认无任何 uni.showActionSheet 调用，故整体 display:none 隐藏。 已在运行实例注入同条规则实测：取消消失，列表卡片与飘带不受影响。 注：改在 App.vue 全局样式，需重跑构建才生效。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
82 lines
2.5 KiB
Vue
82 lines
2.5 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: 框架在根节点全局挂载的 uni-actionsheet（供 uni.showActionSheet 用），
|
||
// 在从未调用时仍以普通文档流渲染出"取消"按钮，漏在每页最底部；本项目无该调用，整体隐藏。
|
||
// 注：若日后某页改用 uni.showActionSheet，需另行为其"打开态"写显示规则。
|
||
uni-actionsheet {
|
||
display: none !important;
|
||
}
|
||
|
||
// 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>
|