UI优化

src/components/Container.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
+import { getCurrentGameAPI } from "@/apis";
 defineProps({
   title: {
     type: String,
@@ -27,16 +28,21 @@ defineProps({
 });
 const isIos = ref(true);
 const showHint = ref(false);
-const hintMessage = ref("");
+const hintType = ref(0);
 onMounted(() => {
   const deviceInfo = uni.getDeviceInfo();
   isIos.value = deviceInfo.osName === "ios";
 });
-const showGlobalHint = (message) => {
+const showGlobalHint = (type) => {
-  hintMessage.value = message;
+  hintType.value = type;
   showHint.value = true;
 };
 uni.$showHint = showGlobalHint;
+
+const backToGame = async () => {
+  const result = await getCurrentGameAPI();
+  console.log(111, result);
+};
 </script>
 
 <template>
@@ -45,12 +51,23 @@ uni.$showHint = showGlobalHint;
     <Header v-if="!isHome" :title="title" :onBack="onBack" />
     <view
       class="content"
-      :style="{ height: isHome ? '100vh' : `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)">
+    <ScreenHint :show="showHint">
-      {{ hintMessage }}
+      <view v-if="hintType === 1" class="back-to-game">
+        <text>您还有正在进行中的对局，是否进入</text>
+        <view>
+          <button hover-class="none" @click="backToGame">进入</button>
+          <button hover-class="none" @click="() => (showHint = false)">
+            不进入
+          </button>
+        </view>
+      </view>
     </ScreenHint>
   </view>
 </template>
@@ -66,4 +83,32 @@ uni.$showHint = showGlobalHint;
   justify-content: space-between;
   overflow-x: hidden;
 }
+.back-to-game {
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  width: 100%;
+  font-size: 14px;
+}
+.back-to-game > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: 50rpx;
+  width: 100%;
+}
+.back-to-game > view > button {
+  padding: 12px;
+  border-radius: 20px;
+  background-color: #fff6;
+  color: #fff;
+  width: 45%;
+  font-size: 16px;
+}
+.back-to-game > view > button:first-child {
+  background-color: #fed847;
+  color: #000;
+}
 </style>

src/components/ScreenHint.vue

@@ -8,20 +8,30 @@ const props = defineProps({
   },
   onClose: {
     type: Function,
-    default: () => {},
+    default: null,
   },
   mode: {
     type: String,
     default: "normal",
   },
 });
+const getContentHeight = () => {
+  if (props.mode === "tall") return "47vw";
+  if (props.mode === "square") return "74vw";
+  return '36vw'
+};
 </script>
 
 <template>
   <view class="container" :style="{ display: show ? 'flex' : 'none' }">
-    <view class="scale-in">
+    <view class="scale-in" :style="{ height: getContentHeight() }">
       <image
         v-if="mode === 'normal'"
+        src="../static/screen-hint-bg.png"
+        mode="widthFix"
+      />
+      <image
+        v-if="mode === 'tall'"
         src="../static/coach-comment.png"
         mode="widthFix"
       />
@@ -38,6 +48,7 @@ const props = defineProps({
       <slot />
     </view>
     <IconButton
+      v-if="!!onClose"
       src="../static/close-gold-outline.png"
       :width="30"
       :onClick="onClose"
@@ -64,15 +75,14 @@ const props = defineProps({
   justify-content: center;
   position: relative;
   width: 70vw;
-  min-height: 22vh;
-  margin-bottom: 20px;
   color: #fff;
+  margin-bottom: 15px;
 }
 .container > view:first-child > image {
   position: absolute;
   width: 80vw;
   left: -7%;
-  bottom: -20vw;
+  bottom: -18vw;
   z-index: -1;
   transform: translateY(-75px);
 }

src/pages/my-device.vue

@@ -212,7 +212,6 @@ const backToHome = () => {
   display: flex;
   flex-direction: column;
   font-size: 14px;
-  transform: translateX(10px) translateY(-10px);
 }
 .scan-tips > text {
   margin-bottom: 2px;

src/pages/ranking.vue

@@ -136,15 +136,15 @@ const toRankListPage = () => {
           </view>
           <view>
             <text>赛季平均环数</text>
-            <text :style="{ color: '#FFD947' }"
+            <text :style="{ color: '#FFD947' }">{{
-              >{{ user.avg_ring || "-" }}环</text
+              user.avg_ring ? user.avg_ring + "环" : "-"
-            >
+            }}</text>
           </view>
           <view>
             <text>赛季胜率</text>
-            <text :style="{ color: '#FF507E' }"
+            <text :style="{ color: '#FF507E' }">{{
-              >{{ user.avg_win || "-" }}%</text
+              user.avg_win ? user.avg_win + "%" : "-"
-            >
+            }}</text>
           </view>
         </view>
         <view class="rank-type">