fix: 列表图片不显示 + 宽屏居中（实测修正）

实测发现的真正问题：uni-image 内部填充元素缺宽高100%，高度塌成0，导致列表图片不显示或溢出卡片，这才是"图片没适配"的根因，补全局样式修复；本HBuilderX版本把rpx编译成按加载视口生成的固定px，大于768px时框架已自带把基准锁在375的响应式机制，之前误用zoom反而二次缩小，已移除；宽屏居中改用 uni-page-body 宽750rpx加important与margin auto，覆盖框架默认宽100%，两侧露出底色；跨768阈值缩放窗口时重载一次，让px基准与视口一致；悬浮球宽屏阈值同步改为769；删除index.html里vite残留的module script（控制台报错）。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:30:28 +08:00
parent f767aa93de
commit a800756958
4 changed files with 42 additions and 13 deletions
@@ -1,7 +1,28 @@
 <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')
@@ -17,18 +38,30 @@
 	@import "./unit/font/index.css";

 	/* #ifdef H5 */
-	// xuchao: 宽屏适配 —— 配合 pages.json 的 rpxCalcMaxDeviceWidth（宽屏时 rpx 基准锁定 375px），
-	// 页面容器居中展示，两侧露出底色形成"手机框"视觉
-	@media screen and (min-width: 751px) {
+	// 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 {
 			background: #dfe4ea;
 		}

 		uni-page-body {
-			width: 750rpx;
-			margin: 0 auto;
+			// xuchao: !important 覆盖框架默认 width:100%，宽屏下把页面列收为 375 并居中
+			width: 750rpx !important;
+			margin: 0 auto !important;
 			min-height: 100vh;
-			box-shadow: 0 0 80rpx rgba(31, 45, 61, 0.16);
+			box-shadow: 0 0 60rpx rgba(31, 45, 61, 0.14);
 		}
 	}
 	/* #endif */
@@ -188,8 +188,8 @@
 	}

 	/* #ifdef H5 */
-	// xuchao: 宽屏时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面
-	@media screen and (min-width: 751px) {
+	// xuchao: 宽屏（>768px）时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面
+	@media screen and (min-width: 769px) {
 		.box {
 			left: calc(50vw - 184px) !important;
 		}
@@ -15,6 +15,5 @@
  </head>
  <body>
    <div id="app"><!--app-html--></div>
-    <script type="module" src="/main.js"></script>
  </body>
 </html>
@@ -69,9 +69,6 @@
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "质惠游",
 		"navigationBarBackgroundColor": "#ffffff",
-		"backgroundColor": "#ffffff",
-		// xuchao: 宽屏适配 —— 窗口超过 750px 时 rpx 换算基准锁定为 375px（手机尺寸），不随屏幕拉大
-		"rpxCalcMaxDeviceWidth": 750,
-		"rpxCalcBaseDeviceWidth": 375
+		"backgroundColor": "#ffffff"
 	}
 }