Spaces:
Running
Running
Trae Assistant commited on
Commit ·
bebf4ea
1
Parent(s): f62f528
fix: optimize H5 layout, fix header alignment and tabbar visibility
Browse files- src/App.vue +28 -13
src/App.vue
CHANGED
|
@@ -11,35 +11,36 @@ onHide(() => {
|
|
| 11 |
});
|
| 12 |
</script>
|
| 13 |
<style lang="scss">
|
| 14 |
-
/* H5 网页全局布局优化：限制最大宽度并居中 */
|
| 15 |
/* #ifdef H5 */
|
| 16 |
body {
|
| 17 |
background-color: #f5f5f5 !important; /* 外部背景色 */
|
| 18 |
}
|
| 19 |
|
| 20 |
-
/* 限制应用根容器宽度 */
|
| 21 |
uni-app {
|
| 22 |
max-width: 450px !important;
|
| 23 |
margin: 0 auto !important;
|
| 24 |
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
| 25 |
background-color: #fff;
|
| 26 |
min-height: 100vh;
|
| 27 |
-
|
| 28 |
-
overflow-x: hidden;
|
| 29 |
}
|
| 30 |
|
| 31 |
-
/* 头部导航栏
|
| 32 |
uni-page-head {
|
| 33 |
max-width: 450px !important;
|
| 34 |
-
left:
|
| 35 |
-
|
|
|
|
| 36 |
}
|
| 37 |
|
| 38 |
-
/* 底部 TabBar
|
| 39 |
uni-tabbar {
|
| 40 |
max-width: 450px !important;
|
| 41 |
-
left:
|
| 42 |
-
|
|
|
|
| 43 |
}
|
| 44 |
|
| 45 |
/* 内容区域背景色 */
|
|
@@ -47,9 +48,23 @@ uni-page-wrapper {
|
|
| 47 |
background-color: #fff !important;
|
| 48 |
}
|
| 49 |
|
| 50 |
-
/*
|
| 51 |
-
|
| 52 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 53 |
}
|
| 54 |
/* #endif */
|
| 55 |
</style>
|
|
|
|
| 11 |
});
|
| 12 |
</script>
|
| 13 |
<style lang="scss">
|
| 14 |
+
/* H5 网页全局布局优化：限制最大宽度并居中，模拟手机显示效果 */
|
| 15 |
/* #ifdef H5 */
|
| 16 |
body {
|
| 17 |
background-color: #f5f5f5 !important; /* 外部背景色 */
|
| 18 |
}
|
| 19 |
|
| 20 |
+
/* 限制应用根容器宽度，并在 PC 端居中 */
|
| 21 |
uni-app {
|
| 22 |
max-width: 450px !important;
|
| 23 |
margin: 0 auto !important;
|
| 24 |
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
| 25 |
background-color: #fff;
|
| 26 |
min-height: 100vh;
|
| 27 |
+
display: block;
|
|
|
|
| 28 |
}
|
| 29 |
|
| 30 |
+
/* 头部导航栏：限制宽度并居中 */
|
| 31 |
uni-page-head {
|
| 32 |
max-width: 450px !important;
|
| 33 |
+
left: 0 !important;
|
| 34 |
+
right: 0 !important;
|
| 35 |
+
margin: 0 auto !important;
|
| 36 |
}
|
| 37 |
|
| 38 |
+
/* 底部 TabBar：限制宽度并居中 */
|
| 39 |
uni-tabbar {
|
| 40 |
max-width: 450px !important;
|
| 41 |
+
left: 0 !important;
|
| 42 |
+
right: 0 !important;
|
| 43 |
+
margin: 0 auto !important;
|
| 44 |
}
|
| 45 |
|
| 46 |
/* 内容区域背景色 */
|
|
|
|
| 48 |
background-color: #fff !important;
|
| 49 |
}
|
| 50 |
|
| 51 |
+
/* 隐藏 H5 默认的滚动条样式，使其看起来更像手机应用 */
|
| 52 |
+
::-webkit-scrollbar {
|
| 53 |
+
display: none;
|
| 54 |
+
width: 0 !important;
|
| 55 |
+
height: 0 !important;
|
| 56 |
+
-webkit-appearance: none;
|
| 57 |
+
background: transparent;
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
/* 修复标题栏可能出现的文字偏移或显示不全问题 */
|
| 61 |
+
.uni-page-head-hd,
|
| 62 |
+
.uni-page-head-ft {
|
| 63 |
+
width: auto !important;
|
| 64 |
+
}
|
| 65 |
+
.uni-page-head-bd {
|
| 66 |
+
flex: 1 !important;
|
| 67 |
+
overflow: hidden !important;
|
| 68 |
}
|
| 69 |
/* #endif */
|
| 70 |
</style>
|