1

frontend-h5/src/components/MobileStage.vue

@@ -162,11 +162,11 @@ defineExpose({
                 <slot name="gameRule"></slot>
             </div>
         </Transition>
-        <Transition name="game-rule-fade">
+        <!-- <Transition name="game-rule-fade">
             <div v-if="!countdownVisible && showGameRank" class="modal-container">
                 <slot name="gameRank"></slot>
             </div>
-        </Transition>
+        </Transition> -->
     </main>
 </template>
 

frontend-h5/src/composables/useGameSocket.ts

@@ -57,7 +57,7 @@ const networkDisconnectToastDuration = 30 * 60 * 1000;
 
 export function sendGameMessage(cmd: string, data: any = {}) {
     const sent = sendSocketMessage(cmd, data)
-    if (!sent) {
+    if (!sent && cmd === 'submit_score_save') {
         $toast('网络不好，分数无法提交', networkDisconnectToastDuration)
     }
     return sent
@@ -105,7 +105,6 @@ export function useGameSocket(options: GameSocketOptions) {
             // $toast('网络中断，尝试重新连接...')
             isGameSocketConnected.value = false;
             stopStatusPolling();
-            $toast('网络连接已断开，请检查网络后重新进入游戏', networkDisconnectToastDuration)
             socket = null;
         },
         onError: (error: any) => {

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

@@ -26,7 +26,7 @@ defineEmits<{
         <div class="play-content">
             <div>当前击鼓积分</div>
             <div>{{ tick }}</div>
-            <div v-if="!userTop10RankStatus">当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
+            <!-- <div v-if="!userTop10RankStatus">当前排名: &nbsp;第&nbsp;<label></label>&nbsp;名</div> -->
         </div>
         <div class="bg-bottom"></div>
         <div class="play-gu" :style="{ backgroundPosition: `-${currentGuFrame * 400}px 0` }" @click="$emit('touch')"></div>

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

@@ -135,14 +135,20 @@ onBeforeUnmount(stopInertia)
         <!-- <div class="img-logo"></div>
         <div class="img-hydt"></div> -->
         <div class="rank-content">
-            <div class="txt-left">
+            <div>
+                实时得分
+            </div>
+            <div>
+                {{ tick }}
+            </div>
+            <!-- <div class="txt-left">
                 <div>排名</div>
-                <div class="txt-bold">{{ rank }}</div>
+                <div class="txt-bold"></div>
             </div>
             <div class="txt-right">
                 <div>实时得分</div>
                 <div class="txt-bold">{{ tick }}</div>
-            </div>
+            </div> -->
         </div>
         <div class="img-pointer"></div>
         <div ref="coinRef" class="img-coin" :style="{ '--coin-rotation': `${coinRotation}deg` }"
@@ -201,15 +207,18 @@ onBeforeUnmount(stopInertia)
 .rank-content {
     width: 600px;
     height: 140px;
-    background: v-bind('imageUrls.rank') center/cover;
+    border: 1px solid #A10A06;
+    border-radius: 25px;
+    background: #F7DA81;
+    /* background: v-bind('imageUrls.rank') center/cover; */
     position: absolute;
     left: 50%;
     top: 570px;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    /* align-items: center;
+    justify-content: space-between; */
     transform: translate(-50%, -50%);
-    font-size: 24px;
+    font-size: 44px;
     color: #A10A06;
 
     .txt-bold {

frontend-h5/src/pages/game2/views/ScoreView.vue

+<script setup lang="ts">
+import { $getWechat } from '@/commons/utils';
+import { onMounted, ref } from 'vue';
+
+defineProps<{
+    imageUrls: Record<string, string>
+    tick: number
+    rank: number
+}>()
+
+defineEmits<{
+    replay: []
+    back: []
+}>()
+const nickname = ref('');
+const avatar = ref('');
+onMounted(() => {
+    const wechat = $getWechat();
+    nickname.value = wechat.nickname;
+    avatar.value = wechat.avatar;
+});
+</script>
+
+<template>
+    <div class="h5-page game-stage">
+        <div class="img-logo"></div>
+        <div class="bg-bottom"></div>
+        <div class="img-score">
+            <div class="score-avatar"
+                :style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"></div>
+            <div class="score-content">
+                <div>{{ nickname }}</div>
+                <div>您的成绩</div>
+                <div>击鼓积分</div>
+                <div>{{ tick }}</div>
+                <div>最终排名</div>
+                <div v-if="rank>0">第<label>{{ rank }}</label>名</div>
+                <div v-else>未上榜</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.game-stage {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    padding: 0;
+}
+
+.bg-bottom {
+    position: absolute;
+    bottom: 0;
+    left: var(--stage-viewport-left, 0);
+    width: var(--stage-viewport-width, 750px);
+    height: 479px;
+    background: v-bind('imageUrls.bg2') center/cover;
+    opacity: 0.6;
+}
+
+.img-logo {
+    position: absolute;
+    top: 66px;
+    left: 50%;
+    width: 428px;
+    height: 77px;
+    background: v-bind('imageUrls.logo') center/cover;
+    transform: translateX(-50%);
+}
+
+.img-score {
+    position: absolute;
+    top: 450px;
+    left: 50%;
+    width: 465px;
+    height: 731px;
+    background: v-bind('imageUrls.scoreBg') center/cover;
+    transform: translateX(-50%) scale(1.2);
+}
+
+.score-avatar {
+    position: absolute;
+    top: -50px;
+    left: 50%;
+    width: 60px;
+    height: 60px;
+    background: v-bind('imageUrls.avatar') center/cover;
+    transform: translateX(-50%);
+}
+
+.score-content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 100px);
+    font-size: 28pt;
+    text-align: center;
+}
+
+.score-content>div:nth-child(1) {
+    color: #E00000;
+    font-size: 32pt;
+    font-weight: bold;
+}
+
+.score-content>div:nth-child(2) {
+    margin-top: 20px;
+    font-size: 32pt;
+}
+
+.score-content>div:nth-child(3) {
+    margin-top: 40px;
+}
+
+.score-content>div:nth-child(4) {
+    margin-top: 30px;
+    color: #E00000;
+    font-size: 32pt;
+    /* font-weight: bold; */
+    transform: scale(1.5);
+}
+
+.score-content>div:nth-child(5) {
+    margin-top: 40px;
+}
+
+.score-content>div:nth-child(6) {
+    margin-top: 20px;
+    color: #E00000;
+    font-size: 32pt;
+    font-weight: bold;
+}
+
+.score-content>div:nth-child(6) label {
+    color: #E00000;
+    font-size: 42pt;
+    margin: 0 10px;
+}
+
+</style>

frontend-h5/src/pages/game3/Game3.vue

@@ -464,7 +464,7 @@ const rankCloseHandler = () => {
                         </div>
                     </div>
                     <div class="row row-3">
-                        <div class="col-1">{{ rank > 0 ? rank : '未上榜' }}</div>
+                        <div class="col-1"></div>
                         <div class="col-2">
                             <div class="avatar" :style="{ backgroundImage: `url(${avatar})` }"></div>
                             <div>{{ nickname }}</div>

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

@@ -235,7 +235,7 @@ const onTapHorse = async () => {
         <div class="play-content">
             <div>当前得分</div>
             <div>{{ tick }}</div>
-            <div v-if="!userTop10RankStatus">当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
+            <!-- <div v-if="!userTop10RankStatus">当前排名: &nbsp;第&nbsp;<label></label>&nbsp;名</div> -->
         </div>
         <!-- iOS 权限提示蒙层 -->
         <Transition name="ios-hint-fade">

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

@@ -411,7 +411,7 @@ const rankCloseHandler = () => {
         :background="stageBackground">
         <template #gameRank>
             <div class="ranklist-container">
-                <div class="txt-title">排行</div>
+                <!-- <div class="txt-title">排行</div>
                 <div class="list-container">
                     <div class="row row-1">
                         <div class="col-1">排名</div>
@@ -433,14 +433,14 @@ const rankCloseHandler = () => {
                         </div>
                     </div>
                     <div class="row row-3">
-                        <div class="col-1">{{ rank > 0 ? rank : '未上榜' }}</div>
+                        <div class="col-1"></div>
                         <div class="col-2">
                             <div class="avatar" :style="{ backgroundImage: `url(${avatar})`, top: '27px' }"></div>
                             <div>{{ nickname }}</div>
                         </div>
                         <div class="col-3">{{ tick }}</div>
                     </div>
-                </div>
+                </div> -->
                 <div class="img-close" @click="rankCloseHandler"></div>
             </div>
         </template>

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

@@ -402,14 +402,20 @@ onBeforeUnmount(() => {
         <div class="img-logo"></div>
         <div class="img-center-title"></div>
         <div class="rank-content">
-            <div class="txt-left">
+            <div>
+                实时得分
+            </div>
+            <div>
+                {{ tick }}
+            </div>
+            <!-- <div class="txt-left">
                 <div>排名</div>
-                <div class="txt-bold">{{ rank }}</div>
+                <div class="txt-bold"></div>
             </div>
             <div class="txt-right">
                 <div>实时积分</div>
                 <div class="txt-bold">{{ tick }}</div>
-            </div>
+            </div> -->
         </div>
         <div class="paodao-runway-container">
             <div class="paodao-runway" :class="{ 'paodao-paused': !gameActive }"></div>
@@ -554,15 +560,18 @@ onBeforeUnmount(() => {
 .rank-content {
     width: 600px;
     height: 140px;
-    background: v-bind('imageUrls.rank') center/cover;
+    border: 1px solid #A10A06;
+    border-radius: 25px;
+    background: #F7DA81;
+    /* background: v-bind('imageUrls.rank') center/cover; */
     position: absolute;
     left: 50%;
     top: 380px;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    /* align-items: center;
+    justify-content: space-between; */
     transform: translate(-50%, -50%);
-    font-size: 24px;
+    font-size: 44px;
     color: #A10A06;
     z-index: 2;
 

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

@@ -34,7 +34,8 @@ onMounted(() => {
                 <div>击鼓积分</div>
                 <div>{{ tick }}</div>
                 <div>最终排名</div>
-                <div>第<label>{{ rank }}</label>名</div>
+                 <div v-if="rank>0">第<label>{{ rank }}</label>名</div>
+                <div v-else>未上榜</div>
             </div>
         </div>
     </div>

frontend-h5/src/pages/game6/Game.vue

@@ -429,7 +429,7 @@ const rankCloseHandler = () => {
                         </div>
                     </div>
                     <div class="row row-3">
-                        <div class="col-1">{{ rank > 0 ? rank : '未上榜' }}</div>
+                        <div class="col-1"></div>
                         <div class="col-2">
                             <div class="avatar" :style="{ backgroundImage: `url(${avatar})` }"></div>
                             <div>{{ nickname }}</div>

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

@@ -192,14 +192,20 @@ onBeforeUnmount(() => {
         <div class="img-logo"></div>
         <div class="img-hydt"></div>
         <div class="rank-content">
-            <div class="txt-left">
+            <div>
+                实时得分
+            </div>
+            <div>
+                {{ tick }}
+            </div>
+            <!-- <div class="txt-left">
                 <div>排名</div>
-                <div class="txt-bold">{{ rank }}</div>
+                <div class="txt-bold"></div>
             </div>
             <div class="txt-right">
                 <div>实时得分</div>
                 <div class="txt-bold">{{ tick }}</div>
-            </div>
+            </div> -->
         </div>
 
         <div ref="moleContainerRef" class="mole-container" @click="handleBoardTouch">
@@ -216,7 +222,7 @@ onBeforeUnmount(() => {
         <!-- <div class="play-content">
             <div>当前击鼓次数</div>
             <div>{{ tick }}</div>
-            <div>当前排名: &nbsp;第&nbsp;<label>{{ rank }}</label>&nbsp;名</div>
+            <div>当前排名: &nbsp;第&nbsp;<label></label>&nbsp;名</div>
         </div> -->
         <!-- <div class="bg-bottom"></div> -->
         <!-- <div class="play-gu" :style="{ background: `${currentGu} center/cover` }" @click="$emit('touch')"></div> -->
@@ -244,15 +250,18 @@ onBeforeUnmount(() => {
 .rank-content {
     width: 600px;
     height: 140px;
-    background: v-bind('imageUrls.rank') center/cover;
+    border: 1px solid #A10A06;
+    border-radius: 25px;
+    background: #F7DA81;
+    /* background: v-bind('imageUrls.rank') center/cover; */
     position: absolute;
     left: 50%;
     top: 480px;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    /* align-items: center;
+    justify-content: space-between; */
     transform: translate(-50%, -50%);
-    font-size: 24px;
+    font-size: 44px;
     color: #A10A06;
 
     .txt-bold {

frontend-h5/src/pages/game6/views/ScoreView.vue

+<script setup lang="ts">
+import { $getWechat } from '@/commons/utils';
+import { onMounted, ref } from 'vue';
+
+defineProps<{
+    imageUrls: Record<string, string>
+    tick: number
+    rank: number
+}>()
+
+defineEmits<{
+    replay: []
+    back: []
+}>()
+const nickname = ref('');
+const avatar = ref('');
+onMounted(() => {
+    const wechat = $getWechat();
+    nickname.value = wechat.nickname;
+    avatar.value = wechat.avatar;
+});
+</script>
+
+<template>
+    <div class="h5-page game-stage">
+        <div class="img-logo"></div>
+        <div class="bg-bottom"></div>
+        <div class="img-score">
+            <div class="score-avatar"
+                :style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"></div>
+            <div class="score-content">
+                <div>{{ nickname }}</div>
+                <div>您的成绩</div>
+                <div>击鼓积分</div>
+                <div>{{ tick }}</div>
+                <div>最终排名</div>
+                 <div v-if="rank>0">第<label>{{ rank }}</label>名</div>
+                <div v-else>未上榜</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.game-stage {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    padding: 0;
+}
+
+.bg-bottom {
+    position: absolute;
+    bottom: 0;
+    left: var(--stage-viewport-left, 0);
+    width: var(--stage-viewport-width, 750px);
+    height: 479px;
+    background: v-bind('imageUrls.bg2') center/cover;
+    opacity: 0.6;
+}
+
+.img-logo {
+    position: absolute;
+    top: 66px;
+    left: 50%;
+    width: 428px;
+    height: 77px;
+    background: v-bind('imageUrls.logo') center/cover;
+    transform: translateX(-50%);
+}
+
+.img-score {
+    position: absolute;
+    top: 450px;
+    left: 50%;
+    width: 465px;
+    height: 731px;
+    background: v-bind('imageUrls.scoreBg') center/cover;
+    transform: translateX(-50%) scale(1.2);
+}
+
+.score-avatar {
+    position: absolute;
+    top: -50px;
+    left: 50%;
+    width: 60px;
+    height: 60px;
+    background: v-bind('imageUrls.avatar') center/cover;
+    transform: translateX(-50%);
+}
+
+.score-content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 100px);
+    font-size: 28pt;
+    text-align: center;
+}
+
+.score-content>div:nth-child(1) {
+    color: #E00000;
+    font-size: 32pt;
+    font-weight: bold;
+}
+
+.score-content>div:nth-child(2) {
+    margin-top: 20px;
+    font-size: 32pt;
+}
+
+.score-content>div:nth-child(3) {
+    margin-top: 40px;
+}
+
+.score-content>div:nth-child(4) {
+    margin-top: 30px;
+    color: #E00000;
+    font-size: 32pt;
+    /* font-weight: bold; */
+    transform: scale(1.5);
+}
+
+.score-content>div:nth-child(5) {
+    margin-top: 40px;
+}
+
+.score-content>div:nth-child(6) {
+    margin-top: 20px;
+    color: #E00000;
+    font-size: 32pt;
+    font-weight: bold;
+}
+
+.score-content>div:nth-child(6) label {
+    color: #E00000;
+    font-size: 42pt;
+    margin: 0 10px;
+}
+
+</style>