diff --git a/src/components/ScoreResult.vue b/src/components/ScoreResult.vue index afb0522..cd75482 100644 --- a/src/components/ScoreResult.vue +++ b/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 { diff --git a/src/components/ScreenHint.vue b/src/components/ScreenHint.vue index 66bec5e..7c905ad 100644 --- a/src/components/ScreenHint.vue +++ b/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; diff --git a/src/pages/melee-match.vue b/src/pages/melee-match.vue index ec5f488..ebaacbe 100644 --- a/src/pages/melee-match.vue +++ b/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]" /> + + + 上半场结束,休息一下吧:) + 20秒后开始下半场 + + {{ @@ -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; +}