diff --git a/common/css/main.scss b/common/css/main.scss index 2eedc71..0b2aeb0 100644 --- a/common/css/main.scss +++ b/common/css/main.scss @@ -19,73 +19,6 @@ page { background-color: $color-bg; } -/* ============================================================ - * H5 端根容器撑满兜底 - * ------------------------------------------------------------ - * 背景: - * 微信小程序 / 鸿蒙元服务:框架编译 page 选择器生效,根容器自带 100% 撑满 - * 浏览器 H5:浏览器自动让 html/body 撑满,根容器没问题 - * 快应用内嵌 H5: webview 给 H5 报告的 viewport 高度不可控,根容器不撑满 → 背景断色 / 100vh 解析异常 - * - * 解决:H5 端显式给 html, body, #app, .uni-app 撑满,确保所有 H5 渲染场景 - * (浏览器 H5 / PWA / 桌面 webview / 快应用 webview) 根容器都正确铺满整屏 - * - * 注:整段用 #ifdef H5 包裹,微信小程序 / 鸿蒙元服务编译时会移除, - * 不影响小程序原生 tabBar 和页面布局。 - * ============================================================ */ -/* #ifdef H5 */ -html, -body { - height: 100%; - width: 100%; - margin: 0; - padding: 0; - background-color: $color-bg; - overflow: hidden; - -webkit-overflow-scrolling: auto; -} - -#app, -.uni-app { - height: 100%; - width: 100%; - min-height: 100%; - background-color: $color-bg; -} - -/* ============================================================ - * H5 自定义 TabBar 固定在最底端 (浏览器 H5 / 快应用 H5 / PWA) - * ------------------------------------------------------------ - * 背景: - * pages.json 的 tabBar 配置了 "custom": true (H5), - * uni-app 在 H5 端会渲染 自定义组件。 - * uni-app 内部已给 uni-tabbar 加了 position:fixed; bottom:0, - * 此处显式加固,防止父级 transform/filter 创建新的 containing block - * 导致 fixed 元素漂移。 - * 注:仅 H5 生效,微信小程序 / 鸿蒙元服务走原生 tabBar,不受影响。 - * ============================================================ */ -uni-tabbar, -.uni-tabbar, -.uni-tabbar--fixed, -.uni-tabbar-bottom { - position: fixed !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - top: auto !important; - width: 100% !important; - z-index: 2147483647 !important; - transform: translateZ(0) !important; - -webkit-transform: translateZ(0) !important; - will-change: transform !important; -} - -/* 快应用内嵌 H5:webview 可能把 100vh 解析为可视区高度而非屏幕高度,这里提供 JS 兜底 */ -.hwapp-full-height { - min-height: 100vh; -} -/* #endif */ - :root { $base-color: #ff4544; $base-help-color: #ffb644; //辅助颜色