添加全局提示

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 {

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;

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,9 +50,8 @@ const onCreateRoom = () => {
 </script>
 
 <template>
-  <view>
-    <AppBackground />
-    <Header title="好友约战" />
+  <Container title="好友约战">
+    <view :style="{ width: '100%' }">
       <Guide>
         <view class="guide-tips">
           <text>约上朋友开几局，欢乐多，不寂寞</text>
@@ -93,6 +91,7 @@ const onCreateRoom = () => {
         <CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
       </SModal>
     </view>
+  </Container>
 </template>
 
 <style scoped>

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,13 +87,10 @@ const comingSoon = () => {
 </script>
 
 <template>
-  <view
-    class="root-container"
-    :style="{ paddingTop: isIos ? '100rpx' : '70rpx' }"
-  >
-    <AppBackground />
+  <Container :isHome="true">
+    <view class="container" :style="{ paddingTop: isIos ? '100rpx' : '70rpx' }">
       <UserHeader showRank :onSignin="() => (showModal = true)" />
-    <view class="container">
+      <view :style="{ padding: '12px 10px' }">
         <view class="feature-grid">
           <view class="bow-card">
             <image
@@ -100,9 +98,12 @@ const comingSoon = () => {
               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>
+            <text v-if="user.id && device.deviceId">{{
+              device.deviceName
+            }}</text>
             <image
               src="../static/a2@2x.png"
               mode="widthFix"
@@ -114,7 +115,10 @@ const comingSoon = () => {
             <image src="../static/a2@2x(1).png" mode="widthFix" />
           </view>
 
-        <view class="friend-card" @click="() => toPage('/pages/friend-battle')">
+          <view
+            class="friend-card"
+            @click="() => toPage('/pages/friend-battle')"
+          >
             <image src="../static/a3@2x.png" mode="widthFix" />
           </view>
         </view>
@@ -142,7 +146,10 @@ const comingSoon = () => {
                     <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" />
+                    <image
+                      :src="rankData.rank[i - 1].avatar"
+                      mode="aspectFill"
+                    />
                   </view>
                 </block>
               </block>
@@ -153,7 +160,13 @@ const comingSoon = () => {
           </view>
           <view class="region-stats">
             <view
-            v-for="(region, index) in ['广东', '湖南', '内蒙', '海南', '四川']"
+              v-for="(region, index) in [
+                '广东',
+                '湖南',
+                '内蒙',
+                '海南',
+                '四川',
+              ]"
               :key="index"
               class="region-item"
               @click="comingSoon"
@@ -198,22 +211,17 @@ const comingSoon = () => {
           </view>
         </view>
       </view>
-    <AppFooter :signin="() => (showModal = true)" />
       <SModal :show="showModal" :onClose="() => (showModal = false)">
         <Signin :onClose="() => (showModal = false)" />
       </SModal>
     </view>
+    <AppFooter :signin="() => (showModal = true)" />
+  </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 {

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,9 +16,8 @@ const toPractiseTwo = () => {
 </script>
 
 <template>
-  <view>
-    <AppBackground />
-    <Header title="个人练习" />
+  <Container title="个人练习">
+    <view :style="{ width: '100%' }">
       <Guide>
         <text :style="{ color: '#fed847' }"
           >师傅领进门，修行靠自身，赶紧练起来吧。</text
@@ -35,7 +33,11 @@ const toPractiseTwo = () => {
         :style="{ marginTop: 0 }"
       />
       <view class="practise-btn" @click="toPractiseOne">
-      <image src="../static/practise1.png" class="practise1" mode="widthFix" />
+        <image
+          src="../static/practise1.png"
+          class="practise1"
+          mode="widthFix"
+        />
       </view>
       <image
         src="../static/practise-bg.png"
@@ -43,7 +45,11 @@ const toPractiseTwo = () => {
         mode="widthFix"
       />
       <view class="practise-btn" @click="toPractiseTwo">
-      <image src="../static/practise2.png" class="practise2" mode="widthFix" />
+        <image
+          src="../static/practise2.png"
+          class="practise2"
+          mode="widthFix"
+        />
       </view>
       <image
         src="../static/practise-bg.png"
@@ -51,6 +57,7 @@ const toPractiseTwo = () => {
         mode="widthFix"
       />
     </view>
+  </Container>
 </template>
 
 <style scoped>

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,9 +54,8 @@ const logout = () => {
 </script>
 
 <template>
-  <view>
-    <AppBackground />
-    <Header title="用户信息" />
+  <Container title="用户信息">
+    <view :style="{ width: '100%' }">
       <UserHeader :user="user" />
       <view class="container">
         <UserItem title="用户名">{{ user.nickName }}</UserItem>
@@ -78,7 +76,9 @@ const logout = () => {
           <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="toBeVipPage">
+          已赠送6个月会员
+        </UserItem>
         <UserItem title="等级介绍" :onClick="toGradeIntroPage" />
         <UserItem
           title="段位介绍"
@@ -93,6 +93,7 @@ const logout = () => {
         <UserItem title="退出登录(仅用于测试)" :onClick="logout" />
       </view>
     </view>
+  </Container>
 </template>
 
 <style scoped>