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

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;