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

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 {