style: optimize H5 layout and update README

README.md

@@ -1,17 +1,23 @@
 ---
-title: UniApp多平台小程序演示
-emoji: 🚀
+title: UniApp 多平台小程序通用模版
+emoji: 📱
 colorFrom: blue
-colorTo: green
+colorTo: indigo
 sdk: docker
 app_port: 7860
-short_description: UniApp多平台小程序，一套代码运行在微信、支付宝、百度、抖音等平台。
+short_description: UniApp 多平台小程序通用模版
 ---
 
-# UniApp 多平台小程序
+# 🚀 UniApp 多平台小程序通用模版
 
-## 项目简介
-基于 UniApp 框架开发的多平台小程序应用，支持微信、支付宝、百度、抖音等主流小程序平台。项目采用中文界面和代码注释，提供完整的用户交互体验和现代化的 UI 设计。
+基于 **UniApp + Vue3 + TypeScript** 构建的多平台小程序开发模版。一套代码实现全端覆盖，支持微信、支付宝、百度、抖音、QQ、H5 等主流平台。
+
+## ✨ 项目特色
+- 🌈 **全端覆盖**：极致的代码复用率，一套代码发布到所有小程序平台及 H5。
+- 🎨 **精美 UI**：内置现代化卡片式布局，适配多种屏幕尺寸，提供丝滑的用户交互体验。
+- 🌍 **全中文支持**：项目界面、系统提示、代码注释全部汉化，零门槛快速上手。
+- 🛠️ **工程化实践**：采用 Vue3 Composition API + TS，支持 SCSS 预处理，代码结构严谨、易于维护。
+- 🐳 **云端就绪**：预置 Docker 镜像配置，支持在 Hugging Face Spaces 等云平台一键部署。
 
 ## 功能特性
 - 🚀 **一套代码，多端运行**：支持微信、支付宝、百度、抖音、QQ、H5 等平台。

src/App.vue

@@ -11,37 +11,45 @@ onHide(() => {
 });
 </script>
 <style lang="scss">
-/* H5 网页限制最大宽度并居中 */
+/* H5 网页全局布局优化：限制最大宽度并居中 */
 /* #ifdef H5 */
-uni-page-body,
 body {
-  display: flex;
-  justify-content: center;
-  background-color: #f0f0f0 !important; /* 背景灰色，突出手机显示区域 */
+  background-color: #f5f5f5 !important; /* 外部背景色 */
 }
 
-uni-page-wrapper {
-  max-width: 500px !important; /* 限制宽度 */
+/* 限制应用根容器宽度 */
+uni-app {
+  max-width: 450px !important;
   margin: 0 auto !important;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
   background-color: #fff;
   min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
 }
 
-/* 适配顶部导航栏 */
+/* 头部导航栏居中限制宽度 */
 uni-page-head {
-  max-width: 500px !important;
-  margin: 0 auto !important;
-  left: 0 !important;
-  right: 0 !important;
+  max-width: 450px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
 }
 
-/* 适配底部 TabBar */
+/* 底部 TabBar 居中限制宽度 */
 uni-tabbar {
-  max-width: 500px !important;
-  margin: 0 auto !important;
-  left: 0 !important;
-  right: 0 !important;
+  max-width: 450px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+}
+
+/* 内容区域背景色 */
+uni-page-wrapper {
+  background-color: #fff !important;
+}
+
+/* 解决某些浏览器可能出现的滚动条溢出问题 */
+html {
+  overflow-x: hidden;
 }
 /* #endif */
 </style>