update

index.html

@@ -9,7 +9,7 @@
   <meta content="telephone=no,email=no" name=format-detection>
   <meta name="viewport"
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
-  <title>AI合成全家福，迎中秋金饼</title>
+  <title>Ai在一起 金饼送给你</title>
   <script>
     const isWeixinPlatform = /MicroMessenger/i.test(window.navigator.userAgent) || window.__wxjs_environment === 'miniprogram'
     if (isWeixinPlatform) {

src/assets/main.css

@@ -38,7 +38,6 @@
 
 .vue-recycle-scroller__item-wrapper {
   width: 100%;
-  height: 59vw;
   display: flex;
   flex-flow: wrap;
 }

src/components/GenerateImg.vue

@@ -233,6 +233,9 @@ const generateImage = async (options) => {
         mergeFetch(index)
       }
     }, 1000)
+    router.push({
+      name: 'synthesizedResults'
+    })
 
     const mergeFetch = async (index)=> {
       const statusRes = await Request(`face/merge/${mergeData.merge_id}/status`, {}, 'GET', true)

src/components/HomePage.vue

@@ -356,7 +356,12 @@ watch(() => mergeId, async (newVal) => {
         <!-- 为不支持视频的设备提供 fallback -->
         <p style="display: none;">您的浏览器不支持视频播放</p>
       </video>
-      
+      <div class="scene-item logo">
+        <img src="../assets/images/logo.webp" alt="logo">
+      </div>
+      <div class="scene-item slogan">
+        <img src="../assets/images/slogan.webp" alt="slogan">
+      </div>
       <!-- fallback 背景图，当视频无法加载时显示 -->
       <div v-if="videoError || !videoLoaded" class="fallback-background"></div>
       
@@ -405,6 +410,15 @@ watch(() => mergeId, async (newVal) => {
 </template>
 
 <style scoped>
+.logo {
+  top: 4vw;
+  width: 24vw;
+  left: 4vw;
+}
+.slogan {
+  top: 20vw;
+  width: 76vw;
+}
 .main {
   height: 100%;
   overflow-y: auto;
@@ -451,9 +465,7 @@ watch(() => mergeId, async (newVal) => {
   cursor: pointer;
   transition: all 0.4s ease;
   overflow: hidden;
-  border: 3px solid transparent;
   animation: float 4s ease-in-out infinite;
-  z-index: 10; /* 确保按钮显示在视频之上 */
 }
 
 .scene-item:hover {
@@ -469,7 +481,7 @@ watch(() => mergeId, async (newVal) => {
 
 .item-1 {
   width: 21vw;
-  bottom: 1vw;
+  bottom: 5vw;
   left: 0;
   animation-delay: 0s;
 }
@@ -492,7 +504,7 @@ watch(() => mergeId, async (newVal) => {
 
 .item-2 {
   width: 48vw;
-  bottom: 1vw;
+  bottom: 5vw;
   animation-delay: 0s;
 }
 
@@ -518,7 +530,7 @@ watch(() => mergeId, async (newVal) => {
 
 .item-3 {
   width: 21vw;
-  bottom: 1vw;
+  bottom: 5vw;
   right: 0;
   animation-delay: 0s;
 }

src/components/MyPhoto.vue

@@ -241,7 +241,7 @@ markers.value = [
           }"
           @click.stop="$emit('go-photo-square')">
       </div>
-      <!-- <p class="my-photo-desc">每周只能选一张全照片打榜，每周一打榜成绩清零， 可重新选择照片参与打榜。</p> -->
+      <p class="my-photo-desc">每位会员只能选一张照片参与打榜，点赞前30名即可活动中秋精美礼品，速速邀请好友为你点赞吧！</p>
       <div class="image-gallery">
         <!-- <RecycleScroller
             class="scroller"
@@ -358,7 +358,8 @@ markers.value = [
   width: 87vw;
   top: 48vw;
   text-align: center;
-  color: #855211
+  color: #855211;
+  font-size: 3.6vw;
 }
 .refresh-btn {
   width: 12vw;
@@ -391,7 +392,7 @@ markers.value = [
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
-  top: 10vw;
+  top: 26vw;
 }
 
 .image-container {
@@ -408,7 +409,6 @@ markers.value = [
   align-items: center;
   position: relative;
   min-height: -webkit-fill-available;
-  position: relative;
   cursor: pointer;
 }
 
@@ -431,7 +431,7 @@ markers.value = [
   width: 100%;
   height: 92vh;
   background-image: url('../assets/images/my-photov2.webp');
-  background-size: cover;
+  background-size: 100%;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;

src/components/PhotoSquare.vue

@@ -143,6 +143,12 @@ markers.value = [
   { x: 50, y: 32, width: 50, height: 14 }
 ];
 
+const getBackgroundImage = (item) => {
+  if (item.result_url) {
+    return item.result_url;
+  }
+};
+
 </script>
 
 <template>
@@ -163,7 +169,7 @@ markers.value = [
           }"
           @click.stop="$emit('go-my-photo')">
       </div>
-
+      <p class="my-photo-desc">打榜活动截止至9月30日晚12:00结束，中奖信息将于10月1日早10点推送至获奖会员。</p>
       <div v-if="!disableInviteHelp" class="image-gallery ">
         <RecycleScroller
             class="scroller"
@@ -173,7 +179,8 @@ markers.value = [
             v-slot="{ item, index }"
           >
           <div class="image-wrapper">
-            <div class="image-container mask-background">
+            <div class="image-container mask-background" 
+            :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }">
             </div>          
             <img 
               src="../assets/images/zpgc-border.webp" 
@@ -248,6 +255,14 @@ markers.value = [
 </template>
 
 <style scoped>
+.my-photo-desc {
+  position: absolute;
+  width: 87vw;
+  top: 48vw;
+  text-align: center;
+  color: #855211;
+  font-size: 3.6vw;
+}
 .scroller {
   height: 124vw;
   overflow-y: auto;
@@ -390,7 +405,7 @@ markers.value = [
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
-  top: 15vw;
+  top: 26vw;
 }
 
 .image-container {

src/components/SynthesizedResults.vue

@@ -7,7 +7,7 @@ import globalToastEvent, { ToastType } from '../globalToastEvent';
 import { Storage, generateQR } from "../libs/utils";
 import Haibao from "@/libs/haibao";
 import mask from "../assets/images/haibao-mask.webp";
-import haibaoCoverBorder from "../assets/images/haibao-cover.webp";
+import haibaoCoverBorder from "../assets/images/haibao-cover-sucess.webp";
 import bg from "../assets/images/haibao-bg.webp"
 
 defineProps({
@@ -85,7 +85,8 @@ const handleHaibao = async () => {
       haibaoSave.draw().then(() => {
         haibaoSave.text(infos.nickname + '的全家福', haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#fcf2b3' })
         haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
-          haibaoUrl.value = url
+          // haibaoUrl.value = url
+          haibaoUrl.value = globalStore.result_url;
           loading.hide()
         }).catch(err => {
           console.log(err)