liangzejun/palc-newyear2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新增首页页面

Browse Source
This commit is contained in:
Andy Leong
2024-01-12 15:35:55 +08:00
parent 2feefb2c38
commit a52ecc1526
16 changed files with 99 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/Question.vue
View File

@@ -1,24 +1,3 @@
<template>
<div class="QuestionPage">
<div class="question-bg"></div>
<div class="question-container">
<div class="question-content">
<div class="question">{{ currentId + 1 }}.{{ questionList[currentId].question }}</div>
<div class="answer-box">
<div class="answer" :class="activeId == item.aid ? 'active' : ''"
v-for="item in questionList[currentId].answer " @click="answerFn(item, $event)">{{ item.aid }}.{{
item.text }}
</div>
</div>
<!-- 查看结果 -->
<Button v-if="showResultBtn" @click="showResult">查看结果</Button>
<!-- 下一页 -->
<Button v-show="currentId != 0" @click="prevePage">上一页</Button>
</div>
</div>
</div>
</template>
<script setup name="Question">
import { Button, Toast } from 'vant'
import gsap from 'gsap'
@@ -97,10 +76,29 @@ const prevePage = (event) => {
})
}
</script>
<template>
<div class="QuestionPage">
<div class="question-bg"></div>
<div class="question-container">
<div class="question-content">
<div class="question">{{ currentId + 1 }}.{{ questionList[currentId].question }}</div>
<div class="answer-box">
<div class="answer" :class="activeId == item.aid ? 'active' : ''"
v-for="item in questionList[currentId].answer " @click="answerFn(item, $event)">{{ item.aid }}.{{
item.text }}
</div>
</div>
<!-- 查看结果 -->
<Button v-if="showResultBtn" @click="showResult">查看结果</Button>
<!-- 下一页 -->
<Button v-show="currentId != 0" @click="prevePage">上一页</Button>
</div>
</div>
</div>
</template>
<style lang='scss' scope>
.QuestionPage {
@include pos(100%, 100%, 0px, 0px);
@@ -110,6 +108,8 @@ const prevePage = (event) => {
.question-bg {
@include pos(750px, 100%, 0px, 50%);
transform: translateY(-50%);
@include bg_pos("qa/bg.jpg");
}
.question-container {
@@ -118,29 +118,30 @@ const prevePage = (event) => {
@include flexCen();
.question-content {
width: 80%;
}
@include box(100%, 100%);
@include flexCen();
.answer-box {
display: flex;
flex-direction: column;
margin-top: 30px;
// width: 80%;
.answer {
padding: 10px;
border-radius: 50px;
background-color: #fff;
color: rgb(68, 208, 112);
margin-bottom: 20px;
width: 100%;
.question {
@include box(713px, 428px);
@include bg_pos("qa/question.png");
}
.active {
background-color: #ff2020;
color: rgb(255, 255, 255);
.answer-box {
display: flex;
flex-direction: column;
margin-top: 30px;
// width: 80%;
.answer {}
.active {
background-color: #ff2020;
color: rgb(255, 255, 255);
}
}
}
}
}
</style>