完成加载页、我的奖品页面、答题页逻辑，首页待优化动画
This commit is contained in:
Andy Leong
@@ -1,26 +1,74 @@
|
||||
<script setup>
|
||||
import { Button, Toast } from "vant";
|
||||
import { debounceTap } from "@/plugins";
|
||||
import gsap from "gsap";
|
||||
|
||||
const emit = defineEmits(["IndexPage"]);
|
||||
|
||||
|
||||
const start = (event) => {
|
||||
debounceTap(event.target, () => {
|
||||
Toast.success("开发中！");
|
||||
emit("IndexPage", { action: "start" });
|
||||
});
|
||||
};
|
||||
|
||||
const showMyPrize = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
emit("IndexPage", { action: "showMyPrize" });
|
||||
});
|
||||
};
|
||||
|
||||
const clockAni = () => {
|
||||
gsap.to(".index-clock-h", {
|
||||
duration: 12,
|
||||
rotation: "+=360",
|
||||
repeat: -1,
|
||||
ease: "none",
|
||||
});
|
||||
gsap.to(".index-clock-m", {
|
||||
duration: 8,
|
||||
rotation: "+=360",
|
||||
repeat: -1,
|
||||
ease: "none",
|
||||
});
|
||||
gsap.to(".index-clock-s", {
|
||||
duration: 3,
|
||||
rotation: "+=360",
|
||||
repeat: -1,
|
||||
ease: "none",
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
clockAni();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="IndexPage">
|
||||
<div class="index-bg"></div>
|
||||
<div class="index-bg">
|
||||
<div class="index-clock-box">
|
||||
<div class="index-clock-h"></div>
|
||||
<div class="index-clock-m"></div>
|
||||
<div class="index-clock-s"></div>
|
||||
<div class="index-clock-circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-container">
|
||||
<div class="index-title"></div>
|
||||
<div class="index-rule-btn"></div>
|
||||
<div class="index-prize-btn"></div>
|
||||
<div class="index-prize-btn" @click="showMyPrize($event)"></div>
|
||||
<div class="index-start-btn" @click="start"></div>
|
||||
<div class="index-agreement"></div>
|
||||
<div class="index-agreement">
|
||||
风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
|
||||
class="b"
|
||||
>本资料内容及观点仅供参考，不构成对任何人的投资建议。</span
|
||||
>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
|
||||
class="b"
|
||||
>理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span
|
||||
><span class="orange">理财非存款，产品有风险，投资须谨慎。</span
|
||||
>金融消费者不得利用金融产品和服务从事违法活动。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -34,6 +82,26 @@ const start = (event) => {
|
||||
@include pos(750px, 1624px, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
@include bg_pos("index/bg.jpg");
|
||||
.index-clock-box {
|
||||
@include pos(125px, 125px, 213px, 700px);
|
||||
@include bg_pos("load/clock-bg.png");
|
||||
.index-clock-circle {
|
||||
@include pos(13px, 13px, 57px, 55px);
|
||||
@include bg_pos("load/clock-circle.png");
|
||||
}
|
||||
.index-clock-s {
|
||||
@include pos(125px, 125px, 0px, 0px);
|
||||
@include bg_pos("load/clock-second.png");
|
||||
}
|
||||
.index-clock-m {
|
||||
@include pos(125px, 125px, 0px, 0px);
|
||||
@include bg_pos("load/clock-minute.png");
|
||||
}
|
||||
.index-clock-h {
|
||||
@include pos(125px, 125px, 0px, 0px);
|
||||
@include bg_pos("load/clock-hour.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-container {
|
||||
@@ -41,18 +109,18 @@ const start = (event) => {
|
||||
transform: translateY(-50%);
|
||||
|
||||
.index-title {
|
||||
pointer-events: none;
|
||||
@include pos(552px, 131px, 101px, 331px);
|
||||
@include bg_pos("index/title.png");
|
||||
|
||||
}
|
||||
|
||||
.index-rule-btn {
|
||||
@include pos(101px, 51px, 0px, 474px);
|
||||
@include pos(168px, 51px, -67px, 474px);
|
||||
@include bg_pos("index/rule-btn.png");
|
||||
}
|
||||
|
||||
.index-prize-btn {
|
||||
@include pos(101px, 51px, 0px, 536px);
|
||||
@include pos(168px, 51px, -67px, 536px);
|
||||
@include bg_pos("index/prize-btn.png");
|
||||
}
|
||||
|
||||
@@ -62,8 +130,21 @@ const start = (event) => {
|
||||
}
|
||||
|
||||
.index-agreement {
|
||||
pointer-events: none;
|
||||
@include pos(736px, 172px, 7px, 1219px);
|
||||
@include bg_pos("index/agreement.png");
|
||||
background: rgba($color: #f49e6a, $alpha: 0.55);
|
||||
font-size: 14px;
|
||||
text-align: justify;
|
||||
color: #000000;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
.b {
|
||||
font-weight: 700;
|
||||
}
|
||||
.orange {
|
||||
color: #ea5404;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,86 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { Button, Toast } from "vant";
|
||||
import { Toast } from "vant";
|
||||
import gsap from "gsap";
|
||||
import { debounceTap } from "@/plugins";
|
||||
import Preloader from "@/plugins/Preloader";
|
||||
import { loadImg, pageImg } from "@/data/imgList";
|
||||
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["LoadPage"]);
|
||||
|
||||
const show = (event) => {
|
||||
const e = event.target;
|
||||
debounceTap(e, () => {
|
||||
console.log(1);
|
||||
emit("LoadPage", { action: "hide" });
|
||||
const loadNum = ref(0);
|
||||
|
||||
const entryAni = () => {
|
||||
gsap.to(".clock-h", {
|
||||
duration: 10,
|
||||
rotation: "+=360",
|
||||
repeat: -1,
|
||||
ease: "none",
|
||||
});
|
||||
gsap.to(".clock-m", {
|
||||
duration: 3,
|
||||
rotation: "+=360",
|
||||
repeat: -1,
|
||||
ease: "none",
|
||||
});
|
||||
gsap.to(".clock-s", {
|
||||
duration: 1,
|
||||
rotation: "+=360",
|
||||
repeat: -1,
|
||||
ease: "none",
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
entryAni();
|
||||
Preloader({
|
||||
name: "加载页资源",
|
||||
imgs: loadImg,
|
||||
callback: (progress) => {
|
||||
// console.log('进度：', progress);
|
||||
},
|
||||
}).then((res) => {
|
||||
gsap.to(".LoadPage", {
|
||||
duration: 0.2,
|
||||
autoAlpha: 1,
|
||||
onComplete: () => {
|
||||
Preloader({
|
||||
name: "内页资源",
|
||||
imgs: pageImg,
|
||||
callback: (progress) => {
|
||||
// console.log('进度：', progress);
|
||||
gsap.set(".bar", { width: progress + "%" });
|
||||
loadNum.value = progress;
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log("加载完成");
|
||||
gsap.to(".LoadPage", {
|
||||
duration: 1,
|
||||
autoAlpha: 0,
|
||||
onComplete: () => {
|
||||
emit("LoadPage", { action: "hide" });
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="LoadPage">
|
||||
<div class="load-bg"></div>
|
||||
<div class="load-container">
|
||||
<div class="box">
|
||||
<Button @click="show">to index</Button>
|
||||
<div class="clock-box">
|
||||
<div class="clock-h"></div>
|
||||
<div class="clock-m"></div>
|
||||
<div class="clock-s"></div>
|
||||
<div class="clock-circle"></div>
|
||||
</div>
|
||||
<div class="load-box">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="load-num">{{ loadNum }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -32,20 +90,67 @@ const show = (event) => {
|
||||
@include pos(100%, 100%, 0px, 0px);
|
||||
background-color: rgb(223, 15, 60);
|
||||
overflow: hidden;
|
||||
@include flexCen();
|
||||
|
||||
.load-bg {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
@include bg_pos("load/bg.jpg");
|
||||
}
|
||||
|
||||
.load-container {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
@include flexCen();
|
||||
position: relative;
|
||||
@include box(750px, 1180px);
|
||||
// transform: translateY(-50%);
|
||||
|
||||
.box {
|
||||
@include box(300px, 300px);
|
||||
@include flexCen();
|
||||
.clock-box {
|
||||
@include pos(125px, 125px, 313px, 299px);
|
||||
@include bg_pos("load/clock-bg.png");
|
||||
.clock-circle {
|
||||
@include pos(13px, 13px, 57px, 55px);
|
||||
@include bg_pos("load/clock-circle.png");
|
||||
}
|
||||
.clock-s {
|
||||
@include pos(125px, 125px, 0px, 0px);
|
||||
@include bg_pos("load/clock-second.png");
|
||||
}
|
||||
.clock-m {
|
||||
@include pos(125px, 125px, 0px, 0px);
|
||||
@include bg_pos("load/clock-minute.png");
|
||||
}
|
||||
.clock-h {
|
||||
@include pos(125px, 125px, 0px, 0px);
|
||||
@include bg_pos("load/clock-hour.png");
|
||||
}
|
||||
}
|
||||
|
||||
.load-box {
|
||||
@include pos(512px, 38px, 119px, 450px);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: #e17c4d;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
.bar {
|
||||
@include box(10%, 38px);
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(45deg, #f2733a, #ffd667);
|
||||
}
|
||||
}
|
||||
|
||||
.load-num {
|
||||
@include pos(750px, 50px, 0px, 511px);
|
||||
text-align: center;
|
||||
font-size: 38px;
|
||||
color: #ffaf5e;
|
||||
line-height: 40px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(to right, #f2733a, #ffd667);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: 2px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
||||
105
src/components/MyPrize.vue
Normal file
105
src/components/MyPrize.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script setup>
|
||||
import { debounceTap } from "@/plugins";
|
||||
import gsap from "gsap";
|
||||
import { Toast } from "vant";
|
||||
import { Clipboard } from "v-clipboard";
|
||||
import { useMainStore } from "@/store";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["MyPrizePage"]);
|
||||
const userStore = useMainStore();
|
||||
|
||||
const money = ref(userStore.prizeMoney);
|
||||
const code = ref(userStore.prizeCode);
|
||||
|
||||
const copyFn = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
Clipboard.copy(code.value);
|
||||
Toast(`复制成功：${code.value}`);
|
||||
});
|
||||
};
|
||||
|
||||
const hide = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
gsap.to(".MyPrizePage", {
|
||||
duration: 0.4,
|
||||
autoAlpha: 0,
|
||||
onComplete: () => {
|
||||
emit("MyPrizePage", { action: "hide" });
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const entryAni = () => {
|
||||
gsap.from(".MyPrizePage", { duration: 0.2, autoAlpha: 0 });
|
||||
gsap.from(".myPrize-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
entryAni();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="MyPrizePage">
|
||||
<div class="myPrize-container">
|
||||
<div class="myPrize-money">¥{{ money }}元</div>
|
||||
<div class="myPrize-code-box">
|
||||
<div class="code">{{ code }}</div>
|
||||
<div class="myPrize-copy-btn" @click="copyFn($event)"></div>
|
||||
</div>
|
||||
<div class="myPrize-cls-btn" @click="hide($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.MyPrizePage {
|
||||
@include fixed();
|
||||
@include flexCen();
|
||||
background-color: rgba($color: #000000, $alpha: 0.7);
|
||||
.myPrize-container {
|
||||
position: relative;
|
||||
@include box(665px, 731px);
|
||||
@include bg_pos("prize/myPrize-box.png");
|
||||
|
||||
.myPrize-money {
|
||||
@include pos(370px, 81px, 139px, 239px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #e95b46;
|
||||
font-weight: 700;
|
||||
font-size: 58px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.myPrize-code-box {
|
||||
@include pos(312px, 52px, 197px, 508px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.code {
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
margin-right: 10px;
|
||||
color: #fff6cc;
|
||||
}
|
||||
|
||||
.myPrize-copy-btn {
|
||||
@include box(77px, 39px);
|
||||
@include bg_pos("prize/copy-btn.png");
|
||||
}
|
||||
}
|
||||
|
||||
.myPrize-cls-btn {
|
||||
@include pos(57px, 57px, 517px, 114px);
|
||||
@include bg_pos("prize/cls-btn.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,147 +1,375 @@
|
||||
<script setup name="Question">
|
||||
import { Button, Toast } from 'vant'
|
||||
import gsap from 'gsap'
|
||||
import data from '@/data'
|
||||
import { debounceTap, FYShuffle, mostValue } from '@/plugins'
|
||||
import { Button, Toast } from "vant";
|
||||
import gsap from "gsap";
|
||||
import data from "@/data";
|
||||
import { debounceTap, FYShuffle, mostValue } from "@/plugins";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["QuestionPage"]);
|
||||
|
||||
// 当前题目
|
||||
const currentId = ref(0) //当前id 0~11
|
||||
const questionList = ref(FYShuffle(data)) //随机打乱题库
|
||||
const answerList = ref([]) // 答案库统计
|
||||
const activeId = ref('') // 当前题目所选答案选项
|
||||
const showResultBtn = ref(false)
|
||||
const currentId = ref(0); //当前id 0~11
|
||||
const questionList = ref(FYShuffle(data)); //随机打乱题库
|
||||
const answerList = ref([]); // 答案库统计
|
||||
const activeId = ref(""); // 当前题目所选答案选项
|
||||
const showResultBtn = ref(false);
|
||||
// 答题事件
|
||||
const answerFn = (item, event) => {
|
||||
let e = event.target
|
||||
activeId.value = item.aid
|
||||
debounceTap(e, () => {
|
||||
let cid = questionList.value[currentId.value].id
|
||||
let has = answerList.value.findIndex(obj => obj.qid === cid);
|
||||
let e = event.target.parentElement.parentElement;
|
||||
activeId.value = item.aid;
|
||||
debounceTap(e, () => {
|
||||
if (currentId.value != 0 && currentId.value != 11) {
|
||||
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
|
||||
}
|
||||
|
||||
if (currentId.value != 11) {
|
||||
questionOut.timeScale(2);
|
||||
questionOut.restart();
|
||||
questionOut.eventCallback("onComplete", () => {
|
||||
console.log("题目：", currentId.value);
|
||||
let cid = questionList.value[currentId.value].id;
|
||||
let has = answerList.value.findIndex((obj) => obj.qid === cid);
|
||||
if (has == -1) {
|
||||
answerList.value.push({
|
||||
qid: cid,
|
||||
answer: item.secore,
|
||||
text: item.text
|
||||
})
|
||||
answerList.value.push({
|
||||
qid: cid,
|
||||
answer: item.secore,
|
||||
text: item.text,
|
||||
});
|
||||
} else {
|
||||
answerList.value[has].answer = item.secore
|
||||
answerList.value[has].text = item.text
|
||||
answerList.value[has].answer = item.secore;
|
||||
answerList.value[has].text = item.text;
|
||||
}
|
||||
|
||||
// 更新下一题信息
|
||||
if (currentId.value >= 11) {
|
||||
Toast('答题结束')
|
||||
console.log('答题结束');
|
||||
showResultBtn.value = true
|
||||
gsap.set('.answer-box', { pointerEvents: 'none' })
|
||||
return
|
||||
console.log("jieshu");
|
||||
Toast("答题结束");
|
||||
gsap.set(".answer", { pointerEvents: "none" });
|
||||
return;
|
||||
} else {
|
||||
activeId.value = ''
|
||||
currentId.value++
|
||||
activeId.value = "";
|
||||
currentId.value++;
|
||||
}
|
||||
questionEntry.timeScale(2);
|
||||
questionEntry.restart();
|
||||
});
|
||||
} else {
|
||||
resultBtnAni.play();
|
||||
}
|
||||
console.log("答案库", answerList.value);
|
||||
});
|
||||
};
|
||||
|
||||
console.log('答案库', answerList.value);
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const mbtiArr = ref([[], [], [], []]) //四组数组分别存放 E&I，S&T，T&F，J&P四组结果
|
||||
const mbtiArr = ref([[], [], [], []]); //四组数组分别存放 E&I，S&T，T&F，J&P四组结果
|
||||
const showResult = (event) => {
|
||||
let e = event.target
|
||||
debounceTap(e, () => {
|
||||
// console.log('答题结果：', answerList.value);
|
||||
answerList.value.forEach(element => {
|
||||
if (element.answer == "E" || element.answer == "I") mbtiArr.value[0].push(element.answer)
|
||||
if (element.answer == "S" || element.answer == "N") mbtiArr.value[1].push(element.answer)
|
||||
if (element.answer == "T" || element.answer == "F") mbtiArr.value[2].push(element.answer)
|
||||
if (element.answer == "J" || element.answer == "P") mbtiArr.value[3].push(element.answer)
|
||||
});
|
||||
// console.log('mbtiArr', mbtiArr.value);
|
||||
let mbti = mostValue(mbtiArr.value[0]).value + mostValue(mbtiArr.value[1]).value + mostValue(mbtiArr.value[2]).value + mostValue(mbtiArr.value[3]).value
|
||||
console.log('MBTI:', mbti);
|
||||
Toast('你的MBTI测试结果:' + mbti)
|
||||
})
|
||||
}
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
// console.log('答题结果：', answerList.value);
|
||||
answerList.value.forEach((element) => {
|
||||
if (element.answer == "E" || element.answer == "I")
|
||||
mbtiArr.value[0].push(element.answer);
|
||||
if (element.answer == "S" || element.answer == "N")
|
||||
mbtiArr.value[1].push(element.answer);
|
||||
if (element.answer == "T" || element.answer == "F")
|
||||
mbtiArr.value[2].push(element.answer);
|
||||
if (element.answer == "J" || element.answer == "P")
|
||||
mbtiArr.value[3].push(element.answer);
|
||||
});
|
||||
// console.log('mbtiArr', mbtiArr.value);
|
||||
let mbti =
|
||||
mostValue(mbtiArr.value[0]).value +
|
||||
mostValue(mbtiArr.value[1]).value +
|
||||
mostValue(mbtiArr.value[2]).value +
|
||||
mostValue(mbtiArr.value[3]).value;
|
||||
console.log("MBTI:", mbti);
|
||||
Toast("你的MBTI测试结果:" + mbti);
|
||||
});
|
||||
};
|
||||
|
||||
// 上一页函数
|
||||
const prevePage = (event) => {
|
||||
let e = event.target
|
||||
debounceTap(e, () => {
|
||||
activeId.value = ''
|
||||
currentId.value--
|
||||
})
|
||||
}
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
|
||||
if (currentId.value >= 11) {
|
||||
resultBtnAni.reverse();
|
||||
gsap.set(".answer", { pointerEvents: "initial" });
|
||||
}
|
||||
activeId.value = "";
|
||||
currentId.value--;
|
||||
// questionEntry.reverse(0.3);
|
||||
// questionEntry.restart(true);
|
||||
// setTimeout(()=>{})
|
||||
});
|
||||
};
|
||||
|
||||
// 题目过渡动画
|
||||
const questionEntry = gsap.timeline({
|
||||
paused: true,
|
||||
onStart: () => {
|
||||
gsap.set(".answer-box", { pointerEvents: "none" });
|
||||
},
|
||||
onComplete: () => {
|
||||
if (currentId.value != 0) {
|
||||
gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
|
||||
}
|
||||
|
||||
gsap.set(".answer-box", { pointerEvents: "initial" });
|
||||
},
|
||||
});
|
||||
const questionOut = gsap.timeline({
|
||||
paused: true,
|
||||
onStart: () => {
|
||||
gsap.set(".answer-box", { pointerEvents: "none" });
|
||||
},
|
||||
onComplete: () => {
|
||||
gsap.set(".answer-box", { pointerEvents: "initial" });
|
||||
},
|
||||
});
|
||||
|
||||
// 查看结果事件及动画
|
||||
const resultBtnAni = gsap.timeline({ paused: true });
|
||||
onMounted(() => {
|
||||
resultBtnAni.from(".showResult-btn", { y: 200, autoAlpha: 0 });
|
||||
questionEntry
|
||||
.from(".question", { y: 100, autoAlpha: 0 })
|
||||
.from(".answer-0", {
|
||||
y: 400,
|
||||
scale: 0.3,
|
||||
autoAlpha: 0,
|
||||
duration: 2,
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
})
|
||||
.from(
|
||||
".answer-1",
|
||||
{
|
||||
y: 400,
|
||||
scale: 0.3,
|
||||
autoAlpha: 0,
|
||||
duration: 2,
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
},
|
||||
0.5
|
||||
);
|
||||
questionEntry.play();
|
||||
questionOut
|
||||
.to(".question", { y: -50, autoAlpha: 0, duration: 0.3 })
|
||||
.to(".answer-0", { scale: 0.3, duration: 1 })
|
||||
.to(".answer-1", { scale: 0.3, duration: 1 }, 0.5)
|
||||
.to(".answer-0", {
|
||||
y: -600,
|
||||
scale: 0.5,
|
||||
autoAlpha: 0,
|
||||
duration: 1.5,
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
})
|
||||
.to(
|
||||
".answer-1",
|
||||
{
|
||||
y: -600,
|
||||
scale: 0.5,
|
||||
autoAlpha: 0,
|
||||
duration: 1.5,
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
},
|
||||
1.5
|
||||
);
|
||||
});
|
||||
</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 class="QuestionPage" @touchmove.prevent>
|
||||
<div class="question-bg"></div>
|
||||
<div class="question-container">
|
||||
<div class="question-content">
|
||||
<div class="question">
|
||||
<div class="question-order">{{ currentId + 1 }}</div>
|
||||
<div class="question-text">
|
||||
<div class="text">{{ questionList[currentId].question }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="answer-box">
|
||||
<div
|
||||
class="answer"
|
||||
v-for="(item, index) in questionList[currentId].answer"
|
||||
:class="'answer-' + index"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="answer-bg"
|
||||
:class="activeId == item.aid ? 'active' : ''"
|
||||
></div>
|
||||
<div class="answer-text">
|
||||
<div class="content-before"></div>
|
||||
<div class="content-after"></div>
|
||||
<div class="text" @click="answerFn(item, $event)">
|
||||
{{ item.aid }}<br />{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 查看结果 -->
|
||||
<div class="showResult-btn" @click="showResult"></div>
|
||||
<!-- 上一页 -->
|
||||
<div class="prev-btn" @click="prevePage($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scope>
|
||||
.QuestionPage {
|
||||
@include pos(100%, 100%, 0px, 0px);
|
||||
background-color: rgb(68, 208, 112);
|
||||
overflow: hidden;
|
||||
@include pos(100%, 100%, 0px, 0px);
|
||||
background-color: rgb(68, 208, 112);
|
||||
overflow: hidden;
|
||||
|
||||
.question-bg {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
@include bg_pos("qa/bg.jpg");
|
||||
.question-bg {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
@include bg_pos("qa/bg.jpg");
|
||||
}
|
||||
|
||||
}
|
||||
.question-container {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
@include flexCen();
|
||||
|
||||
.question-container {
|
||||
@include pos(750px, 100%, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
@include flexCen();
|
||||
.question-content {
|
||||
@include box(100%, 100%);
|
||||
@include flexCen();
|
||||
|
||||
.question-content {
|
||||
@include box(100%, 100%);
|
||||
@include flexCen();
|
||||
.question {
|
||||
position: relative;
|
||||
@include box(713px, 428px);
|
||||
@include bg_pos("qa/question.png");
|
||||
font-family: "alimama";
|
||||
color: #c6672c;
|
||||
.question-order {
|
||||
@include pos(544px, 75px, 87px, 112px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 66px;
|
||||
font-weight: 700;
|
||||
line-height: 80px;
|
||||
}
|
||||
.question-text {
|
||||
@include pos(544px, 150px, 87px, 192px);
|
||||
box-sizing: border-box;
|
||||
// padding-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
line-height: 50px;
|
||||
.text {
|
||||
width: 80%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question {
|
||||
@include box(713px, 428px);
|
||||
@include bg_pos("qa/question.png");
|
||||
}
|
||||
|
||||
.answer-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 30px;
|
||||
// width: 80%;
|
||||
|
||||
.answer {}
|
||||
|
||||
.active {
|
||||
background-color: #ff2020;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.answer-box {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
@include box(750px, 886px);
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
.answer {
|
||||
@include box(481px, 471px);
|
||||
position: absolute;
|
||||
// font-family: "alimama";
|
||||
color: #c6672c;
|
||||
.answer-bg {
|
||||
@include pos(481px, 471px, 0px, 0px);
|
||||
@include bg_pos("qa/answer-box-1.png");
|
||||
pointer-events: none;
|
||||
}
|
||||
.active {
|
||||
@include bg_pos("qa/answer-box-2.png");
|
||||
|
||||
// color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.answer-text {
|
||||
// @include pos(367px, 357px, 0px, 0px);
|
||||
position: relative;
|
||||
left: 58px;
|
||||
top: 58px;
|
||||
@include box(367px, 357px);
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
|
||||
font-size: 35px;
|
||||
font-weight: 700;
|
||||
border-radius: 50%;
|
||||
// .content-before {
|
||||
// pointer-events: none;
|
||||
// float: left;
|
||||
// width: 50%;
|
||||
// height: 100%;
|
||||
// shape-outside: radial-gradient(
|
||||
// farthest-side ellipse at right,
|
||||
// transparent 98%,
|
||||
// red
|
||||
// );
|
||||
// }
|
||||
// .content-after {
|
||||
// pointer-events: none;
|
||||
|
||||
// float: right;
|
||||
// width: 50%;
|
||||
// height: 100%;
|
||||
// shape-outside: radial-gradient(
|
||||
// farthest-side ellipse at left,
|
||||
// transparent 98%,
|
||||
// red
|
||||
// );
|
||||
// }
|
||||
.text {
|
||||
@include box(367px, 357px);
|
||||
padding: 0px 20px;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.answer:nth-child(1) {
|
||||
top: 0px;
|
||||
left: 6px;
|
||||
}
|
||||
.answer:nth-child(2) {
|
||||
top: 414px;
|
||||
left: 258px;
|
||||
}
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
@include pos(148px, 61px, 50px, 600px);
|
||||
@include bg_pos("qa/prev-btn.png");
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.showResult-btn {
|
||||
@include box(478px, 246px);
|
||||
position: fixed;
|
||||
left: 149px;
|
||||
bottom: 0px;
|
||||
@include bg_pos("qa/showResult-btn.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user