diff --git a/src/assets/images/index/firework.png b/src/assets/images/index/firework.png index 22a7a76..01e2fe9 100644 Binary files a/src/assets/images/index/firework.png and b/src/assets/images/index/firework.png differ diff --git a/src/assets/images/index/gift-icon.png b/src/assets/images/index/gift-icon.png new file mode 100644 index 0000000..a3aa95e Binary files /dev/null and b/src/assets/images/index/gift-icon.png differ diff --git a/src/assets/images/index/prize-btn.png b/src/assets/images/index/prize-btn.png index 573eca6..46bbefb 100644 Binary files a/src/assets/images/index/prize-btn.png and b/src/assets/images/index/prize-btn.png differ diff --git a/src/assets/images/index/sub-title.png b/src/assets/images/index/sub-title.png new file mode 100644 index 0000000..de4c372 Binary files /dev/null and b/src/assets/images/index/sub-title.png differ diff --git a/src/assets/images/index/title.png b/src/assets/images/index/title.png index 2eeef5c..77d2a50 100644 Binary files a/src/assets/images/index/title.png and b/src/assets/images/index/title.png differ diff --git a/src/assets/images/poster/card-1.png b/src/assets/images/poster/card-1.png index 105f97b..63a6daa 100644 Binary files a/src/assets/images/poster/card-1.png and b/src/assets/images/poster/card-1.png differ diff --git a/src/assets/images/poster/card-10.png b/src/assets/images/poster/card-10.png new file mode 100644 index 0000000..50fa60f Binary files /dev/null and b/src/assets/images/poster/card-10.png differ diff --git a/src/assets/images/poster/card-11.png b/src/assets/images/poster/card-11.png new file mode 100644 index 0000000..f6ab6fa Binary files /dev/null and b/src/assets/images/poster/card-11.png differ diff --git a/src/assets/images/poster/card-2.png b/src/assets/images/poster/card-2.png new file mode 100644 index 0000000..e3e8249 Binary files /dev/null and b/src/assets/images/poster/card-2.png differ diff --git a/src/assets/images/poster/card-3.png b/src/assets/images/poster/card-3.png new file mode 100644 index 0000000..3e71e9d Binary files /dev/null and b/src/assets/images/poster/card-3.png differ diff --git a/src/assets/images/poster/card-4.png b/src/assets/images/poster/card-4.png new file mode 100644 index 0000000..d7ef1c7 Binary files /dev/null and b/src/assets/images/poster/card-4.png differ diff --git a/src/assets/images/poster/card-5.png b/src/assets/images/poster/card-5.png new file mode 100644 index 0000000..b7f08e7 Binary files /dev/null and b/src/assets/images/poster/card-5.png differ diff --git a/src/assets/images/poster/card-6.png b/src/assets/images/poster/card-6.png new file mode 100644 index 0000000..52f4be8 Binary files /dev/null and b/src/assets/images/poster/card-6.png differ diff --git a/src/assets/images/poster/card-7.png b/src/assets/images/poster/card-7.png new file mode 100644 index 0000000..43894c0 Binary files /dev/null and b/src/assets/images/poster/card-7.png differ diff --git a/src/assets/images/poster/card-8.png b/src/assets/images/poster/card-8.png new file mode 100644 index 0000000..7228f28 Binary files /dev/null and b/src/assets/images/poster/card-8.png differ diff --git a/src/assets/images/poster/card-9.png b/src/assets/images/poster/card-9.png new file mode 100644 index 0000000..cdfffd6 Binary files /dev/null and b/src/assets/images/poster/card-9.png differ diff --git a/src/assets/images/poster/poster-1.jpg b/src/assets/images/poster/poster-1.jpg new file mode 100644 index 0000000..ad011d7 Binary files /dev/null and b/src/assets/images/poster/poster-1.jpg differ diff --git a/src/assets/images/poster/poster-10.jpg b/src/assets/images/poster/poster-10.jpg new file mode 100644 index 0000000..290eb12 Binary files /dev/null and b/src/assets/images/poster/poster-10.jpg differ diff --git a/src/assets/images/poster/poster-11.jpg b/src/assets/images/poster/poster-11.jpg new file mode 100644 index 0000000..621a843 Binary files /dev/null and b/src/assets/images/poster/poster-11.jpg differ diff --git a/src/assets/images/poster/poster-2.jpg b/src/assets/images/poster/poster-2.jpg new file mode 100644 index 0000000..eae15c9 Binary files /dev/null and b/src/assets/images/poster/poster-2.jpg differ diff --git a/src/assets/images/poster/poster-3.jpg b/src/assets/images/poster/poster-3.jpg new file mode 100644 index 0000000..922f312 Binary files /dev/null and b/src/assets/images/poster/poster-3.jpg differ diff --git a/src/assets/images/poster/poster-4.jpg b/src/assets/images/poster/poster-4.jpg new file mode 100644 index 0000000..739fa5e Binary files /dev/null and b/src/assets/images/poster/poster-4.jpg differ diff --git a/src/assets/images/poster/poster-5.jpg b/src/assets/images/poster/poster-5.jpg new file mode 100644 index 0000000..f202abd Binary files /dev/null and b/src/assets/images/poster/poster-5.jpg differ diff --git a/src/assets/images/poster/poster-6.jpg b/src/assets/images/poster/poster-6.jpg new file mode 100644 index 0000000..3da2f8c Binary files /dev/null and b/src/assets/images/poster/poster-6.jpg differ diff --git a/src/assets/images/poster/poster-7.jpg b/src/assets/images/poster/poster-7.jpg new file mode 100644 index 0000000..7a73353 Binary files /dev/null and b/src/assets/images/poster/poster-7.jpg differ diff --git a/src/assets/images/poster/poster-8.jpg b/src/assets/images/poster/poster-8.jpg new file mode 100644 index 0000000..cb68736 Binary files /dev/null and b/src/assets/images/poster/poster-8.jpg differ diff --git a/src/assets/images/poster/poster-9.jpg b/src/assets/images/poster/poster-9.jpg new file mode 100644 index 0000000..3260b9b Binary files /dev/null and b/src/assets/images/poster/poster-9.jpg differ diff --git a/src/components/Index.vue b/src/components/Index.vue index 97a2d3c..6d35dd5 100644 --- a/src/components/Index.vue +++ b/src/components/Index.vue @@ -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 = () => {
+
+
-
+
@@ -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"); diff --git a/src/components/Question.vue b/src/components/Question.vue index a6c7335..0d3b87c 100644 --- a/src/components/Question.vue +++ b/src/components/Question.vue @@ -147,8 +147,9 @@ onMounted(() => {
-
- 提示： +
+ 提示: +
@@ -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 { diff --git a/src/components/QuestionList.vue b/src/components/QuestionList.vue index 1f78486..9d77720 100644 --- a/src/components/QuestionList.vue +++ b/src/components/QuestionList.vue @@ -10,7 +10,7 @@
-
选择一个你喜欢的花灯
+
选择一盏灯你喜欢的花灯
开始猜谜吧
@@ -26,9 +26,9 @@
-
+
-
+ @@ -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 -})