update
BIN
src/assets/images/new/game1-border.webp
Normal file
|
After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 819 KiB After Width: | Height: | Size: 873 KiB |
BIN
src/assets/images/new/game2-border.webp
Normal file
|
After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 478 KiB After Width: | Height: | Size: 565 KiB |
BIN
src/assets/images/new/game3-border.webp
Normal file
|
After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 928 KiB After Width: | Height: | Size: 973 KiB |
BIN
src/assets/images/new/game4-border.webp
Normal file
|
After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 876 KiB After Width: | Height: | Size: 914 KiB |
BIN
src/assets/images/new/game5-border.webp
Normal file
|
After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 579 KiB After Width: | Height: | Size: 621 KiB |
|
Before Width: | Height: | Size: 407 KiB After Width: | Height: | Size: 654 KiB |
|
Before Width: | Height: | Size: 317 KiB After Width: | Height: | Size: 520 KiB |
|
Before Width: | Height: | Size: 390 KiB After Width: | Height: | Size: 632 KiB |
|
Before Width: | Height: | Size: 424 KiB After Width: | Height: | Size: 682 KiB |
|
Before Width: | Height: | Size: 315 KiB After Width: | Height: | Size: 497 KiB |
BIN
src/assets/images/new/share-game1-bg.webp
Normal file
|
After Width: | Height: | Size: 407 KiB |
BIN
src/assets/images/new/share-game2-bg.webp
Normal file
|
After Width: | Height: | Size: 317 KiB |
BIN
src/assets/images/new/share-game3-bg.webp
Normal file
|
After Width: | Height: | Size: 390 KiB |
BIN
src/assets/images/new/share-game4-bg.webp
Normal file
|
After Width: | Height: | Size: 424 KiB |
BIN
src/assets/images/new/share-game5-bg.webp
Normal file
|
After Width: | Height: | Size: 315 KiB |
|
Before Width: | Height: | Size: 365 KiB After Width: | Height: | Size: 352 KiB |
|
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 343 KiB |
|
Before Width: | Height: | Size: 397 KiB After Width: | Height: | Size: 438 KiB |
|
Before Width: | Height: | Size: 386 KiB After Width: | Height: | Size: 360 KiB |
|
Before Width: | Height: | Size: 277 KiB After Width: | Height: | Size: 325 KiB |
@@ -30,6 +30,7 @@
|
|||||||
v-for="(slide, index) in slides"
|
v-for="(slide, index) in slides"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="['carousel-slide', { active: currentIndex === index }]"
|
:class="['carousel-slide', { active: currentIndex === index }]"
|
||||||
|
:style="{ backgroundImage: `url(${slide.border})` }"
|
||||||
>
|
>
|
||||||
<img v-show="slide.show" class="complete-icon" src="../assets/images/new/complete-icon.webp" alt="已完成">
|
<img v-show="slide.show" class="complete-icon" src="../assets/images/new/complete-icon.webp" alt="已完成">
|
||||||
<img class="slider-img" :src="slide.image" :alt="slide.title" />
|
<img class="slider-img" :src="slide.image" :alt="slide.title" />
|
||||||
@@ -73,6 +74,12 @@ import slider4 from '../assets/images/new/slider4.webp';
|
|||||||
import slider5 from '../assets/images/new/slider5.webp';
|
import slider5 from '../assets/images/new/slider5.webp';
|
||||||
import { globalStore } from "../globalstore.js";
|
import { globalStore } from "../globalstore.js";
|
||||||
|
|
||||||
|
import gameBorder1 from '../assets/images/new/game1-border.webp'
|
||||||
|
import gameBorder2 from '../assets/images/new/game2-border.webp'
|
||||||
|
import gameBorder3 from '../assets/images/new/game3-border.webp'
|
||||||
|
import gameBorder4 from '../assets/images/new/game4-border.webp'
|
||||||
|
import gameBorder5 from '../assets/images/new/game5-border.webp'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
show: false,
|
show: false,
|
||||||
})
|
})
|
||||||
@@ -86,30 +93,35 @@ const slides = ref([
|
|||||||
title: '轮播图1',
|
title: '轮播图1',
|
||||||
id: 1,
|
id: 1,
|
||||||
show: true,
|
show: true,
|
||||||
|
border: gameBorder1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: slider2,
|
image: slider2,
|
||||||
title: '轮播图2',
|
title: '轮播图2',
|
||||||
id: 2,
|
id: 2,
|
||||||
show: true,
|
show: true,
|
||||||
|
border: gameBorder2,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: slider3,
|
image: slider3,
|
||||||
title: '轮播图3',
|
title: '轮播图3',
|
||||||
id: 3,
|
id: 3,
|
||||||
show: true,
|
show: true,
|
||||||
|
border: gameBorder3,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: slider4,
|
image: slider4,
|
||||||
title: '轮播图4',
|
title: '轮播图4',
|
||||||
id: 4,
|
id: 4,
|
||||||
show: true,
|
show: true,
|
||||||
|
border: gameBorder4,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: slider5,
|
image: slider5,
|
||||||
title: '轮播图5',
|
title: '轮播图5',
|
||||||
id: 5,
|
id: 5,
|
||||||
show: true,
|
show: true,
|
||||||
|
border: gameBorder5,
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
@@ -355,6 +367,10 @@ onUnmounted(() => {
|
|||||||
left: 2vw;
|
left: 2vw;
|
||||||
top: -2vw;
|
top: -2vw;
|
||||||
}
|
}
|
||||||
|
.slider-img {
|
||||||
|
padding-top: 1.4vw;
|
||||||
|
padding-left: 0.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
.scene-item {
|
.scene-item {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -446,11 +462,10 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.carousel-slide {
|
.carousel-slide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 112.7vw;
|
height: 115.7vw;
|
||||||
padding: 5vw;
|
padding: 5vw;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-image: url('../assets/images/new/border-img.webp');
|
|
||||||
|
|
||||||
/* 100% - 160px -> 100% - 42.67vw (160/375*100) */
|
/* 100% - 160px -> 100% - 42.67vw (160/375*100) */
|
||||||
min-width: calc(100% - 42.67vw);
|
min-width: calc(100% - 42.67vw);
|
||||||
|
|||||||
@@ -86,7 +86,9 @@ const initGlobalAudio = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
window.addEventListener("WeixinJSBridgeReady", () => {
|
||||||
initGlobalAudio();
|
initGlobalAudio();
|
||||||
|
})
|
||||||
initVideo();
|
initVideo();
|
||||||
checkAndPlayAudio();
|
checkAndPlayAudio();
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ import { Request, Sleep } from "../libs/utils"
|
|||||||
import { globalStore } from "@/globalstore";
|
import { globalStore } from "@/globalstore";
|
||||||
|
|
||||||
const navigateSharePage = () => {
|
const navigateSharePage = () => {
|
||||||
globalToastEvent.emit(ToastType.SHOW_SHAREPAGE, true)
|
globalToastEvent.emit(ToastType.SHOW_SHAREPAGE)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -44,11 +44,15 @@ const startNow = () => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.haibao {
|
.haibao {
|
||||||
|
top: 48vw;
|
||||||
|
position: absolute;
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-position: 0 0;
|
||||||
|
left: 11vw;
|
||||||
width: 82vw;
|
width: 82vw;
|
||||||
height: 157vw;
|
height: 157vw;
|
||||||
background-image: url("../assets/images/new/sanchongli.webp");
|
background-image: url("../assets/images/new/sanchongli.webp");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-wrapper {
|
.home-wrapper {
|
||||||
@@ -134,12 +138,12 @@ const startNow = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item-2 {
|
.item-2 {
|
||||||
top: 137vw;
|
top: 152vw;
|
||||||
width: 46vw;
|
width: 46vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-3 {
|
.item-3 {
|
||||||
top: 168vw;
|
top: 170vw;
|
||||||
width: 12vw;
|
width: 12vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -14,6 +14,12 @@ import share1 from '../assets/images/new/share-bg-1.webp';
|
|||||||
import todoListBg from '../assets/images/new/todolist-bg.webp';
|
import todoListBg from '../assets/images/new/todolist-bg.webp';
|
||||||
import todoListImg from '../assets/images/new/todolist-img.webp';
|
import todoListImg from '../assets/images/new/todolist-img.webp';
|
||||||
|
|
||||||
|
import game1Bg from '../assets/images/new/share-game1-bg.webp';
|
||||||
|
import game2Bg from '../assets/images/new/share-game2-bg.webp';
|
||||||
|
import game3Bg from '../assets/images/new/share-game3-bg.webp';
|
||||||
|
import game4Bg from '../assets/images/new/share-game4-bg.webp';
|
||||||
|
import game5Bg from '../assets/images/new/share-game5-bg.webp';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
show: false,
|
show: false,
|
||||||
isFromHomePageList: false
|
isFromHomePageList: false
|
||||||
@@ -36,6 +42,14 @@ const gameImgMap = {
|
|||||||
game5: share5
|
game5: share5
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getGameImgBgMap = {
|
||||||
|
game1: game1Bg,
|
||||||
|
game2: game2Bg,
|
||||||
|
game3: game3Bg,
|
||||||
|
game4: game4Bg,
|
||||||
|
game5: game5Bg
|
||||||
|
}
|
||||||
|
|
||||||
const cancelBtn = () => {
|
const cancelBtn = () => {
|
||||||
emit('close')
|
emit('close')
|
||||||
}
|
}
|
||||||
@@ -50,15 +64,21 @@ const haibaoBackgroundImg = ref({});
|
|||||||
const handleHaibao = async () => {
|
const handleHaibao = async () => {
|
||||||
const loading = weui.loading();
|
const loading = weui.loading();
|
||||||
|
|
||||||
const img = gameImgMap[globalStore.game_id] || 'share1';
|
const img = getGameImgBgMap[globalStore.game_id] || game1Bg;
|
||||||
haibaoBackgroundImg.value = props.isFromHomePageList ? { backgroundImage: `url(${todoListImg})` } : { backgroundImage: `url(${img})` };
|
haibaoBackgroundImg.value = props.isFromHomePageList ? { backgroundImage: `url(${todoListImg})` } : { backgroundImage: `url(${img})` };
|
||||||
|
|
||||||
const infos = Storage.get("userinfos")
|
const infos = Storage.get("userinfos")
|
||||||
const haibaoCover = new Haibao(1080, 2160);
|
const haibaoCover = new Haibao(1080, 2160);
|
||||||
|
|
||||||
|
if (props.isFromHomePageList) {
|
||||||
haibaoCover.add(ruleBg, 0, 0)
|
haibaoCover.add(ruleBg, 0, 0)
|
||||||
const qrcode = await generateQR(`fromid=${infos.invite_code}`, 200, 200);
|
const qrcode = await generateQR(`fromid=${infos.invite_code}`, 200, 200);
|
||||||
haibaoCover.add(qrcode, 742, 1870);
|
haibaoCover.add(qrcode, 742, 1870);
|
||||||
|
} else {
|
||||||
|
const gameBgImg = gameImgMap[globalStore.game_id] || share1;
|
||||||
|
haibaoCover.add(gameBgImg, 0, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
haibaoCover.draw().then(() => {
|
haibaoCover.draw().then(() => {
|
||||||
haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
|
haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
|
||||||
|
|||||||