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

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