src/App.vue

<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
onLaunch(() => {
  console.log("App Launch");
});
onShow(() => {
  console.log("App Show");
});
onHide(() => {
  console.log("App Hide");
});
</script>
<style lang="scss">
/* H5 网页全局布局优化：严格模拟手机端居中显示 */
/* #ifdef H5 */
html,
body {
  background-color: #f5f5f5 !important;
  height: 100%;
  overflow: hidden; /* 禁止最外层 body 滚动 */
}

uni-app {
  max-width: 450px !important;
  height: 100% !important;
  margin: 0 auto !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden; /* 内部容器自包含 */
}

/* 头部导航栏：强制居中且宽度一致 */
uni-page-head {
  max-width: 450px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  position: fixed !important;
  z-index: 999;
}

/* 底部 TabBar：强制居中且宽度一致 */
uni-tabbar {
  max-width: 450px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  position: fixed !important;
  z-index: 999;
  
  /* 针对 uni-tabbar 内部容器的特殊处理，防止内容溢出 */
  .uni-tabbar {
    max-width: 450px !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* 内容区域：允许内部滚动，解决无内容却能滚动的问题 */
uni-page-wrapper {
  background-color: #fff !important;
  height: 100% !important;
  overflow-y: auto !important; /* 只在内容区允许滚动 */
  -webkit-overflow-scrolling: touch;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}

/* 修复标题栏显示 */
.uni-page-head-bd {
  font-size: 16px !important;
  font-weight: bold !important;
}
/* #endif */
</style>