liuxiang/faceFamilySource
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

todolist

Browse Source
This commit is contained in:
xiaoaojiao
2025-09-14 22:18:52 +08:00
parent 7f29511cb6
commit f59feef223
21 changed files with 215 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.vue
View File

@@ -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)

6
src/components/Ad.vue
View File

@@ -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%;
}

20
src/components/GenerateImg.vue
View File

@@ -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>

6
src/components/GenerateImgConfirm.vue
View File

@@ -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;

4
src/components/GenerateLoading.vue
View File

@@ -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;

20
src/components/HomePage.vue
View File

@@ -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;

16
src/components/Lottery.vue
View File

@@ -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;

36
src/components/MyPhoto.vue
View File

@@ -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;

22
src/components/PhotoSquare.vue
View File

@@ -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;

6
src/components/Popup.vue
View File

@@ -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;

10
src/components/PrizeList.vue
View File

@@ -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 {

8
src/components/Rule.vue
View File

@@ -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%;
}

10
src/components/SelectTemplateV2.vue
View File

@@ -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;

24
src/components/SynthesizedResults.vue
View File

@@ -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;

36
src/components/TodoList.vue
View File

@@ -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 {

10
src/libs/haibao.js
View File

@@ -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 {

2
src/libs/utils.js
View File

@@ -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

72
src/static/ali_face_template.js
View File

@@ -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": {

84
src/static/imageBackground.js
View File

@@ -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
}
]