-
+
@@ -93,45 +93,40 @@ onMounted(() => {
@include box(750px, 1180px);
// transform: translateY(-50%);
- .load-icon {
- @include pos(83px, 101px, 325px, 370px);
+ .load-icon{
+ @include pos(101px, 55px, 325px, 370px);
@include bg_pos("load/icon.png");
}
.load-box {
- @include pos(576px, 36px, 87px, 500px);
+ @include pos(512px, 35px, 119px, 450px);
+ border-style: solid;
+ border-width: 2px;
+ border-color: #e17c4d;
border-radius: 20px;
- overflow: hidden;
- padding: 4.5px;
- @include bg_pos("load/bar-box.png");
+ padding: 2px;
.bar {
- @include box(0%, 27px);
- position: relative;
- @include bg_pos("load/bar.png");
- background-size: 551px 27px;
- .bar-icon {
- @include box(35px, 36px);
- position: absolute;
- top: -4.5px;
- left: 95%;
- @include bg_pos("load/bar-icon.png");
- }
+ @include box(0%, 26px);
+ border-radius: 20px;
+ background: linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
+ background-image: -webkit-linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
+
}
}
.load-num {
- @include pos(750px, 50px, 0px, 570px);
+ @include pos(750px, 50px, 0px, 511px);
text-align: center;
font-size: 38px;
- color: rgb(255, 255, 255);
+ color: #ffaf5e;
line-height: 40px;
font-weight: 700;
- background: linear-gradient(to right, #dadada, #ffffff);
+ background: linear-gradient(to right, #f2733a, #ffd667);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
- text-shadow: 0.9px 3.897px 0px rgba(44, 182, 255, 0.004);
+ // letter-spacing: 2px;
}
.btn {
diff --git a/src/components/MyPrize.vue b/src/components/MyPrize.vue
index bd5fcc4..3ee9921 100644
--- a/src/components/MyPrize.vue
+++ b/src/components/MyPrize.vue
@@ -2,28 +2,27 @@
import { debounceTap } from "@/plugins";
import gsap from "gsap";
import { Toast } from "vant";
-import useClipboard from "vue-clipboard3";
+import useClipboard from 'vue-clipboard3'
import { useMainStore } from "@/store";
import { onMounted } from "vue";
// 页面配置初始化
const emit = defineEmits(["MyPrizePage"]);
const userStore = useMainStore();
-const { toClipboard } = useClipboard();
+const { toClipboard } = useClipboard()
const money = ref(userStore.prizeMoney);
const code = ref(userStore.prizeCode);
-const hasPrize = ref(userStore.hasPrize);
-
const copyFn = (event) => {
let e = event.target;
- toClipboard(code.value);
+ toClipboard(code.value)
debounceTap(e, () => {
Toast(`复制成功：${code.value}`);
});
};
+
const hide = (event) => {
let e = event.target;
debounceTap(e, () => {
@@ -48,22 +47,15 @@ onMounted(() => {
-
-
+
{{ loadNum }}%
+
-
@@ -75,76 +67,43 @@ onMounted(() => {
.myPrize-container {
position: relative;
- @include box(683px, 585px);
- @include bg_pos("prize/prize-box.png");
+ @include box(665px, 731px);
+ @include bg_pos("prize/myPrize-box.png");
- .myPrize-has-prize {
- @include pos(683px, 485px, 0px, 130px);
+ .myPrize-money {
+ @include pos(370px, 81px, 139px, 239px);
display: flex;
- flex-direction: column;
- // justify-content: space-around;
+ justify-content: center;
align-items: center;
- color: #0070d9;
+ color: #e95b46;
+ font-weight: 700;
+ font-size: 58px;
+ letter-spacing: 4px;
+ }
- .myPrize-icon {
- @include box(204px, 214px);
- @include bg_pos("prize/lucky-bag.png");
- margin: 20px auto;
- }
+ .myPrize-code-box {
+ @include pos(312px, 52px, 197px, 508px);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
- .myPrize-money {
- align-items: center;
+ .code {
+ font-size: 25px;
font-weight: 700;
- font-size: 28px;
- letter-spacing: 2px;
+ margin-right: 10px;
+ color: #fff6cc;
}
- .myPrize-code-box {
- display: flex;
- flex-direction: row;
- align-items: center;
- width: 70%;
-
- .code {
- font-size: 20px;
- font-weight: 700;
- margin-right: 10px;
- color: #0070d9;
- }
-
- .myPrize-copy-btn {
- @include box(52px, 25px);
- @include bg_pos("prize/copy-btn.png");
- }
- }
-
- .myPrize-tips{
- width: 70%;
- font-size: 20px;
- line-height: 27px;
- // padding: 0px 100px;
-
+ .myPrize-copy-btn {
+ @include box(77px, 39px);
+ @include bg_pos("prize/copy-btn.png");
}
}
- .myPrize-no-prize{
- @include pos(683px, 485px, 0px, 130px);
- display: flex;
- flex-direction: column;
- // justify-content: space-around;
- align-items: center;
- color: #6b6b6b;
- font-size: 50px;
- line-height: 400px;
- pointer-events: none;
- }
-
-
- }
- .myPrize-cls-btn {
- @include box(43px, 43px);
+ .myPrize-cls-btn {
+ @include pos(82px, 82px, 517px, 114px);
@include bg_pos("prize/cls-btn.png");
- margin-top: 50px;
}
+ }
}
\ No newline at end of file
diff --git a/src/components/Question.vue b/src/components/Question.vue
index c121f27..a3d4e1a 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -5,8 +5,6 @@ import { data } from "@/data";
import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
import { useMainStore } from "@/store";
import { subAnswer } from "@/api";
-import Preloader from "@/plugins/Preloader";
-import { pageResultImg } from "@/data/imgList";
// 页面配置初始化
const emit = defineEmits(["QuestionPage"]);
@@ -18,13 +16,13 @@ const questionList = ref(data); //随机打乱题库
const answerList = ref([]); // 答案库统计
const activeId = ref(""); // 当前题目所选答案选项
const showResultBtn = ref(false);
-const isChecked = ref(false);
+const isChecked = ref(false)
// 答题事件
const answerFn = (item, event) => {
let e = event.target.parentElement;
- activeId.value = item.aid; //更新选中状态
- // console.log("选项", item);
+ activeId.value = item.aid; //更新选中状态
+ console.log('选项', item);
debounceTap(e, () => {
let cid = questionList.value[currentId.value].id;
let has = answerList.value.findIndex((obj) => obj.id === cid);
@@ -40,45 +38,51 @@ const answerFn = (item, event) => {
answerList.value[has].answer = item.text;
}
- gsap.set(".option-tips,.analysis", { autoAlpha: 1 });
- gsap.set(".answer-box", { pointerEvents: "none" });
- isChecked.value = true;
- // console.log("currentId.value", currentId.value);
- if (currentId.value == 2) {
- // console.log("over");
- gsap.set(".create-btn", { autoAlpha: 1 });
- } else {
- gsap.set(".next-btn", { autoAlpha: 1 });
+
+ gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
+ gsap.set('.answer-box', { pointerEvents: 'none' })
+ isChecked.value = true
+ console.log('currentId.value',currentId.value);
+ if(currentId.value == 2 ){
+ gsap.set('.create-btn', { display: 'block' })
+ }else{
+ gsap.set('.next-btn', { display: 'block' })
+
}
- });
-};
+
+ })
+
+}
+
// 下一题
const nextQuestion = (event) => {
let e = event.target;
debounceTap(e, () => {
- isChecked.value = false;
- gsap.set(".option-tips,.analysis", { autoAlpha: 0 });
- currentId.value++;
- activeId.value = "";
- gsap.set(".answer-box", { pointerEvents: "initial" });
- gsap.set(".next-btn", { autoAlpha: 0 });
- });
-};
+ isChecked.value = false
+ gsap.set('.option-tips,.analysis', { autoAlpha: 0 })
+ currentId.value++
+ activeId.value = ''
+ gsap.set('.answer-box', { pointerEvents: 'initial' })
+ gsap.set('.next-btn', { display: 'none' })
+
+ })
+
+}
// 查看结果事件
const viewResult = (event) => {
let e = event.target;
debounceTap(e, () => {
// 随机生成海报id
- userStore.updatePosterId(getRandomNumber([1, 2, 3]));
- gsap.set(".question-box", { pointerEvents: "none" });
- Toast("答题结束");
+ userStore.updatePosterId(getRandomNumber([1, 2, 3]))
+ gsap.set('.question-box', { pointerEvents: 'none' })
+ Toast('答题结束')
Toast.loading({
- message: "结果生成中",
+ message: '结果生成中',
duration: 0,
forbidClick: true,
- });
+ })
if (import.meta.env.VITE_MODE != "dev") {
// 提交完成记录
@@ -89,130 +93,96 @@ const viewResult = (event) => {
}
setTimeout(() => {
- Toast.clear();
- gsap.to(".QuestionPage", {
- duration: 0.5,
- autoAlpha: 0,
- onComplete: () => {
+ Toast.clear()
+ gsap.to('.QuestionPage', {
+ duration: 0.5, autoAlpha: 0, onComplete: () => {
emit("QuestionPage", { action: "showResult" });
- },
- });
- }, 1000);
+ }
+ })
+ }, 1000)
});
} else {
setTimeout(() => {
- Toast.clear();
- gsap.to(".QuestionPage", {
- duration: 0.5,
- autoAlpha: 0,
- onComplete: () => {
+ Toast.clear()
+ gsap.to('.QuestionPage', {
+ duration: 0.5, autoAlpha: 0, onComplete: () => {
emit("QuestionPage", { action: "showResult" });
- },
- });
- }, 1000);
+ }
+ })
+ }, 1000)
}
- });
-};
+ })
+}
// 从数组中随机生成一个数字
const getRandomNumber = (arr) => {
var randomIndex = Math.floor(Math.random() * arr.length);
return arr[randomIndex];
-};
+}
+
onMounted(() => {
- gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
- gsap.from(".question-box", { duration: 0.5, y: 30, autoAlpha: 0 });
- gsap.from(".answer-box", {
- duration: 0.5,
- y: 30,
- autoAlpha: 0,
- onComplete: () => {
- // 开始加载答题页面资源
- Preloader({
- name: "加载结果页资源",
- imgs: pageResultImg,
- callback: (progress) => {
- // console.log("进度：", progress);
- },
- }).then((res) => {
- console.log("done!");
- });
- },
- });
- gsap.to(".question-tree", {
- duration: 3,
- transformOrigin: "0% 70%",
- rotation: "-10deg",
- repeat: -1,
- yoyo: true,
- ease: "none",
- });
+ 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' })
+
+
});
-
-
- 已获得¥{{ money }}元现金红包
-
-
- 兑换码：{{ code }}
-
- 兑换流程：前往微信搜索【平安理财服务号】公众号发送“清凉一夏”获取兑奖链接，输入兑换码兑换奖品。
-
- 暂无中奖记录
+
-
¥{{ money }}元
+
+
+
{{ code }}
+
-
+
+
+
+
+
+
+
+
-
-
-
-
@@ -224,188 +194,248 @@ onMounted(() => {
.question-bg {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
- @include bg_pos("qa/bg.jpg");
+ @include bg_pos('qa/bg.jpg');
+
+ .question-bottom-bg {
+ pointer-events: none;
+ @include box(750px, 393px);
+ position: absolute;
+ left: 0px;
+ bottom: 0px;
+ @include bg_pos("qa/bottom-bg.png");
+ }
+
+ .bottom-fan-1 {
+ @include pos(370px, 334px, 545px, 1022px);
+ @include bg_pos('index/fan-3.png');
+ }
+
+ .bottom-fan-2 {
+ @include pos(350px, 205px, 494px, 1128px);
+ @include bg_pos('index/fan-4.png');
+ }
}
+
.question-container {
- @include pos(750px, 1180px, 0px, 50%);
+ @include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
@include flexCen();
- justify-content: space-around;
+
+ .question-lantern-icon {
+ // pointer-events: none;
+ @include pos(349px, 443px, 489px, 49px);
+ @include bg_pos('qa/lantern-icon.png');
+ }
+
+ .container-fan-1 {
+ pointer-events: none;
+ @include pos(235px, 574px, 0px, 60px);
+ @include bg_pos("index/fan-1.png");
+ }
+
+ .container-fan-2 {
+ pointer-events: none;
+ @include pos(316px, 317px, -205px, 405px);
+ @include bg_pos("index/fan-2.png");
+ }
.question-box {
- @include box(696px, 441px);
+ @include pos(656px, 913px, 47px, 339px);
@include bg_pos("qa/question-box.png");
- position: relative;
- .question-tree {
- @include pos(277px, 232px, -100px, -141px);
- @include bg_pos("qa/tree.png");
+ .qa-number {
+ @include pos(100px, 56px, 278px, 89px);
+ font-size: 40px;
+ font-style: italic;
+ color: #c61a1a;
+ font-weight: 700;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
- .question-con {
- @include pos(696px, 441px, 0px, 0px);
- @include bg_pos("qa/question-box.png");
+ .qa-question-box {
+ @include pos(570px, 700px, 43px, 194px);
+ display: flex;
+ flex-direction: column;
+ // justify-content: space-around;
+ justify-content: flex-start;
+ align-items: center;
- .qa-number {
- @include pos(696px, 86px, 0px, 0px);
- font-size: 40px;
- color: #ffffff;
- font-weight: 700;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: justifyLeft;
- text-shadow: 0px 6px 6px rgba(49, 116, 246, 0.9);
- }
-
- .qa-question-box {
- @include pos(626px, 243px, 37px, 177px);
+ // 问题样式
+ .question {
display: flex;
flex-direction: column;
+ // margin-bottom: 10px;
+ height: 270px;
justify-content: center;
- align-items: center;
- // 问题样式
.question-text {
width: 100%;
- font-family: "HarmonyOS_Sans_SC_Regular";
- font-size: 30px;
- letter-spacing: 1.5px;
- color: #065ac6;
+ font-family: 'DouyinSansBold';
+ font-size: 35px;
+ color: rgb(255, 255, 255);
text-align: center;
- padding: 40px;
- text-align: justify;
- line-height: 55px;
+ 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);
}
}
+
+ // 选项样式
+ .answer-box {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ height: 200px;
+
+ // 选中状态
+ .correct-bg {
+ 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%);
+
+ .answer-option {
+ color: #96100f;
+ }
+
+ .answer-text-box {
+ color: #96100f !important;
+ }
+
+ }
+
+ .incorrect-bg {
+ 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);
+
+ .answer-option {
+ color: #ffe2ad;
+ }
+
+ .answer-text-box {
+ color: #ffe2ad !important;
+ }
+
+ }
+
+
+
+ .answer {
+ @include box(476px, 92px);
+ position: relative;
+ border-radius: 47.5px;
+ border: 2px solid rgb(255, 225, 172);
+ // margin-bottom: 35px;
+ justify-content: space-between;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+
+ .click-area {
+ @include pos(476px, 92px, 0px, 0px);
+ border-radius: 47.5px;
+ }
+
+
+ .option-tips {
+ @include box(60px, 60px);
+ visibility: hidden;
+
+ .correct {
+ @include box(100%, 100%);
+ @include bg_pos("qa/correct.png");
+ }
+
+ .incorrect {
+ @include box(100%, 100%);
+ @include bg_pos("qa/incorrect.png");
+ }
+ }
+
+
+
+ .answer-text-box {
+ @include box(335px, 100%);
+ font-family: 'HarmonyOS_Sans_SC_Regular';
+ color: #ffe2ad;
+ font-size: 28px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .answer-text {
+ width: 100%;
+ // text-align: center;
+ padding-left: 40px;
+ }
+
+ }
+ }
+
+
+
+
+
+ }
+
+ // 解析样式
+ .analysis {
+ visibility: hidden;
+ width: 95%;
+ font-family: 'HarmonyOS_Sans_SC_Regular';
+ font-size: 20px;
+ color: #ffe2ad;
+ text-align: center;
+ // padding: 20px;
+ height: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+
+ .next-btn{
+ @include box(234px,65px);
+ @include bg_pos("qa/next-btn.png");
+ display: none;
+
+ }
+ .create-btn{
+ @include box(234px,65px);
+ @include bg_pos("qa/create-btn.png");
+ display: none;
+
+ }
+
}
}
- // 选项样式
- .answer-box {
- @include box(750px, 205px);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- color: #065ac6;
- font-size: 26px;
- line-height: 80px;
- margin-top: 40px;
- padding: 0 50px;
- font-family: "HarmonyOS_Sans_SC_Regular";
-
-
-
- .answer {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- line-height: 75px;
- height: 74px;
- padding: 0px 30px;
- border-radius: 50px;
- border: 1px solid rgb(255, 255, 255);
- background-color: rgba(255, 255, 255, 0.361);
- position: relative;
- box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.361) inset;
-
- .answer-text {
- white-space: nowrap;
- }
-
- .bubble-1 {
- @include pos(55px, 5px, 88px, 7px);
- @include bg_pos("qa/bubble-1.png");
- }
-
- .bubble-left {
- @include pos(26px, 15px, 88px, 72px);
- border: 10px solid transparent;
- border-top-color: rgba(255, 255, 255, 0.9);
- border-bottom: 0;
- margin-left: -10px;
- margin-bottom: -10px;
- // @include bg_pos("qa/jiao-1.png");
- }
-
- .bubble-right {
- @include box(26px, 15px);
- border: 10px solid transparent;
- border-top-color: rgba(255, 255, 255, 0.9);
- border-bottom: 0;
- margin-left: -5px;
- margin-bottom: -5px;
- position: absolute;
- top: 72px;
- right: 88px;
- }
-
- .click-area {
- @include pos(100%, 100%, 0px, 0px);
- border-radius: 47.5px;
- // background: rgba($color: #000000, $alpha: 0.5);
- }
- }
-
- .correct-text {
- color: #e74c00;
- // background-color: rgba(255, 255, 255, 0.471);
- box-shadow: 5px 5px 5px rgba(255, 240, 192, 0.471) inset;
- }
-
- .option-tips {
- @include box(40px, 40px);
- visibility: hidden;
-
- .correct {
- @include box(74px, 74px);
- @include bg_pos("qa/correct.png");
- position: absolute;
- right: -20px;
- top: 0px;
- }
-
- .incorrect {
- @include box(74px, 74px);
- @include bg_pos("qa/incorrect.png");
- position: absolute;
- right: -20px;
- top: 0px;
- }
- }
+ .question-gold-icon-1 {
+ pointer-events: none;
+ @include pos(135px, 128px, 604px, 773px);
+ @include bg_pos("qa/gold-icon.png");
}
- // 解析样式
- .analysis {
- visibility: hidden;
- width: 95%;
- font-family: "HarmonyOS_Sans_SC_Regular";
- font-size: 25px;
- color: #e74c00;
- text-align: justify;
- padding: 10px 50px;
- // height: 100px;
- .analysis-icon {
- display: inline-block;
- @include box(32px, 31px);
- @include bg_pos("qa/analysis-icon.png");
- }
+ .question-gold-icon-2 {
+ pointer-events: none;
+ @include pos(276px, 241px, -70px, 1089px);
+ @include bg_pos("qa/gold-icon-2.png");
}
- .next-btn {
- @include box(256px, 70px);
- @include bg_pos("qa/next-btn.png");
- // display: none;
- visibility: hidden;
- }
- .create-btn {
- @include box(256px, 70px);
- @include bg_pos("qa/create-btn.png");
- // display: none;
- visibility: hidden;
- }
}
}
\ No newline at end of file
diff --git a/src/components/Result.vue b/src/components/Result.vue
index f1bde85..308c5cb 100644
--- a/src/components/Result.vue
+++ b/src/components/Result.vue
@@ -10,316 +10,372 @@ import { reactive } from "vue";
// 页面配置初始化
const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore();
-const posterId = ref(Math.floor(Math.random() * 3) + 1); //海报背景id：1～3
-
-const posterTextSrc = new URL(`../assets/images/result/poster-text.png`, import.meta.url).href
+const posterId = ref(userStore.posterId); //海报背景id：1～4
const posterImgList = reactive([
- new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
- new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
- new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
-]);
+ new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
+ new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
+ new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
+ new URL(`../assets/images/result/poster-4.jpg`, import.meta.url).href,
+])
// 生成二维码逻辑
const eqcodePic = ref();
onMounted(() => {
- console.log("posterId:", posterId.value);
- let eqCodeUrl = import.meta.env.VITE_URL;
- QRCode.toDataURL(eqCodeUrl)
- .then((url) => {
- eqcodePic.value = url;
- // console.log("eq", eqcodePic.value);
- })
- .catch((err) => {
- console.error(err);
+ console.log('posterId:',posterId.value);
+ let eqCodeUrl = import.meta.env.VITE_URL;
+ QRCode.toDataURL(eqCodeUrl)
+ .then((url) => {
+ eqcodePic.value = url;
+ // console.log("eq", eqcodePic.value);
+ })
+ .catch((err) => {
+ console.error(err);
+ });
+
+ gsap.from(".result-bg", {
+ duration: 0.7,
+ scale: 1.2,
+ autoAlpha: 0,
});
- gsap.from(".result-bg", {
- duration: 0.7,
- scale: 1.2,
- autoAlpha: 0,
- });
- gsap.from(".result-title", {
- duration: 0.7,
- y: 20,
- autoAlpha: 0,
- delay:0.3,
- });
- gsap.from(".r-text", {
- duration: 0.7,
- scale: .5,
- autoAlpha: 0,
- delay:0.5,
- });
- gsap.from(".create-poster", {
- duration: 0.7,
- y: 20,
- autoAlpha: 0,
- delay:1,
- onComplete:()=>{
- gsap.to('.create-poster',{duration:1,scale:'0.9',repeat:-1,yoyo:true,ease:'bounce.in'})
+ gsap.from(".result-larnten-box", {
+ duration: 0.7,
+ scale: 1.4,
+ autoAlpha: 0,
+ });
+ gsap.from(".result-larnten", {
+ duration: 0.7,
+ scale: 0.7,
+ autoAlpha: 0,
+ });
+ gsap.from(".result-blessing-1", {
+ duration: 0.7,
+ y: -30,
+ autoAlpha: 0,
+ delay:0.5
+ });
+ gsap.from(".result-blessing-2", {
+ duration: 0.7,
+ y: -30,
+ autoAlpha: 0,
+ delay:0.7
+ });
+ gsap.from(".result-product", {
+ duration: 0.7,
+ y: -30,
+ autoAlpha: 0,
+ delay:1
+ });
+ gsap.from(".result-tips", {
+ duration: 0.7,
+ y: -30,
+ autoAlpha: 0,
+ delay:1.2
+ });
+ gsap.from(".create-poster", {
+ duration: 0.7,
+ y: -30,
+ autoAlpha: 0,
+ delay:1.4,
+ onComplete:()=>{
+ // gsap.to('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
+ let gl = gsap.timeline({repeat:-1,yoyo:true})
+ gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'3deg',ease:'none'})
+ gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'0deg',ease:'none'})
+ gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'-3deg',ease:'none'})
+ // gsap.fo('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
- }
- });
+ }
+ });
});
// 生成海报逻辑
const createPoster = (event) => {
- let e = event.target.parentElement;
- debounceTap(e, () => {
- // 海报生成
- posterCreate(
- { width: 750, height: 1334 }, //海报尺寸
- // 海报素材，按顺序依次渲染
- [
- // 背景
- {
- name: "bg",
- src: posterImgList[posterId.value - 1],
- pos: { w: 750, h: 1334, x: 0, y: 0 },
- },
- // 二维码
- {
- name: "eqcode",
- src: eqcodePic.value,
- pos: { w: 194, h: 195, x: 502, y: 1090 },
- },
- // 文案
- {
- name: "text",
- src: posterTextSrc,
- pos: { w: 347, h: 155, x: 81, y: 1113 },
- },
- ]
- );
+ let e = event.target;
+ debounceTap(e, () => {
+ // 海报生成
+ posterCreate(
+ { width: 750, height: 1334 }, //海报尺寸
+ // 海报素材，按顺序依次渲染
+ [
+ // 背景
+ {
+ name: "bg",
+ src: posterImgList[posterId.value-1],
+ pos: { w: 750, h: 1334, x: 0, y: 0 },
+ },
+ // 二维码
+ {
+ name: "eqcode",
+ src: eqcodePic.value,
+ pos: { w: 164, h: 164, x: 159, y: 1122 },
+ },
+ ],
+ );
- // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
- });
+ // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
+
+ });
};
// 去抽奖
const goDraw = (event) => {
- let e = event.target.parentElement;
- console.log('e',e);
- debounceTap(e, () => {
- if (userStore.hasDraw) {
- emit("ResultPage", { action: "showDraw" });
- } else {
- Toast("今日暂无抽奖机会");
- }
- });
+ let e = event.target;
+ debounceTap(e, () => {
+ if (userStore.hasDraw) {
+ emit("ResultPage", { action: "showDraw" });
+ } else {
+ Toast("今日暂无抽奖机会");
+ }
+ });
};
// 隐藏海报弹窗
const hidePop = (event) => {
- let e = event.target;
- debounceTap(e, () => {
- gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
- });
+ let e = event.target;
+ debounceTap(e, () => {
+ gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
+ });
};
// 展示分享
const goShare = (event) => {
- let e = event.target.parentElement;
- debounceTap(e, () => {
- gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
- });
+ let e = event.target;
+ debounceTap(e, () => {
+ gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
+ });
};
// 隐藏分享提示
const hideShare = () => {
- gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
+ gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
};
- 第{{ questionList[currentId].id }}题
-
-
-
-
+
+
+
-
- {{ questionList[currentId].id }}
+
+
+
+
+
+
{{ item }}
+ 打一系列产品
+
+
+
+
+
+
+
+ {{ item.aid }}.{{ a }}
+
+
+
+
+
+
+
+
+
+
{{li}}
+
-
-
-
-
-
+
+
+
-
-
- {{ item.aid }}.{{ a }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
-
+
+
+
+
+
+ ![]()
+
+ *长按保存海报
+
+
+
+
-
-
-
\ No newline at end of file
diff --git a/src/components/Rule.vue b/src/components/Rule.vue
index c0f8f5a..0a31fb5 100644
--- a/src/components/Rule.vue
+++ b/src/components/Rule.vue
@@ -33,27 +33,31 @@ onMounted(() => {
- ![]()
-
+
+
- *长按保存海报
-
-
-
-
-
-
-
-
-
-
活动时间：
- 2024年8月14日8:30-2024年8月16日17:30
+ 活动时间：2024年2月23日——2月25日
活动奖励：微信红包
活动攻略：
- 1、进入活动参加【好“理”在手，邂逅清凉一夏】答题，共设计3道题目，全部选择完毕后即可参与抽奖活动；
+ 1、【猜灯谜闹元宵】活动共设计3道题目，全部选择完毕后即可获取测试结果。参与抽奖活动；
- 2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。
+ 2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。
领奖说明：
- 1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“清凉一夏”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
+ 1、中奖后在中奖页面复制兑换码，前往[平安理财服务号]消息框输入“元宵快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；
3、中奖人请在活动结束前进行兑换，逾期视为弃权。
+ 其他：
+
+ 活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
+
+ 说明：平安理财有权对活动规则进行解释
-
其他说明：
+ 活动规则：
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
@@ -94,27 +98,27 @@ onMounted(() => {
.rule-container {
position: relative;
- @include box(664px, 861px);
+ @include box(612px, 794px);
overflow: hidden;
.content {
.rule-content {
- @include box(663px, 861px);
+ @include box(612px, 794px);
@include bg_pos("rule/rule-box.png");
position: relative;
overflow: hidden;
.rule-text-area {
- @include pos(663px, 645px, 0px, 131px);
+ @include pos(612px, 676px, 0px, 101px);
overflow: hidden;
// overflow-y: scroll;
- padding: 0px 50px;
+ padding: 0px 20px;
.part {
- color: #0070d9;
- font-size: 24px;
- line-height: 40px;
+ color: #a31b15;
+ font-size: 20px;
+ line-height: 35px;
margin-top: 30px;
text-align: justify;
padding: 0 10px;
@@ -123,7 +127,7 @@ onMounted(() => {
.blod{
font-weight: 700;
- color: #0070d9;
+ color: #6c0500;
}
.margin-bottom-area{
@@ -134,18 +138,18 @@ onMounted(() => {
}
.rule-arrow {
- @include pos(149px, 84px, 257px, 712px);
+ @include pos(149px, 84px, 231px, 682px);
@include bg_pos("rule/arrow.png");
pointer-events: none;
}
.rule-bottom-bg {
// visibility: hidden;
- @include pos(600px, 102px, 30px, 728px);
+ @include pos(588px, 102px, 12px, 682px);
pointer-events: none;
- background-image: -webkit-linear-gradient( 90deg, rgba(0, 112, 217, 0.1) , rgba(255, 255, 255, 0.1) 100%);
+ background-image: -webkit-linear-gradient( 90deg, rgba(255,238,186,0.7) , rgba(255, 255, 255, 0.1) 100%);
}
.rule-icon {
- @include pos(165px, 180px, 517px, 666px);
+ @include pos(118px, 146px, 511px, 25px);
@include bg_pos("rule/icon.png");
pointer-events: none;
}
diff --git a/src/data/imgList.js b/src/data/imgList.js
index b0d29cd..a77f800 100644
--- a/src/data/imgList.js
+++ b/src/data/imgList.js
@@ -1,100 +1,98 @@
-const load = ["load/icon.png", "load/bg.jpg"];
-const page = [
- "index/logo.png",
- "index/rule-btn.png",
- "index/sub-title.png",
- "index/cloud-2.png",
- "index/prize-btn.png",
- "index/cloud-1.png",
- "index/bg.jpg",
- "index/start-btn.png",
- "index/tree-1.png",
- "index/title.png",
- "index/island.png",
-
- "rule/cls-btn.png",
- "rule/arrow.png",
- "rule/rule-box.png",
- "rule/icon.png",
-];
-
-// 问题页面
-const pageQA = [
- "qa/bubble-1.png",
- "qa/analysis-icon.png",
- "qa/create-btn.png",
- "qa/next-btn.png",
- "qa/incorrect.png",
- "qa/correct.png",
- "qa/question-box.png",
- "qa/tree.png",
- "qa/bg.jpg",
+const load = [
+ 'load/icon.png',
+ 'load/bg.jpg',
]
-// 结果页面
-const pageResult = [
- "prize/copy-btn2.png",
- "prize/copy-btn.png",
- "prize/cls-btn.png",
- "prize/got-btn.png",
- "prize/no-get-btn.png",
- "prize/draw-text.png",
- "prize/tips.png",
- "prize/no-prize.png",
- "prize/lucky-bag.png",
- "prize/star.png",
- "prize/light.png",
- "prize/prize-box.png",
- "prize/myPrize-box.png",
- "prize/draw-box.png",
- "result/cls-btn.png",
- "result/poster-text.png",
- "result/go-draw-btn.png",
- "result/go-share-btn.png",
- "result/text-1.png",
- "result/title.png",
- "result/create-btn.png",
- "result/text-3.png",
- "result/text-2.png",
- "result/r-bg-2.jpg",
- "result/r-bg-1.jpg",
- "result/r-bg-3.jpg",
- // "result/poster-1.jpg",
- // "result/poster-3.jpg",
- // "result/poster-2.jpg",
+const page = [
+
+ 'index/prize-btn.png',
+ 'index/cloud.png',
+ 'index/firework.png',
+ 'index/rule-btn.png',
+ 'index/start-btn.png',
+ 'index/fan-3.png',
+ 'index/title.png',
+ 'index/fan-4.png',
+ 'index/pet-icon.png',
+ 'index/fan-2.png',
+ 'index/fan-1.png',
+ 'index/windows.png',
+ 'index/bottom-bg.png',
+ 'index/bg.jpg',
+
+ 'prize/tips.png',
+ 'prize/cls-btn.png',
+ 'prize/copy-btn.png',
+ 'prize/draw-text.png',
+ 'prize/light.png',
+ 'prize/draw-box.png',
+ 'prize/myPrize-box.png',
+ 'prize/no-prize.png',
+ 'prize/star.png',
+
+ 'qa/correct.png',
+ 'qa/gold-icon.png',
+ 'qa/incorrect.png',
+ 'qa/gold-icon-2.png',
+ 'qa/next-btn.png',
+ 'qa/create-btn.png',
+ 'qa/lantern-icon.png',
+ 'qa/question-box.png',
+ 'qa/bottom-bg.png',
+ 'qa/bg.jpg',
+
+ 'result/tips.png',
+ 'result/product-3.png',
+ 'result/share-tips.svg',
+ 'result/text.png',
+ 'result/larnten-box-1.png',
+ 'result/larnten-box-2.png',
+ 'result/larnten-box-3.png',
+ 'result/poster-1.jpg',
+ 'result/poster-2.jpg',
+ 'result/poster-3.jpg',
+ 'result/preveiw-1.png',
+ 'result/preveiw-2.png',
+ 'result/preveiw-3.png',
+ 'result/product-1.png',
+ 'result/product-2.png',
+ 'result/blessing-text-1-1.png',
+ 'result/blessing-text-1-2.png',
+ 'result/blessing-text-2-1.png',
+ 'result/blessing-text-2-2.png',
+ 'result/blessing-text-3-1.png',
+ 'result/blessing-text-3-2.png',
+ 'result/cls-btn.png',
+ 'result/create-btn.png',
+ 'result/go-draw-btn.png',
+ 'result/go-share-btn.png',
+ 'result/larnten-1.png',
+ 'result/larnten-2.png',
+ 'result/larnten-3.png',
+ 'result/bg.jpg',
+ 'rule/arrow.png',
+ 'rule/cls-btn.png',
+ 'rule/icon.png',
+ 'rule/rule-box.png',
]
// 处理为vite引入图片格式
function imgCreate(url, img) {
- let i = new URL(`../assets/images/${url}`, import.meta.url).href;
- img.push(i);
+ let i = new URL(`../assets/images/${url}`, import.meta.url).href
+ img.push(i)
}
+const loadImg = []
+const pageImg = []
-
-
-const loadImg = [];
-const pageImg = [];
-const pageQAImg = [];
-const pageResultImg = [];
-
-
-load.forEach((element) => {
- imgCreate(element, loadImg);
+load.forEach(element => {
+ imgCreate(element, loadImg)
});
-page.forEach((element) => {
- imgCreate(element, pageImg);
+page.forEach(element => {
+ imgCreate(element, pageImg)
});
-pageQA.forEach((element) => {
- imgCreate(element, pageQAImg);
-});
-
-pageResult.forEach((element) => {
- imgCreate(element, pageResultImg);
-});
-
-export { loadImg, pageImg,pageQAImg,pageResultImg };
+export { loadImg, pageImg }
\ No newline at end of file
diff --git a/src/data/index.js b/src/data/index.js
index a0f0fda..ce8b020 100644
--- a/src/data/index.js
+++ b/src/data/index.js
@@ -1,72 +1,73 @@
export const data = [
{
id: 1,
- type: '1',
question: [
- '低波稳健类产品通常是指配置大比例低波资产，不投资权益类资产的产品 \n，受债市波动影响较小且不受股市影响。低波稳健类产品的产品风险评级是哪个？',
+ '兄弟好多个，个个都爱赢',
+ '目标很合适，止盈有方法',
],
answer: [
{
aid: 'A',
text: [
- 'R1低风险或R2中低风险',
+ '灵活策略目标盈',
],
result:'correct',
},
{
aid: 'B',
text: [
- 'R4及以上高风险',
+ '灵活策略目标强',
],
result:'incorrect',
},
],
- analysis: ['解析：选择B。虽然市场热点可能带来诱人的收益，但理财的基本原则是风险管理。通过将投资分散在不同的理财产品和市场，可以降低单一投资的风险，争取资产增长的机会。']
},
{
id: 2,
question: [
- '经常热衷于购买现金管理类产品的投资者，如果希望进行“稳健的理财进阶”，需要牺牲一定流动性换取收益空间，以下哪类产品可以帮助实现：',
+ '固收旗舰团，兄弟有志气',
+ '三个金牛奖，开启财富门',
],
answer: [
{
aid: 'A',
text: [
- '最短持有期类理财产品',
+ '启航',
],
result:'correct',
},
{
aid: 'B',
text: [
- '混合类理财产品',
+ '远航',
],
result:'incorrect',
},
],
- analysis: ['解析：选择B。现金类产品具有高流动性的特征，更适合日常流动资金。但在长期限选择中，固收理财拥有较大的投资范围和空间，运用策略提供稳健体验，有效平衡风险，力争增厚收益机会，闲钱再进阶。因此不同的资金用途记得匹配不同产品噢。']
+ analysis: ['（注：截止2024年2月19日，启航','系列历史到期正收益概率100%）']
},
{
id: 3,
question: [
- '低波稳健类理财通常会通过估值、资产、策略三方面实现“低波稳健”的特征，以下哪个描述是正确的：',
+ '兄弟好多个，口碑都很好',
+ '考试常满分，稳重不轻浮',
],
answer: [
{
aid: 'A',
text: [
- '精选存单存款等低波资产的理财产品更稳健',
+ '稳健精选（封闭型）',
],
result:'correct',
},
{
aid: 'B',
text: [
- '混合估值法不能在市场震荡时帮助净值更平稳',
+ '稳妥精选',
],
result:'incorrect',
},
],
- analysis: ['解析：选择A。最短持有期理财产品拥有较为灵活的申赎机制，在持有时间超过最短持有的时间要求后，随时可发起赎回，闲置时力争收益机会，用钱时满足你的流动性需求。']
+ analysis: ['（注：截止2024年2月19日，稳健精选系列（封闭型）','历史到期业绩基准达标率100%）']
},
]
diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue
index 42b85a2..2cd2af9 100644
--- a/src/page/Home/App.vue
+++ b/src/page/Home/App.vue
@@ -33,13 +33,6 @@ import { useMainStore } from "@/store";
const userStore = useMainStore();
const showLoad = ref(false);
-const showIndex = ref(false);
-const showQuestion = ref(false);
-const showMyPrize = ref(false);
-const showDraw = ref(false);
-const showRule = ref(false);
-const showResult = ref(false);
-
const loadFn = (item) => {
if (item.action == "hide") {
showLoad.value = false;
@@ -47,6 +40,7 @@ const loadFn = (item) => {
}
};
+const showIndex = ref(false);
const indexFn = (item) => {
if (item.action == "hide") {
showIndex.value = false;
@@ -63,6 +57,7 @@ const indexFn = (item) => {
}
};
+const showQuestion = ref(false);
const questionFn = (item) => {
if (item.action == "hide") {
showQuestion.value = false;
@@ -74,18 +69,21 @@ const questionFn = (item) => {
}
};
+const showMyPrize = ref(false);
const myPrizeFn = (item) => {
if (item.action == "hide") {
showMyPrize.value = false;
}
};
+const showDraw = ref(false);
const drawFn = (item) => {
if (item.action == "hide") {
showDraw.value = false;
}
};
+const showResult = ref(false);
const resultFn = (item) => {
if (item.action == "hide") {
showResult.value = false;
@@ -95,6 +93,7 @@ const resultFn = (item) => {
}
};
+const showRule = ref(false);
const ruleFn = (item) => {
if (item.action == "hide") {
showRule.value = false;
@@ -224,7 +223,7 @@ const playMusic = () => {