From 7fb72c9b1ef33872c233a92a452b1fbace80af83 Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Wed, 2 Jul 2025 17:21:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=B1=80=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppFooter.vue |   3 +-
 src/components/Container.vue |  20 ++-
 src/pages/friend-battle.vue  |  77 ++++++------
 src/pages/index.vue          | 235 ++++++++++++++++++-----------------
 src/pages/practise.vue       |  77 ++++++------
 src/pages/user.vue           |  77 ++++++------
 6 files changed, 261 insertions(+), 228 deletions(-)

diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 7557b61..a007405 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -61,11 +61,12 @@ function handleTabClick(index) {
 <style scoped>
 .footer {
   height: 90px;
-  width: 100%;
+  width: 100vw;
   position: relative;
   display: flex;
   justify-content: space-around;
   align-items: center;
+  overflow-x: hidden;
 }
 
 .footer-bg {
diff --git a/src/components/Container.vue b/src/components/Container.vue
index 30c7327..258f895 100644
--- a/src/components/Container.vue
+++ b/src/components/Container.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
+import ScreenHint from "@/components/ScreenHint.vue";
 defineProps({
   title: {
     type: String,
@@ -19,30 +20,45 @@ defineProps({
     type: String,
     default: "auto",
   },
+  isHome: {
+    type: Boolean,
+    default: false,
+  },
 });
 const isIos = ref(true);
+const showHint = ref(false);
+const hintMessage = ref("");
 onMounted(() => {
   const deviceInfo = uni.getDeviceInfo();
   isIos.value = deviceInfo.osName === "ios";
 });
+const showGlobalHint = (message) => {
+  hintMessage.value = message;
+  showHint.value = true;
+};
+uni.$showHint = showGlobalHint;
 </script>
 
 <template>
   <view>
     <AppBackground :type="bgType" />
-    <Header :title="title" :onBack="onBack" />
+    <Header v-if="!isHome" :title="title" :onBack="onBack" />
     <view
       class="content"
-      :style="{ height: `calc(100vh - ${isIos ? 98 : 95}px)`, overflow }"
+      :style="{ height: isHome ? '100vh' : `calc(100vh - ${isIos ? 98 : 95}px)`, overflow }"
     >
       <slot></slot>
     </view>
+    <ScreenHint :show="showHint" :onClose="() => (showHint = false)">
+      {{ hintMessage }}
+    </ScreenHint>
   </view>
 </template>
 
 <style scoped>
 .content {
   width: 100vw;
+  height: 100vh;
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
diff --git a/src/pages/friend-battle.vue b/src/pages/friend-battle.vue
index ae48a08..d937152 100644
--- a/src/pages/friend-battle.vue
+++ b/src/pages/friend-battle.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
+import Container from "@/components/Container.vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import SModal from "@/components/SModal.vue";
@@ -51,48 +50,48 @@ const onCreateRoom = () => {
 </script>
 
 <template>
-  <view>
-    <AppBackground />
-    <Header title="好友约战" />
-    <Guide>
-      <view class="guide-tips">
-        <text>约上朋友开几局，欢乐多，不寂寞</text>
-        <text>一起练升级更快，早日加入全国排位赛！</text>
-      </view>
-    </Guide>
-    <view class="founded-room">
-      <image src="../static/founded-room.png" mode="widthFix" />
-      <view>
-        <input
-          placeholder="输入房间号"
-          v-model="roomNumber"
-          placeholder-style="color: #ccc"
-        />
-        <view @click="enterRoom">进入房间</view>
-      </view>
-    </view>
-    <view class="create-room">
-      <image src="../static/battle-bg.png" mode="widthFix" />
-      <view>
-        <image src="../static/avatar.png" mode="widthFix" />
-        <image src="../static/versus.png" mode="widthFix" />
+  <Container title="好友约战">
+    <view :style="{ width: '100%' }">
+      <Guide>
+        <view class="guide-tips">
+          <text>约上朋友开几局，欢乐多，不寂寞</text>
+          <text>一起练升级更快，早日加入全国排位赛！</text>
+        </view>
+      </Guide>
+      <view class="founded-room">
+        <image src="../static/founded-room.png" mode="widthFix" />
         <view>
-          <image src="../static/question-mark.png" mode="widthFix" />
+          <input
+            placeholder="输入房间号"
+            v-model="roomNumber"
+            placeholder-style="color: #ccc"
+          />
+          <view @click="enterRoom">进入房间</view>
         </view>
       </view>
-      <view>
-        <SButton width="70%" :rounded="30" :onClick="onCreateRoom">
-          创建约战房
-        </SButton>
+      <view class="create-room">
+        <image src="../static/battle-bg.png" mode="widthFix" />
+        <view>
+          <image src="../static/avatar.png" mode="widthFix" />
+          <image src="../static/versus.png" mode="widthFix" />
+          <view>
+            <image src="../static/question-mark.png" mode="widthFix" />
+          </view>
+        </view>
+        <view>
+          <SButton width="70%" :rounded="30" :onClick="onCreateRoom">
+            创建约战房
+          </SButton>
+        </view>
       </view>
+      <SModal :show="showModal" :onClose="() => (showModal = false)">
+        <view v-if="warnning" class="warnning">
+          {{ warnning }}
+        </view>
+        <CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
+      </SModal>
     </view>
-    <SModal :show="showModal" :onClose="() => (showModal = false)">
-      <view v-if="warnning" class="warnning">
-        {{ warnning }}
-      </view>
-      <CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
-    </SModal>
-  </view>
+  </Container>
 </template>
 
 <style scoped>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index deddee4..69f5c84 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref, onMounted } from "vue";
+import Container from "@/components/Container.vue";
 import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
@@ -86,134 +87,141 @@ const comingSoon = () => {
 </script>
 
 <template>
-  <view
-    class="root-container"
-    :style="{ paddingTop: isIos ? '100rpx' : '70rpx' }"
-  >
-    <AppBackground />
-    <UserHeader showRank :onSignin="() => (showModal = true)" />
-    <view class="container">
-      <view class="feature-grid">
-        <view class="bow-card">
-          <image
-            src="../static/bow-bg.png"
-            mode="widthFix"
-            @click="() => toPage('/pages/my-device')"
-          />
-          <text v-if="!user.id">我的弓箭</text>
-          <text v-if="user.id && !device.deviceId">请绑定设备</text>
-          <text v-if="user.id && device.deviceId">{{ device.deviceName }}</text>
-          <image
-            src="../static/a2@2x.png"
-            mode="widthFix"
-            @click="() => toPage('/pages/first-try')"
-          />
-        </view>
+  <Container :isHome="true">
+    <view class="container" :style="{ paddingTop: isIos ? '100rpx' : '70rpx' }">
+      <UserHeader showRank :onSignin="() => (showModal = true)" />
+      <view :style="{ padding: '12px 10px' }">
+        <view class="feature-grid">
+          <view class="bow-card">
+            <image
+              src="../static/bow-bg.png"
+              mode="widthFix"
+              @click="() => toPage('/pages/my-device')"
+            />
 
-        <view class="practice-card" @click="() => toPage('/pages/practise')">
-          <image src="../static/a2@2x(1).png" mode="widthFix" />
-        </view>
-
-        <view class="friend-card" @click="() => toPage('/pages/friend-battle')">
-          <image src="../static/a3@2x.png" mode="widthFix" />
-        </view>
-      </view>
-      <view class="ranking-section">
-        <image src="../static/a4@2x.png" mode="widthFix" />
-        <button
-          class="into-btn"
-          @click="() => toPage('/pages/ranking')"
-          hover-class="none"
-        ></button>
-        <view class="ranking-players" @click="toRankListPage">
-          <img src="../static/juezhanbang.png" mode="widthFix" />
-          <view class="divide-line"></view>
-          <view class="player-avatars">
-            <block v-for="i in 6" :key="i">
-              <block v-if="rankData.rank && rankData.rank[i - 1]">
-                <view
-                  class="player-avatar"
-                  :style="{
-                    zIndex: 8 - i,
-                    borderColor: topThreeColors[i - 1] || '#000',
-                  }"
-                >
-                  <image v-if="i === 1" src="../static/champ1.png" />
-                  <image v-if="i === 2" src="../static/champ2.png" />
-                  <image v-if="i === 3" src="../static/champ3.png" />
-                  <view v-if="i > 3">{{ i }}</view>
-                  <image :src="rankData.rank[i - 1].avatar" mode="aspectFill" />
-                </view>
-              </block>
-            </block>
-            <view class="more-players">
-              <text>{{ rankData.rank.length }}</text>
-            </view>
+            <text v-if="!user.id">我的弓箭</text>
+            <text v-if="user.id && !device.deviceId">请绑定设备</text>
+            <text v-if="user.id && device.deviceId">{{
+              device.deviceName
+            }}</text>
+            <image
+              src="../static/a2@2x.png"
+              mode="widthFix"
+              @click="() => toPage('/pages/first-try')"
+            />
           </view>
-        </view>
-        <view class="region-stats">
+
+          <view class="practice-card" @click="() => toPage('/pages/practise')">
+            <image src="../static/a2@2x(1).png" mode="widthFix" />
+          </view>
+
           <view
-            v-for="(region, index) in ['广东', '湖南', '内蒙', '海南', '四川']"
-            :key="index"
-            class="region-item"
-            @click="comingSoon"
+            class="friend-card"
+            @click="() => toPage('/pages/friend-battle')"
           >
-            <image src="../static/region-bg.png" mode="widthFix" />
-            <image
-              v-if="index === 0"
-              src="../static/region-1.png"
-              mode="widthFix"
-            />
-            <image
-              v-if="index === 1"
-              src="../static/region-2.png"
-              mode="widthFix"
-            />
-            <image
-              v-if="index === 2"
-              src="../static/region-3.png"
-              mode="widthFix"
-            />
-            <image
-              v-if="index === 3"
-              src="../static/region-4.png"
-              mode="widthFix"
-            />
-            <image
-              v-if="index === 4"
-              src="../static/region-5.png"
-              mode="widthFix"
-            />
-            <text>{{ region }}</text>
-            <view>
-              <text :style="{ color: '#fff', marginRight: '2px' }">2323</text>
-              <text>分</text>
+            <image src="../static/a3@2x.png" mode="widthFix" />
+          </view>
+        </view>
+        <view class="ranking-section">
+          <image src="../static/a4@2x.png" mode="widthFix" />
+          <button
+            class="into-btn"
+            @click="() => toPage('/pages/ranking')"
+            hover-class="none"
+          ></button>
+          <view class="ranking-players" @click="toRankListPage">
+            <img src="../static/juezhanbang.png" mode="widthFix" />
+            <view class="divide-line"></view>
+            <view class="player-avatars">
+              <block v-for="i in 6" :key="i">
+                <block v-if="rankData.rank && rankData.rank[i - 1]">
+                  <view
+                    class="player-avatar"
+                    :style="{
+                      zIndex: 8 - i,
+                      borderColor: topThreeColors[i - 1] || '#000',
+                    }"
+                  >
+                    <image v-if="i === 1" src="../static/champ1.png" />
+                    <image v-if="i === 2" src="../static/champ2.png" />
+                    <image v-if="i === 3" src="../static/champ3.png" />
+                    <view v-if="i > 3">{{ i }}</view>
+                    <image
+                      :src="rankData.rank[i - 1].avatar"
+                      mode="aspectFill"
+                    />
+                  </view>
+                </block>
+              </block>
+              <view class="more-players">
+                <text>{{ rankData.rank.length }}</text>
+              </view>
             </view>
           </view>
-          <view class="region-more" @click="comingSoon">
-            <image src="../static/region-more.png" mode="widthFix" />
-            <text>...</text>
-            <text>更多</text>
+          <view class="region-stats">
+            <view
+              v-for="(region, index) in [
+                '广东',
+                '湖南',
+                '内蒙',
+                '海南',
+                '四川',
+              ]"
+              :key="index"
+              class="region-item"
+              @click="comingSoon"
+            >
+              <image src="../static/region-bg.png" mode="widthFix" />
+              <image
+                v-if="index === 0"
+                src="../static/region-1.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 1"
+                src="../static/region-2.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 2"
+                src="../static/region-3.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 3"
+                src="../static/region-4.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 4"
+                src="../static/region-5.png"
+                mode="widthFix"
+              />
+              <text>{{ region }}</text>
+              <view>
+                <text :style="{ color: '#fff', marginRight: '2px' }">2323</text>
+                <text>分</text>
+              </view>
+            </view>
+            <view class="region-more" @click="comingSoon">
+              <image src="../static/region-more.png" mode="widthFix" />
+              <text>...</text>
+              <text>更多</text>
+            </view>
           </view>
         </view>
       </view>
+      <SModal :show="showModal" :onClose="() => (showModal = false)">
+        <Signin :onClose="() => (showModal = false)" />
+      </SModal>
     </view>
     <AppFooter :signin="() => (showModal = true)" />
-    <SModal :show="showModal" :onClose="() => (showModal = false)">
-      <Signin :onClose="() => (showModal = false)" />
-    </SModal>
-  </view>
+  </Container>
 </template>
 
 <style scoped>
-.root-container {
-  color: white;
-  position: relative;
-}
-
 .container {
-  height: calc(100vh - 210px);
-  padding: 15px 10px;
+  width: 100%;
 }
 
 .feature-grid {
@@ -352,6 +360,7 @@ const comingSoon = () => {
 
 .more-players > text {
   margin-left: 2px;
+  color: #fff;
 }
 
 .region-stats {
diff --git a/src/pages/practise.vue b/src/pages/practise.vue
index b302794..8c06a56 100644
--- a/src/pages/practise.vue
+++ b/src/pages/practise.vue
@@ -1,6 +1,5 @@
 <script setup>
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
+import Container from "@/components/Container.vue";
 import Guide from "@/components/Guide.vue";
 
 const toPractiseOne = () => {
@@ -17,40 +16,48 @@ const toPractiseTwo = () => {
 </script>
 
 <template>
-  <view>
-    <AppBackground />
-    <Header title="个人练习" />
-    <Guide>
-      <text :style="{ color: '#fed847' }"
-        >师傅领进门，修行靠自身，赶紧练起来吧。</text
-      >
-      <text :style="{ fontSize: '12px' }"
-        >坚持练习就能你快速升级，早日加入全国排位赛！</text
-      >
-    </Guide>
-    <image
-      src="../static/practise-bg.png"
-      class="practise-bg"
-      mode="widthFix"
-      :style="{ marginTop: 0 }"
-    />
-    <view class="practise-btn" @click="toPractiseOne">
-      <image src="../static/practise1.png" class="practise1" mode="widthFix" />
+  <Container title="个人练习">
+    <view :style="{ width: '100%' }">
+      <Guide>
+        <text :style="{ color: '#fed847' }"
+          >师傅领进门，修行靠自身，赶紧练起来吧。</text
+        >
+        <text :style="{ fontSize: '12px' }"
+          >坚持练习就能你快速升级，早日加入全国排位赛！</text
+        >
+      </Guide>
+      <image
+        src="../static/practise-bg.png"
+        class="practise-bg"
+        mode="widthFix"
+        :style="{ marginTop: 0 }"
+      />
+      <view class="practise-btn" @click="toPractiseOne">
+        <image
+          src="../static/practise1.png"
+          class="practise1"
+          mode="widthFix"
+        />
+      </view>
+      <image
+        src="../static/practise-bg.png"
+        class="practise-bg"
+        mode="widthFix"
+      />
+      <view class="practise-btn" @click="toPractiseTwo">
+        <image
+          src="../static/practise2.png"
+          class="practise2"
+          mode="widthFix"
+        />
+      </view>
+      <image
+        src="../static/practise-bg.png"
+        class="practise-bg"
+        mode="widthFix"
+      />
     </view>
-    <image
-      src="../static/practise-bg.png"
-      class="practise-bg"
-      mode="widthFix"
-    />
-    <view class="practise-btn" @click="toPractiseTwo">
-      <image src="../static/practise2.png" class="practise2" mode="widthFix" />
-    </view>
-    <image
-      src="../static/practise-bg.png"
-      class="practise-bg"
-      mode="widthFix"
-    />
-  </view>
+  </Container>
 </template>
 
 <style scoped>
diff --git a/src/pages/user.vue b/src/pages/user.vue
index 8a4f589..86ab87f 100644
--- a/src/pages/user.vue
+++ b/src/pages/user.vue
@@ -1,6 +1,5 @@
 <script setup>
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
+import Container from "@/components/Container.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import UserItem from "@/components/UserItem.vue";
 import Avatar from "@/components/Avatar.vue";
@@ -55,44 +54,46 @@ const logout = () => {
 </script>
 
 <template>
-  <view>
-    <AppBackground />
-    <Header title="用户信息" />
-    <UserHeader :user="user" />
-    <view class="container">
-      <UserItem title="用户名">{{ user.nickName }}</UserItem>
-      <UserItem title="头像">
-        <Avatar :src="user.avatar" :size="35" />
-      </UserItem>
-      <UserItem
-        title="订单"
-        :customStyle="{
-          marginTop: '10px',
-        }"
-        :onClick="toOrderPage"
-      />
-      <UserItem
-        title="新手试炼场"
-        :onClick="user.trio > 0 ? null : toFristTryPage"
-      >
-        <text v-if="user.trio > 0" :style="{ color: '#259249' }">已完成</text>
-        <text v-else :style="{ color: '#CC311F' }">未完成</text>
-      </UserItem>
-      <UserItem title="会员" :onClick="toBeVipPage"> 已赠送6个月会员 </UserItem>
-      <UserItem title="等级介绍" :onClick="toGradeIntroPage" />
-      <UserItem
-        title="段位介绍"
-        :customStyle="{
-          marginBottom: '10px',
-        }"
-        :onClick="toRankIntroPage"
-      />
-      <view class="my-grow" @click="toMyGrowthPage">
-        <image src="../static/my-grow.png" mode="widthFix" />
+  <Container title="用户信息">
+    <view :style="{ width: '100%' }">
+      <UserHeader :user="user" />
+      <view class="container">
+        <UserItem title="用户名">{{ user.nickName }}</UserItem>
+        <UserItem title="头像">
+          <Avatar :src="user.avatar" :size="35" />
+        </UserItem>
+        <UserItem
+          title="订单"
+          :customStyle="{
+            marginTop: '10px',
+          }"
+          :onClick="toOrderPage"
+        />
+        <UserItem
+          title="新手试炼场"
+          :onClick="user.trio > 0 ? null : toFristTryPage"
+        >
+          <text v-if="user.trio > 0" :style="{ color: '#259249' }">已完成</text>
+          <text v-else :style="{ color: '#CC311F' }">未完成</text>
+        </UserItem>
+        <UserItem title="会员" :onClick="toBeVipPage">
+          已赠送6个月会员
+        </UserItem>
+        <UserItem title="等级介绍" :onClick="toGradeIntroPage" />
+        <UserItem
+          title="段位介绍"
+          :customStyle="{
+            marginBottom: '10px',
+          }"
+          :onClick="toRankIntroPage"
+        />
+        <view class="my-grow" @click="toMyGrowthPage">
+          <image src="../static/my-grow.png" mode="widthFix" />
+        </view>
+        <UserItem title="退出登录(仅用于测试)" :onClick="logout" />
       </view>
-      <UserItem title="退出登录(仅用于测试)" :onClick="logout" />
     </view>
-  </view>
+  </Container>
 </template>
 
 <style scoped>