-
+
@@ -93,40 +93,45 @@ onMounted(() => {
@include box(750px, 1180px);
// transform: translateY(-50%);
- .load-icon{
- @include pos(101px, 55px, 325px, 370px);
+ .load-icon {
+ @include pos(83px, 101px, 325px, 370px);
@include bg_pos("load/icon.png");
}
.load-box {
- @include pos(512px, 35px, 119px, 450px);
- border-style: solid;
- border-width: 2px;
- border-color: #e17c4d;
+ @include pos(576px, 36px, 87px, 500px);
border-radius: 20px;
- padding: 2px;
+ overflow: hidden;
+ padding: 4.5px;
+ @include bg_pos("load/bar-box.png");
.bar {
- @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%);
-
+ @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");
+ }
}
}
.load-num {
- @include pos(750px, 50px, 0px, 511px);
+ @include pos(750px, 50px, 0px, 570px);
text-align: center;
font-size: 38px;
- color: #ffaf5e;
+ color: rgb(255, 255, 255);
line-height: 40px;
font-weight: 700;
- background: linear-gradient(to right, #f2733a, #ffd667);
+ background: linear-gradient(to right, #dadada, #ffffff);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
- // letter-spacing: 2px;
+ text-shadow: 0.9px 3.897px 0px rgba(44, 182, 255, 0.004);
}
.btn {
diff --git a/src/components/MyPrize.vue b/src/components/MyPrize.vue
index 3ee9921..517ca03 100644
--- a/src/components/MyPrize.vue
+++ b/src/components/MyPrize.vue
@@ -2,27 +2,26 @@
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 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, () => {
@@ -49,13 +48,18 @@ onMounted(() => {
-
+
{{ loadNum }}%
-
@@ -67,43 +71,63 @@ onMounted(() => {
.myPrize-container {
position: relative;
- @include box(665px, 731px);
- @include bg_pos("prize/myPrize-box.png");
+ @include box(683px, 585px);
+ @include bg_pos("prize/prize-box.png");
- .myPrize-money {
- @include pos(370px, 81px, 139px, 239px);
+ .myPrize-has-prize {
+ @include pos(683px, 485px, 0px, 130px);
display: flex;
- justify-content: center;
+ flex-direction: column;
+ // justify-content: space-around;
align-items: center;
- color: #e95b46;
- font-weight: 700;
- font-size: 58px;
- letter-spacing: 4px;
- }
+ color: #0070d9;
- .myPrize-code-box {
- @include pos(312px, 52px, 197px, 508px);
- display: flex;
- flex-direction: row;
- align-items: center;
+ .myPrize-icon {
+ @include box(204px, 214px);
+ @include bg_pos("prize/lucky-bag.png");
+ margin: 20px auto;
+ }
- .code {
- font-size: 25px;
+ .myPrize-money {
+ align-items: center;
font-weight: 700;
- margin-right: 10px;
- color: #fff6cc;
+ font-size: 28px;
+ letter-spacing: 2px;
}
- .myPrize-copy-btn {
- @include box(77px, 39px);
- @include bg_pos("prize/copy-btn.png");
+ .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(77px, 39px);
+ @include bg_pos("prize/copy-btn.png");
+ }
+ }
+
+ .myPrize-tips{
+ width: 70%;
+ font-size: 20px;
+ // padding: 0px 100px;
+
}
}
- .myPrize-cls-btn {
- @include pos(82px, 82px, 517px, 114px);
- @include bg_pos("prize/cls-btn.png");
- }
+
}
+ .myPrize-cls-btn {
+ @include box(43px, 43px);
+ @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 a3d4e1a..4371e36 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -16,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);
@@ -38,51 +38,45 @@ 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 ){
- gsap.set('.create-btn', { display: 'block' })
- }else{
- gsap.set('.next-btn', { display: 'block' })
-
+ 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 });
}
-
- })
-
-}
-
+ });
+};
// 下一题
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', { display: 'none' })
-
- })
-
-}
+ 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 });
+ });
+};
// 查看结果事件
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") {
// 提交完成记录
@@ -93,96 +87,108 @@ 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, scale: 0.4, autoAlpha: 0, })
- gsap.to('.question-lantern-icon', { duration: 5, transformOrigin: '100% 0%', rotation: '10deg', repeat: -1, yoyo: true, ease: 'none' })
-
-
+ 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 });
+ gsap.to('.question-tree', { duration: 3, transformOrigin: '0% 70%', rotation: '-10deg', repeat: -1, yoyo: true, ease: 'none' })
});
¥{{ money }}元
-
-
+
{{ code }}
-
+
+
+
-
+
已获得¥{{ money }}元现金红包
+
+
+ 兑换码：{{ code }}
+
+ 兑换流程：前往微信搜索【平安理财服务号】公众号发送“清凉一夏”获取兑奖链接，输入兑换码兑换奖品。
-
-
-
-
-
+
-
-
-
-
-
{{ questionList[currentId].id }}
+
+
+
+
@@ -194,7 +200,7 @@ 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;
@@ -207,235 +213,190 @@ onMounted(() => {
.bottom-fan-1 {
@include pos(370px, 334px, 545px, 1022px);
- @include bg_pos('index/fan-3.png');
+ @include bg_pos("index/fan-3.png");
}
.bottom-fan-2 {
@include pos(350px, 205px, 494px, 1128px);
- @include bg_pos('index/fan-4.png');
+ @include bg_pos("index/fan-4.png");
}
}
-
.question-container {
- @include pos(750px, 1624px, 0px, 50%);
+ @include pos(750px, 1180px, 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');
- }
+ .question-box{
+ @include box(696px, 441px);
+ @include bg_pos("qa/question-box.png");
+ position: relative;
- .container-fan-1 {
- pointer-events: none;
- @include pos(235px, 574px, 0px, 60px);
- @include bg_pos("index/fan-1.png");
- }
+ .question-tree{
+ @include pos(277px, 232px,-100px,-141px);
+ @include bg_pos("qa/tree.png");
+ }
- .container-fan-2 {
- pointer-events: none;
- @include pos(316px, 317px, -205px, 405px);
- @include bg_pos("index/fan-2.png");
- }
-
- .question-box {
- @include pos(656px, 913px, 47px, 339px);
+ .question-con {
+ @include pos(696px, 441px,0px,0px);
@include bg_pos("qa/question-box.png");
.qa-number {
- @include pos(100px, 56px, 278px, 89px);
+ @include pos(696px, 86px, 0px, 0px);
font-size: 40px;
- font-style: italic;
- color: #c61a1a;
+ 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(570px, 700px, 43px, 194px);
+ @include pos(626px, 243px, 37px, 177px);
display: flex;
flex-direction: column;
- // justify-content: space-around;
- justify-content: flex-start;
+ justify-content: center;
align-items: center;
// 问题样式
- .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;
- 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;
+ .question-text {
+ width: 100%;
+ font-family: "HarmonyOS_Sans_SC_Regular";
+ font-size: 30px;
+ letter-spacing: 1.5px;
+ color: #065ac6;
text-align: center;
- // padding: 20px;
- height: 100px;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
+ padding: 40px;
+ text-align: justify;
+ line-height: 55px;
+ }
+ }
+ }
+ }
+
+
+ // 选项样式
+ .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;
+
+ .bubble-1 {
+ @include pos(55px, 5px, 88px, 7px);
+ @include bg_pos("qa/bubble-1.png");
}
- .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;
-
+ .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: 20px;
+ 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 copy.vue b/src/components/Result copy.vue
new file mode 100644
index 0000000..308c5cb
--- /dev/null
+++ b/src/components/Result copy.vue
@@ -0,0 +1,381 @@
+
+
+
+ 第{{ questionList[currentId].id }}题
-
+
+
-
+
+
- {{ item }}
-
- 打一系列产品
+
+ {{ item }}
-
-
-
+
-
+
-
-
- {{ item.aid }}.{{ a }}
-
-
-
-
-
-
-
+
-
+
+
-
-
-
+
+
+ {{ item.aid }}.{{ a }}
-
-
-
{{li}}
+
+
-
-
+
+
+
+
+
+
+
+
+
+ {{ li }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Result.vue b/src/components/Result.vue
index 308c5cb..759c457 100644
--- a/src/components/Result.vue
+++ b/src/components/Result.vue
@@ -10,372 +10,294 @@ import { reactive } from "vue";
// 页面配置初始化
const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore();
-const posterId = ref(userStore.posterId); //海报背景id：1～4
+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 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-4.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,
+]);
// 生成二维码逻辑
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);
- });
-
- gsap.from(".result-bg", {
- duration: 0.7,
- scale: 1.2,
- autoAlpha: 0,
+ 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-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'})
-
- }
- });
+ gsap.from(".result-bg", {
+ duration: 0.7,
+ scale: 1.2,
+ autoAlpha: 0,
+ });
});
// 生成海报逻辑
const createPoster = (event) => {
- 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 },
- },
- ],
- );
+ 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: 337, h: 117, x: 81, y: 1133 },
+ },
+ ]
+ );
- // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
-
- });
+ // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
+ });
};
// 去抽奖
const goDraw = (event) => {
- let e = event.target;
- debounceTap(e, () => {
- if (userStore.hasDraw) {
- emit("ResultPage", { action: "showDraw" });
- } else {
- Toast("今日暂无抽奖机会");
- }
- });
+ let e = event.target.parentElement;
+ console.log('e',e);
+ 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;
- 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 });
};
-
+
+
+
+
+
+ ![]()
+
+ *长按保存海报
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+
-
+
+
-
-
-
-
-
- ![]()
-
- *长按保存海报
-
-
-
-
+
+
+
-
-
-
-
+
+
\ No newline at end of file
diff --git a/src/components/Rule.vue b/src/components/Rule.vue
index 0a31fb5..032ccc0 100644
--- a/src/components/Rule.vue
+++ b/src/components/Rule.vue
@@ -39,14 +39,14 @@ onMounted(() => {
点击右上角分享给你的好友！
+
+
+
+ ![]()
+
*长按保存海报
+
+
+
+
+
+
+
+
+ 活动攻略：
- 1、【猜灯谜闹元宵】活动共设计3道题目，全部选择完毕后即可获取测试结果。参与抽奖活动；
+ 1、进入活动参加【好理在手 邂逅清凉一夏】答题，共设计3道题目，全部选择完毕后即可参与抽奖活动；
- 2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。
+ 2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。
领奖说明：
- 1、中奖后在中奖页面复制兑换码，前往[平安理财服务号]消息框输入“元宵快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
+ 1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“清凉一夏”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；
3、中奖人请在活动结束前进行兑换，逾期视为弃权。
@@ -98,25 +98,25 @@ onMounted(() => {
.rule-container {
position: relative;
- @include box(612px, 794px);
+ @include box(664px, 861px);
overflow: hidden;
.content {
.rule-content {
- @include box(612px, 794px);
+ @include box(663px, 861px);
@include bg_pos("rule/rule-box.png");
position: relative;
overflow: hidden;
.rule-text-area {
- @include pos(612px, 676px, 0px, 101px);
+ @include pos(663px, 645px, 0px, 131px);
overflow: hidden;
// overflow-y: scroll;
- padding: 0px 20px;
+ padding: 0px 50px;
.part {
- color: #a31b15;
+ color: #0070d9;
font-size: 20px;
line-height: 35px;
margin-top: 30px;
@@ -127,7 +127,7 @@ onMounted(() => {
.blod{
font-weight: 700;
- color: #6c0500;
+ color: #0070d9;
}
.margin-bottom-area{
@@ -138,18 +138,18 @@ onMounted(() => {
}
.rule-arrow {
- @include pos(149px, 84px, 231px, 682px);
+ @include pos(149px, 84px, 257px, 712px);
@include bg_pos("rule/arrow.png");
pointer-events: none;
}
.rule-bottom-bg {
// visibility: hidden;
- @include pos(588px, 102px, 12px, 682px);
+ @include pos(600px, 102px, 30px, 728px);
pointer-events: none;
- background-image: -webkit-linear-gradient( 90deg, rgba(255,238,186,0.7) , rgba(255, 255, 255, 0.1) 100%);
+ background-image: -webkit-linear-gradient( 90deg, rgba(0, 112, 217, 0.1) , rgba(255, 255, 255, 0.1) 100%);
}
.rule-icon {
- @include pos(118px, 146px, 511px, 25px);
+ @include pos(165px, 180px, 517px, 666px);
@include bg_pos("rule/icon.png");
pointer-events: none;
}
diff --git a/src/data/imgList.js b/src/data/imgList.js
index a77f800..b3f3558 100644
--- a/src/data/imgList.js
+++ b/src/data/imgList.js
@@ -6,75 +6,9 @@ const load = [
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引入图片格式
diff --git a/src/data/index.js b/src/data/index.js
index ce8b020..ca607b5 100644
--- a/src/data/index.js
+++ b/src/data/index.js
@@ -2,72 +2,70 @@ export const data = [
{
id: 1,
question: [
- '兄弟好多个，个个都爱赢',
- '目标很合适，止盈有方法',
+ '激情夏日温度攀升，理财投资热情高涨。当理财市场有波动、收益上涨，别人劝你搏一搏时，正确的做法是:',
],
answer: [
{
aid: 'A',
text: [
- '灵活策略目标盈',
+ '当然all in，我就是热点中心',
],
- result:'correct',
+ result:'incorrect',
},
{
aid: 'B',
text: [
- '灵活策略目标强',
+ '鸡蛋不放在一个篮子里，样样都来点儿',
],
- result:'incorrect',
+ result:'correct',
},
],
+ analysis: ['解析：选择B。虽然市场热点可能带来诱人的收益，但理财的基本原则是风险管理。通过将投资分散在不同的理财产品和市场，可以降低单一投资的风险，争取资产增长的机会。']
},
{
id: 2,
question: [
- '固收旗舰团，兄弟有志气',
- '三个金牛奖，开启财富门',
+ '2、夏日闲钱早规划，get生活小确幸。长期来看，选择哪类型理财，可以较稳健地进行闲钱进阶？',
],
answer: [
{
aid: 'A',
text: [
- '启航',
+ '较低风险的现金类产品',
],
- result:'correct',
+ result:'incorrect',
},
{
aid: 'B',
text: [
- '远航',
+ '策略稳健的固收类理财产品',
],
- result:'incorrect',
+ result:'correct',
},
],
- analysis: ['（注：截止2024年2月19日，启航','系列历史到期正收益概率100%）']
+ analysis: ['解析：选择B。现金类产品具有高流动性的特征，更适合日常流动资金。但在长期限选择中，固收理财拥有较大的投资范围和空间，运用策略提供稳健体验，有效平衡风险，力争增厚收益机会，闲钱再进阶。因此不同的资金用途记得匹配不同产品噢。']
},
{
id: 3,
question: [
- '兄弟好多个，口碑都很好',
- '考试常满分，稳重不轻浮',
+ '3、夏天的快乐是多巴胺旅行给的！想要一场说走就走的快乐，平时的旅行备用金该如何准备才好呢？',
],
answer: [
{
aid: 'A',
text: [
- '稳健精选（封闭型）',
+ '购买最短持有期理财产品，享灵活与收益空间',
],
result:'correct',
},
{
aid: 'B',
text: [
- '稳妥精选',
+ '船到桥头自然直',
],
result:'incorrect',
},
],
- analysis: ['（注：截止2024年2月19日，稳健精选系列（封闭型）','历史到期业绩基准达标率100%）']
+ analysis: ['解析：选择A。最短持有期理财产品拥有较为灵活的申赎机制，在持有时间超过最短持有的时间要求后，随时可发起赎回，闲置时力争收益机会，用钱时满足你的流动性需求。']
},
]
diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue
index 2cd2af9..724f054 100644
--- a/src/page/Home/App.vue
+++ b/src/page/Home/App.vue
@@ -33,6 +33,15 @@ 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;
@@ -40,7 +49,6 @@ const loadFn = (item) => {
}
};
-const showIndex = ref(false);
const indexFn = (item) => {
if (item.action == "hide") {
showIndex.value = false;
@@ -57,7 +65,6 @@ const indexFn = (item) => {
}
};
-const showQuestion = ref(false);
const questionFn = (item) => {
if (item.action == "hide") {
showQuestion.value = false;
@@ -69,21 +76,18 @@ 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;
@@ -93,7 +97,6 @@ const resultFn = (item) => {
}
};
-const showRule = ref(false);
const ruleFn = (item) => {
if (item.action == "hide") {
showRule.value = false;
@@ -223,7 +226,7 @@ const playMusic = () => {