完成大概流程
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 5.4 KiB |
BIN
src/assets/images/index/gift-icon.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/images/index/sub-title.png
Normal file
|
After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 158 KiB After Width: | Height: | Size: 199 KiB |
|
Before Width: | Height: | Size: 802 KiB After Width: | Height: | Size: 223 KiB |
BIN
src/assets/images/poster/card-10.png
Normal file
|
After Width: | Height: | Size: 222 KiB |
BIN
src/assets/images/poster/card-11.png
Normal file
|
After Width: | Height: | Size: 222 KiB |
BIN
src/assets/images/poster/card-2.png
Normal file
|
After Width: | Height: | Size: 221 KiB |
BIN
src/assets/images/poster/card-3.png
Normal file
|
After Width: | Height: | Size: 230 KiB |
BIN
src/assets/images/poster/card-4.png
Normal file
|
After Width: | Height: | Size: 238 KiB |
BIN
src/assets/images/poster/card-5.png
Normal file
|
After Width: | Height: | Size: 235 KiB |
BIN
src/assets/images/poster/card-6.png
Normal file
|
After Width: | Height: | Size: 231 KiB |
BIN
src/assets/images/poster/card-7.png
Normal file
|
After Width: | Height: | Size: 222 KiB |
BIN
src/assets/images/poster/card-8.png
Normal file
|
After Width: | Height: | Size: 234 KiB |
BIN
src/assets/images/poster/card-9.png
Normal file
|
After Width: | Height: | Size: 230 KiB |
BIN
src/assets/images/poster/poster-1.jpg
Normal file
|
After Width: | Height: | Size: 479 KiB |
BIN
src/assets/images/poster/poster-10.jpg
Normal file
|
After Width: | Height: | Size: 481 KiB |
BIN
src/assets/images/poster/poster-11.jpg
Normal file
|
After Width: | Height: | Size: 479 KiB |
BIN
src/assets/images/poster/poster-2.jpg
Normal file
|
After Width: | Height: | Size: 476 KiB |
BIN
src/assets/images/poster/poster-3.jpg
Normal file
|
After Width: | Height: | Size: 495 KiB |
BIN
src/assets/images/poster/poster-4.jpg
Normal file
|
After Width: | Height: | Size: 501 KiB |
BIN
src/assets/images/poster/poster-5.jpg
Normal file
|
After Width: | Height: | Size: 490 KiB |
BIN
src/assets/images/poster/poster-6.jpg
Normal file
|
After Width: | Height: | Size: 485 KiB |
BIN
src/assets/images/poster/poster-7.jpg
Normal file
|
After Width: | Height: | Size: 474 KiB |
BIN
src/assets/images/poster/poster-8.jpg
Normal file
|
After Width: | Height: | Size: 491 KiB |
BIN
src/assets/images/poster/poster-9.jpg
Normal file
|
After Width: | Height: | Size: 490 KiB |
@ -12,7 +12,7 @@ const start = (event) => {
|
||||
gsap.to(".IndexPage", {
|
||||
duration: 0.5,
|
||||
autoAlpha: 0,
|
||||
onComplete: () => {
|
||||
onComplete: () => {
|
||||
emit("IndexPage", { action: "start" });
|
||||
},
|
||||
});
|
||||
@ -36,15 +36,18 @@ const showRule = (event) => {
|
||||
|
||||
onMounted(() => {
|
||||
gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
|
||||
gsap.from(".index-bottom-bg", { duration: 1, y: 100, });
|
||||
gsap.from(".index-windows", { duration: 1, scale: 0.5,autoAlpha:0, });
|
||||
gsap.from(".index-pet", { duration: 1, y: -50,autoAlpha:0,delay:0.5 });
|
||||
gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0,delay:1 });
|
||||
gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0,delay:0.5 });
|
||||
gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0,delay:0.5 });
|
||||
gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0,delay:0.75 });
|
||||
gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0,delay:0.75 });
|
||||
gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0,delay:0.75 });
|
||||
gsap.from(".index-bottom-bg", { duration: 1, y: 100, });
|
||||
gsap.from(".index-windows", { duration: 1, scale: 0.5, autoAlpha: 0, });
|
||||
gsap.from(".index-pet", { duration: 1, y: -50, autoAlpha: 0, delay: 0.5 });
|
||||
gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0, delay: 1 });
|
||||
gsap.from(".index-sub-title", { duration: 1, scale: 0, autoAlpha: 0, delay: 1.2 });
|
||||
gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0, delay: 0.5 });
|
||||
gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0, delay: 0.5 });
|
||||
gsap.from(".index-firework", { duration: 1, scale: 0, autoAlpha: 0, delay: 0.3 });
|
||||
gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0, delay: 0.75 });
|
||||
gsap.from(".index-gift", { duration: 1, y: 50, autoAlpha: 0, delay: 0.75 });
|
||||
gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0, delay: 0.75 });
|
||||
gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0, delay: 0.75 });
|
||||
gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
|
||||
gsap.from(".index-prize-btn", {
|
||||
duration: 1,
|
||||
@ -63,20 +66,19 @@ onMounted(() => {
|
||||
scale: 0.4,
|
||||
autoAlpha: 0,
|
||||
delay: 0.5,
|
||||
onComplete:()=>{
|
||||
onComplete: () => {
|
||||
// gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-1',{duration:2,x:'-=30',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-2',{duration:1.5,x:'-=20',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-3',{duration:1.5,y:'+=20',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-4',{duration:2,x:'+=20',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-pet',{duration:2,y:'-=10',repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.index-fan-1', { duration: 2, x: '-=30', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-fan-2', { duration: 1.5, x: '-=20', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-fan-3', { duration: 1.5, y: '+=20', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-fan-4', { duration: 2, x: '+=20', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-pet', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-gift', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.index-start-btn', { duration: 1, scale: '0.85', repeat: -1, yoyo: true, ease: 'bounce.out' })
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
const vcNum = ref(false);
|
||||
@ -97,12 +99,14 @@ const showVC = () => {
|
||||
<div class="index-fan-3"></div>
|
||||
<div class="index-fan-4"></div>
|
||||
<div class="index-logo"></div>
|
||||
<div class="index-gift"></div>
|
||||
<div class="index-firework"></div>
|
||||
<div class="index-bottom-bg"></div>
|
||||
<!-- <div class="index-cloud"></div> -->
|
||||
<div class="index-firework"></div>
|
||||
<div class="index-windows"></div>
|
||||
<div class="index-pet"></div>
|
||||
<div class="index-title" @click="showVC"></div>
|
||||
<div class="index-sub-title"></div>
|
||||
<div class="index-rule-btn" @click="showRule($event)"></div>
|
||||
<div class="index-prize-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)"></div>
|
||||
<div class="index-start-btn" @click="start"></div>
|
||||
@ -132,57 +136,61 @@ const showVC = () => {
|
||||
@include pos(750px, 1624px, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
|
||||
.index-bottom-bg{
|
||||
.index-bottom-bg {
|
||||
pointer-events: none;
|
||||
@include pos(750px, 549px, 0px, 1075px);
|
||||
@include bg_pos("index/bottom-bg.png");
|
||||
}
|
||||
|
||||
.index-fan-1{
|
||||
.index-fan-1 {
|
||||
pointer-events: none;
|
||||
@include pos(235px, 574px, 0px, 60px);
|
||||
@include bg_pos("index/fan-1.png");
|
||||
}
|
||||
.index-fan-2{
|
||||
|
||||
.index-fan-2 {
|
||||
pointer-events: none;
|
||||
@include pos(316px, 317px, -205px, 405px);
|
||||
@include bg_pos("index/fan-2.png");
|
||||
}
|
||||
.index-logo{
|
||||
|
||||
.index-logo {
|
||||
pointer-events: none;
|
||||
@include pos(632px, 94px, 59px, 180px);
|
||||
@include bg_pos("index/logo.png");
|
||||
}
|
||||
.index-fan-3{
|
||||
|
||||
.index-fan-3 {
|
||||
pointer-events: none;
|
||||
@include pos(370px, 334px, 545px, 910px);
|
||||
@include bg_pos("index/fan-3.png");
|
||||
}
|
||||
.index-fan-4{
|
||||
|
||||
.index-fan-4 {
|
||||
pointer-events: none;
|
||||
@include pos(350px, 205px, 494px, 1011px);
|
||||
@include bg_pos("index/fan-4.png");
|
||||
}
|
||||
|
||||
.index-cloud{
|
||||
.index-cloud {
|
||||
pointer-events: none;
|
||||
@include pos(88px, 46px, 621px, 253px);
|
||||
@include bg_pos("index/cloud.png");
|
||||
}
|
||||
|
||||
.index-firework{
|
||||
.index-gift {
|
||||
pointer-events: none;
|
||||
@include pos(120px, 120px, 651px, 474px);
|
||||
@include bg_pos("index/firework.png");
|
||||
@include pos(169px, 172px, 16px, 1004px);
|
||||
@include bg_pos("index/gift-icon.png");
|
||||
}
|
||||
|
||||
.index-windows{
|
||||
.index-windows {
|
||||
pointer-events: none;
|
||||
@include pos(743px, 744px, 3px, 440px);
|
||||
@include bg_pos("index/windows.png");
|
||||
}
|
||||
|
||||
.index-pet{
|
||||
.index-pet {
|
||||
pointer-events: none;
|
||||
@include pos(378px, 452px, 187px, 614px);
|
||||
@include bg_pos("index/pet-icon.png");
|
||||
@ -190,10 +198,22 @@ const showVC = () => {
|
||||
|
||||
.index-title {
|
||||
// pointer-events: none;
|
||||
@include pos(631px, 115px, 57px, 291px);
|
||||
@include pos(528px, 198px, 111px, 231px);
|
||||
@include bg_pos("index/title.png");
|
||||
}
|
||||
|
||||
.index-sub-title {
|
||||
pointer-events: none;
|
||||
@include pos(200px, 130px, 517px, 472px);
|
||||
@include bg_pos("index/sub-title.png");
|
||||
}
|
||||
|
||||
.index-firework {
|
||||
pointer-events: none;
|
||||
@include pos(95px, 95px, -38px, 889px);
|
||||
@include bg_pos("index/firework.png");
|
||||
}
|
||||
|
||||
.index-rule-btn {
|
||||
@include pos(184px, 49px, -37px, 506px);
|
||||
@include bg_pos("index/rule-btn.png");
|
||||
|
||||
@ -147,8 +147,9 @@ onMounted(() => {
|
||||
</div>
|
||||
<!-- 解析 -->
|
||||
<div class="analysis">
|
||||
<div v-for="li in questionList[currentId].analysis" :key="li">
|
||||
提示:<span v-html="li"></span>
|
||||
<div v-for="(li,index) in questionList[currentId].analysis" :key="li">
|
||||
<span class="analysis-tips" v-if="index == 0">提示:</span>
|
||||
<span v-html="li"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="return-btn" @click="nextQuestion($event)"></div>
|
||||
@ -369,6 +370,13 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.analysis-tips {
|
||||
background-color: rgb(175, 13, 12);
|
||||
padding: 5px 10px;
|
||||
margin-right: 3px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.return-btn {
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="ql--bottom-gift-2"></div>
|
||||
<div class="ql--bottom-gift-1"></div>
|
||||
<div class="ql-select-text">
|
||||
<div class="select-text">选择一个你喜欢的花灯</div>
|
||||
<div class="select-text">选择一盏灯你喜欢的花灯</div>
|
||||
<div class="select-text">开始猜谜吧</div>
|
||||
</div>
|
||||
<div class="ql-swiper-box">
|
||||
@ -26,9 +26,9 @@
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="ql-start-btn" @click="onShowQuestion"></div>
|
||||
<div class="ql-start-btn" @click="onShowQuestion($event)"></div>
|
||||
<div class="ql-bottom-bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Question v-if="showQuestion" :question-id="questionId" @showResult="onShowResult" @hide="showQuestion = false" />
|
||||
</template>
|
||||
@ -39,6 +39,9 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import Question from './Question.vue';
|
||||
import { debounceTap } from "@/plugins";
|
||||
import gsap from "gsap"
|
||||
|
||||
|
||||
const emit = defineEmits(['QuestionList', "showResult"]);
|
||||
|
||||
@ -51,15 +54,108 @@ function getLarntenImg(item) {
|
||||
}
|
||||
|
||||
|
||||
const onShowQuestion = () => {
|
||||
// 获取当前选中灯笼的序号 1-11
|
||||
const swiper = document.querySelector('.larnten-swiper').swiper;
|
||||
// swiper开启了loop
|
||||
const activeIndex = swiper.realIndex + 1;
|
||||
console.log('activeIndex', activeIndex);
|
||||
questionId.value = activeIndex - 1
|
||||
showQuestion.value = true
|
||||
// emit('QuestionList', activeIndex);
|
||||
const onShowQuestion = (event) => {
|
||||
let e = event.target;
|
||||
|
||||
|
||||
debounceTap(e, () => {
|
||||
// 获取当前选中灯笼的序号 1-11
|
||||
const swiper = document.querySelector('.larnten-swiper').swiper;
|
||||
// swiper开启了loop
|
||||
const activeIndex = swiper.realIndex + 1;
|
||||
console.log('activeIndex', activeIndex);
|
||||
questionId.value = activeIndex - 1
|
||||
showQuestion.value = true
|
||||
// emit('QuestionList', activeIndex);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
showPoster()
|
||||
})
|
||||
|
||||
|
||||
const showPoster = () => {
|
||||
gsap.to(".QuestionList", {
|
||||
duration: 0.3,
|
||||
autoAlpha: 1,
|
||||
});
|
||||
gsap.from(".ql-select-text", {
|
||||
duration: 0.7,
|
||||
scale: 1.2,
|
||||
autoAlpha: 0,
|
||||
});
|
||||
gsap.from(".ql-swiper-box", {
|
||||
duration: 0.7,
|
||||
scale: 0.6,
|
||||
autoAlpha: 0,
|
||||
});
|
||||
gsap.from(".ql--top-icon-1", {
|
||||
duration: 0.7,
|
||||
scale: 0.7,
|
||||
autoAlpha: 0,
|
||||
delay: 0.3
|
||||
});
|
||||
gsap.from(".ql--top-icon-2", {
|
||||
duration: 0.7,
|
||||
y: -30,
|
||||
autoAlpha: 0,
|
||||
delay: 0.5
|
||||
});
|
||||
gsap.from(".ql--top-icon-3", {
|
||||
duration: 0.7,
|
||||
y: -30,
|
||||
autoAlpha: 0,
|
||||
delay: 0.7
|
||||
});
|
||||
gsap.from(".ql--bottom-gift-1", {
|
||||
duration: 0.7,
|
||||
y: 30,
|
||||
autoAlpha: 0,
|
||||
delay: 0.7
|
||||
});
|
||||
gsap.from(".ql--bottom-gift-2", {
|
||||
duration: 0.7,
|
||||
x: -50,
|
||||
autoAlpha: 0,
|
||||
delay: 0.5
|
||||
});
|
||||
gsap.from(".ql--bottom-icon-1", {
|
||||
duration: 0.7,
|
||||
y: 30,
|
||||
autoAlpha: 0,
|
||||
delay: 0.5
|
||||
});
|
||||
gsap.from(".ql-start-btn", {
|
||||
duration: 0.7,
|
||||
scale: 0,
|
||||
autoAlpha: 0,
|
||||
delay: 0.7,
|
||||
});
|
||||
gsap.from(".ql-bottom-bg", {
|
||||
duration: 0.7,
|
||||
y: 130,
|
||||
autoAlpha: 0,
|
||||
delay: 0.2,
|
||||
});
|
||||
gsap.from(".ql--bottom-icon-2", {
|
||||
duration: 0.7,
|
||||
y: 30,
|
||||
autoAlpha: 0,
|
||||
delay: 0.7,
|
||||
onComplete: () => {
|
||||
// gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
|
||||
gsap.to('.ql--top-icon-1', { duration: 2, y: '-=30', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.ql--top-icon-3', { duration: 1.5, x: '-=20', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.ql--top-icon-2', { duration: 1.5, y: '+=20', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.ql--bottom-gift-1', { duration: 2, y: '+=20', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.ql--bottom-gift-2', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.ql--bottom-icon-2', { duration: 2, x: '-=10', repeat: -1, yoyo: true, ease: 'none' })
|
||||
gsap.to('.ql--bottom-icon-1', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -71,15 +167,6 @@ const onShowResult = (result) => {
|
||||
|
||||
|
||||
register();
|
||||
|
||||
const hidiQuestion = () => {
|
||||
showQuestion.value = false
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
hidiQuestion
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@ -87,6 +174,7 @@ defineExpose({
|
||||
@include pos(100%, 100vh, 0px, 0px);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #a11b15, #f80c00);
|
||||
visibility: hidden;
|
||||
|
||||
.question-list-bg {
|
||||
@include pos(750px, 1624px, 0px, 50%);
|
||||
|
||||
@ -10,15 +10,23 @@ import { reactive } from "vue";
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["ResultPage"]);
|
||||
const userStore = useMainStore();
|
||||
const posterId = ref(userStore.posterId); //海报背景id:1~4
|
||||
const posterId = ref(userStore.posterId); //海报背景id:1~11
|
||||
|
||||
console.log('海报id', posterId.value);
|
||||
|
||||
|
||||
const posterImgList = reactive([
|
||||
new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-1.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-2.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-3.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-4.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-5.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-6.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-7.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-8.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-9.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-10.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-11.jpg`, import.meta.url).href,
|
||||
])
|
||||
|
||||
// 生成二维码逻辑
|
||||
@ -28,8 +36,6 @@ onMounted(async () => {
|
||||
// 执行任务队列
|
||||
await executeTasks();
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -48,16 +54,17 @@ const executeTasks = async () => {
|
||||
|
||||
|
||||
if (posterImgList[posterId.value - 1] && eqcodePic.value) {
|
||||
await posterCreate(
|
||||
|
||||
posterCreate(
|
||||
{ width: 750, height: 1334 },
|
||||
[
|
||||
{ name: "bg", src: posterImgList[posterId.value - 1], pos: { w: 750, h: 1334, x: 0, y: 0 } },
|
||||
{ name: "eqcode", src: eqcodePic.value, pos: { w: 164, h: 164, x: 159, y: 1122 } },
|
||||
]
|
||||
);
|
||||
}else{
|
||||
Toast.fail({message:'生成失败'})
|
||||
emit("ResultPage",{action: 'hide'})
|
||||
} else {
|
||||
Toast.fail({ message: '生成失败' })
|
||||
emit("ResultPage", { action: 'hide' })
|
||||
}
|
||||
|
||||
};
|
||||
@ -75,13 +82,14 @@ const showPoster = () => {
|
||||
});
|
||||
gsap.from(".poster-box", {
|
||||
duration: 0.7,
|
||||
scale: 1.4,
|
||||
scale: 0.6,
|
||||
autoAlpha: 0,
|
||||
});
|
||||
gsap.from(".save-tips", {
|
||||
duration: 0.7,
|
||||
scale: 0.7,
|
||||
autoAlpha: 0,
|
||||
delay: 0.3
|
||||
});
|
||||
gsap.from(".go-draw", {
|
||||
duration: 0.7,
|
||||
@ -99,35 +107,6 @@ const showPoster = () => {
|
||||
}
|
||||
|
||||
|
||||
// 生成海报逻辑
|
||||
const createPoster = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
// 海报生成
|
||||
posterCreate(
|
||||
{ width: 750, height: 1334 }, //海报尺寸
|
||||
// 海报素材,按顺序依次渲染
|
||||
[
|
||||
// 背景
|
||||
{
|
||||
name: "bg",
|
||||
src: posterImgList[posterId.value - 1],
|
||||
pos: { w: 750, h: 1334, x: 0, y: 0 },
|
||||
},
|
||||
// 二维码
|
||||
{
|
||||
name: "eqcode",
|
||||
src: eqcodePic.value,
|
||||
pos: { w: 164, h: 164, x: 159, y: 1122 },
|
||||
},
|
||||
],
|
||||
);
|
||||
|
||||
// gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
// 去抽奖
|
||||
const goDraw = (event) => {
|
||||
let e = event.target;
|
||||
@ -201,6 +180,7 @@ const posterCreate = (option, imageArr) => {
|
||||
//Promise的.all方法,当所有预加载的图像加载好的回调函数
|
||||
Promise.all(loader_p)
|
||||
.then(imgList => {
|
||||
console.log('imgList', imgList);
|
||||
|
||||
// 图片素材遍历绘制
|
||||
imgList.map((item, index) => {
|
||||
@ -344,15 +324,47 @@ const posterCreate = (option, imageArr) => {
|
||||
}
|
||||
|
||||
.product-1 {
|
||||
@include bg_pos("result/product-1.png");
|
||||
@include bg_pos("poster/card-1.png");
|
||||
}
|
||||
|
||||
.product-2 {
|
||||
@include bg_pos("result/product-2.png");
|
||||
@include bg_pos("poster/card-2.png");
|
||||
}
|
||||
|
||||
.product-3 {
|
||||
@include bg_pos("result/product-3.png");
|
||||
@include bg_pos("poster/card-3.png");
|
||||
}
|
||||
|
||||
.product-4 {
|
||||
@include bg_pos("poster/card-4.png");
|
||||
}
|
||||
|
||||
.product-5 {
|
||||
@include bg_pos("poster/card-5.png");
|
||||
}
|
||||
|
||||
.product-6 {
|
||||
@include bg_pos("poster/card-6.png");
|
||||
}
|
||||
|
||||
.product-7 {
|
||||
@include bg_pos("poster/card-7.png");
|
||||
}
|
||||
|
||||
.product-8 {
|
||||
@include bg_pos("poster/card-8.png");
|
||||
}
|
||||
|
||||
.product-9 {
|
||||
@include bg_pos("poster/card-9.png");
|
||||
}
|
||||
|
||||
.product-10 {
|
||||
@include bg_pos("poster/card-10.png");
|
||||
}
|
||||
|
||||
.product-11 {
|
||||
@include bg_pos("poster/card-11.png");
|
||||
}
|
||||
|
||||
.result-tips {
|
||||
@ -410,15 +422,47 @@ const posterCreate = (option, imageArr) => {
|
||||
}
|
||||
|
||||
.poster-1 {
|
||||
@include bg_pos("result/preveiw-1.png");
|
||||
@include bg_pos("poster/card-1.png");
|
||||
}
|
||||
|
||||
.poster-2 {
|
||||
@include bg_pos("result/preveiw-2.png");
|
||||
@include bg_pos("poster/card-2.png");
|
||||
}
|
||||
|
||||
.poster-3 {
|
||||
@include bg_pos("result/preveiw-3.png");
|
||||
@include bg_pos("poster/card-3.png");
|
||||
}
|
||||
|
||||
.poster-4 {
|
||||
@include bg_pos("poster/card-4.png");
|
||||
}
|
||||
|
||||
.poster-5 {
|
||||
@include bg_pos("poster/card-5.png");
|
||||
}
|
||||
|
||||
.poster-6 {
|
||||
@include bg_pos("poster/card-6.png");
|
||||
}
|
||||
|
||||
.poster-7 {
|
||||
@include bg_pos("poster/card-7.png");
|
||||
}
|
||||
|
||||
.poster-8 {
|
||||
@include bg_pos("poster/card-8.png");
|
||||
}
|
||||
|
||||
.poster-9 {
|
||||
@include bg_pos("poster/card-9.png");
|
||||
}
|
||||
|
||||
.poster-10 {
|
||||
@include bg_pos("poster/card-10.png");
|
||||
}
|
||||
|
||||
.poster-11 {
|
||||
@include bg_pos("poster/card-11.png");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -39,9 +39,10 @@ onMounted(() => {
|
||||
<div class="part">
|
||||
<div>活动攻略:</div>
|
||||
<div>
|
||||
1、【猜灯谜闹元宵】活动共设计3道题目,全部选择完毕后即可获取测试结果。参与抽奖活动;
|
||||
1、【猜灯谜赢红包
|
||||
欢欢喜喜闹元宵】活动共设计11道题目,首页进入后左右滑动选择您喜欢的花灯,点击进行猜灯谜,答对后即可获取专属花灯海报,并参与抽奖;答错时将跳转回选择花灯的页面,重新答题。
|
||||
</div>
|
||||
<div>2、活动期间不限制参与测试次数,每人每日有1次抽奖机会。</div>
|
||||
<div>2、活动期间不限制参与猜灯谜次数,每人每日有1次抽奖机会。</div>
|
||||
</div>
|
||||
<div class="part">
|
||||
<div>领奖说明:</div>
|
||||
@ -59,24 +60,21 @@ onMounted(() => {
|
||||
<div class="part">说明:平安理财有权对活动规则进行解释</div>
|
||||
</div>
|
||||
<div class="part">
|
||||
<div>活动规则:</div>
|
||||
<div>活动说明:</div>
|
||||
<div>
|
||||
1、本活动由平安理财有限责任公司主办,为保证活动的公平公正,活动结束后主办方将对中奖用户信息进行核对,用户若有下列任何一种行为或情况的,主办方有权不经另行通知,取消其参与活动以及获奖资格,收回奖品权益,井保留追究其法律责任的权利:
|
||||
(1)本活动由平安理财有限责任公司主办,为保证活动的公平公正,活动结束后主办方将对中奖用户信息进行核对,用户若有下列任何一种行为或情况的,主办方有权不经另行通知,取消其参与活动以及获奖资格,收回奖品权益,并保留追究其法律责任的权利:
|
||||
</div>
|
||||
<div>
|
||||
(1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动;
|
||||
(2)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式、不正当手段等参与本活动;-同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等)单日内恶意切换微信账号参加活动,扰乱正常抽奖秩序,影响活动公平性的;
|
||||
</div>
|
||||
<div>
|
||||
(2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动,扰乱正常抽奖秩序,影响活动公平性的;
|
||||
(3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
|
||||
</div>
|
||||
<div>
|
||||
(3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
|
||||
(4)平安理财保留调整、暂停和终止本活动的权利,并经公告后生效;
|
||||
</div>
|
||||
<div>
|
||||
2、平安理财保留调整、暂停和终止本活动的权利,并经公告后生效;
|
||||
</div>
|
||||
<div>
|
||||
3、用户参与本活动,即视为理解并同意本活动细则。在法律规定的范围内,平安理财有权对活动规则进行解释,并根据活动实际情况对本活动的规则进行变动或调整,相关变动或调整将公布在规则页面,并于公布时即时生效。
|
||||
(5)用户参与本活动,即视为理解并同意本活动细则。在法律法规及监管规定的范围内,平安理财有权对活动规则进行解释,并根据活动实际情况对本活动的规则进行变动或调整,相关变动或调整将公布在规则页面,并于公布时即时生效。
|
||||
</div>
|
||||
</div>
|
||||
<div class="margin-bottom-area"></div>
|
||||
|
||||
@ -51,7 +51,7 @@ const indexFn = (item) => {
|
||||
showMyPrize.value = true;
|
||||
}
|
||||
if (item.action == "start") {
|
||||
showQuestion.value = true;
|
||||
showQuestionList.value = true;
|
||||
}
|
||||
|
||||
if (item.action == "showRule") {
|
||||
@ -79,7 +79,7 @@ const myPrizeFn = (item) => {
|
||||
};
|
||||
|
||||
const QuestionListRef= ref(null)
|
||||
const showQuestionList = ref(true);
|
||||
const showQuestionList = ref(false);
|
||||
const questionListFn = (item) => {
|
||||
if (item.action == "hide") {
|
||||
showQuestionList.value = false;
|
||||
|
||||
@ -7,7 +7,7 @@ export const useMainStore = defineStore("counter", {
|
||||
hasDraw: true, //是否有抽奖机会
|
||||
token: '',
|
||||
posterId: 3, //测试结果
|
||||
hasPrize: false, //是否有奖品
|
||||
hasPrize: true, //是否有奖品
|
||||
prizeCode: 'oggSVMbeLgSK', //兑换码
|
||||
prizeMoney: '8.88', //金额
|
||||
drawKey: '',
|
||||
|
||||