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

完成加载页、首页、选择页切图

Browse Source
This commit is contained in:
梁泽军
2025-04-15 18:09:45 +08:00
parent d31ed5cbf9
commit 7e4e3af65f
90 changed files with 277 additions and 773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/components/Question.vue
View File

@@ -7,7 +7,7 @@ import { useMainStore } from "@/store";
import { subAnswer } from "@/api";
// 页面配置初始化
const emit = defineEmits(["hide", "showResult","QuestionPage"]);
const emit = defineEmits(["hide", "showResult", "QuestionPage"]);
const userStore = useMainStore();
const props = defineProps({
@@ -33,7 +33,6 @@ const answerFn = (item, event) => {
// console.log('当前题目：', currentId.value + 1);
debounceTap(e, () => {
gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
gsap.set('.answer-box', { pointerEvents: 'none' })
isChecked.value = true
checkedOption.value = item.aid
@@ -110,7 +109,6 @@ const viewResult = (event) => {
onMounted(() => {
gsap.from('.question-bg', { duration: 0.5, autoAlpha: 0, })
gsap.from('.question-box', { duration: 0.5, scale: 0.4, autoAlpha: 0, })
gsap.to('.question-lantern-icon', { duration: 5, transformOrigin: '100% 0%', rotation: '10deg', repeat: -1, yoyo: true, ease: 'none' })
});
</script>
@@ -122,45 +120,32 @@ onMounted(() => {
<div class="question-box">
<!-- 问题序号 -->
<div class="qa-number">{{ questionList[currentId].id }}</div>
<div class="qa-question-box">
<!-- 问题 -->
<div class="question">
<div class="question-text" v-for="item in questionList[currentId].question" :key="item">
{{ item }}
</div>
<div class="question-tips">打一个字</div>
</div>
<!-- 选项 -->
<div class="answer-box">
<div class="answer"
:class="[(isChecked) ? item.result + '-bg' : '', checkedOption==item.aid ? 'checked':'no-checked']"
<div class="answer"
:class="[(isChecked) ? item.result + '-bg' : '', checkedOption == item.aid ? 'checked' : 'no-checked']"
v-for="item in questionList[currentId].answer" :key="item.aid">
<div class="answer-text-box">
<div class="answer-text" v-for="a in item.text" :key="a">
{{ item.aid }}.{{ a }}
<div class="answer-text">
{{ item.aid }}.{{ item.text }}
</div>
</div>
<div class="option-tips">
<div :class="item.result"></div>
</div>
<!-- 可点击区域 -->
<div class="click-area" @click="answerFn(item, $event)"></div>
</div>
</div>
<!-- 解析 -->
<div class="analysis">
<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="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">{{ t }}</div>
<div class="return-btn" @click="nextQuestion($event)"></div>
<div class="create-btn" @click="viewResult($event)"></div>
</div>
<div class="answer-larnten"></div>
<div class="answer-baozhu"></div>
</div>
<div class="question-gold-icon-1"></div>
</div>
@@ -175,7 +160,7 @@ onMounted(() => {
.question-bg {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
background-color: rgba($color: #000000, $alpha: 0.6);
background-color: rgba($color: #000000, $alpha: 0.3);
}
@@ -192,35 +177,12 @@ onMounted(() => {
.question-box {
@include pos(616px, 873px, 68px, 350px);
@include bg_pos("qa/question-box.png");
@include pos(721px, 857px, 20px, 340px);
@include bg_pos("qa/paper.png");
.answer-larnten {
@include pos(310px, 526px, -120px, -120px);
@include bg_pos('qa/lantern-icon.png');
pointer-events: none
}
.answer-baozhu {
@include pos(145px, 167px, 507px, 725px);
@include bg_pos('qa/baozhu.png');
pointer-events: none
}
.qa-number {
@include pos(100px, 56px, 255px, 79px);
font-size: 40px;
font-style: italic;
color: #c61a1a;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
}
.qa-question-box {
@include pos(570px, 700px, 22px, 194px);
@include pos(563px, 660px, 74px, 126px);
display: flex;
flex-direction: column;
// justify-content: space-around;
@@ -229,32 +191,19 @@ onMounted(() => {
// 问题样式
.question {
display: flex;
flex-direction: column;
// margin-bottom: 10px;
height: 270px;
justify-content: center;
.question-text {
width: 100%;
font-family: 'DouyinSansBold';
font-size: 35px;
color: rgb(255, 255, 255);
text-align: center;
font-family: 'HarmonyOS_Sans_SC_Regular';
font-size: 34px;
color: #9e4b00;
padding: 10px;
text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
// -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0);
}
.question-tips {
font-size: 25px;
width: 100%;
font-family: 'DouyinSansBold';
color: rgb(255, 255, 255);
text-align: center;
padding: 10px;
text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
}
}
// 选项样式
@@ -262,75 +211,53 @@ onMounted(() => {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
justify-content: space-around;
height: 200px;
// 选中状态
.checked {
border: 1px solid rgb(255, 238, 186) !important;
background-image: linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
background-image: -webkit-linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
background-color: #d42122;
.answer-option {
color: #96100f;
}
.answer-text-box {
color: #96100f !important;
color: #fff2b9 !important;
}
}
.no-checked {
// background-image: -webkit-linear-gradient(177deg, rgb(195, 59, 22) 0%, rgb(209, 84, 51) 100%);
// box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85), inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85),inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
background-image: -webkit-linear-gradient( 177deg, rgb(195,59,22) 0%, rgb(209,84,51) 100%);
background-color: #fff2b9;
.answer-option {
color: #ffe2ad;
color: #9e4b00;
}
.answer-text-box {
color: #ffe2ad !important;
color: #9e4b00 !important;
}
}
.checked{
}
.answer {
@include box(350px, 92px);
@include box(350px, 65px);
position: relative;
border-radius: 47.5px;
// border: 2px solid rgb(255, 225, 172);
// margin-bottom: 35px;
justify-content: space-between;
border-radius: 32.5px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border: 1px solid #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
.click-area {
@include pos(350px, 92px, 0px, 0px);
border-radius: 47.5px;
@include pos(350px, 65px, 0px, 0px);
border-radius: 32.5px;
}
.option-tips {
@include box(60px, 60px);
visibility: hidden;
.correct {
@include box(100%, 100%);
@@ -369,31 +296,20 @@ onMounted(() => {
}
// 解析样式
.analysis {
// visibility: hidden;
width: 95%;
.question-tips {
font-size: 25px;
width: 100%;
font-family: 'HarmonyOS_Sans_SC_Regular';
font-size: 20px;
color: #ffffff;
color: #ab7133;
text-align: center;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.analysis-tips {
background-color: rgb(175, 13, 12);
padding: 5px 10px;
margin-right: 3px;
}
padding: 10px;
}
.return-btn {
@include box(246px, 73px);
@include bg_pos("qa/go-back.png");
@include bg_pos("rule/cls-btn.png");
display: none;
}
@@ -407,11 +323,6 @@ onMounted(() => {
}
}
.question-gold-icon-1 {
pointer-events: none;
@include pos(135px, 128px, 604px, 773px);
@include bg_pos("qa/gold-icon.png");
}