大乱斗添加中场提示

src/components/ScoreResult.vue

@@ -118,7 +118,7 @@ setTimeout(() => {
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.8);
   z-index: 5;
 }
 .container-header {

src/components/ScreenHint.vue

@@ -52,7 +52,7 @@ const props = defineProps({
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.8);
   flex-direction: column;
   justify-content: center;
   align-items: center;

src/pages/melee-match.vue

@@ -10,6 +10,7 @@ import Timer from "@/components/Timer.vue";
 import PlayerScore from "@/components/PlayerScore.vue";
 import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
+import ScreenHint from "@/components/ScreenHint.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -30,6 +31,7 @@ const seq = ref(0);
 const timerSeq = ref(0);
 const players = ref([]);
 const playersScores = ref({});
+const halfTimeTip = ref(false);
 
 onLoad((options) => {
   gameType.value = options.gameType;
@@ -93,7 +95,8 @@ async function onReceiveMessage(messages = []) {
       playersScores.value[msg.userId].push(msg.target);
     }
     if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
-      tips.value = "上半场结束，休息一下吧：） 20秒后进入下半场";
+      halfTimeTip.value = true;
+      tips.value = "准备下半场";
     }
     if (msg.constructor === MESSAGETYPES.MatchOver) {
       uni.redirectTo({
@@ -147,6 +150,16 @@ onUnmounted(() => {
         :scores="playersScores[player.id]"
       />
       <Timer :seq="timerSeq" :callBack="readyToGo" />
+      <ScreenHint
+        :show="halfTimeTip"
+        mode="small"
+        :onClose="() => (halfTimeTip = false)"
+      >
+        <view class="half-time-tip">
+          <text>上半场结束，休息一下吧:）</text>
+          <text>20秒后开始下半场</text>
+        </view>
+      </ScreenHint>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
@@ -168,4 +181,16 @@ onUnmounted(() => {
   padding: 0 15px;
   padding-top: 15px;
 }
+.half-time-tip {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 52px;
+}
+.half-time-tip > text:last-child {
+  margin-top: 20px;
+  color: #fff9;
+}
 </style>