feat: game5-h5端样式；

frontend-h5/src/pages/game5/Game5.vue

 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { cssAssetUrl } from '@/commons/assets.ts'
 import MobileStage from '@/components/MobileStage.vue'
 import { useGameSocket, joinSharedRoom, sendGameMessage, userJoinStatus } from '@/composables/useGameSocket'
@@ -10,9 +10,16 @@ import { $getWechat } from '@/commons/utils.ts'
 import { playGame1Music } from '@/commons/music'
 
 type GameView = 'loading' | 'playing' | 'score'
+type RankPlayer = {
+    rank: number
+    nickname: string
+    avatar: string
+    score: number | string
+}
 
 const imageUrls = {
     bg: cssAssetUrl('game5/bg.webp'),
+    playingBg: cssAssetUrl('game5/second-bg.webp'),
     bg2: cssAssetUrl('game1/bg2.png'),
     logo: cssAssetUrl('logo.png'),
     title: cssAssetUrl('game5/title.webp'),
@@ -28,12 +35,24 @@ const imageUrls = {
     back: cssAssetUrl('game1/back.png'),
     replay: cssAssetUrl('game1/replay.png'),
     close: cssAssetUrl('game1/close.png'),
-
+    rank: cssAssetUrl('game6/rank.png'),
+    ranklist: cssAssetUrl('game6/ranklist.png'),
+    paodao: cssAssetUrl('game5/paodao.webp'),
+    circleBg: cssAssetUrl('game5/circle-bg.webp'),
+    circle: cssAssetUrl('game5/circle.webp'),
+    centerTile: cssAssetUrl('game5/biaoti.webp'),
     rule: cssAssetUrl('game1/rule.png')
 }
 
 const wechat = $getWechat()
 const currentView = ref<GameView>('loading')
+
+const stageBackground = computed(() => {
+    if (currentView.value === 'playing') {
+        return `${imageUrls.playingBg} center/cover`
+    }
+    return `${imageUrls.bg} center/cover`
+})
 const countdownInterval = ref(60)
 const isDivDescVisible = ref(false)
 const tick = ref(0)  //点击次数
@@ -45,6 +64,20 @@ const token = ref(wechat?.token ?? '')
 const nickname = ref(wechat?.nickname ?? '')
 const avatar = ref(wechat?.avatar ?? '')
 const showGameRule = ref(false)
+const showGameRank = ref(false)
+const rankList = ref<RankPlayer[]>([])
+const displayRankList = computed<RankPlayer[]>(() => {
+    const list = rankList.value.slice(0, 10)
+
+    return Array.from({ length: 10 }, (_, index) => {
+        return list[index] ?? {
+            rank: index + 1,
+            nickname: '-',
+            avatar: '',
+            score: '-',
+        }
+    })
+})
 
 const mobileStageRef = ref<InstanceType<typeof MobileStage> | null>(null)
 const _offSocketMessage = ref<(() => void) | undefined>()
@@ -98,7 +131,7 @@ function startGameCountdown(seconds = 60) {
             gameCountdownTimer = undefined
             setDivDescVisible(false)
             submitScore(true)
-            showScoreView()
+            showGameOverRank()
             return
         }
 
@@ -122,10 +155,12 @@ function resetToLoadingView() {
     }
     tick.value = 0
     rank.value = 0
+    rankList.value = []
     countdownInterval.value = 60
     currentGu.value = guFrames[0]
     isGuPlaying.value = false
     userJoinStatus.value = false
+    showGameRank.value = false
     currentView.value = 'loading'
     setDivDescVisible(false)
 }
@@ -133,15 +168,19 @@ function resetToLoadingView() {
 function startGameView() {
     stopGameCountdown()
     tick.value = 0
+    rank.value = 0
+    rankList.value = []
     currentGu.value = guFrames[0]
+    showGameRank.value = false
     currentView.value = 'playing'
     startGameCountdown()
 }
 
-function showScoreView() {
+function showGameOverRank() {
     stopGameCountdown()
     setDivDescVisible(false)
-    currentView.value = 'score'
+    currentView.value = 'loading'
+    showGameRank.value = true
 }
 
 
@@ -204,6 +243,20 @@ if (wechat) {
                 if (Number.isFinite(nextRank) && nextRank > 0) {
                     rank.value = nextRank
                 }
+            } else if (typeof data === 'object' && data) {
+                if (Array.isArray(data.list)) {
+                    rankList.value = data.list.map((item: any, index: number) => ({
+                        rank: Number(item?.rank ?? index + 1),
+                        nickname: String(item?.nickname ?? ''),
+                        avatar: String(item?.avatar ?? ''),
+                        score: Number(item?.score ?? 0),
+                    }))
+                }
+
+                const nextRank = Number(data.rank)
+                if (Number.isFinite(nextRank) && nextRank > 0) {
+                    rank.value = nextRank
+                }
             }
         },
         onRescoreSubmitted: (_recount) => {
@@ -236,11 +289,50 @@ onBeforeUnmount(() => {
 const showGameRuleHandler = () => {
     showGameRule.value = !showGameRule.value;
 }
+
+const rankCloseHandler = () => {
+    showGameRank.value = false
+}
 </script>
 
 <template>
-    <MobileStage v-if="token" :showGameRule="showGameRule" ref="mobileStageRef"
-        :background="`${imageUrls.bg} center/cover`">
+    <MobileStage v-if="token" :showGameRule="showGameRule" :showGameRank="showGameRank" ref="mobileStageRef"
+        :background="stageBackground">
+        <template #gameRank>
+            <div class="ranklist-container">
+                <div class="txt-title">排行</div>
+                <div class="list-container">
+                    <div class="row row-1">
+                        <div class="col-1">排名</div>
+                        <div class="col-2">用户</div>
+                        <div class="col-3">成绩</div>
+                    </div>
+                    <div class="row-2">
+                        <div class="row rank-row" v-for="(item, index) in displayRankList"
+                            :key="`${item.rank}-${index}`">
+                            <div class="col-1">
+                                <div>{{ item.rank }}</div>
+                            </div>
+                            <div class="col-2">
+                                <div class="avatar"
+                                    :style="item.avatar ? { backgroundImage: `url(${item.avatar})` } : {}"></div>
+                                <div>{{ item.nickname }}</div>
+                            </div>
+                            <div class="col-3">{{ item.score }}</div>
+                        </div>
+                    </div>
+                    <div class="row row-3">
+                        <div class="col-1">{{ rank > 0 ? rank : '未上榜' }}</div>
+                        <div class="col-2">
+                            <div class="avatar" :style="{ backgroundImage: `url(${avatar})` }"></div>
+                            <div>{{ nickname }}</div>
+                        </div>
+                        <div class="col-3">{{ tick }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="img-close" @click="rankCloseHandler"></div>
+        </template>
         <template #gameRule>
             <div class="rule-container">
                 <div class="rule-txt-container">
@@ -256,12 +348,13 @@ const showGameRuleHandler = () => {
                 <div class="rule-close" @click="showGameRuleHandler"></div>
             </div>
         </template>
-        <LoadingView v-if="currentView === 'loading'" :image-urls="imageUrls" :user-join-status="userJoinStatus"
+        <LoadingView v-if="currentView !== 'loading'" :image-urls="imageUrls" :user-join-status="userJoinStatus"
             @touchGameRule="showGameRuleHandler" />
-        <PlayingView v-else-if="currentView === 'playing'" :image-urls="imageUrls" :tick="tick" :rank="rank"
+        <!-- <PlayingView v-else-if="currentView === 'playing'" :image-urls="imageUrls" :tick="tick" :rank="rank" -->
+        <PlayingView v-else :image-urls="imageUrls" :tick="tick" :rank="rank"
             :current-gu="currentGu" :countdown-interval="countdownInterval" :is-div-desc-visible="isDivDescVisible"
             @touch="touchHandler" />
-        <ScoreView v-else :image-urls="imageUrls" :rank="rank" :tick="tick" />
+        <!-- <ScoreView v-else :image-urls="imageUrls" :rank="rank" :tick="tick" /> -->
     </MobileStage>
     <div v-else style="text-align: center; width: 100vw; height: 100vh; line-height: 30; font-size: 20px;">
         请使用微信扫码进入游戏
@@ -305,4 +398,95 @@ const showGameRuleHandler = () => {
         transform: scale(0.8);
     }
 }
+
+.ranklist-container {
+    width: 747px;
+    height: 1084px;
+    background: v-bind('imageUrls.ranklist');
+    transform: translate(-50%, -50%) scale(0.45);
+    left: 50%;
+    top: 50%;
+    position: absolute;
+
+    .txt-title {
+        width: 100%;
+        text-align: center;
+        font-size: 50px;
+        margin-top: 35px;
+        font-weight: bold;
+        color: #AA0000;
+        letter-spacing: 2px;
+    }
+
+    .list-container {
+        width: calc(100% - 90px);
+        height: calc(100% - 210px);
+        position: absolute;
+        left: 40px;
+        top: 140px;
+        text-align: center;
+        height: 73px;
+        line-height: 73px;
+        font-size: 32px;
+
+        .row {
+            display: grid;
+            grid-template-columns: 150px auto 150px;
+            align-items: center;
+        }
+
+        .row-1 {
+            color: #AA0000;
+            font-weight: bold;
+            background: linear-gradient(-84deg, #FFD396 0%, #FFF3D1 53%, #FFD59C 100%);
+            border-radius: 20px 20px 0px 0px;
+        }
+
+        .row-2 {
+            color: #633911;
+
+            .rank-row:nth-child(odd) {
+                background: #F2E2AE;
+            }
+
+            .rank-row:nth-child(even) {
+                background: #FCEEBF;
+            }
+
+            .col-1 {
+                position: relative;
+            }
+        }
+
+        .row-3 {
+            background: linear-gradient(0deg, #F4B64C 0%, #F7C96F 100%);
+            border-radius: 0px 0px 20px 20px;
+        }
+
+        .col-2 {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 18px;
+
+            .avatar {
+                width: 48px;
+                height: 48px;
+                flex: 0 0 auto;
+                border-radius: 50%;
+                background-position: center;
+                background-size: cover;
+            }
+        }
+    }
+}
+
+.img-close {
+    width: 57px;
+    height: 57px;
+    border-radius: 29px;
+    background: v-bind('imageUrls.close')center/cover;
+    transform: scale(0.7);
+    margin-top: 500px;
+}
 </style>
\ No newline at end of file

frontend-h5/src/pages/game5/views/PlayingView.vue

@@ -22,13 +22,23 @@ defineEmits<{
             </div>
         </Transition>
         <div class="img-logo"></div>
-        <div class="play-content">
-            <div>当前击鼓积分</div>
-            <div>{{ tick }}</div>
-            <div>当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
+        <div class="img-center-title"></div>
+        <div class="rank-content">
+            <div class="txt-left">
+                <div>排名</div>
+                <div class="txt-bold">{{ rank }}</div>
             </div>
-        <div class="bg-bottom"></div>
-        <div class="play-gu" :style="{ background: `${currentGu} center/cover` }" @click="$emit('touch')"></div>
+            <div class="txt-right">
+                <div>实时积分</div>
+                <div class="txt-bold">{{ tick }}</div>
+            </div>
+        </div>
+        <!-- <div class="bg-bottom"></div> -->
+        <div class="paodao-runway"></div>
+        <div class="circle-outer" @click="$emit('touch')">
+            <div class="circle-inner"></div>
+        </div>
+        <div class="play-click">点击按钮，开始套圈</div>
     </div>
 </template>
 
@@ -118,47 +128,104 @@ defineEmits<{
     transform: translateX(-50%);
 }
 
-.play-content {
-    margin-top: 240px;
-    margin-left: 40px;
-    margin-right: 40px;
-    padding: 30px 0;
-    border-radius: 25px;
-    background: rgba(40, 12, 8, 0.52);
-    color: white;
-    font-size: 28pt;
-    text-align: center;
+.img-center-title {
+    position: absolute;
+    top: 158px;
+    left: 185px;
+    width: 380px;
+    height: 114px;
+    background: v-bind('imageUrls.centerTile') center/cover;
 }
 
-.play-content>div:nth-child(2) {
-    display: inline-block;
-    margin: 10px 0;
-    background: linear-gradient(180deg, #FFE68D 0%, #FAD500 100%);
-    background-clip: text;
-    color: transparent;
-    font-size: 48pt;
+.rank-content {
+    width: 600px;
+    height: 140px;
+    background: v-bind('imageUrls.rank') center/cover;
+    position: absolute;
+    left: 50%;
+    top: 380px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
+    color: #A10A06;
+
+    .txt-bold {
+        font-size: 40px;
         font-weight: bold;
-    transform: scaleY(1.2);
-    transform-origin: center;
-    -webkit-background-clip: text;
+    }
+
+    >div {
+        display: flex;
+        width: 50%;
+        height: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
-.play-content>div:nth-child(3) {
-    position: relative;
-    top: -10px;
+.paodao-runway {
+    position: absolute;
+    left: 0;
+    top: 696px;
+    width: 750px;
+    height: 306px;
+    background: v-bind('imageUrls.paodao') repeat-x;
+    background-size: auto 100%;
+    animation: runway-scroll 8s linear infinite;
 }
 
-.play-content>div:nth-child(3) label {
-    color: white;
-    font-size: 42pt;
+@keyframes runway-scroll {
+    0% {
+        background-position-x: 0;
+    }
+
+    100% {
+        background-position-x: -750px;
+    }
+}
+
+.circle-outer {
+    position: absolute;
+    left: 50%;
+    bottom: 72px;
+    width: 345px;
+    height: 345px;
+    background: v-bind('imageUrls.circleBg') center/cover;
+    transform: translateX(-50%);
+    animation: circle-spin 3s linear infinite;
+}
+
+@keyframes circle-spin {
+    0% {
+        transform: translateX(-50%) rotate(0deg);
+    }
+    100% {
+        transform: translateX(-50%) rotate(360deg);
+    }
+}
+
+.circle-inner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 165px;
+    height: 165px;
+    background: v-bind('imageUrls.circle') center/cover;
+    transform: translate(-50%, -50%);
 }
 
-.play-gu {
+.play-click {
     position: absolute;
-    bottom: 350px;
+    bottom: 0px;
     left: 50%;
-    width: 400px;
-    height: 400px;
-    transform: translateX(-50%) scale(2.4);
+    width: 235px;
+    height: 26px;
+    transform: translateX(-50%) translateY(-190%);
+    font-weight: 400;
+    font-size: 26px;
+    color: #FFFFFF;
 }
 </style>