From f59feef223de9487402912fc6df4cdb4ede17d07 Mon Sep 17 00:00:00 2001
From: xiaoaojiao <h.yingzi@gmail.com>
Date: Sun, 14 Sep 2025 22:18:52 +0800
Subject: [PATCH] todolist

---
 index.html                            | 20 +++----
 src/App.vue                           | 16 ++---
 src/components/Ad.vue                 |  6 +-
 src/components/GenerateImg.vue        | 20 +++----
 src/components/GenerateImgConfirm.vue |  6 +-
 src/components/GenerateLoading.vue    |  4 +-
 src/components/HomePage.vue           | 20 +++----
 src/components/Lottery.vue            | 16 ++---
 src/components/MyPhoto.vue            | 36 ++++++------
 src/components/PhotoSquare.vue        | 22 +++----
 src/components/Popup.vue              |  6 +-
 src/components/PrizeList.vue          | 10 ++--
 src/components/Rule.vue               |  8 +--
 src/components/SelectTemplateV2.vue   | 10 ++--
 src/components/SynthesizedResults.vue | 24 ++++----
 src/components/TodoList.vue           | 36 ++++++------
 src/libs/haibao.js                    | 10 ++--
 src/libs/utils.js                     |  2 +-
 src/static/ali_face_template.js       | 72 +++++++++++------------
 src/static/imageBackground.js         | 84 +++++++++++++--------------
 vite.config.js                        | 12 +---
 21 files changed, 215 insertions(+), 225 deletions(-)

diff --git a/index.html b/index.html
index c20c14c..cecadad 100644
--- a/index.html
+++ b/index.html
@@ -36,15 +36,15 @@
     const appid = "wx718c4a40911b7837"
     const host = "https://huodong2.lzlj.com/iceSip/"
 
-    // if (isWeixinPlatform && !isLogin && !code) {
-    //   let url = encodeURIComponent(host)
-    //   if (fromid) {
-    //     url = encodeURIComponent(host + "?fromid=" + fromid)
-    //   }
-    //   window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + url + "&response_type=code&scope=snsapi_userinfo#wechat_redirect"
-    // }
+    if (isWeixinPlatform && !isLogin && !code) {
+      let url = encodeURIComponent(host)
+      if (fromid) {
+        url = encodeURIComponent(host + "?fromid=" + fromid)
+      }
+      window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + url + "&response_type=code&scope=snsapi_userinfo#wechat_redirect"
+    }
   </script>
-  <script type="text/javascript">
+  <!-- <script type="text/javascript">
     (function () {
       window._fmOpt = {
         partner: 'lzlj',
@@ -58,7 +58,7 @@
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(fm, s);
     })();
-  </script>
+  </script> -->
   <style>
     .hackpreload {
       display: none;
@@ -110,7 +110,7 @@
                 title: document.title,
                 desc: document.title,
                 link: "https://huodong2.lzlj.com/iceSip/",
-                imgUrl: "https://huodong2.lzlj.com/iceSip/share.png"
+                imgUrl: "https://huodong2.lzlj.com/iceSip/share.webp"
               }
               wx.updateAppMessageShareData({
                 title: shareData.title, // 分享标题
diff --git a/src/App.vue b/src/App.vue
index 4258f02..ddf99e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -86,15 +86,15 @@ if (isLogin()) {
   userStatus(handleLoginSuccess)
 }
 const getUserLottery = async () => {
-  // const result = await Request("lottery", { pool: "all" }, "GET")
-  // if (result.res.status === 200) {
-  //   prizelist.value = result.json.lottery_logs.length > 0 ? result.json.lottery_logs : []
-  // }
+  const result = await Request("lottery", { pool: "all" }, "GET")
+  if (result.res.status === 200) {
+    prizelist.value = result.json.lottery_logs.length > 0 ? result.json.lottery_logs : []
+  }
   //TODO 上线换成上面的
-  prizelist.value = [
-    { id: 1, prize_code: "FIRST", prize_name: "一等奖", coupon_type: "scene", pushed: 0 },
-    { id: 2, prize_code: "FIRST1", prize_name: "二等奖", coupon_type: "scene", pushed: 1 }
-  ]
+  // prizelist.value = [
+  //   { id: 1, prize_code: "FIRST", prize_name: "一等奖", coupon_type: "scene", pushed: 0 },
+  //   { id: 2, prize_code: "FIRST1", prize_name: "二等奖", coupon_type: "scene", pushed: 1 }
+  // ]
 }
 const handleAddressSubmitAfter = (data) => {
   const targetItem = prizelist.value.find(item => item.id === data.id)
diff --git a/src/components/Ad.vue b/src/components/Ad.vue
index 339fa6e..68ba56b 100644
--- a/src/components/Ad.vue
+++ b/src/components/Ad.vue
@@ -31,7 +31,7 @@ const adGoto = () => {
   position: relative;
   width: 100vw;
   height: 190vw;
-  background-image: url("../assets/images/ad-bg.png");
+  background-image: url("../assets/images/ad-bg.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -43,7 +43,7 @@ const adGoto = () => {
   top: 50%;
   left: 50%;
   transform: translate(-50%, 180%);
-  background-image: url("../assets/images/btn-ad.png");
+  background-image: url("../assets/images/btn-ad.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -56,7 +56,7 @@ const adGoto = () => {
   left: 50%;
   transform: translate(-50%, 0);
   margin-top:  58vw;
-  background-image: url("../assets/images/close-btn.png");
+  background-image: url("../assets/images/close-btn.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
diff --git a/src/components/GenerateImg.vue b/src/components/GenerateImg.vue
index 769f63e..2ff6a42 100644
--- a/src/components/GenerateImg.vue
+++ b/src/components/GenerateImg.vue
@@ -380,11 +380,11 @@ const showPhotoSquare = () => {
   <div :show="show">
     <div class="home-wrapper" :style="{
       backgroundImage: displayScanModel 
-        ? 'url(src/assets/images/generate-img-loading-bg.png)' 
-        : 'url(src/assets/images/generate-img-bg.png)'
+        ? 'url(src/assets/images/generate-img-loading-bg.webp)' 
+        : 'url(src/assets/images/generate-img-bg.webp)'
     }">
       <div class="scene-item item-1">
-        <img src="../assets/images/back-btn.png" @click="goBack" alt="后退">
+        <img src="../assets/images/back-btn.webp" @click="goBack" alt="后退">
       </div>
 
       <div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="scene-item img-from-template scene-item-img" 
@@ -393,21 +393,21 @@ const showPhotoSquare = () => {
       </div>
 
       <div v-if="!displayScanModel" class="scene-item item-2">
-        <img src="../assets/images/generate-title.png" alt="描述">
+        <img src="../assets/images/generate-title.webp" alt="描述">
       </div>
 
       <div v-if="!displayScanModel" class="scene-item item-3" @click="generateImage">
-        <img src="../assets/images/generate-btn.png" alt="开始合成">
+        <img src="../assets/images/generate-btn.webp" alt="开始合成">
       </div>
 
       <div class="scene-item item-4" v-if="displayScanModel && !isMyPhotoVisible && !isPhotoSquareVisible">
-        <img src="../assets/images/scan.png" class="blocked-image" alt="扫描框">
+        <img src="../assets/images/scan.webp" class="blocked-image" alt="扫描框">
       </div>
-      <img v-if="displayScanImg" src="../assets/images/scan-line.png" class="moving-image"
+      <img v-if="displayScanImg" src="../assets/images/scan-line.webp" class="moving-image"
        :style="{ animationPlayState: disableScanAnimation ? 'paused' : 'running' }" alt="扫描line">
 
       <div v-if="displayMyPhotoBtn" class="scene-item item-5" @click="showMyPhoto" >
-        <img src="../assets/images/my-photo-btn.png" class="blocked-image" alt="查看我的照片">
+        <img src="../assets/images/my-photo-btn.webp" class="blocked-image" alt="查看我的照片">
       </div>
 
       <div v-if="!isMyPhotoVisible && !isPhotoSquareVisible" class="upload-container">
@@ -427,7 +427,7 @@ const showPhotoSquare = () => {
               :style="{ width: buttonPosition(index + 1)['--item-width'], 'z-index': 11 }">
                 <img 
                   v-if="!item.imageUrl"
-                  src="../assets/images/upload-img.png" 
+                  src="../assets/images/upload-img.webp" 
                   alt="上传图片"
                 >
                 <div v-if="!item.imageUrl"></div>
@@ -445,7 +445,7 @@ const showPhotoSquare = () => {
             />
             <button @click.stop.prevent="clearUploadFile(index)" :style="buttonUploadedPosition(index + 1)" style="position: absolute;">
               <div :style="{ width: buttonUploadedPosition(index + 1)['--item-width'] }" >
-                <img src="../assets/images/img-uploaded.png" class="delete-btn upload-img-wrapper" alt="删除图片">
+                <img src="../assets/images/img-uploaded.webp" class="delete-btn upload-img-wrapper" alt="删除图片">
               </div>
             </button>
           </div>
diff --git a/src/components/GenerateImgConfirm.vue b/src/components/GenerateImgConfirm.vue
index ed4863d..b8458f8 100644
--- a/src/components/GenerateImgConfirm.vue
+++ b/src/components/GenerateImgConfirm.vue
@@ -28,11 +28,11 @@ const closeTodoList = () => {
   <div :show="show">
     <div class="home-wrapper">
       <div class="scene-item item-1" @click="closeTodoList">
-        <img src="../assets/images/close-btn.png" alt="关闭按钮">
+        <img src="../assets/images/close-btn.webp" alt="关闭按钮">
       </div>
 
       <div class="scene-item item-2" @click="goToGenerateImgPage">
-        <img src="../assets/images/confirm-btn.png" alt="我知道了">
+        <img src="../assets/images/confirm-btn.webp" alt="我知道了">
       </div>
     </div>
   </div>
@@ -42,7 +42,7 @@ const closeTodoList = () => {
 .home-wrapper {
   width: 100%;
   height: 92vh;
-  background-image: url('../assets/images/generate-img-confirm.png');
+  background-image: url('../assets/images/generate-img-confirm.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
diff --git a/src/components/GenerateLoading.vue b/src/components/GenerateLoading.vue
index 8c8ab52..89d58d0 100644
--- a/src/components/GenerateLoading.vue
+++ b/src/components/GenerateLoading.vue
@@ -22,7 +22,7 @@ const navigateTodoList = () => {
   <div :show="show">
     <div class="home-wrapper" style="z-index: 9;">
       <div class="scene-item item-1">
-        <img src="../assets/images/back-btn.png" @click="navigateTodoList" alt="后退">
+        <img src="../assets/images/back-btn.webp" @click="navigateTodoList" alt="后退">
       </div>
     </div>
   </div>
@@ -32,7 +32,7 @@ const navigateTodoList = () => {
 .home-wrapper {
   width: 100%;
   height: 92vh;
-  background-image: url('src/assets/images/generate-loading.png');
+  background-image: url('src/assets/images/generate-loading.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index e2fdf92..8692685 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -153,40 +153,40 @@ if (isLogin()) {
   <div :show="show">
     <div class="home-wrapper">
       <div class="scene-item item-1" @click="handleLottery" :class="{ 'disabled': globalStore.draw_chances <= 0 }">
-        <img src="../assets/images/lottery.png" alt="抽奖">
+        <img src="../assets/images/lottery.webp" alt="抽奖">
         <div class="lottery-main">
           <p class="lottery-value">{{ globalStore.draw_chances }}</p>
         </div>
       </div>
       <div class="scene-item item-2" @click="navigateSelectTemplatePage" :class="{ 'disabled': globalStore.game_chances <= 0 }">
-        <img src="../assets/images/join.png" alt="立即参与">
+        <img src="../assets/images/join.webp" alt="立即参与">
         <div class="join-main">
           <p class="join-value">{{ globalStore.game_chances }}</p>
         </div>
       </div>
       <div class="scene-item item-3" @click="navigateTodoList">
-        <img src="../assets/images/task.png" alt="任务">
+        <img src="../assets/images/task.webp" alt="任务">
       </div>
 
       <div @click="toggleMusicState">
         <div v-if="isMusicOn" key="on" class="scene-item item-4">
-          <img src="../assets/images/music-on.png" alt="音乐开">
+          <img src="../assets/images/music-on.webp" alt="音乐开">
         </div>
         <div v-else key="off" class="scene-item item-5">
-          <img src="../assets/images/music-off.png" alt="音乐关">
+          <img src="../assets/images/music-off.webp" alt="音乐关">
         </div>
       </div>
       <div class="scene-item item-6" @click="handleRule">
-        <img src="../assets/images/rule.png" alt="规则">
+        <img src="../assets/images/rule.webp" alt="规则">
       </div>
       <div class="scene-item item-7" @click="handlePrizeList">
-        <img src="../assets/images/award.png" alt="奖励">
+        <img src="../assets/images/award.webp" alt="奖励">
       </div>
       <div class="scene-item item-8" @click="showMyPhoto">
-        <img src="../assets/images/my-photo.png" alt="我的照片">
+        <img src="../assets/images/my-photo.webp" alt="我的照片">
       </div>
       <div class="scene-item item-9" @click="showPhotoSquare">
-        <img src="../assets/images/photos.png" alt="照片广场">
+        <img src="../assets/images/photos.webp" alt="照片广场">
       </div>
     </div>
   </div>
@@ -200,7 +200,7 @@ if (isLogin()) {
 .home-wrapper {
   width: 100%;
   height: 92vh;
-  background-image: url('../assets/images/home-bg.png');
+  background-image: url('../assets/images/home-bg.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
diff --git a/src/components/Lottery.vue b/src/components/Lottery.vue
index a901b60..1b89e54 100644
--- a/src/components/Lottery.vue
+++ b/src/components/Lottery.vue
@@ -33,7 +33,7 @@ import confetti from "canvas-confetti";
 import { Request, Sleep } from "../libs/utils"
 import { globalStore } from "@/globalstore";
 //TODO: globalStore.result_url 这里这张图要用用户分享那张图
-// import lotteryFace from "../assets/images/haibao-cover.png"
+// import lotteryFace from "../assets/images/haibao-cover.webp"
 
 const lotteryFace = globalStore.result_url;
 const lotteryFaceUrl = ref(lotteryFace)
@@ -229,13 +229,13 @@ onUnmounted(() => {
 }
 
 .guang {
-  background-image: url("../assets/images/guang.png");
+  background-image: url("../assets/images/guang.webp");
   animation: rotateGuang 20s linear infinite;
 }
 
 
 .guangyun {
-  background-image: url("../assets/images/guangyun.png");
+  background-image: url("../assets/images/guangyun.webp");
   /* animation: rotateGuangyun 3s linear infinite; */
 }
 
@@ -246,7 +246,7 @@ onUnmounted(() => {
   transform: translateX(-50%);
   width: 65.462963vw;
   height: 19.907407vw;
-  background-image: url("../assets/images/lottery-title.png");
+  background-image: url("../assets/images/lottery-title.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -278,7 +278,7 @@ onUnmounted(() => {
 .btn-more {
   width: 48.703704vw;
   height: 18.240741vw;
-  background-image: url("../assets/images/btn-more.png");
+  background-image: url("../assets/images/btn-more.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -286,7 +286,7 @@ onUnmounted(() => {
 .btn-kaixin {
   width: 48.703704vw;
   height: 18.240741vw;
-  background-image: url("../assets/images/btn-kaixin.png");
+  background-image: url("../assets/images/btn-kaixin.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -302,7 +302,7 @@ onUnmounted(() => {
 }
 
 .lottery-image.HEIGAI_42_GPJ_500ML {
-  background-image: url("../assets/images/HEIGAI_42_GPJ_500ML.png");
+  background-image: url("../assets/images/HEIGAI_42_GPJ_500ML.webp");
 }
 
 @keyframes rotateGuangyun {
@@ -369,7 +369,7 @@ onUnmounted(() => {
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: url("../assets/images/prize-bg.png");
+  background-image: url("../assets/images/prize-bg.webp");
   background-repeat: no-repeat;
   background-size: 100%;
   backface-visibility: hidden;
diff --git a/src/components/MyPhoto.vue b/src/components/MyPhoto.vue
index d19cd16..0aa116f 100644
--- a/src/components/MyPhoto.vue
+++ b/src/components/MyPhoto.vue
@@ -69,8 +69,8 @@ const fetchImages = async () => {
 // 图片数据
 const images = ref([]);
  
-import defaultBorderImage from '../assets/images/my-photo-border.png';
-import activeBorderImage from '../assets/images/my-photo-selected-border.png';
+import defaultBorderImage from '../assets/images/my-photo-border.webp';
+import activeBorderImage from '../assets/images/my-photo-selected-border.webp';
 
 const activeBorders = ref(images.value.map(() => false));
 let mergeId = '';
@@ -113,7 +113,7 @@ const handleZhuliClick = () => {
   console.log('助力被点击');
 };
 
-import failedImg from '../assets/images/failed.png';
+import failedImg from '../assets/images/failed.webp';
 const getGenerateImgStatus = async (item)=> {
   fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${item.id}/status`, {
     method: 'GET',
@@ -146,9 +146,9 @@ const getBackgroundImage = (item) => {
 
 // 海报
 import Haibao from "@/libs/haibao";
-import mask from "../assets/images/haibao-mask.png";
-import haibaoCoverBorder from "../assets/images/haibao-cover.png";
-import bg from "../assets/images/haibao-bg.png"
+import mask from "../assets/images/haibao-mask.webp";
+import haibaoCoverBorder from "../assets/images/haibao-cover.webp";
+import bg from "../assets/images/haibao-bg.webp"
 const loadImage = (src)=> {
   return new Promise((resolve, reject) => {
     const img = new Image();
@@ -180,7 +180,7 @@ const handleHaibao = async () => {
   const infos = Storage.get("userinfos")
   const haibaoCover = new Haibao(951, 1607)
   const userPicture = await loadImage(globalStore.result_url)
-  haibaoCover.add(userPicture, 0, 0)
+  haibaoCover.add(userPicture, 0, 50, 951, 1698)
   haibaoCover.add(mask, 10, 100)
   haibaoCover.add(haibaoCoverBorder, 0, 0)
   haibaoCover.draw('destination-in').then(() => {
@@ -223,7 +223,7 @@ markers.value = [
   <ModalTransition class="myPhoto" :no-animation="true" :show="show">
     <div class="myPhoto-bg">
       <div class="scene-item item-1" @click="goBack">
-        <img src="../assets/images/close-btn.png" alt="关闭按钮">
+        <img src="../assets/images/close-btn.webp" alt="关闭按钮">
       </div>
 
       <div v-for="(marker, index) in markers" 
@@ -252,7 +252,7 @@ markers.value = [
             >
             </div> 
             <div class="list-item">
-              <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.png" class="refresh-btn" alt="刷新">         
+              <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">         
               <img 
                 :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
                  ? activeBorderImage : defaultBorderImage" 
@@ -272,7 +272,7 @@ markers.value = [
             :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }"
           >
           </div> 
-          <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.png" class="refresh-btn" alt="刷新">         
+          <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.webp" class="refresh-btn" alt="刷新">         
           <img 
             :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
              ? activeBorderImage : defaultBorderImage" 
@@ -283,8 +283,8 @@ markers.value = [
         </div>
       </div>
       <div class="scene-item item-2">
-        <img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.png" alt="助力" >
-        <img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.png" alt="打榜" >
+        <img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.webp" alt="助力" >
+        <img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.webp" alt="打榜" >
       </div>
 
       <div class="fullsection" v-show="haibaoShow">
@@ -344,7 +344,7 @@ markers.value = [
   height: 8.148148vw;
   right: 29vw;
   top: 114vw;
-  background-image: url("../assets/images/close-btn.png");
+  background-image: url("../assets/images/close-btn.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -384,7 +384,7 @@ markers.value = [
   width: 84vw;
   height: 57vh;
   position: absolute;
-  top: 30%;
+  top: 26%;
 }
 
 .image-container {
@@ -392,7 +392,7 @@ markers.value = [
   height: 56vw;
   top: 2.2vw;
   margin-bottom: 3vw;
-  background-image: url('../assets/images/test.png');
+  background-image: url('../assets/images/test.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
@@ -406,8 +406,8 @@ markers.value = [
 }
 
 .mask-background {
-  -webkit-mask-image: url("../assets/images/my-photo-mengban.png");
-  mask-image: url("../assets/images/my-photo-mengban.png");
+  -webkit-mask-image: url("../assets/images/my-photo-mengban.webp");
+  mask-image: url("../assets/images/my-photo-mengban.webp");
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-position: center;
@@ -423,7 +423,7 @@ markers.value = [
 .myPhoto-bg {
   width: 100%;
   height: 92vh;
-  background-image: url('../assets/images/my-photov2.png');
+  background-image: url('../assets/images/my-photov2.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
diff --git a/src/components/PhotoSquare.vue b/src/components/PhotoSquare.vue
index fd28071..9ffb778 100644
--- a/src/components/PhotoSquare.vue
+++ b/src/components/PhotoSquare.vue
@@ -134,7 +134,7 @@ markers.value = [
   <ModalTransition class="photoSquare" :no-animation="true" :show="show">
     <div class="photoSquare-bg">
       <div class="scene-item item-1" @click="goBack">
-        <img src="../assets/images/close-btn.png" alt="关闭按钮">
+        <img src="../assets/images/close-btn.webp" alt="关闭按钮">
       </div>
 
       <div v-for="(marker, index) in markers" 
@@ -161,7 +161,7 @@ markers.value = [
             <div class="image-container mask-background">
             </div>          
             <img 
-              src="../assets/images/zpgc-border.png" 
+              src="../assets/images/zpgc-border.webp" 
               class="border-image"
               alt="border"
             />
@@ -184,7 +184,7 @@ markers.value = [
           <div class="image-container mask-background">
           </div>          
           <img 
-            src="../assets/images/zpgc-border.png" 
+            src="../assets/images/zpgc-border.webp" 
             class="border-image"
             alt="border"
           />
@@ -213,7 +213,7 @@ markers.value = [
           <div class="image-wrapper-share">
             <div class="image-container-share mask-background">
             </div>          
-            <img src="../assets/images/zpgc-border.png" class="border-image-share" alt="border" />
+            <img src="../assets/images/zpgc-border.webp" class="border-image-share" alt="border" />
             <div class="flex-container-detail-invite">
               <div class="left-group-left">
                 <p class="photo-number">111</p>
@@ -225,7 +225,7 @@ markers.value = [
         </div>
 
         <div class="ranking-title" @click="inviteHelp">
-          <img src="/src/assets/images/dianzan.png" alt="点赞">
+          <img src="/src/assets/images/dianzan.webp" alt="点赞">
         </div>
       </div>
     </div>
@@ -284,7 +284,7 @@ markers.value = [
 .image-container-share {
   width: 77vw;
   height: 43vh;
-  background-image: url(/src/assets/images/test.png);
+  background-image: url(/src/assets/images/test.webp);
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
@@ -342,7 +342,7 @@ markers.value = [
   margin: 0;
 }
 .fixed-background-container {
-  background-image: url('../assets/images/paiming-border.png');
+  background-image: url('../assets/images/paiming-border.webp');
   position: fixed;
   bottom: 1vh;
   left: 5vw;
@@ -377,7 +377,7 @@ markers.value = [
 .image-container {
   width: 38vw;
   height: 28vh;
-  background-image: url('../assets/images/test.png');
+  background-image: url('../assets/images/test.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
@@ -391,8 +391,8 @@ markers.value = [
 }
 
 .mask-background {
-  -webkit-mask-image: url("../assets/images/my-photo-mengban.png");
-  mask-image: url("../assets/images/my-photo-mengban.png");
+  -webkit-mask-image: url("../assets/images/my-photo-mengban.webp");
+  mask-image: url("../assets/images/my-photo-mengban.webp");
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-position: center;
@@ -408,7 +408,7 @@ markers.value = [
 .photoSquare-bg {
   width: 100%;
   height: 92vh;
-  background-image: url('../assets/images/photo-squarev2.png');
+  background-image: url('../assets/images/photo-squarev2.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
diff --git a/src/components/Popup.vue b/src/components/Popup.vue
index a516285..175b3b3 100644
--- a/src/components/Popup.vue
+++ b/src/components/Popup.vue
@@ -48,11 +48,11 @@ const confirmBtn = () => {
     <div class="home-bg">
       <div class="popup-bg">
         <div class="scene-item item-1">
-          <img src="../assets/images/confirm.png" @click="confirmBtn" alt="确认">
+          <img src="../assets/images/confirm.webp" @click="confirmBtn" alt="确认">
         </div>
         <p class="message">温馨提示：每位用户只能选择一张合影参与打榜，一经确认，在打榜期间将无法更换。</p>
         <div class="scene-item item-2">
-          <img src="../assets/images/cancel.png" @click="cancelBtn" alt="取消">
+          <img src="../assets/images/cancel.webp" @click="cancelBtn" alt="取消">
         </div>
       </div>
     </div>
@@ -74,7 +74,7 @@ const confirmBtn = () => {
 .popup-bg {
   width: 77vw;
   height: 60vw;
-  background-image: url('../assets/images/popup.png');
+  background-image: url('../assets/images/popup.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
diff --git a/src/components/PrizeList.vue b/src/components/PrizeList.vue
index f067fd0..9f17ba4 100644
--- a/src/components/PrizeList.vue
+++ b/src/components/PrizeList.vue
@@ -64,7 +64,7 @@ const handleItemBtn = (id, event) => {
   position: relative;
   width: 100vw;
   height: 131.759259vw;
-  background-image: url("../assets/images/prizelist-bg.png");
+  background-image: url("../assets/images/prizelist-bg.webp");
   background-repeat: no-repeat;
   background-size: 100%;
   display: flex;
@@ -93,7 +93,7 @@ const handleItemBtn = (id, event) => {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background-image: url("../assets/images/prizelist-item-bg.png");
+  background-image: url("../assets/images/prizelist-item-bg.webp");
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
@@ -125,7 +125,7 @@ const handleItemBtn = (id, event) => {
   height: 8.148148vw;
   right: 5vw;
   top: 15vw;
-  background-image: url("../assets/images/close-btn.png");
+  background-image: url("../assets/images/close-btn.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -135,7 +135,7 @@ const handleItemBtn = (id, event) => {
   width: 23.981481vw;
   height: 9.074074vw;
   background-size: 100% 100%;
-  background-image: url("../assets/images/btn-goto.png");
+  background-image: url("../assets/images/btn-goto.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -150,7 +150,7 @@ wx-open-launch-weapp,
 }
 
 .btn-goto.noaddress {
-  background-image: url("../assets/images/btn-address.png");
+  background-image: url("../assets/images/btn-address.webp");
 }
 
 .prizelist-cover.USER_TJGJ {
diff --git a/src/components/Rule.vue b/src/components/Rule.vue
index 36d2f30..bf62088 100644
--- a/src/components/Rule.vue
+++ b/src/components/Rule.vue
@@ -2,11 +2,11 @@
   <ModalTransition class="rule" :show="show">
     <div class="rule-wrapper">
       <div class="rule-content">
-        <img src="../assets/images/rule-1.webp" alt="">
+        <!-- <img src="../assets/images/rule-1.webp" alt="">
         <img src="../assets/images/rule-2.webp" alt="">
         <img src="../assets/images/rule-3.webp" alt="">
         <img src="../assets/images/rule-4.webp" alt="">
-        <img src="../assets/images/rule-5.webp" alt="">
+        <img src="../assets/images/rule-5.webp" alt=""> -->
       </div>
       <div class="close" @click="emit('close')"></div>
     </div>
@@ -27,7 +27,7 @@ const emit = defineEmits(['close'])
   position: relative;
   width: 100%;
   height: 175.740741vw;
-  background-image: url("../assets/images/rule-bg.png");
+  background-image: url("../assets/images/rule-bg.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -52,7 +52,7 @@ const emit = defineEmits(['close'])
   height: 8.148148vw;
   right: 5vw;
   top: 15vw;
-  background-image: url("../assets/images/close-btn.png");
+  background-image: url("../assets/images/close-btn.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
diff --git a/src/components/SelectTemplateV2.vue b/src/components/SelectTemplateV2.vue
index f4423b5..793f394 100644
--- a/src/components/SelectTemplateV2.vue
+++ b/src/components/SelectTemplateV2.vue
@@ -64,7 +64,7 @@ const handleNavClick = (event) => {
   <div :show="show">
     <div class="home-wrapper">
       <div class="scene-item item-1">
-        <img src="../assets/images/back-btn.png" @click="navigateTodoList" alt="后退">
+        <img src="../assets/images/back-btn.webp" @click="navigateTodoList" alt="后退">
       </div>
 
       <!-- 显示当前选中的背景图片 -->
@@ -99,7 +99,7 @@ const handleNavClick = (event) => {
           class="mask-image mask-background"
           :style="{ 'background-image': `url(${item.imgUrl})` }"
         >
-          <img class="border-img" src="../assets/images/generate/border.png" alt="边框">
+          <img class="border-img" src="../assets/images/generate/border.webp" alt="边框">
         </div>
       </div>
     </div>
@@ -154,8 +154,8 @@ const handleNavClick = (event) => {
   overflow-y: auto;
 }
 .mask-background {
-  -webkit-mask-image: url("../assets/images/generate/mengban.png");
-  mask-image: url("../assets/images/generate/mengban.png");
+  -webkit-mask-image: url("../assets/images/generate/mengban.webp");
+  mask-image: url("../assets/images/generate/mengban.webp");
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-position: center;
@@ -181,7 +181,7 @@ const handleNavClick = (event) => {
 .home-wrapper {
   width: 100%;
   height: 92vh;
-  background-image: url('../assets/images/generate/select-template-bg.png');
+  background-image: url('../assets/images/generate/select-template-bg.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
diff --git a/src/components/SynthesizedResults.vue b/src/components/SynthesizedResults.vue
index 9fc8e17..bbd262d 100644
--- a/src/components/SynthesizedResults.vue
+++ b/src/components/SynthesizedResults.vue
@@ -6,9 +6,9 @@ import { globalStore } from "../globalstore.js";
 import globalToastEvent, { ToastType } from '../globalToastEvent';
 import { Storage, generateQR } from "../libs/utils";
 import Haibao from "@/libs/haibao";
-import mask from "../assets/images/haibao-mask.png";
-import haibaoCoverBorder from "../assets/images/haibao-cover.png";
-import bg from "../assets/images/haibao-bg.png"
+import mask from "../assets/images/haibao-mask.webp";
+import haibaoCoverBorder from "../assets/images/haibao-cover.webp";
+import bg from "../assets/images/haibao-bg.webp"
 
 defineProps({
   show: true
@@ -114,12 +114,12 @@ const handleHaibao = async () => {
   <div>
     <div class="home-wrapper">
       <div class="scene-item item-1">
-        <img src="../assets/images/go-home-btn.png" @click="navigateToHome" alt="回到首页">
+        <img src="../assets/images/go-home-btn.webp" @click="navigateToHome" alt="回到首页">
       </div>
 
       <!-- <div class="mask-background image-container" :style="{ backgroundImage: `url(${getBackgroundImage()})` }">
       </div>
-      <img src="../assets/images/mengban-border.png" class="mengban-border" alt="蒙版"> -->
+      <img src="../assets/images/mengban-border.webp" class="mengban-border" alt="蒙版"> -->
       <div class="fullsection" v-show="haibaoShow">
         <div class="haibao" :style="userhaibaoCover">
           <img :src="haibaoUrl" alt="">
@@ -128,11 +128,11 @@ const handleHaibao = async () => {
       </div>
 
       <div class="scene-item item-2">
-        <img src="../assets/images/charts-battle.png" @click="chartsBattle" alt="参与打榜">
+        <img src="../assets/images/charts-battle.webp" @click="chartsBattle" alt="参与打榜">
       </div>
 
       <div class="scene-item item-3" @click="handleLottery">
-        <img src="../assets/images/instant-win.png" alt="立即抽奖">
+        <img src="../assets/images/instant-win.webp" alt="立即抽奖">
       </div>
     </div>
   </div>
@@ -142,8 +142,8 @@ const handleHaibao = async () => {
 
 <style scoped>
 .mask-background {
-  -webkit-mask-image: url("../assets/images/my-photo-mengban.png");
-  mask-image: url("../assets/images/my-photo-mengban.png");
+  -webkit-mask-image: url("../assets/images/my-photo-mengban.webp");
+  mask-image: url("../assets/images/my-photo-mengban.webp");
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-position: center;
@@ -162,7 +162,7 @@ const handleHaibao = async () => {
   width: 80vw;
   top: 5.2vw;
   margin-bottom: 3vw;
-  background-image: url('../assets/images/home-bg.png');
+  background-image: url('../assets/images/home-bg.webp');
   background-size: cover;
   background-repeat: no-repeat;
   min-height: -webkit-fill-available;
@@ -205,7 +205,7 @@ const handleHaibao = async () => {
   height: 8.148148vw;
   right: 5vw;
   top: 15vw;
-  background-image: url("../assets/images/close-btn.png");
+  background-image: url("../assets/images/close-btn.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -220,7 +220,7 @@ const handleHaibao = async () => {
 .home-wrapper {
   width: 100%;
   height: 92vh;
-  background-image: url('../assets/images/img-result-bg.png');
+  background-image: url('../assets/images/img-result-bg.webp');
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
diff --git a/src/components/TodoList.vue b/src/components/TodoList.vue
index 919ca84..02deef1 100644
--- a/src/components/TodoList.vue
+++ b/src/components/TodoList.vue
@@ -19,7 +19,7 @@
 
     <div class="fullsection" v-show="qiweiShow">
       <div class="qiwei">
-        <img src="../assets/images/qiwei-bg.png" alt="">
+        <img src="../assets/images/qiwei-bg.webp" alt="">
         <div class="close" @click="qiweiShow = false"></div>
       </div>
     </div>
@@ -32,9 +32,9 @@ import { globalStore } from "@/globalstore";
 import ModalTransition from "./ModalTransition.vue"
 import { Storage, generateQR, isWeixin, isMiniPage } from "../libs/utils"
 import Haibao from "@/libs/haibao"
-import bg from "../assets/images/haibao-bg.png"
-import mask from "../assets/images/haibao-mask.png"
-import haibaoCoverBorder from "../assets/images/haibao-cover.png"
+import bg from "../assets/images/haibao-bg.webp"
+import mask from "../assets/images/haibao-mask.webp"
+import haibaoCoverBorder from "../assets/images/haibao-cover.webp"
 const props = defineProps({
   show: false,
 })
@@ -53,19 +53,14 @@ const handleHaibao = async () => {
   if (haibaoUrl.value) {
     return
   }
+  const loading = weui.loading()
   // let userPicture = 'https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250914/face-merge-5c90bb95-d1d2-479a-a13b-ada7ba8e7152.jpg'
-  let userPicture = '';
-  if (!globalStore.result_url) {
-    weui.alert("请先参与活动合成图片并打榜！")
-    haibaoShow.value = false
-    return false;
-  } else {
-    userPicture = await loadImage(globalStore.result_url)
-  }
-  const loading = weui.loading();
+  let userPicture = await loadImage(globalStore.result_url)
+  // let userPicture = await loadImage('https://lzlj123.oss-cn-shanghai.aliyuncs.com/face-merged/20250914/face-merge-5c90bb95-d1d2-479a-a13b-ada7ba8e7152.jpg')
+
   const infos = Storage.get("userinfos")
   const haibaoCover = new Haibao(951, 1607)
-  haibaoCover.add(userPicture, 50, 50)
+  haibaoCover.add(userPicture, 0, 50, 951, 1698)
   haibaoCover.add(mask, 10, 100)
   haibaoCover.add(haibaoCoverBorder, 0, 0)
   haibaoCover.draw('destination-in').then(() => {
@@ -123,6 +118,9 @@ const openHaibao = (e) => {
   if (target.classList.contains("has")) {
     return
   }
+  if (!globalStore.result_url) {
+    return weui.alert("请先参与活动合成图片并打榜！")
+  }
   haibaoShow.value = true
   handleHaibao()
 }
@@ -271,7 +269,7 @@ const handleScan = (e) => {
   height: 8.148148vw;
   right: 5vw;
   top: 15vw;
-  background-image: url("../assets/images/close-btn.png");
+  background-image: url("../assets/images/close-btn.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -293,7 +291,7 @@ const handleScan = (e) => {
   position: relative;
   width: 100vw;
   height: 123.333333vw;
-  background-image: url("../assets/images/todo-bg.png");
+  background-image: url("../assets/images/todo-bg.webp");
   background-repeat: no-repeat;
   background-size: 100%;
 }
@@ -317,7 +315,7 @@ const handleScan = (e) => {
 }
 
 .btn-share {
-  background-image: url("../assets/images/share-link.png");
+  background-image: url("../assets/images/share-link.webp");
 }
 
 .btn-share.has {
@@ -325,7 +323,7 @@ const handleScan = (e) => {
 }
 
 .btn-qiwei {
-  background-image: url("../assets/images/add-wx.png");
+  background-image: url("../assets/images/add-wx.webp");
 }
 
 .btn-qiwei.has {
@@ -333,7 +331,7 @@ const handleScan = (e) => {
 }
 
 .btn-scan {
-  background-image: url("../assets/images/scan-code.png");
+  background-image: url("../assets/images/scan-code.webp");
 }
 
 .btn-scan.has {
diff --git a/src/libs/haibao.js b/src/libs/haibao.js
index d72679a..9e5cb17 100644
--- a/src/libs/haibao.js
+++ b/src/libs/haibao.js
@@ -19,11 +19,11 @@ export default class Haibao {
    * @param {number} y 绘制Y坐标
    * @returns {Promise} 图片加载完成的Promise
    */
-  add (image, x, y, index) {
+  add (image, x, y, width = 'auto', height = 'auto', index) {
     this.zIndex++
     const zIndex = index ? index : this.zIndex
     const loadPromise = this._createLoadPromise(image).then(img => {
-      this.images.push({ img, x, y, zIndex });
+      this.images.push({ img, x, y, width, height, zIndex });
     });
 
     this.imagePromises.push(loadPromise);
@@ -52,8 +52,10 @@ export default class Haibao {
 
     // 绘制所有图片
     this.images.sort((a, b) => a.zIndex - b.zIndex)
-    this.images.forEach(({ img, x, y, zIndex }, idx) => {
-      this.ctx.drawImage(img, x, y);
+    this.images.forEach(({ img, x, y, width, height, zIndex }, idx) => {
+      const w = width === 'auto' ? img.width : width
+      const h = height === 'auto' ? img.height : height
+      this.ctx.drawImage(img, x, y, w, h);
       if (idx === 0) {
         this.ctx.globalCompositeOperation = mask
       } else {
diff --git a/src/libs/utils.js b/src/libs/utils.js
index b06c535..1117815 100644
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -70,7 +70,7 @@ export const isMiniPage = () => {
 }
 export const webpAsPng = (url) => {
   const nowebp = document.querySelector("html").classList.value.indexOf("nowebp") > -1
-  return nowebp ? url.replace(".webp", ".png").replace("images/", "images/png/") : url
+  return nowebp ? url.replace(".webp", ".webp").replace("images/", "images/png/") : url
 }
 export const getUserBrowersName = () => {
   const ua = navigator.userAgent
diff --git a/src/static/ali_face_template.js b/src/static/ali_face_template.js
index 4007d63..1b56d1a 100644
--- a/src/static/ali_face_template.js
+++ b/src/static/ali_face_template.js
@@ -1,5 +1,5 @@
 const faceTemplate = [{
-    "name": "fugu_1.png",
+    "name": "fugu_1.webp",
     "template_id": "73a3cc5b-eb53-4daf-90a7-9850aca96fd6",
     "data": [{
         "faceRect": {
@@ -22,7 +22,7 @@ const faceTemplate = [{
     ]
   },
   {
-    "name": "fugu_2.png",
+    "name": "fugu_2.webp",
     "template_id": "86baa916-fc5e-44ed-8961-c3404665a1a3",
     "data": [{
       "faceRect": {
@@ -43,7 +43,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "fugu_3.png",
+    "name": "fugu_3.webp",
     "template_id": "a9e6c7a3-f021-4a8c-9a9b-88b008de183a",
     "data": [{
       "FaceRect": {
@@ -64,7 +64,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "fugu_4.png",
+    "name": "fugu_4.webp",
     "template_id": "5fcc1dd1-6ff0-4052-a754-f60c7cecba0f",
     "data": [{
       "faceRect": {
@@ -93,7 +93,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "fugu_5.png",
+    "name": "fugu_5.webp",
     "template_id": "10f6e910-c736-4d9a-949e-33921befad3f",
     "data": [{
       "faceRect": {
@@ -130,7 +130,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "fugu_6.png",
+    "name": "fugu_6.webp",
     "template_id": "92b80ada-7fae-49eb-82f5-d3cdc9252a69",
     "data": [{
       "faceRect": {
@@ -175,7 +175,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "luying_1.png",
+    "name": "luying_1.webp",
     "template_id": "d98c1384-e9cf-4e96-8181-f014e7ebfffa",
     "data": [{
       "faceRect": {
@@ -196,7 +196,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "luying_2.png",
+    "name": "luying_2.webp",
     "template_id": "a2a595bc-83b5-4ab3-a326-6b451b23de70",
     "data": [{
       "faceRect": {
@@ -217,7 +217,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "luying_3.png",
+    "name": "luying_3.webp",
     "template_id": "866916d3-ee75-4060-a063-e7b5368c56b5",
     "data": [{
       "faceRect": {
@@ -238,7 +238,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "luying_4.png",
+    "name": "luying_4.webp",
     "template_id": "50053074-d192-4c05-bab2-6131a6271d7f",
     "data": [{
       "faceRect": {
@@ -267,7 +267,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "luying_5.png",
+    "name": "luying_5.webp",
     "template_id": "01263cbe-f2b4-4a69-8db7-e73919bf8331",
     "data": [{
       "FaceRect": {
@@ -304,7 +304,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "luying_6.png",
+    "name": "luying_6.webp",
     "template_id": "dee63c93-e99e-4ff7-b50d-2cb0b940c4be",
     "data": [{
       "FaceRect": {
@@ -349,7 +349,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "paidui_1.png",
+    "name": "paidui_1.webp",
     "template_id": "24a9b372-9d35-4fd8-8d5d-10c3a3510470",
     "data": [{
       "faceRect": {
@@ -370,7 +370,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "paidui_2.png",
+    "name": "paidui_2.webp",
     "template_id": "c54098d4-9cf6-4b39-8870-a47d07263dd7",
     "data": [{
       "faceRect": {
@@ -391,7 +391,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "paidui_3.png",
+    "name": "paidui_3.webp",
     "template_id": "161320ea-4454-4a38-9687-d52370f7b8a8",
     "data": [{
       "faceRect": {
@@ -412,7 +412,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "paidui_4.png",
+    "name": "paidui_4.webp",
     "template_id": "b9b12447-aec9-4888-96dd-e64339052df0",
     "data": [{
       "faceRect": {
@@ -441,7 +441,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "paidui_5.png",
+    "name": "paidui_5.webp",
     "template_id": "ec9640d9-d853-4505-929f-75c8e6f9896e",
     "data": [{
       "faceRect": {
@@ -470,7 +470,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "paidui_6.png",
+    "name": "paidui_6.webp",
     "template_id": "ba9a61ca-f2a5-4586-920b-d56a1cc9f755",
     "data": [{
       "faceRect": {
@@ -515,7 +515,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "shenxian_1.png",
+    "name": "shenxian_1.webp",
     "template_id": "48749272-fa99-466b-b888-6e465bf76e57",
     "data": [{
       "faceRect": {
@@ -536,7 +536,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "shenxian_2.png",
+    "name": "shenxian_2.webp",
     "template_id": "85b1ef1a-0bb6-4e49-95bf-cdc5bd3985dc",
     "data": [{
       "faceRect": {
@@ -557,7 +557,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "shenxian_3.png",
+    "name": "shenxian_3.webp",
     "template_id": "6dbbee92-39d0-4763-8aef-ac535fe78b7c",
     "data": [{
       "faceRect": {
@@ -578,7 +578,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "shenxian_4.png",
+    "name": "shenxian_4.webp",
     "template_id": "8e914ed5-7a38-4698-a08a-b45f40971fb7",
     "data": [{
       "faceRect": {
@@ -607,7 +607,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "shenxian_5.png",
+    "name": "shenxian_5.webp",
     "template_id": "4a7e1337-ce20-46e0-a34b-41181442e9d5",
     "data": [{
       "faceRect": {
@@ -644,7 +644,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "shenxian_6.png",
+    "name": "shenxian_6.webp",
     "template_id": "60752482-6e9e-4e4f-9473-49076403663b",
     "data": [{
       "faceRect": {
@@ -689,7 +689,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xianxia_1.png",
+    "name": "xianxia_1.webp",
     "template_id": "76d41a71-0353-4a30-86f9-508fd00fcb36",
     "data": [{
       "faceRect": {
@@ -710,7 +710,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xianxia_2.png",
+    "name": "xianxia_2.webp",
     "template_id": "28efcde7-dcd9-42ec-9b14-f3c6e031c14b",
     "data": [{
       "faceRect": {
@@ -731,7 +731,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xianxia_3.png",
+    "name": "xianxia_3.webp",
     "template_id": "1ddfc0dc-87cd-4fe2-82f1-3e774a1bd8d9",
     "data": [{
       "faceRect": {
@@ -760,7 +760,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xianxia_4.png",
+    "name": "xianxia_4.webp",
     "template_id": "86385f26-fd04-4e5a-a1e0-e5e70940f1df",
     "data": [{
       "faceRect": {
@@ -789,7 +789,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xianxia_5.png",
+    "name": "xianxia_5.webp",
     "template_id": "df0baa2e-5926-4251-9222-d286d4ce64d8",
     "data": [{
       "faceRect": {
@@ -826,7 +826,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xianxia_6.png",
+    "name": "xianxia_6.webp",
     "template_id": "978cc06f-e0d0-4062-b8ee-9e1008c7158c",
     "data": [{
       "faceRect": {
@@ -871,7 +871,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xinzhongshi_1.png",
+    "name": "xinzhongshi_1.webp",
     "template_id": "80a3eb2a-cbf5-48e9-9293-ba24f16536e4",
     "data": [{
       "faceRect": {
@@ -892,7 +892,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xinzhongshi_2.png",
+    "name": "xinzhongshi_2.webp",
     "template_id": "6f9a14da-f6c3-472e-9324-4e7c9caff4f6",
     "data": [{
       "faceRect": {
@@ -913,7 +913,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xinzhongshi_3.png",
+    "name": "xinzhongshi_3.webp",
     "template_id": "8afc8122-c070-4a75-b2e3-a306784b5c81",
     "data": [{
       "faceRect": {
@@ -934,7 +934,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xinzhongshi_4.png",
+    "name": "xinzhongshi_4.webp",
     "template_id": "f7b7f97d-e60c-405a-9c50-119b0b3a1bca",
     "data": [{
       "faceRect": {
@@ -963,7 +963,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xinzhongshi_5.png",
+    "name": "xinzhongshi_5.webp",
     "template_id": "98f6606f-24fe-4990-93e3-8d6391ffbe95",
     "data": [{
       "faceRect": {
@@ -1000,7 +1000,7 @@ const faceTemplate = [{
     }]
   },
   {
-    "name": "xinzhongshi_6.png",
+    "name": "xinzhongshi_6.webp",
     "template_id": "97f084ef-dbe5-42c7-8b10-d6623cd54a6d",
     "data": [{
       "faceRect": {
diff --git a/src/static/imageBackground.js b/src/static/imageBackground.js
index 20fb2a0..0930070 100644
--- a/src/static/imageBackground.js
+++ b/src/static/imageBackground.js
@@ -1,216 +1,216 @@
 const imageBackground = [
     {
         id: 1,
-        titleImgUrl: 'src/assets/images/generate/template/shenxian/shenxian_bg.png',
+        titleImgUrl: 'src/assets/images/generate/template/shenxian/shenxian_bg.webp',
         children: [
             {
                 id: 1,
-                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_1.png',
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_1.webp',
                 peopleCount: 2
             },
             {
                 id: 2,
-                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_2.png',
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_2.webp',
                 peopleCount: 2
             },
             {
                 id: 3,
-                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_3.png',
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_3.webp',
                 peopleCount: 2
             },
             {
                 id: 4,
-                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_4.png',
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_4.webp',
                 peopleCount: 3
             },
             {
                 id: 5,
-                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_5.png',
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_5.webp',
                 peopleCount: 4
             },
             {
                 id: 6,
-                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_6.png',
+                imgUrl: 'src/assets/images/generate/template/shenxian/shenxian_6.webp',
                 peopleCount: 5
             }
         ]
     },
     {
         id: 2,
-        titleImgUrl: 'src/assets/images/generate/template/xianxia/xianxia_bg.png',
+        titleImgUrl: 'src/assets/images/generate/template/xianxia/xianxia_bg.webp',
         children: [
             {
                 id: 1,
-                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_1.png',
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_1.webp',
                 peopleCount: 2
             },
             {
                 id: 2,
-                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_2.png',
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_2.webp',
                 peopleCount: 2
             },
             {
                 id: 3,
-                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_3.png',
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_3.webp',
                 peopleCount: 3
             },
             {
                 id: 4,
-                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_4.png',
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_4.webp',
                 peopleCount: 3
             },
             {
                 id: 5,
-                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_5.png',
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_5.webp',
                 peopleCount: 4
             },
             {
                 id: 6,
-                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_6.png',
+                imgUrl: 'src/assets/images/generate/template/xianxia/xianxia_6.webp',
                 peopleCount: 5
             }
         ]
     },
     {
         id: 3,
-        titleImgUrl: 'src/assets/images/generate/template/fugu/fugu_bg.png',
+        titleImgUrl: 'src/assets/images/generate/template/fugu/fugu_bg.webp',
         children: [
             {
                 id: 1,
-                imgUrl: 'src/assets/images/generate/template/fugu/fugu_1.png',
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_1.webp',
                 peopleCount: 2
             },
             {
                 id: 2,
-                imgUrl: 'src/assets/images/generate/template/fugu/fugu_2.png',
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_2.webp',
                 peopleCount: 2
             },
             {
                 id: 3,
-                imgUrl: 'src/assets/images/generate/template/fugu/fugu_3.png',
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_3.webp',
                 peopleCount: 2
             },
             {
                 id: 4,
-                imgUrl: 'src/assets/images/generate/template/fugu/fugu_4.png',
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_4.webp',
                 peopleCount: 3
             },
             {
                 id: 5,
-                imgUrl: 'src/assets/images/generate/template/fugu/fugu_5.png',
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_5.webp',
                 peopleCount: 4
             },
             {
                 id: 6,
-                imgUrl: 'src/assets/images/generate/template/fugu/fugu_6.png',
+                imgUrl: 'src/assets/images/generate/template/fugu/fugu_6.webp',
                 peopleCount: 5
             }
         ]
     },
     {
         id: 4,
-        titleImgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_bg.png',
+        titleImgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_bg.webp',
         children: [
             {
                 id: 1,
-                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_1.png',
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_1.webp',
                 peopleCount: 2
             },
             {
                 id: 2,
-                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_2.png',
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_2.webp',
                 peopleCount: 2
             },
             {
                 id: 3,
-                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_3.png',
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_3.webp',
                 peopleCount: 2
             },
             {
                 id: 4,
-                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_4.png',
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_4.webp',
                 peopleCount: 3
             },
             {
                 id: 5,
-                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_5.png',
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_5.webp',
                 peopleCount: 4
             },
             {
                 id: 6,
-                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_6.png',
+                imgUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_6.webp',
                 peopleCount: 5
             }
         ]
     },
     {
         id: 5,
-        titleImgUrl: 'src/assets/images/generate/template/luying/luying_bg.png',
+        titleImgUrl: 'src/assets/images/generate/template/luying/luying_bg.webp',
         children: [
             {
                 id: 1,
-                imgUrl: 'src/assets/images/generate/template/luying/luying_1.png',
+                imgUrl: 'src/assets/images/generate/template/luying/luying_1.webp',
                 peopleCount: 2
             },
             {
                 id: 2,
-                imgUrl: 'src/assets/images/generate/template/luying/luying_2.png',
+                imgUrl: 'src/assets/images/generate/template/luying/luying_2.webp',
                 peopleCount: 2
             },
             {
                 id: 3,
-                imgUrl: 'src/assets/images/generate/template/luying/luying_3.png',
+                imgUrl: 'src/assets/images/generate/template/luying/luying_3.webp',
                 peopleCount: 2
             },
             {
                 id: 4,
-                imgUrl: 'src/assets/images/generate/template/luying/luying_4.png',
+                imgUrl: 'src/assets/images/generate/template/luying/luying_4.webp',
                 peopleCount: 3
             },
             {
                 id: 5,
-                imgUrl: 'src/assets/images/generate/template/luying/luying_5.png',
+                imgUrl: 'src/assets/images/generate/template/luying/luying_5.webp',
                 peopleCount: 4
             },
             {
                 id: 6,
-                imgUrl: 'src/assets/images/generate/template/luying/luying_6.png',
+                imgUrl: 'src/assets/images/generate/template/luying/luying_6.webp',
                 peopleCount: 5
             }
         ]
     },
     {
         id: 6,
-        titleImgUrl: 'src/assets/images/generate/template/paidui/paidui_bg.png',
+        titleImgUrl: 'src/assets/images/generate/template/paidui/paidui_bg.webp',
         children: [
             {
                 id: 1,
-                imgUrl: 'src/assets/images/generate/template/paidui/paidui_1.png',
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_1.webp',
                 peopleCount: 2
             },
             {
                 id: 2,
-                imgUrl: 'src/assets/images/generate/template/paidui/paidui_2.png',
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_2.webp',
                 peopleCount: 2
             },
             {
                 id: 3,
-                imgUrl: 'src/assets/images/generate/template/paidui/paidui_3.png',
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_3.webp',
                 peopleCount: 2
             },
             {
                 id: 4,
-                imgUrl: 'src/assets/images/generate/template/paidui/paidui_4.png',
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_4.webp',
                 peopleCount: 3
             },
             {
                 id: 5,
-                imgUrl: 'src/assets/images/generate/template/paidui/paidui_5.png',
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_5.webp',
                 peopleCount: 3
             },
             {
                 id: 6,
-                imgUrl: 'src/assets/images/generate/template/paidui/paidui_6.png',
+                imgUrl: 'src/assets/images/generate/template/paidui/paidui_6.webp',
                 peopleCount: 5
             }
         ]
diff --git a/vite.config.js b/vite.config.js
index 27760e2..c0609be 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,7 +6,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
 export default defineConfig({
-  // base: 'https://huodong2.lzlj.com/iceSip/',
+  base: 'https://huodong2.lzlj.com/faceFamily/',
   plugins: [
     vue({
       template: {
@@ -22,16 +22,6 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
-  build: {
-    assetsInlineLimit: 0,
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          phaser: ['phaser']
-        }
-      }
-    },
-  },
   define: {
     '__APP_VERSION__': JSON.stringify(packageJson.version)
   },