fix: 图片格式；

frontend-h5/src/pages/game4/Game4.vue

@@ -25,8 +25,8 @@ const imageUrls = {
   title: cssAssetUrl("game4/h5-game4-title1.webp"),
   title2: cssAssetUrl("game4/h5-game4-title2.webp"),
   // avatarBg: cssAssetUrl('game4/h5-game4-join.svg'),
-  userBg: cssAssetUrl("game4/user-bg.webp"),
-  startBg: cssAssetUrl("game4/start-bg.webp"),
+  userBg: cssAssetUrl("game4/user-bg.svg"),
+  startBg: cssAssetUrl("game4/start-bg.svg"),
   gift: cssAssetUrl("game4/h5-game4-gift.webp"),
   avatar: cssAssetUrl("game1/avatar.png"),
   gu: cssAssetUrl("game4/h5-game4-horse.webp"),

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

 <script setup lang="ts">
-import { $getWechat } from '@/commons/utils.ts'
-import { onMounted, ref } from 'vue';
+import { $getWechat } from "@/commons/utils.ts";
+import { onMounted, ref } from "vue";
 
 defineProps<{
-    imageUrls: Record<string, string>
-    userJoinStatus: boolean
-}>()
+  imageUrls: Record<string, string>;
+  userJoinStatus: boolean;
+}>();
 
 defineEmits<{
-    touchGameRule: []
-}>()
+  touchGameRule: [];
+}>();
 
-const nickname = ref('');
-const avatar = ref('');
+const nickname = ref("");
+const avatar = ref("");
 onMounted(() => {
   const wechat = $getWechat();
   nickname.value = wechat.nickname;
@@ -28,7 +28,10 @@ onMounted(() => {
     <div class="img-title2"></div>
     <div class="img-gift"></div>
     <div class="img-user-bg"></div>
-        <div class="img-avatar" :style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"></div>
+    <div
+      class="img-avatar"
+      :style="`background: url(${avatar});border-radius:66px;width:132px;height:132px;`"
+    ></div>
     <div class="txt-nickname">{{ nickname }}</div>
     <div class="txt-loading">
       <label v-if="userJoinStatus">您已成功加入游戏等待主持人开始</label>
@@ -74,7 +77,7 @@ onMounted(() => {
   left: var(--stage-viewport-left, 0);
   width: var(--stage-viewport-width, 750px);
   height: 479px;
-    background: v-bind('imageUrls.bg2') center/cover;
+  background: v-bind("imageUrls.bg2") center/cover;
   opacity: 0.6;
 }
 
@@ -84,7 +87,7 @@ onMounted(() => {
   left: 50%;
   width: 428px;
   height: 77px;
-    background: v-bind('imageUrls.logo') center/cover;
+  background: v-bind("imageUrls.logo") center/cover;
   transform: translateX(-50%);
 }
 
@@ -94,7 +97,7 @@ onMounted(() => {
   left: 50%;
   width: 609px;
   height: 87.04px;
-    background: v-bind('imageUrls.title') center/cover;
+  background: v-bind("imageUrls.title") center/cover;
   transform: translateX(-50%);
 }
 .img-title2 {
@@ -103,7 +106,7 @@ onMounted(() => {
   left: 50%;
   width: 491.77px;
   height: 200px;
-    background: v-bind('imageUrls.title2') center/cover;
+  background: v-bind("imageUrls.title2") center/cover;
   transform: translateX(-50%);
 }
 .img-gift {
@@ -113,16 +116,16 @@ onMounted(() => {
   right: -10%;
   width: 234.1px;
   height: 142.21px;
-    background: v-bind('imageUrls.gift') center/cover;
+  background: v-bind("imageUrls.gift") center/cover;
 }
 
 .img-user-bg {
   position: absolute;
-    top: 634px; 
+  top: 600px;
   left: 50%;
   width: 447px;
   height: 287.5px;
-    background: v-bind('imageUrls.userBg') center/cover no-repeat;
+  background: v-bind("imageUrls.userBg") center/cover no-repeat;
   transform: translateX(-50%);
 }
 .img-avatar {
@@ -135,7 +138,7 @@ onMounted(() => {
   position: absolute;
   top: 668px;
   left: 50%;
-    color: #E00000;
+  color: #e00000;
   font-size: 25pt;
   font-weight: bold;
   transform: translateX(-50%);
@@ -146,7 +149,7 @@ onMounted(() => {
   top: 743px;
   left: 50%;
   width: 288px;
-    color: #E00000;
+  color: #e00000;
   font-size: 25pt;
   font-weight: bold;
   text-align: center;
@@ -159,7 +162,7 @@ onMounted(() => {
   left: 50%;
   width: 500px;
   height: 90px;
-    background: v-bind('imageUrls.startBg') center/cover no-repeat;
+  background: v-bind("imageUrls.startBg") center/cover no-repeat;
   transform: translateX(-50%);
 }
 
@@ -185,7 +188,7 @@ onMounted(() => {
   left: 50%;
   width: 600px;
   height: 534px;
-    background: v-bind('imageUrls.gu') center/cover;
+  background: v-bind("imageUrls.gu") center/cover;
   transform: translateX(-50%);
 }
 </style>