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

update

Browse Source
This commit is contained in:
yixu
2025-12-25 14:29:13 +08:00
parent 61cf0cd40d
commit f4042e8a65
188 changed files with 181 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/GameDemo.vue
View File

@@ -19,13 +19,13 @@ const cancelBtn = () => {
<div class="home-bg">
<div class="popup-bg">
<div class="scene-item item-1">
<img src="../assets/images/new/start.png" @click="cancelBtn" alt="开始">
<img src="../assets/images/new/start.webp" @click="cancelBtn" alt="开始">
</div>
<div class="scene-item item-2">
<img src="../assets/images/new/start-1.png" @click="cancelBtn" alt="立即挑战">
<img src="../assets/images/new/start-1.webp" @click="cancelBtn" alt="立即挑战">
</div>
<div class="scene-item item-3">
<img src="../assets/images/new/close-btn.png" @click="cancelBtn" alt="关闭">
<img src="../assets/images/new/close-btn.webp" @click="cancelBtn" alt="关闭">
</div>
</div>
</div>
@@ -48,7 +48,7 @@ const cancelBtn = () => {
.popup-bg {
width: 100vw;
height: 204vw;
background-image: url('../assets/images/new/demo-popup.png');
background-image: url('../assets/images/new/demo-popup.webp');
background-size: 100%;
background-repeat: no-repeat;
display: flex;

18
src/components/GamePage.vue
View File

@@ -1,7 +1,7 @@
<template>
<ModalTransition class="game-swiper" :show="show">
<div class="scene-item item-1" @click="handleGoBack">
<img src="../assets/images/new/back.png" alt="后退">
<img src="../assets/images/new/back.webp" alt="后退">
</div>
<!-- 隐藏的圆形点击区域 -->
@@ -23,11 +23,11 @@
import { ref, onMounted, onUnmounted, computed } from 'vue'
import ModalTransition from "./ModalTransition.vue"
import globalToastEvent, { ToastType } from '../globalToastEvent';
import game1 from '../assets/images/new/game1.png';
import game2 from '../assets/images/new/game2.png';
import game3 from '../assets/images/new/game3.png';
import game4 from '../assets/images/new/game4.png';
import game5 from '../assets/images/new/game5.png';
import game1 from '../assets/images/new/game1.webp';
import game2 from '../assets/images/new/game2.webp';
import game3 from '../assets/images/new/game3.webp';
import game4 from '../assets/images/new/game4.webp';
import game5 from '../assets/images/new/game5.webp';
import { globalStore } from "../globalstore.js";
import { Request } from "../libs/utils"
@@ -110,17 +110,17 @@ const handleShowLottery = async () => {
// 轮播图数据
const slides = ref([
{
image: new URL('../assets/images/new/slider1.png', import.meta.url).href,
image: new URL('../assets/images/new/slider1.webp', import.meta.url).href,
title: '轮播图1',
link: '/home' // 点击跳转的路由
},
{
image: new URL('../assets/images/new/slider1.png', import.meta.url).href,
image: new URL('../assets/images/new/slider1.webp', import.meta.url).href,
title: '轮播图2',
link: '/lottery'
},
{
image: new URL('../assets/images/new/slider1.png', import.meta.url).href,
image: new URL('../assets/images/new/slider1.webp', import.meta.url).href,
title: '轮播图3',
link: '/address'
}

29
src/components/GameSwiper.vue
View File

@@ -1,12 +1,12 @@
<template>
<ModalTransition class="game-swiper" :show="show">
<div class="scene-item item-1" @click="handleGoHome">
<img src="../assets/images/new/go-home.png" alt="回到首页">
<img src="../assets/images/new/go-home.webp" alt="回到首页">
</div>
<div class="confirm-layout" v-if="isConfirmBtnDisplay">
<div class="scene-item item-3" @click="handleConfirmClick">
<img src="../assets/images/new/confirm-btn.png" alt="确定">
<img src="../assets/images/new/confirm-btn.webp" alt="确定">
</div>
</div>
@@ -28,16 +28,16 @@
:key="index"
:class="['carousel-slide', { active: currentIndex === index }]"
>
<img v-show="slide.show" class="complete-icon" src="../assets/images/new/complete-icon.png" alt="已完成">
<img v-show="slide.show" class="complete-icon" src="../assets/images/new/complete-icon.webp" alt="已完成">
<img :src="slide.image" :alt="slide.title" />
<div class="shou-dev">
<div class="show-position">
<div class="action-btn">
<img class="shou-click" src="../assets/images/new/pre-icon.png" alt="左" />
<img class="shou-click" src="../assets/images/new/next-icon.png" alt="右" />
<img class="shou-click" src="../assets/images/new/pre-icon.webp" alt="左" />
<img class="shou-click" src="../assets/images/new/next-icon.webp" alt="右" />
</div>
<img class="shou-btn" src="../assets/images/new/shouzhi.png" alt="手" />
<img class="shou-btn" src="../assets/images/new/shouzhi.webp" alt="手" />
</div>
</div>
</div>
@@ -63,11 +63,11 @@ import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import ModalTransition from "./ModalTransition.vue"
import globalToastEvent, { ToastType } from '../globalToastEvent';
import { Request } from "../libs/utils"
import slider1 from '../assets/images/new/slider1.png';
import slider2 from '../assets/images/new/slider2.png';
import slider3 from '../assets/images/new/slider3.png';
import slider4 from '../assets/images/new/slider4.png';
import slider5 from '../assets/images/new/slider5.png';
import slider1 from '../assets/images/new/slider1.webp';
import slider2 from '../assets/images/new/slider2.webp';
import slider3 from '../assets/images/new/slider3.webp';
import slider4 from '../assets/images/new/slider4.webp';
import slider5 from '../assets/images/new/slider5.webp';
import { globalStore } from "../globalstore.js";
const props = defineProps({
@@ -119,8 +119,9 @@ const getGameInfo = async () => {
const result = await Request('game/info', { refresh_official: true, refresh_cap_scan: true }, "GET")
if (result?.res?.status === 200) {
console.log(result)
// globalStore.completed_games_today = result.json.completed_games_today || [];
globalStore.completed_games_today = ['game1', 'game3']; // 测试数据
globalStore.completed_games_today = result.json.completed_games_today || [];
//TODO: 测试数据
// globalStore.completed_games_today = ['game1', 'game3'];
slides.value = slides.value.map(slide => ({
...slide,
show: globalStore.completed_games_today.includes(`game${slide.id}`)
@@ -405,7 +406,7 @@ onUnmounted(() => {
justify-content: center;
padding: 20px;
box-sizing: border-box;
background-image: url('../assets/images/new/swiper-page-bg.png');
background-image: url('../assets/images/new/swiper-page-bg.webp');
background-size: cover;
background-repeat: no-repeat;
background-position: center;

42
src/components/HomePage.vue
View File

@@ -439,80 +439,80 @@ const handleAddress = (id) => {
<div class="fallback-background"></div>
<div class="scene-item item-1" @click="handleLottery" :class="{ 'disabled': globalStore.draw_chances <= 0 }">
<img src="../assets/images/new/lottery.png" alt="抽奖">
<img src="../assets/images/new/lottery.webp" alt="抽奖">
</div>
<div class="scene-item item-2" @click="navigateGamePage">
<img src="../assets/images/new/start-btn.png" alt="开始探索">
<img src="../assets/images/new/start-btn.webp" alt="开始探索">
</div>
<div class="scene-item item-3" @click="navigateTodoList">
<img src="../assets/images/new/task.png" alt="任务">
<img src="../assets/images/new/task.webp" alt="任务">
</div>
<div @click="toggleMusicState" :class="{ 'show-music-btn': gameSwiperShow || gamePageShow }">
<div v-if="isMusicOn" key="on" class="scene-item item-4">
<img src="../assets/images/new/music.png" alt="音乐开">
<img src="../assets/images/new/music.webp" alt="音乐开">
</div>
<div v-else key="off" class="scene-item item-5">
<img src="../assets/images/new/music-off.png" alt="音乐关">
<img src="../assets/images/new/music-off.webp" alt="音乐关">
</div>
</div>
<div class="scene-item item-6" @click="handleRule">
<img src="../assets/images/new/rule.png" alt="规则">
<img src="../assets/images/new/rule.webp" alt="规则">
</div>
<div class="scene-item item-7" @click="handlePrizeList">
<img src="../assets/images/new/award.png" alt="奖励">
<img src="../assets/images/new/award.webp" alt="奖励">
</div>
<div class="scene-item item-ma1">
<img src="../assets/images/new/ma1.png" alt="马1">
<img src="../assets/images/new/ma1.webp" alt="马1">
</div>
<div class="scene-item item-ma2">
<img src="../assets/images/new/ma2.png" alt="马2">
<img src="../assets/images/new/ma2.webp" alt="马2">
</div>
<div class="scene-item item-ma3">
<img src="../assets/images/new/ma3.png" alt="马3">
<img src="../assets/images/new/ma3.webp" alt="马3">
</div>
<div class="scene-item item-ma4">
<img src="../assets/images/new/ma4.png" alt="马4">
<img src="../assets/images/new/ma4.webp" alt="马4">
</div>
<div class="scene-item item-jiu1">
<img src="../assets/images/new/jiuping1.png" alt="酒瓶1">
<img src="../assets/images/new/jiuping1.webp" alt="酒瓶1">
</div>
<div class="scene-item item-jiu2">
<img src="../assets/images/new/jiuping2.png" alt="酒瓶2">
<img src="../assets/images/new/jiuping2.webp" alt="酒瓶2">
</div>
<div class="scene-item item-xique1">
<img src="../assets/images/new/xique1.png" alt="喜鹊1">
<img src="../assets/images/new/xique1.webp" alt="喜鹊1">
</div>
<div class="scene-item item-xique2">
<img src="../assets/images/new/xique2.png" alt="喜鹊2">
<img src="../assets/images/new/xique2.webp" alt="喜鹊2">
</div>
<div class="scene-item item-sidai">
<img src="../assets/images/new/sidai.png" alt="丝带">
<img src="../assets/images/new/sidai.webp" alt="丝带">
</div>
<div class="scene-item item-lihe">
<img src="../assets/images/new/lihe.png" alt="礼盒">
<img src="../assets/images/new/lihe.webp" alt="礼盒">
</div>
<div class="scene-item item-hulu">
<img src="../assets/images/new/hulu.png" alt="葫芦">
<img src="../assets/images/new/hulu.webp" alt="葫芦">
</div>
<div class="scene-item item-taozi">
<img src="../assets/images/new/taozi.png" alt="桃子">
<img src="../assets/images/new/taozi.webp" alt="桃子">
</div>
<div class="scene-item item-8" @click="popupMore">
<img src="../assets/images/new/learn-more.png" alt="更多金喜">
<img src="../assets/images/new/learn-more.webp" alt="更多金喜">
</div>
<Rule :show="ruleShow" @close="ruleShow = false"></Rule>
@@ -593,7 +593,7 @@ const handleAddress = (id) => {
left: 0;
width: 100%;
height: 100%;
background-image: url('../assets/images/new/home-bg.png');
background-image: url('../assets/images/new/home-bg.webp');
background-size: cover;
background-repeat: no-repeat;
background-position: center;

192
src/components/Lottery.vue
View File

@@ -8,32 +8,34 @@
<div class="lottery-prize" :style="prizeBackgroundImg">
<div class="lottery-layer" ref="layerRef">
<div class="lottery-mask-image" ref="maskBgRef">
<div class="lottery-reveal lottery-image" v-show="activePrizeData.prize_code !== 'NO'">
<div class="lottery-mask-image" ref="maskBgRef" >
<!-- 中奖 -->
<div class="lottery-reveal lottery-image" v-if="activePrizeData.prize_code !== 'NO'">
<div class="lottery-image USER_LZ_ZQ_DZJ">
<div class="lottery-image prize-img" :class="'USER_' + activePrizeData.prize_code"></div>
<div class="lottery-name">{{ activePrizeData.prize_name }}</div>
</div>
</div>
<!-- 未中奖 -->
<div class="lottery-reveal lottery-image" v-if="activePrizeData.prize_code === 'NO'">
<div class="lottery-image" :class="'USER_' + 'NO'"></div>
</div>
</div>
</div>
<!-- 标题（保持原逻辑） -->
<!-- <div
class="lottery-title"
:class="props.type === 'notice' && 'notice'"
ref="titleRef"
v-show="activePrizeData.prize_code !== 'NO'"
></div> -->
</div>
<div
class="lottery-title-no"
:class="props.type === 'notice' && 'notice'"
ref="titleRef"
v-show="btngroupShow && activePrizeData.prize_code !== 'NO'"
v-show="btngroupShow && activePrizeData.prize_code === 'NO'"
></div>
<div class="lottery-btngroup" v-show="btngroupShow">
<div class="btn-more" @click="navigateSharePage"></div>
<div class="btn-more" @click="navigateSharePage" v-if="activePrizeData.prize_code !== 'NO'"></div>
<!-- <div class="btn-kaixin" @click="handleLotteryAction" v-if="activePrizeData.prize_code !== 'NO'"></div> -->
<div class="back-home" @click="handleGoHomeAction" v-if="activePrizeData.prize_code !== 'NO'"></div>
<div class="back-home" @click="handleGoHomeAction" v-if="activePrizeData.prize_code === 'NO'"></div>
</div>
</div>
</div>
@@ -91,8 +93,8 @@ const closeThis = () => {
emit("close")
}
import noPrizeBg from '../assets/images/new/NO-prize-bg.png';
import prizeBg from '../assets/images/new/lottery-bg.png';
import noPrizeBg from '../assets/images/new/NO-prize-bg.webp';
import prizeBg from '../assets/images/new/lottery-bg.webp';
const prizeBackgroundImg = computed(() => {
if (activePrizeData.value.prize_code === 'NO') {
@@ -125,6 +127,7 @@ const handleGoHomeAction = async () => {
//实物
closeThis()
globalToastEvent.emit(ToastType.CLOSE_ALL);
globalToastEvent.emit(ToastType.SHOW_POPUPMORE);
}
onMounted(() => {
@@ -169,34 +172,34 @@ watch(() => props.show, async (newVal) => {
const loading = weui.loading()
let lottteryResult = null
// if (props.type === 'draw') {
// lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
// // 监听请求失败，关闭组件
// if (!lottteryResult || !lottteryResult.res || (lottteryResult.res.status !== 200 && lottteryResult.res.status !== 201)) {
// emit('close')
// loading.hide()
// return
// }
// } else {
// if (!props.data) {
// weui.alert("获取排名奖励出错，请刷新页面重试")
// emit('close')
// loading.hide()
// return
// }
if (props.type === 'draw') {
lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
// 监听请求失败，关闭组件
if (!lottteryResult || !lottteryResult.res || (lottteryResult.res.status !== 200 && lottteryResult.res.status !== 201)) {
emit('close')
loading.hide()
return
}
} else {
if (!props.data) {
weui.alert("获取排名奖励出错，请刷新页面重试")
emit('close')
loading.hide()
return
}
// lottteryResult = {
// res: { status: 200 },
// json: {
// noticeId: props.data.id,
// id: props.data.data.prize.id,
// prize_code: props.data.data.prize.prize_code,
// prize_name: props.data.data.prize.name,
// coupon_type: props.data.data.prize.scene,
// rank: props.data.data.rank
// }
// }
// }
lottteryResult = {
res: { status: 200 },
json: {
noticeId: props.data.id,
id: props.data.data.prize.id,
prize_code: props.data.data.prize.prize_code,
prize_name: props.data.data.prize.name,
coupon_type: props.data.data.prize.scene,
rank: props.data.data.rank
}
}
}
// const userPicture = await getUserPicture()
@@ -215,17 +218,18 @@ watch(() => props.show, async (newVal) => {
// TODO: 测试数据
lottteryResult = {
res: { status: 200 },
json: {
id: 0,
code: "xxx",
// NOTE: 测试用，确保能命中现有的样式映射，便于看到揭晓效果
prize_code: 'LZ_ZQ_DZJ',
coupon_type: "scene",
name: "泸州老窖的一瓶酒"
}
}
// lottteryResult = {
// res: { status: 200 },
// json: {
// id: 0,
// code: "xxx",
// // NOTE: 测试用，确保能命中现有的样式映射，便于看到揭晓效果
// prize_code: 'NO',
// prize_name: '泸州老窖国窖1573 55度双十耀星版500ml',
// coupon_type: "scene",
// name: "泸州老窖的一瓶酒"
// }
// }
loading.hide()
@@ -261,12 +265,12 @@ watch(() => props.show, async (newVal) => {
})
// 中奖揭晓：先显示 2 秒，再用更慢、线性的放大过程（更清晰地看到“逐渐放大”）
if (layerRef.value && activePrizeData.value.prize_code !== 'NO') {
if (layerRef.value) {
// 保证起始大小（50x50px）
gsap.set(layerRef.value, { '--maskSize': '50px' })
// 先停留 2 秒，让用户看清初始“窗口”
prizeshowTime.to({}, { duration: 0.5 })
// prizeshowTime.to({}, { duration: 0.5 })
// 再逐渐放大到 50 倍（2500px）
prizeshowTime.to(layerRef.value, {
@@ -348,7 +352,7 @@ onUnmounted(() => {
margin-top: -30vw;
position: absolute;
inset: 0;
background-image: url("../assets/images/new/lottery-mask-bg.png");
background-image: url("../assets/images/new/lottery-mask-bg.webp");
background-repeat: no-repeat;
/* 保持图片比例：区域 80vw 内居中显示 */
background-size: contain;
@@ -369,17 +373,17 @@ onUnmounted(() => {
z-index: 1;
}
/* 顶层：通过 mask-img.png 露出中奖图，并放大 mask 直到全露出 */
/* 顶层：通过 mask-img.webp 露出中奖图，并放大 mask 直到全露出 */
.lottery-reveal {
z-index: 3;
/* CSS Mask（WebKit + 标准） */
-webkit-mask-image: url("../assets/images/new/mask-img.png");
-webkit-mask-image: url("../assets/images/new/mask-img.webp");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: var(--maskSize) var(--maskSize);
mask-image: url("../assets/images/new/mask-img.png");
mask-image: url("../assets/images/new/mask-img.webp");
mask-repeat: no-repeat;
mask-position: center;
mask-size: var(--maskSize) var(--maskSize);
@@ -387,7 +391,7 @@ onUnmounted(() => {
clip-path: circle(calc(var(--maskSize) * 0.5) at 50% 50%); */
}
/* 可视化的 mask-img.png：让用户能看到“遮罩在放大”的过程 */
/* 可视化的 mask-img.webp：让用户能看到“遮罩在放大”的过程 */
.lottery-mask-visual {
position: absolute;
left: 50%;
@@ -395,7 +399,7 @@ onUnmounted(() => {
transform: translate(-50%, -50%);
width: var(--maskSize);
height: var(--maskSize);
/* background-image: url("../assets/images/new/mask-img.png"); */
/* background-image: url("../assets/images/new/mask-img.webp"); */
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
@@ -419,40 +423,40 @@ onUnmounted(() => {
}
.lottery-image.USER_LZ_ZQ_DZJ {
background-image: url("../assets/images/new/zhongjiang1.png");
background-image: url("../assets/images/new/zhongjiang-bg.webp");
}
.lottery-image.USER_HG_42_GPJ_500ML {
background-image: url("../assets/images/USER_HG_42_GPJ_500ML.webp");
.lottery-image.USER_GJ1573_55_SSYX {
background-image: url("../assets/images/new/USER_GJ1573_55_SSYX.webp");
}
.lottery-image.USER_QLL_MH {
background-image: url("../assets/images/USER_QLL_MH.webp");
.lottery-image.USER_QLL_WQSBLH {
background-image: url("../assets/images/new/USER_QLL_WQSBLH.webp");
}
.lottery-image.USER_DZSKSJ {
background-image: url("../assets/images/USER_DZSKSJ.webp");
.lottery-image.USER_HYJJ {
background-image: url("../assets/images/new/USER_HYJJ.webp");
}
.lottery-image.USER_LZ_ZQ_DZJ_LJW {
background-image: url("../assets/images/USER_LZ_ZQ_DZJ_LJW.webp");
.lottery-image.USER_43I1_100ML {
background-image: url("../assets/images/new/USER_43I1_100ML.webp");
}
.lottery-image.USER_43A2_100ML_6 {
background-image: url("../assets/images/new/USER_43A2_100ML_6.webp");
}
.lottery-image.USER_43A6_100ML_6 {
background-image: url("../assets/images/new/USER_43A6_100ML_6.webp");
}
.lottery-image.USER_52A6_100ML_6 {
background-image: url("../assets/images/new/USER_52A6_100ML_6.webp");
}
.lottery-image.USER_NO {
background-position: center center;
background-image: url("../assets/images/new/USER_NO.png");
}
.lottery-image.USER_LZ_XS_SPZ_30ML {
background-image: url("../assets/images/USER_LZ_XS_SPZ_30ML.webp");
}
.lottery-image.USER_LZ_DZ_JBGJ {
background-image: url("../assets/images/USER_LZ_DZ_JBGJ.webp");
}
.lottery-image.USER_LZ_DZ_JBGJ_LZ_ZQ_DZJ {
background-image: url("../assets/images/USER_LZ_DZ_JBGJ_LZ_ZQ_DZJ.webp");
background-image: url("../assets/images/new/USER_NO.webp");
}
.guang,
@@ -486,7 +490,7 @@ onUnmounted(() => {
transform: translateX(-50%) !important;
width: 65.462963vw;
height: 19.907407vw;
background-image: url("../assets/images/new/lottery-title.png");
background-image: url("../assets/images/new/lottery-title.webp");
background-repeat: no-repeat;
background-size: 100%;
z-index: 10;
@@ -499,7 +503,7 @@ onUnmounted(() => {
transform: translateX(-50%) !important;
width: 40vw;
height: 20vw;
background-image: url("../assets/images/new/no-lottery-title.png");
background-image: url("../assets/images/new/no-lottery-title.webp");
background-repeat: no-repeat;
background-size: 100%;
z-index: 10;
@@ -531,7 +535,7 @@ onUnmounted(() => {
.lottery-name {
position: absolute;
bottom: 18vw;
bottom: 8vw;
text-align: center;
width: 80%;
left: 10%;
@@ -561,7 +565,7 @@ onUnmounted(() => {
.btn-more {
width: 48.703704vw;
height: 18.240741vw;
background-image: url("../assets/images/new/share-btn.png");
background-image: url("../assets/images/new/share-btn.webp");
background-repeat: no-repeat;
background-size: 100%;
}
@@ -569,7 +573,7 @@ onUnmounted(() => {
.btn-kaixin {
width: 48.703704vw;
height: 18.240741vw;
background-image: url("../assets/images/new/btn-kaixin.png");
background-image: url("../assets/images/new/btn-kaixin.webp");
background-repeat: no-repeat;
background-size: 100%;
}
@@ -577,7 +581,7 @@ onUnmounted(() => {
.back-home {
width: 48.703704vw;
height: 18.240741vw;
background-image: url("../assets/images/new/back-home.png");
background-image: url("../assets/images/new/back-home.webp");
background-repeat: no-repeat;
background-size: 100%;
}
@@ -649,8 +653,8 @@ onUnmounted(() => {
left: -6vw;
width: 100vw;
height: 244vw;
/* background-image: url("../assets/images/new/lottery-bg.png"); */
/* background-image: url("../assets/images/new/NO-prize-bg.png"); */
/* background-image: url("../assets/images/new/lottery-bg.webp"); */
/* background-image: url("../assets/images/new/NO-prize-bg.webp"); */
background-repeat: no-repeat;
background-size: 100%;
}
@@ -665,4 +669,10 @@ onUnmounted(() => {
background-repeat: no-repeat;
background-size: 100%;
}
.prize-img {
width: 45vw;
height: 50vw;
top: 25vw;
left: 18vw;
}
</style>

10
src/components/PopupMore.vue
View File

@@ -31,10 +31,10 @@ const startNow = () => {
</div>
<div class="scene-item item-2">
<img src="../assets/images/new/start-now.png" @click="startNow" alt="立即参与">
<img src="../assets/images/new/start-now.webp" @click="startNow" alt="立即参与">
</div>
<div class="scene-item item-3">
<img src="../assets/images/new/close-btn.png" @click="cancelBtn" alt="关闭">
<img src="../assets/images/new/close-btn.webp" @click="cancelBtn" alt="关闭">
</div>
</div>
</ModalTransition>
@@ -44,14 +44,14 @@ const startNow = () => {
.haibao {
width: 70vw;
height: 119.444444vw;
background-image: url("../assets/images/new/sanchongli.png");
background-image: url("../assets/images/new/sanchongli.webp");
background-repeat: no-repeat;
background-size: 100%;
}
.home-wrapper {
width: 100vw;
height: 217vw;
background-image: url("../assets/images/new/share-bg1.png");
background-image: url("../assets/images/new/share-bg1.webp");
background-size: cover;
background-repeat: no-repeat;
display: flex;
@@ -85,7 +85,7 @@ const startNow = () => {
.popup-bg {
width: 100vw;
height: 204vw;
/* background-image: url('../assets/images/new/sanchongli.png'); */
/* background-image: url('../assets/images/new/sanchongli.webp'); */
background-size: 100%;
background-repeat: no-repeat;
display: flex;

8
src/components/PrizeList.vue
View File

@@ -64,7 +64,7 @@ const handleItemBtn = (id, event) => {
position: relative;
width: 100vw;
height: 110vw;
background-image: url("../assets/images/new/prizelist-bg.png");
background-image: url("../assets/images/new/prizelist-bg.webp");
background-repeat: no-repeat;
background-size: 100%;
display: flex;
@@ -125,7 +125,7 @@ const handleItemBtn = (id, event) => {
height: 11vw;
right: 3vw;
top: -14vw;
background-image: url("../assets/images/new/close-btn.png");
background-image: url("../assets/images/new/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/new/btn-goto.png");
background-image: url("../assets/images/new/btn-goto.webp");
background-repeat: no-repeat;
background-size: 100%;
}
@@ -154,7 +154,7 @@ wx-open-launch-weapp,
.btn-goto.noaddress {
background-image: url("../assets/images/new/btn-address.png");
background-image: url("../assets/images/new/btn-address.webp");
}
.prizelist-cover.USER_LZ_ZQ_DZJ {

4
src/components/Rule.vue
View File

@@ -27,7 +27,7 @@ const emit = defineEmits(['close'])
position: relative;
width: 100%;
height: 182vw;
background-image: url("../assets/images/new/rule-bg.png");
background-image: url("../assets/images/new/rule-bg.webp");
background-repeat: no-repeat;
background-size: 100%;
}
@@ -52,7 +52,7 @@ const emit = defineEmits(['close'])
height: 11vw;
right: 3vw;
top: 11vw;
background-image: url("../assets/images/new/close-btn.png");
background-image: url("../assets/images/new/close-btn.webp");
background-repeat: no-repeat;
background-size: 100%;
}

24
src/components/SharePage.vue
View File

@@ -3,16 +3,16 @@ import { Storage, generateQR } from "../libs/utils.js"
import ModalTransition from "./ModalTransition.vue"
import { ref, watch, computed } from "vue"
import Haibao from "../libs/haibao.js"
import ruleBg from "../assets/images/new/rule-share.png"
import ruleBg from "../assets/images/new/rule-share.webp"
import globalToastEvent, { ToastType } from '../globalToastEvent';
import { globalStore } from "../globalstore.js";
import share5 from '../assets/images/new/share-bg-5.png';
import share4 from '../assets/images/new/share-bg-4.png';
import share3 from '../assets/images/new/share-bg-3.png';
import share2 from '../assets/images/new/share-bg-2.png';
import share1 from '../assets/images/new/share-bg-1.png';
import todoListBg from '../assets/images/new/todolist-bg.png';
import todoListImg from '../assets/images/new/todolist-img.png';
import share5 from '../assets/images/new/share-bg-5.webp';
import share4 from '../assets/images/new/share-bg-4.webp';
import share3 from '../assets/images/new/share-bg-3.webp';
import share2 from '../assets/images/new/share-bg-2.webp';
import share1 from '../assets/images/new/share-bg-1.webp';
import todoListBg from '../assets/images/new/todolist-bg.webp';
import todoListImg from '../assets/images/new/todolist-img.webp';
const props = defineProps({
show: false,
@@ -91,7 +91,7 @@ const handleHaibao = async () => {
</div>
<div class="scene-item item-5">
<img src="../assets/images/new/close-btn.png" @click="cancelBtn" alt="关闭">
<img src="../assets/images/new/close-btn.webp" @click="cancelBtn" alt="关闭">
</div>
</div>
</ModalTransition>
@@ -103,7 +103,7 @@ const handleHaibao = async () => {
background-position: center;
width: 100vw;
height: 217vw;
background-image: url("../assets/images/new/todolist-bg.png");
background-image: url("../assets/images/new/todolist-bg.webp");
background-size: cover;
background-repeat: no-repeat;
display: flex;
@@ -116,7 +116,7 @@ const handleHaibao = async () => {
.haibao {
width: 70vw;
height: 119.444444vw;
background-image: url("../assets/images/new/share-popup-demo.png");
background-image: url("../assets/images/new/share-popup-demo.webp");
background-repeat: no-repeat;
background-size: 100%;
}
@@ -141,7 +141,7 @@ const handleHaibao = async () => {
.share-bg {
width: 100vw;
height: 204vw;
background-image: url('../assets/images/new/share-bg.png');
background-image: url('../assets/images/new/share-bg.webp');
background-size: 100%;
background-repeat: no-repeat;
display: flex;

14
src/components/TodoList.vue
View File

@@ -16,7 +16,7 @@
<div class="fullsection" v-show="qiweiShow">
<div class="qiwei">
<img src="../assets/images/new/qiwei.png" alt="">
<img src="../assets/images/new/qiwei.webp" alt="">
<div class="close" @click="qiweiShow = false"></div>
</div>
</div>
@@ -170,7 +170,7 @@ const openQiwei = (e) => {
height: 11vw;
right: 3vw;
top: -14vw;
background-image: url("../assets/images/new/close-btn.png");
background-image: url("../assets/images/new/close-btn.webp");
background-repeat: no-repeat;
background-size: 100%;
}
@@ -192,7 +192,7 @@ const openQiwei = (e) => {
position: relative;
width: 100vw;
height: 94vw;
background-image: url("../assets/images/new/todo-bg.png");
background-image: url("../assets/images/new/todo-bg.webp");
background-repeat: no-repeat;
background-size: 100%;
}
@@ -216,15 +216,15 @@ const openQiwei = (e) => {
}
.btn-share {
background-image: url("../assets/images/new/share-link.png");
background-image: url("../assets/images/new/share-link.webp");
}
.btn-share.has {
background-image: url("../assets/images/new/limit-btn.png");
background-image: url("../assets/images/new/limit-btn.webp");
}
.btn-qiwei {
background-image: url("../assets/images/new/add-wx.png");
background-image: url("../assets/images/new/add-wx.webp");
}
.btn-qiwei.has {
@@ -236,6 +236,6 @@ const openQiwei = (e) => {
}
.btn-scan.has {
background-image: url("../assets/images/new/limit-btn.png");
background-image: url("../assets/images/new/limit-btn.webp");
}
</style>