Merge branch 'game3' into 'main'

frontend-h5/src/pages/game3/views/LoadingView.vue

+<script setup lang="ts">
+import { $getWechat } from '@/commons/utils.ts'
+import { onMounted, ref } from 'vue';
+
+defineProps<{
+    imageUrls: Record<string, string>
+    userJoinStatus: boolean
+}>();
+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="game-desc" @click="$emit('touchGameRule')">游戏规则</div>
+        <!-- <div class="img-logo"></div> -->
+        <div class="img-loadingbg1">游戏等待开始倒计时60秒</div>
+        <div class="img-loadingbg2">游戏即将开始 敬请期待</div>
+        <div class="txt-bottom" v-if="userJoinStatus">您已成功加入游戏<br />等待主持人开始</div>
+    </div>
+</template>
+
+<style scoped>
+.img-loadingbg1 {
+    font-size: 27pt;
+    width: 502px;
+    height: 90px;
+    background: v-bind('imageUrls.loadingBg1') center/cover;
+    border-radius: 45px;
+    position: absolute;
+    top: 513px;
+    left: 50%;
+    margin-left: -251px;
+    text-align: center;
+    line-height: 90px;
+    font-weight: bold;
+    color: #B90103;
+    letter-spacing: 2pt;
+}
+
+.img-loadingbg2 {
+    width: 100%;
+    height: 126px;
+    background: v-bind('imageUrls.loadingBg2') center/cover;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-size: 46px;
+    text-align: center;
+    line-height: 126px;
+    color: white;
+    letter-spacing: 2pt;
+    transform: translate(-50%, -50%);
+}
+
+.txt-bottom {
+    position: absolute;
+    bottom: 130px;
+    width: 100%;
+    line-height: 40px;
+    color: white;
+    font-size: 28px;
+    text-align: center;
+}
+
+.game-stage {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    padding: 0;
+}
+
+.game-desc {
+    position: absolute;
+    top: 40%;
+    left: var(--stage-viewport-left, 0);
+    display: flex;
+    width: 58px;
+    height: 158px;
+    padding-top: 10px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0 12px 12px 0;
+    background: rgba(40, 12, 8, 0.52);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 25px;
+    letter-spacing: 10px;
+    line-height: 1.25;
+    text-align: center;
+    text-orientation: upright;
+    transform: translateY(-50%);
+    writing-mode: vertical-rl;
+}
+
+.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: 20px;
+    width: 428px;
+    height: 77px;
+    background: v-bind('imageUrls.logo') center/cover;
+}
+
+.img-title {
+    position: absolute;
+    top: 200px;
+    left: 50%;
+    width: 609px;
+    height: 243px;
+    background: v-bind('imageUrls.title') center/cover;
+    transform: translateX(-50%);
+}
+
+.img-avatar {
+    position: absolute;
+    top: 480px;
+    left: 50%;
+    /* width: 148px;
+    height: 148px;
+    background: v-bind('avatar') center/cover; */
+    transform: translateX(-50%);
+}
+
+.txt-nickname {
+    position: absolute;
+    top: 640px;
+    left: 50%;
+    color: #E00000;
+    font-size: 25pt;
+    font-weight: bold;
+    transform: translateX(-50%);
+}
+
+.txt-loading {
+    position: absolute;
+    top: 710px;
+    left: 50%;
+    width: 288px;
+    color: #E00000;
+    font-size: 25pt;
+    font-weight: bold;
+    text-align: center;
+    transform: translateX(-50%);
+}
+
+.loading-gu {
+    position: absolute;
+    bottom: 100px;
+    left: 50%;
+    width: 600px;
+    height: 534px;
+    background: v-bind('imageUrls.gu') center/cover;
+    transform: translateX(-50%);
+}
+</style>

frontend-h5/src/pages/game3/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<{
+    showRank: []
+    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>
+</template>
+
+<style scoped>
+.game-stage {
+    position: absolute;
+    width: 750px;
+    height: 1624px;
+    padding: 0;
+}
+
+.img-logo {
+    position: absolute;
+    top: 66px;
+    left: 50%;
+    width: 428px;
+    height: 77px;
+    background: v-bind('imageUrls.logo') center/cover;
+    transform: translateX(-50%);
+}
+
+</style> -->

frontend-h5/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import { $read } from '@/commons/utils'
 import Loading from '@/pages/Loading.vue'
 import Game1 from '@/pages/game1/Game.vue'
+import Game3 from '@/pages/game3/Game3.vue'
 import Game4 from '@/pages/game4/Game4.vue'
 import Game5 from '@/pages/game5/Game5.vue'
 import Game6 from '@/pages/game6/Game.vue'
@@ -31,6 +32,11 @@ const router = createRouter({
             // },
         },
         {
+            path: '/game3',
+            name: 'Game3',
+            component: Game3,
+        },
+        {
             path: '/game4',
             name: 'Game4',
             component: Game4,