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

41
src/components/Index.vue
View File

@@ -4,8 +4,8 @@ import { debounceTap } from "@/plugins";
const emit = defineEmits(["IndexPage"]);
const count = ref(0);
const show = (event) => {
const start = (event) => {
debounceTap(event.target, () => {
Toast.success("开发中！");
});
@@ -16,7 +16,11 @@ const show = (event) => {
<div class="IndexPage">
<div class="index-bg"></div>
<div class="index-container">
<Button @click="show">首页</Button>
<div class="index-title"></div>
<div class="index-rule-btn"></div>
<div class="index-prize-btn"></div>
<div class="index-start-btn" @click="start"></div>
<div class="index-agreement"></div>
</div>
</div>
</template>
@@ -24,14 +28,43 @@ const show = (event) => {
<style lang="scss" scoped>
.IndexPage {
@include pos(100%, 100vh, 0px, 0px);
background-color: rgb(0, 7, 198);
overflow: hidden;
.index-bg {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
@include bg_pos("index/bg.jpg");
}
.index-container {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
.index-title {
@include pos(552px, 131px, 101px, 331px);
@include bg_pos("index/title.png");
}
.index-rule-btn {
@include pos(101px, 51px, 0px, 474px);
@include bg_pos("index/rule-btn.png");
}
.index-prize-btn {
@include pos(101px, 51px, 0px, 536px);
@include bg_pos("index/prize-btn.png");
}
.index-start-btn {
@include pos(278px, 79px, 226px, 1117px);
@include bg_pos("index/start-btn.png");
}
.index-agreement {
@include pos(736px, 172px, 7px, 1219px);
@include bg_pos("index/agreement.png");
}
}
}
</style>

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>