299 lines
8.5 KiB
Vue
299 lines
8.5 KiB
Vue
<template>
|
|
<div class="QuestionList">
|
|
<div class="question-list-bg"></div>
|
|
<div class="question-list-container">
|
|
<div class="ql--top-icon-1"></div>
|
|
<div class="ql--top-icon-3"></div>
|
|
<div class="ql--top-icon-2"></div>
|
|
<div class="ql--bottom-icon-2"></div>
|
|
<div class="ql--bottom-icon-1"></div>
|
|
<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>
|
|
<div class="ql-swiper-box">
|
|
<div class="larnten-box-firework"></div>
|
|
<div class="larnten-box"></div>
|
|
<swiper class="larnten-swiper" :slides-per-view="1" :space-between="30" navigation :loop="true">
|
|
<swiper-slide v-for="item in 11"
|
|
:style="{ width: '100%', display: 'flex', justifyContent: 'center', }">
|
|
<div class="larnten-slide" :class="'larnten-slide-' + item">
|
|
<img class="larnten-img" :class="'larnten-img-' + item" :src="getLarntenImg(item)" alt=""
|
|
srcset="">
|
|
</div>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
<div class="ql-start-btn" @click="onShowQuestion"></div>
|
|
<div class="ql-bottom-bg"></div>
|
|
</div>
|
|
</div>
|
|
<Question v-if="showQuestion" :question-id="questionId" @showResult="onShowResult" @hide="showQuestion = false" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { register } from 'swiper/element/bundle';
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
import 'swiper/css';
|
|
import 'swiper/css/navigation';
|
|
import Question from './Question.vue';
|
|
|
|
const emit = defineEmits(['QuestionList', "showResult"]);
|
|
|
|
const showQuestion = ref(false)
|
|
const questionId = ref(1)
|
|
|
|
// 获取灯笼图片
|
|
function getLarntenImg(item) {
|
|
return new URL(`../assets/images/question-list/larnten-${item}.png`, import.meta.url).href
|
|
}
|
|
|
|
|
|
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 onShowResult = (result) => {
|
|
emit('showResult', result)
|
|
showQuestion.value = false
|
|
}
|
|
|
|
|
|
register();
|
|
|
|
const hidiQuestion = () => {
|
|
showQuestion.value = false
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
hidiQuestion
|
|
})
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.QuestionList {
|
|
@include pos(100%, 100vh, 0px, 0px);
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #a11b15, #f80c00);
|
|
|
|
.question-list-bg {
|
|
@include pos(750px, 1624px, 0px, 50%);
|
|
transform: translateY(-50%);
|
|
@include bg_pos("question-list/bg.jpg");
|
|
}
|
|
|
|
.question-list-container {
|
|
@include pos(750px, 1624px, 0px, 50%);
|
|
transform: translateY(-50%);
|
|
|
|
|
|
.ql-select-text {
|
|
font-family: 'DouyinSansBold';
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 307px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.select-text {
|
|
line-height: 50px;
|
|
font-size: 33px;
|
|
color: rgb(255, 255, 255);
|
|
font-weight: bold;
|
|
text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
|
|
}
|
|
}
|
|
|
|
.ql-swiper-box {
|
|
@include pos(655px, 778px, 49px, 448px);
|
|
// background-color: aliceblue;
|
|
// overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// pointer-events: none;
|
|
|
|
.larnten-box {
|
|
@include pos(428px, 639px, 113.5px, 0px);
|
|
@include bg_pos("question-list/box.png");
|
|
}
|
|
|
|
.larnten-box-firework {
|
|
@include pos(102px, 109px, 451.5px, 20px);
|
|
@include bg_pos("question-list/firework-icon.png");
|
|
}
|
|
|
|
.larnten-swiper {
|
|
@include box(655px, 778px);
|
|
position: relative;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
|
|
.larnten-slide {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.larnten-slide-1 {
|
|
@include box(527px, 697px);
|
|
}
|
|
|
|
.larnten-slide-2 {
|
|
@include box(482px, 743px);
|
|
}
|
|
|
|
.larnten-slide-3 {
|
|
@include box(478px, 714px);
|
|
}
|
|
|
|
.larnten-slide-4 {
|
|
@include box(441px, 722px);
|
|
}
|
|
|
|
.larnten-slide-5 {
|
|
@include box(473px, 778px);
|
|
}
|
|
|
|
.larnten-slide-6 {
|
|
@include box(437px, 751px);
|
|
}
|
|
|
|
.larnten-slide-7 {
|
|
@include box(478px, 731px);
|
|
}
|
|
|
|
.larnten-slide-8 {
|
|
@include box(446px, 743px);
|
|
}
|
|
|
|
.larnten-slide-9 {
|
|
@include box(481px, 691px);
|
|
}
|
|
|
|
.larnten-slide-10 {
|
|
@include box(460px, 713px);
|
|
}
|
|
|
|
.larnten-slide-11 {
|
|
@include box(383px, 756px);
|
|
}
|
|
|
|
|
|
.larnten-img {
|
|
@include box(100%, 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.ql--top-icon-1 {
|
|
pointer-events: none;
|
|
@include pos(405px, 659px, -193px, -213px);
|
|
@include bg_pos("question-list/icon-1.png");
|
|
}
|
|
|
|
.ql--top-icon-2 {
|
|
pointer-events: none;
|
|
@include pos(412px, 240px, 503px, -55px);
|
|
@include bg_pos("question-list/icon-2.png");
|
|
}
|
|
|
|
.ql--top-icon-3 {
|
|
pointer-events: none;
|
|
@include pos(300px, 434px, 611px, -71px);
|
|
@include bg_pos("question-list/icon-3.png");
|
|
}
|
|
|
|
.ql-bottom-bg {
|
|
pointer-events: none;
|
|
@include pos(750px, 374px, 0px, 1250px);
|
|
@include bg_pos("question-list/bottom-bg.png");
|
|
}
|
|
|
|
.ql--bottom-icon-1 {
|
|
pointer-events: none;
|
|
@include pos(293px, 292px, -186px, 1109px);
|
|
@include bg_pos("question-list/bottom-icon-1.png");
|
|
}
|
|
|
|
.ql--bottom-icon-2 {
|
|
pointer-events: none;
|
|
@include pos(698px, 497px, -287px, 1130px);
|
|
@include bg_pos("question-list/bottom-icon-2.png");
|
|
}
|
|
|
|
.ql--bottom-gift-1 {
|
|
pointer-events: none;
|
|
@include pos(144px, 145px, 512px, 1215px);
|
|
@include bg_pos("question-list/gift-1.png");
|
|
}
|
|
|
|
.ql--bottom-gift-2 {
|
|
pointer-events: none;
|
|
@include pos(184px, 188px, 611px, 1129px);
|
|
@include bg_pos("question-list/gift-2.png");
|
|
}
|
|
|
|
.ql-start-btn {
|
|
@include pos(319px, 93px, 235.5px, 1150px);
|
|
@include bg_pos("index/start-btn.png");
|
|
z-index: 99;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 自定义 Swiper 左右按钮样式 */
|
|
::v-deep .swiper-button-next,
|
|
::v-deep .swiper-button-prev {
|
|
color: white;
|
|
/* 设置按钮颜色 */
|
|
// background-color: rgba(0, 0, 0, 0.5); /* 设置按钮背景颜色 */
|
|
// border-radius: 50%; /* 设置按钮圆角 */
|
|
@include box(59px, 81px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
::v-deep .swiper-button-next::after,
|
|
::v-deep .swiper-button-prev::after {
|
|
font-size: 24px;
|
|
/* 设置按钮图标大小 */
|
|
opacity: 0;
|
|
}
|
|
|
|
::v-deep .swiper-button-prev {
|
|
// left: 20px; /* 设置按钮位置 */
|
|
@include bg_pos("question-list/left-arrow.png");
|
|
}
|
|
|
|
::v-deep .swiper-button-next {
|
|
// right: 20px; /* 设置按钮位置 */
|
|
@include bg_pos("question-list/right-arrow.png");
|
|
// right: 0px;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</style> |