2461 lines
65 KiB
Plaintext
2461 lines
65 KiB
Plaintext
<script setup>
|
||
import gsap from "gsap";
|
||
import { addPoint, debounceTap } from "@/plugins";
|
||
import { Toast } from "vant";
|
||
import useClipboard from 'vue-clipboard3'
|
||
import { useMainStore } from "@/store";
|
||
import { drawApi } from "@/api";
|
||
|
||
// 页面配置初始化
|
||
const emit = defineEmits(["DrawPage"]);
|
||
const userStore = useMainStore();
|
||
const { toClipboard } = useClipboard()
|
||
|
||
|
||
|
||
const money = ref("1.88");
|
||
const code = ref("PAKJ2025");
|
||
|
||
const showResult = ref(false);
|
||
const hasPrize = ref(false);
|
||
|
||
const drawFn = (event) => {
|
||
let e = event.target.parentElement;
|
||
debounceTap(e, async () => {
|
||
console.log("抽奖");
|
||
if (userStore.hasDraw) {
|
||
Toast.loading({
|
||
message: "抽奖中",
|
||
forbidClick: true,
|
||
duration: 0,
|
||
});
|
||
gsap.fromTo(
|
||
e,
|
||
{ rotation: "-30" },
|
||
{ rotation: "+30", repeat: -1, yoyo: true, ease: "none", duration: 0.3 }
|
||
);
|
||
|
||
drawApi(
|
||
{ subAnswerKey: userStore.drawKey },
|
||
userStore.token
|
||
).then(res => {
|
||
if (res.code == 0) {
|
||
console.log('正常抽奖');
|
||
// isDrawn后端判断有没有中奖
|
||
hasPrize.value = res.data.isDrawn == 1 ? true : false; // true 中奖 || false 未中奖
|
||
userStore.updateDraw(); // 更新抽奖机会
|
||
|
||
// 有奖品的话更新奖品信息
|
||
if (res.data.isDrawn == 1) {
|
||
money.value = res.data.prizeAmount;
|
||
code.value = res.data.prizeCode;
|
||
userStore.updatePrize(res.data);
|
||
}
|
||
|
||
setTimeout(() => {
|
||
Toast.clear();
|
||
showResult.value = true;
|
||
gsap.from(".result-container", {
|
||
duration: 0.5,
|
||
scale: 0.7,
|
||
autoAlpha: 0,
|
||
});
|
||
gsap.killTweensOf(".draw-light,.draw");
|
||
}, 1000);
|
||
} else {
|
||
console.log('抽奖异常');
|
||
if (res.code == 6003) {
|
||
console.log('6003', res);
|
||
Toast(res.msg)
|
||
userStore.updateDraw();
|
||
|
||
} else {
|
||
console.log('eroor', res);
|
||
hasPrize.value = false; // true 中奖 || false 未中奖
|
||
userStore.updateDraw();
|
||
setTimeout(() => {
|
||
Toast.clear();
|
||
showResult.value = true;
|
||
gsap.from(".result-container", {
|
||
duration: 0.5,
|
||
scale: 0.7,
|
||
autoAlpha: 0,
|
||
});
|
||
gsap.killTweensOf(".draw-light,.draw");
|
||
}, 1000);
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
Toast('今日抽奖次数已用完！')
|
||
}
|
||
|
||
});
|
||
};
|
||
|
||
const hide = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
gsap.to(".DrawPage", {
|
||
duration: 0.3,
|
||
autoAlpha: 0,
|
||
onComplete: () => {
|
||
emit("DrawPage", { action: "hide" });
|
||
},
|
||
});
|
||
});
|
||
};
|
||
const copyFn = (event) => {
|
||
let e = event.target;
|
||
toClipboard(code.value)
|
||
debounceTap(e, async () => {
|
||
Toast(`复制成功：${code.value}`);
|
||
});
|
||
};
|
||
|
||
|
||
|
||
const entryAni = () => {
|
||
gsap.from(".DrawPage", { duration: 0.2, autoAlpha: 0 });
|
||
gsap.from(".draw-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
|
||
gsap.from(".draw-light", {
|
||
duration: 3,
|
||
rotation: "+=360",
|
||
ease: "none",
|
||
repeat: -1,
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
entryAni();
|
||
});
|
||
</script>
|
||
|
||
|
||
<template>
|
||
<div class="DrawPage" @touchmove.prevent>
|
||
<!-- 抽奖容器 -->
|
||
<div v-show="!showResult" class="draw-container">
|
||
<div class="draw-light"></div>
|
||
<div class="draw-box">
|
||
<div class="draw" @click="drawFn($event)"></div>
|
||
</div>
|
||
<div class="draw-star"></div>
|
||
<div class="draw-tips"></div>
|
||
<!-- 关闭按钮 -->
|
||
<div class="draw-cls-btn" @click="hide($event)"></div>
|
||
</div>
|
||
<div v-show="showResult" class="result-container">
|
||
<!-- 有奖品 -->
|
||
<div class="draw-has" v-show="hasPrize">
|
||
<div class="draw-has-title">恭喜您抽中</div>
|
||
<div class="money">¥{{ money }}元</div>
|
||
<div class="draw-has-text">奖励抽到手，快乐马上有</div>
|
||
<div class="code-box">
|
||
<span>兑奖码：</span>
|
||
<span class="code">{{ code }}</span>
|
||
<span class="copy-btn" @click="copyFn($event)"></span>
|
||
</div>
|
||
<div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“端午安康”获取兑奖链接，输入兑换码兑换奖品</div>
|
||
<div class="exchnage-tips2">（兑换码可在主页面“我的奖品” 再次查看并复制）</div>
|
||
<div class="cls-btn" @click="hide($event)"></div>
|
||
</div>
|
||
<!-- 没有奖品 -->
|
||
<div class="draw-none" v-show="!hasPrize">
|
||
<div class="none-prize"></div>
|
||
<div class="cls-btn" @click="hide($event)"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.DrawPage {
|
||
@include fixed();
|
||
@include flexCen();
|
||
background-color: rgba($color: #000000, $alpha: 0.8);
|
||
|
||
// 抽奖弹窗样式
|
||
.draw-container {
|
||
@include box(685px, 694px);
|
||
position: relative;
|
||
|
||
|
||
.draw-cls-btn {
|
||
@include pos(82px, 82px, 300.5px, 670px);
|
||
@include bg_pos("prize/cls-btn.png");
|
||
}
|
||
|
||
.draw-light {
|
||
pointer-events: none;
|
||
@include pos(685px, 694px, 0px, 0px);
|
||
@include bg_pos("prize/light.png");
|
||
}
|
||
|
||
.draw-star {
|
||
pointer-events: none;
|
||
@include pos(515px, 551px, 89px, 56px);
|
||
@include bg_pos("prize/star.png");
|
||
}
|
||
|
||
.draw-box {
|
||
@include pos(690px, 680px, 0px, 0px);
|
||
@include bg_pos("prize/draw-box.png");
|
||
|
||
.draw {
|
||
@include pos(350px, 347px, 164px, 172px);
|
||
}
|
||
}
|
||
|
||
.draw-tips {
|
||
pointer-events: none;
|
||
@include pos(187px, 34px, 250px, 605px);
|
||
@include bg_pos("prize/tips.png");
|
||
}
|
||
}
|
||
|
||
// 中奖弹窗样式
|
||
.draw-has {
|
||
position: relative;
|
||
@include box(665px, 731px);
|
||
@include bg_pos("prize/myPrize-box2.png");
|
||
|
||
.draw-has-title {
|
||
@include pos(390px, 100px, 110px, 140px);
|
||
font-size: 40px;
|
||
color: #e95b46;
|
||
font-weight: 700;
|
||
letter-spacing: 3px;
|
||
// background-color: aqua;
|
||
@include flexCen();
|
||
}
|
||
|
||
.draw-has-text {
|
||
@include pos(390px, 100px, 110px, 300px);
|
||
font-size: 30px;
|
||
color: #e95b46;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
// background-color: aqua;
|
||
@include flexCen();
|
||
|
||
}
|
||
|
||
.money {
|
||
|
||
@include pos(390px, 130px, 110px, 200px);
|
||
@include flexCen();
|
||
color: #e95b46;
|
||
font-weight: 700;
|
||
font-size: 58px;
|
||
letter-spacing: 4px;
|
||
// background-color: rgb(217, 0, 255);
|
||
}
|
||
|
||
.code-box {
|
||
@include pos(390px, 52px, 110px, 508px);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
font-size: 25px;
|
||
font-weight: 700;
|
||
color: #fff6cc;
|
||
|
||
span {
|
||
height: 77px;
|
||
line-height: 65px;
|
||
}
|
||
|
||
.code {
|
||
margin-right: 10px;
|
||
|
||
}
|
||
|
||
.copy-btn {
|
||
@include box(77px, 39px);
|
||
@include bg_pos("prize/copy-btn.png");
|
||
}
|
||
}
|
||
|
||
.exchange-tips {
|
||
@include pos(390px, 152px, 110px, 558px);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: start;
|
||
justify-content: flex-start;
|
||
font-size: 20px;
|
||
// font-weight: 700;
|
||
color: #fff6cc;
|
||
letter-spacing: 2px;
|
||
// background-color: aqua;
|
||
}
|
||
|
||
.exchnage-tips2 {
|
||
@include pos(390px, 52px, 110px, 638px);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 15px;
|
||
// font-weight: 700;
|
||
color: #fff6cc;
|
||
// background-color: aqua;
|
||
}<script setup>
|
||
import { Toast } from "vant";
|
||
import { debounceTap } from "@/plugins";
|
||
import gsap from "gsap";
|
||
import { useMainStore } from "@/store";
|
||
|
||
const emit = defineEmits(["IndexPage"]);
|
||
const userStore = useMainStore();
|
||
|
||
const start = (event) => {
|
||
debounceTap(event.target, () => {
|
||
gsap.to(".IndexPage", {
|
||
duration: 0.5,
|
||
autoAlpha: 0,
|
||
onComplete: () => {
|
||
emit("IndexPage", { action: "start" });
|
||
},
|
||
});
|
||
});
|
||
};
|
||
|
||
const showMyPrize = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
emit("IndexPage", { action: "showMyPrize" });
|
||
});
|
||
};
|
||
|
||
const showRule = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
emit("IndexPage", { action: "showRule" });
|
||
});
|
||
};
|
||
|
||
|
||
onMounted(() => {
|
||
gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
|
||
gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0, delay: 1 });
|
||
gsap.from(".index-time", { duration: 1, x: 40, autoAlpha: 0, delay: 1 });
|
||
gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0, delay: 0.75 });
|
||
gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0, delay: 1.3 });
|
||
gsap.from(".index-prize-btn", {
|
||
duration: 1,
|
||
x: -100,
|
||
autoAlpha: 0,
|
||
delay: 1.5,
|
||
});
|
||
gsap.from(".index-start-btn", {
|
||
duration: 1,
|
||
y: 30,
|
||
autoAlpha: 0,
|
||
delay: 1.5,
|
||
});
|
||
gsap.from(".index-agreement", {
|
||
duration: 1,
|
||
scale: 0.4,
|
||
autoAlpha: 0,
|
||
delay: 0.5,
|
||
onComplete: () => {
|
||
gsap.to('.index-start-btn', { duration: 1, scale: '0.95', repeat: -1, yoyo: true, ease: 'bounce.out' })
|
||
}
|
||
});
|
||
|
||
|
||
});
|
||
|
||
const vcNum = ref(false);
|
||
const showVC = () => {
|
||
vcNum.value++;
|
||
if (vcNum.value >= 20) {
|
||
gsap.set("#__vconsole", { autoAlpha: 1 });
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="IndexPage" @touchmove.prevent>
|
||
<div class="index-bg"></div>
|
||
<div class="index-container">
|
||
<div class="index-logo"></div>
|
||
<div class="index-title" @click="showVC"></div>
|
||
<div class="index-time"></div>
|
||
<div class="index-rule-btn index-left-btn" @click="showRule($event)">活动规则</div>
|
||
<div class="index-prize-btn index-left-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)">我的奖品</div>
|
||
<div class="index-start-btn" @click="start"></div>
|
||
<div class="index-agreement">
|
||
<span>风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。</span>
|
||
<span class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>
|
||
<span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。</span>
|
||
<span class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
|
||
class="orange">理财非存款，产品有风险，投资须谨慎。</span>
|
||
<span>
|
||
金融消费者不得利用金融产品和服务从事违法活动。
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.IndexPage {
|
||
@include pos(100%, 1624px, 0px, 0px);
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #d6d1ca, #e5dccf);
|
||
|
||
.index-bg {
|
||
@include pos(750px, 1624px, 0px, 50%);
|
||
transform: translateY(-50%);
|
||
@include bg_pos("index/bg.jpg");
|
||
}
|
||
|
||
.index-container {
|
||
@include pos(750px, 1624px, 0px, 0px);
|
||
// transform: translateY(-50%);
|
||
|
||
|
||
.index-logo {
|
||
pointer-events: none;
|
||
@include pos(632px, 94px, 59px, 266px);
|
||
@include bg_pos("index/logo.png");
|
||
}
|
||
|
||
.index-title {
|
||
// pointer-events: none;
|
||
@include pos(593px, 156px, 85px, 387px);
|
||
@include bg_pos("index/title.png");
|
||
}
|
||
|
||
.index-time {
|
||
@include pos(433px, 58px, 295px, 565px);
|
||
@include bg_pos("index/time.png");
|
||
}
|
||
|
||
.index-left-btn {
|
||
border: 2px solid rgb(255, 255, 255);
|
||
background-color: rgb(243, 87, 4);
|
||
box-shadow: 0px 6px 11px 0px rgba(155, 122, 68, 0.4);
|
||
font-size: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-left: 20px;
|
||
color: #ffffff;
|
||
letter-spacing: 1.5px;
|
||
border-radius: 21px;
|
||
}
|
||
|
||
.index-rule-btn {
|
||
@include pos(184px, 49px, -37px, 578px);
|
||
}
|
||
|
||
.index-prize-btn {
|
||
@include pos(184px, 49px, -37px, 642px);
|
||
}
|
||
|
||
.index-start-btn {
|
||
@include pos(288px, 93px, 231px, 1097px);
|
||
@include bg_pos("index/btn.png");
|
||
}
|
||
|
||
.index-agreement {
|
||
font-family: "FZZY_Regular";
|
||
pointer-events: none;
|
||
@include pos(736px, 182px, 7px, 1208px);
|
||
font-size: 14px;
|
||
text-align: justify;
|
||
letter-spacing: 0.1px;
|
||
color: #ffffff;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 10px;
|
||
line-height: 20px;
|
||
<script setup>
|
||
import { Toast } from "vant";
|
||
import gsap from "gsap";
|
||
import Preloader from "@/plugins/Preloader";
|
||
import { loadImg, pageImg } from "@/data/imgList";
|
||
import { getMyPrize } from "@/api";
|
||
import { useMainStore } from "@/store";
|
||
|
||
// 页面配置初始化
|
||
const emit = defineEmits(["LoadPage"]);
|
||
const userStore = useMainStore();
|
||
|
||
const loadNum = ref(0);
|
||
|
||
onMounted(() => {
|
||
|
||
Preloader({
|
||
name: "加载页资源",
|
||
imgs: loadImg,
|
||
callback: (progress) => {
|
||
// console.log('进度：', progress);
|
||
},
|
||
}).then((res) => {
|
||
gsap.to(".LoadPage", {
|
||
duration: 0.2,
|
||
autoAlpha: 1,
|
||
onComplete: () => {
|
||
if (import.meta.env.VITE_MODE != "dev") {
|
||
getMyPrize({}, userStore.token).then((res) => {
|
||
if (res.code == 0) {
|
||
console.log("我的奖品", res);
|
||
if (res.data) {
|
||
console.log("有奖品");
|
||
userStore.updatePrize(res.data);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
Preloader({
|
||
name: "内页资源",
|
||
imgs: pageImg,
|
||
callback: (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" @touchmove.prevent>
|
||
<div class="load-bg"></div>
|
||
<div class="load-container">
|
||
<div class="load-icon"></div>
|
||
<div class="load-box">
|
||
<div class="bar"></div>
|
||
</div>
|
||
<div class="load-num">
|
||
<span class="num">{{ loadNum }}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.LoadPage {
|
||
@include pos(100%, 100%, 0px, 0px);
|
||
|
||
overflow: hidden;
|
||
@include flexCen();
|
||
|
||
.load-bg {
|
||
@include pos(750px, 100%, 0px, 50%);
|
||
transform: translateY(-50%);
|
||
background-image: -webkit-linear-gradient(-90deg, #ffffff 15%, #4ebbe5 100%);
|
||
|
||
}
|
||
|
||
.load-container {
|
||
position: relative;
|
||
@include box(750px, 1180px);
|
||
// transform: translateY(-50%);
|
||
|
||
.load-icon {
|
||
@include pos(409px, 215px,199px, 350px);
|
||
@include bg_pos("load/icon.png");
|
||
}
|
||
|
||
.load-box {
|
||
@include pos(582px, 45px, 83px, 450px);
|
||
border-radius: 25px;
|
||
padding: 1px;
|
||
border: 1px solid rgb(243, 87, 4);
|
||
|
||
|
||
.bar {
|
||
@include box(0%, 38px);
|
||
border-radius: 20px;
|
||
border: 1px solid rgb(255, 255, 255);
|
||
|
||
background-image: -webkit-linear-gradient(0deg, #f7c86f 0%, #f25501 100%);
|
||
|
||
}
|
||
}
|
||
|
||
.load-num {
|
||
@include pos(235px, 80px, 256px, 511px);
|
||
|
||
@include flexCen();
|
||
<script setup>
|
||
import { debounceTap } from "@/plugins";
|
||
import gsap from "gsap";
|
||
import { Toast } from "vant";
|
||
import useClipboard from "vue-clipboard3";
|
||
import { useMainStore } from "@/store";
|
||
import { onMounted } from "vue";
|
||
|
||
// 页面配置初始化
|
||
const emit = defineEmits(["MyPrizePage"]);
|
||
const userStore = useMainStore();
|
||
const { toClipboard } = useClipboard();
|
||
|
||
const money = ref(userStore.prizeMoney);
|
||
const code = ref(userStore.prizeCode);
|
||
|
||
const copyFn = (event) => {
|
||
let e = event.target;
|
||
toClipboard(code.value);
|
||
debounceTap(e, () => {
|
||
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: 1, autoAlpha: 0, scale: 0.7 });
|
||
};
|
||
|
||
onMounted(() => {
|
||
entryAni();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="MyPrizePage">
|
||
<div class="myPrize-container">
|
||
<div class="myPrize-title">恭喜您抽中</div>
|
||
<div class="myPrize-money">¥{{ money }}元</div>
|
||
<div class="myPrize-text">奖励抽到手，快乐马上有</div>
|
||
<div class="myPrize-code-box">
|
||
<span>兑奖码：</span>
|
||
<div class="code">{{ code }}</div>
|
||
<div class="myPrize-copy-btn" @click="copyFn($event)"></div>
|
||
</div>
|
||
<div class="exchange-tips">
|
||
兑换流程：前往微信搜索【平安理财服务号】公众号发送“端午安康”获取兑奖链接，输入兑换码兑换奖品
|
||
</div>
|
||
<div class="exchnage-tips2">
|
||
（兑换码可在主页面“我的奖品” 再次查看并复制）
|
||
</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.8);
|
||
|
||
.myPrize-container {
|
||
position: relative;
|
||
@include box(665px, 731px);
|
||
@include bg_pos("prize/myPrize-box2.png");
|
||
|
||
.myPrize-title {
|
||
@include pos(390px, 100px, 110px, 140px);
|
||
font-size: 40px;
|
||
color: #e95b46;
|
||
font-weight: 700;
|
||
letter-spacing: 3px;
|
||
// background-color: aqua;
|
||
@include flexCen();
|
||
}
|
||
|
||
.myPrize-text {
|
||
@include pos(390px, 100px, 110px, 300px);
|
||
font-size: 30px;
|
||
color: #e95b46;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
// background-color: aqua;
|
||
@include flexCen();
|
||
}
|
||
|
||
.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(390px, 52px, 110px, 500px);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
font-size: 25px;
|
||
font-weight: 700;
|
||
color: #fff6cc;
|
||
|
||
span {
|
||
// height: 77px;
|
||
line-height: 65px;
|
||
}
|
||
|
||
.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");
|
||
}
|
||
}
|
||
|
||
.exchange-tips {
|
||
@include pos(390px, 152px, 110px, 558px);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: start;
|
||
justify-content: flex-start;<script setup name="Question">
|
||
import gsap from "gsap";
|
||
import { Toast, Progress } from "vant";
|
||
import { data } from "@/data";
|
||
import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
|
||
import { useMainStore } from "@/store";
|
||
import { subAnswer } from "@/api";
|
||
|
||
// 页面配置初始化
|
||
const emit = defineEmits(["QuestionPage"]);
|
||
const userStore = useMainStore();
|
||
|
||
// 当前题目
|
||
// const currentId = ref(props.questionId); //当前id 0~4
|
||
const currentId = ref(0); //当前id 0~3
|
||
|
||
const questionList = ref(data); //随机打乱题库
|
||
const isChecked = ref(false);
|
||
const checkedOption = ref("");
|
||
const QaResult = ref(1); //当前答题结果
|
||
|
||
// 答题事件
|
||
const answerFn = (item, event) => {
|
||
let e = event.target.parentElement;
|
||
|
||
debounceTap(e, () => {
|
||
gsap.set(".answer-box", { pointerEvents: "none" });
|
||
isChecked.value = true;
|
||
checkedOption.value = item;
|
||
console.log("checkedOption", checkedOption.value);
|
||
QaResult.value = item.result;
|
||
gsap.to(".qp-result ", { duration: 0.5, autoAlpha: 1, delay: 1 });
|
||
});
|
||
};
|
||
|
||
// 下一题
|
||
const nextQuestion = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
gsap.to(".qp-result", {
|
||
duration: 0.5,
|
||
autoAlpha: 0,
|
||
onComplete: () => {
|
||
isChecked.value = false;
|
||
checkedOption.value = "";
|
||
gsap.set(".answer-box", { pointerEvents: "auto" });
|
||
currentId.value++;
|
||
},
|
||
});
|
||
});
|
||
};
|
||
|
||
// 查看结果事件
|
||
const viewResult = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
// 更新海报id
|
||
userStore.posterId = currentId.value + 1;
|
||
|
||
gsap.set(".question-box", { pointerEvents: "none" });
|
||
Toast("答题结束");
|
||
Toast.loading({
|
||
message: "结果生成中",
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
|
||
if (import.meta.env.VITE_MODE != "dev") {
|
||
// 提交完成记录
|
||
subAnswer({}, userStore.token).then((res) => {
|
||
console.log("key:", res);
|
||
if (res.code == 0) {
|
||
userStore.updateDrawKey(res.data);
|
||
}
|
||
|
||
setTimeout(() => {
|
||
Toast.clear();
|
||
gsap.to(".QuestionPage,.qp-result", {
|
||
duration: 0.5,
|
||
autoAlpha: 0,
|
||
onComplete: () => {
|
||
emit("QuestionPage", { action: "showResult" });
|
||
},
|
||
});
|
||
}, 1000);
|
||
});
|
||
} else {
|
||
setTimeout(() => {
|
||
Toast.clear();
|
||
gsap.to(".QuestionPage,.qp-result", {
|
||
duration: 0.5,
|
||
autoAlpha: 0,
|
||
onComplete: () => {
|
||
emit("QuestionPage", { action: "showResult" });
|
||
},
|
||
});
|
||
}, 1000);
|
||
}
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
|
||
gsap.from(".question-box", { duration: 0.5, scale: 0.4, autoAlpha: 0 });
|
||
});
|
||
|
||
const getClass = (item) => {
|
||
if (isChecked.value) {
|
||
if (checkedOption.value.aid == item.aid) {
|
||
return item.result ? "correct" : "incorrect";
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="QuestionPage" @touchmove.prevent>
|
||
<div class="question-bg"></div>
|
||
<div class="question-container">
|
||
<div class="question-box">
|
||
<div class="question-serial">
|
||
<div>
|
||
<div class="serial-icon"></div>
|
||
<div class="serial-text">
|
||
{{ ["题目一", "题目二", "题目三", "题目四"][currentId] }}
|
||
</div>
|
||
</div>
|
||
<div class="serial-num">
|
||
{{ currentId + 1 }}/{{ questionList.length }}
|
||
</div>
|
||
</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>
|
||
<!-- 选项 -->
|
||
<div class="answer-box">
|
||
<div
|
||
class="answer"
|
||
:class="getClass(item)"
|
||
v-for="item in questionList[currentId].answer"
|
||
:key="item.aid"
|
||
>
|
||
<div class="answer-text">{{ item.aid }}.{{ item.text }}</div>
|
||
<div
|
||
class="result-icon"
|
||
v-if="isChecked && item.aid == checkedOption.aid"
|
||
>
|
||
<div
|
||
:class="item.result ? 'icon-correct' : 'icon-incorrect'"
|
||
></div>
|
||
</div>
|
||
<!-- 可点击区域 -->
|
||
<div class="click-area" @click="answerFn(item, $event)"></div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">
|
||
<div v-if='questionList[currentId].tips.length == 1'>
|
||
{{ isChecked ? `${['回答错误！', '回答正确！'][checkedOption.result]}` : `提示：${t}` }}
|
||
</div>
|
||
<div v-else>
|
||
{{ isChecked ? `${i == 0 ? ['回答错误！', '回答正确！'][checkedOption.result] : ''}` : `${i == 0 ? '提示：' : ''}${t}` }}
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<div class="return-btn" @click="nextQuestion($event)"></div>
|
||
<div class="create-btn" @click="viewResult($event)"></div>
|
||
</div>
|
||
<div class="question-gold-icon-1"></div>
|
||
</div>
|
||
</div>
|
||
<div class="qp-result">
|
||
<div class="qp-result-box">
|
||
<div
|
||
class="qp-result-icon"
|
||
:class="!QaResult ? 'is-incorrect' : ''"
|
||
></div>
|
||
<div class="qp-result-text">{{ QaResult ? "答对啦" : "答错啦" }}</div>
|
||
<div class="qp-tips-text">{{ questionList[currentId].tips[0] }}</div>
|
||
<div class="qp-result-btn"></div>
|
||
</div>
|
||
<div
|
||
class="next-btn"
|
||
@click="
|
||
currentId == questionList.length - 1
|
||
? viewResult($event)
|
||
: nextQuestion($event)
|
||
"
|
||
>
|
||
{{ currentId == questionList.length - 1 ? "查看结果" : "下一题" }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scope>
|
||
.QuestionPage {
|
||
@include pos(100%, 1624px, 0px, 0px);
|
||
overflow: hidden;
|
||
|
||
.question-bg {
|
||
@include pos(750px, 1624px, 0px, 0px);
|
||
background-image: -webkit-linear-gradient(
|
||
-90deg,
|
||
#ffffff 15%,
|
||
#4ebbe5 100%
|
||
);
|
||
}
|
||
|
||
.question-container {
|
||
@include pos(750px, 1624px, 0px, 0px);
|
||
@include flexCen();
|
||
background-color: rgba($color: #000000, $alpha: 0.3);
|
||
|
||
.question-box {
|
||
@include pos(727px, 769px, 22px, 308px);
|
||
@include bg_pos("qa/paper.png");
|
||
|
||
.question-serial {
|
||
@include pos(560px, 90px, 110px, 34px);
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.serial-text {
|
||
color: #ffffff;
|
||
font-size: 40px;
|
||
}
|
||
.serial-num {
|
||
font-size: 60px;
|
||
padding-right: 20px;
|
||
color: transparent;
|
||
-webkit-text-stroke: 3px #ffffff; /* 控制描边粗细和颜色 */
|
||
text-stroke: 3px #ffffff;
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.qa-question-box {
|
||
@include pos(563px, 660px, 74px, 116px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
// 问题样式
|
||
.question {
|
||
margin: 40px auto;
|
||
|
||
.question-text {
|
||
font-family: "FZZY_Regular";
|
||
font-size: 34px;
|
||
color: #55240d;
|
||
line-height: 50px;
|
||
text-align: justify;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
// 选项样式
|
||
.answer-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
// height: 200px;
|
||
|
||
// 选项通用样式
|
||
.answer {
|
||
width: 504px;
|
||
position: relative;
|
||
border-radius: 32.5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1px solid #fff;
|
||
color: #9e4b00;
|
||
background-color: #fff2b9;
|
||
margin-bottom: 30px;
|
||
padding: 10px 20px;
|
||
|
||
.answer-text {
|
||
font-size: 30px;
|
||
line-height: 40px;
|
||
@include flexCen();
|
||
}
|
||
|
||
.click-area {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 32.5px;
|
||
position: absolute;
|
||
}
|
||
|
||
.result-icon {
|
||
position: absolute;
|
||
@include box(504px, 45px);
|
||
top: 50%;
|
||
transform: translateY(-55%);
|
||
left: 460px;
|
||
|
||
.icon-correct {
|
||
@include box(76px, 56px);
|
||
@include bg_pos("qa/correct.png");
|
||
}
|
||
|
||
.icon-incorrect {
|
||
@include box(52px, 54px);
|
||
@include bg_pos("qa/incorrect.png");
|
||
}
|
||
}
|
||
}
|
||
|
||
.correct {
|
||
color: #ffe8b4;
|
||
font-weight: 700;
|
||
// background: linear-gradient(-45deg, #facc22, #f83600);
|
||
background-color: #f83600;
|
||
border: 2px solid #f0d0ad;
|
||
// 外发光效果
|
||
box-shadow: 0px 5px 10px rgba($color: #0188d5, $alpha: 0.5);
|
||
border-radius: 32.5px;
|
||
}
|
||
|
||
.incorrect {
|
||
color: #f83600;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.question-tips {
|
||
font-size: 25px;
|
||
width: 100%;
|
||
font-family: "FZZY_Regular";
|
||
color: #ab7133;
|
||
text-align: center;
|
||
padding: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.qp-result {
|
||
@include pos(100%, 1624px, 0px, 0px);
|
||
overflow: hidden;
|
||
@include flexCen();
|
||
background-color: rgba($color: #000000, $alpha: 0.6);
|
||
visibility: hidden;
|
||
.qp-result-box {
|
||
@include box(569px, 399px);
|
||
@include bg_pos("qa/result-box.png");
|
||
position: relative;
|
||
.qp-result-icon {
|
||
@include pos(112px, 112px, 222px, -28px);
|
||
@include bg_pos("qa/correct-icon.png");
|
||
}
|
||
.is-incorrect {
|
||
@include bg_pos("qa/incorrect-icon.png");
|
||
}
|
||
.qp-result-text {
|
||
@include pos(569px, 50px, 0px, 104px);
|
||
@include flexCen();
|
||
font-size: 35px;<script setup>
|
||
import { gsap } from "gsap";
|
||
import { debounceTap } from "@/plugins";
|
||
import { useMainStore } from "@/store";
|
||
|
||
import { Toast } from "vant";
|
||
import QRCode from "qrcode";
|
||
import { reactive } from "vue";
|
||
|
||
// 页面配置初始化
|
||
const emit = defineEmits(["ResultPage"]);
|
||
const userStore = useMainStore();
|
||
const posterId = ref(userStore.posterId); //海报背景id：1～11
|
||
|
||
console.log("海报id", posterId.value);
|
||
|
||
const posterImgSrc = new URL(
|
||
`../assets/images/result/poster.jpg`,
|
||
import.meta.url
|
||
).href;
|
||
|
||
// 生成二维码逻辑
|
||
const eqcodePic = ref();
|
||
onMounted(async () => {
|
||
// 执行任务队列
|
||
await executeTasks();
|
||
});
|
||
|
||
// 这是新加的函数封装异步任务
|
||
const executeTasks = async () => {
|
||
console.log("二维码生成中...");
|
||
|
||
// 生成二维码
|
||
const eqCodeUrl = import.meta.env.VITE_URL;
|
||
eqcodePic.value = await QRCode.toDataURL(eqCodeUrl);
|
||
|
||
console.log("生成海报中...");
|
||
|
||
if (posterImgSrc && eqcodePic.value) {
|
||
posterCreate({ width: 750, height: 2502 }, [
|
||
{ name: "bg", src: posterImgSrc, pos: { w: 750, h: 2502, x: 0, y: 0 } },
|
||
{
|
||
name: "eqcode",
|
||
src: eqcodePic.value,
|
||
pos: { w: 187, h: 187, x: 527, y: 2227 },
|
||
},
|
||
]);
|
||
} else {
|
||
Toast.fail({ message: "生成失败" });
|
||
emit("ResultPage", { action: "hide" });
|
||
}
|
||
};
|
||
|
||
const showPoster = () => {
|
||
gsap.to(".posterPop", {
|
||
duration: 0.3,
|
||
autoAlpha: 1,
|
||
});
|
||
gsap.from(".poster-title", {
|
||
duration: 0.7,
|
||
scale: 0.3,
|
||
autoAlpha: 0,
|
||
});
|
||
gsap.from(".poster-box", {
|
||
duration: 0.7,
|
||
scale: 0.6,
|
||
autoAlpha: 0,
|
||
});
|
||
gsap.from(".save-tips", {
|
||
duration: 0.7,
|
||
scale: 0.7,
|
||
autoAlpha: 0,
|
||
delay: 0.3,
|
||
});
|
||
gsap.from(".go-draw", {
|
||
duration: 0.7,
|
||
y: -30,
|
||
autoAlpha: 0,
|
||
delay: 0.5,
|
||
});
|
||
gsap.from(".go-share", {
|
||
duration: 0.7,
|
||
y: -30,
|
||
autoAlpha: 0,
|
||
delay: 0.7,
|
||
});
|
||
};
|
||
|
||
// 去抽奖
|
||
const goDraw = (event) => {
|
||
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,
|
||
onComplete: () => {
|
||
emit("ResultPage", { action: "hide" });
|
||
},
|
||
});
|
||
});
|
||
};
|
||
|
||
const hide = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
gsap.to(".posterPop", {
|
||
duration: 0.5,
|
||
autoAlpha: 0,
|
||
onComplete: () => {
|
||
emit("ResultPage", { action: "showQuestion" });
|
||
},
|
||
});
|
||
});
|
||
};
|
||
|
||
// 展示分享
|
||
const goShare = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
|
||
});
|
||
};
|
||
|
||
// 隐藏分享提示
|
||
const hideShare = () => {
|
||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
|
||
};
|
||
|
||
// 海报生成
|
||
const posterCreate = (option, imageArr) => {
|
||
let posterUrl = "";
|
||
const { width, height } = option;
|
||
Toast.loading({
|
||
message: "海报生成中",
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
|
||
let mycanvas = document.createElement("canvas"); // 创建一个canvas画布元素
|
||
let ctx = mycanvas.getContext("2d");
|
||
mycanvas.style.width = `${width}px`; //设置canvas的宽
|
||
mycanvas.style.height = `${height}px`; //设置canvas的高
|
||
mycanvas.width = width;
|
||
mycanvas.height = height;
|
||
//Promise对象加载资源
|
||
let loader_p = [];
|
||
imageArr.map((item) => {
|
||
const _p = new Promise((resolve) => {
|
||
const img = new Image();
|
||
img.crossOrigin = "Anonymous";
|
||
img.onload = () => {
|
||
resolve(img);
|
||
};
|
||
img.src = item.src;
|
||
});
|
||
loader_p.push(_p);
|
||
});
|
||
//Promise的.all方法，当所有预加载的图像加载好的回调函数
|
||
Promise.all(loader_p)
|
||
.then((imgList) => {
|
||
console.log("imgList", imgList);
|
||
|
||
// 图片素材遍历绘制
|
||
imgList.map((item, index) => {
|
||
ctx.drawImage(
|
||
item,
|
||
imageArr[index].pos.x,
|
||
imageArr[index].pos.y,
|
||
imageArr[index].pos.w,
|
||
imageArr[index].pos.h
|
||
); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
|
||
});
|
||
|
||
//海报绘制完 ，转成图片对象
|
||
return mycanvas.toDataURL("image/jpeg", 1);
|
||
})
|
||
.then((baseURL) => {
|
||
//返回的图片地址，就是最后海报的地址，可以放在DOM显示
|
||
let posterImg = document.querySelector("#posterSrc");
|
||
posterImg.src = baseURL;
|
||
setTimeout(() => {
|
||
// 展示海报
|
||
showPoster();
|
||
Toast.success({ message: "生成成功！" });
|
||
}, 500);
|
||
})
|
||
.catch((error) => {
|
||
console.error("生成海报失败");
|
||
gsap.to(".posterPop", {
|
||
duration: 0.5,
|
||
autoAlpha: 0,
|
||
onComplete: () => {
|
||
emit("ResultPage", { action: "hide" });
|
||
},
|
||
});
|
||
Toast.fail({ message: "生成失败，请重试！" });
|
||
});
|
||
|
||
// return posterUrl
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="posterPop" @touchmove.prevent>
|
||
<div class="poster-bg"></div>
|
||
<div class="poster-container">
|
||
<div class="poster-title"></div>
|
||
<div class="poster-box">
|
||
<div class="poster">
|
||
<img id="posterSrc" src="" alt="" srcset="" />
|
||
</div>
|
||
<!-- <div class="poster-cls-btn" @click="hide($event)"></div> -->
|
||
</div>
|
||
<div class="save-tips">*长按保存海报</div>
|
||
<div class="btn-box">
|
||
<div class="go-draw" @click="goDraw($event)"></div>
|
||
<div class="go-share" @click="goShare($event)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 分享提示 -->
|
||
<div class="sharePop" @click="hideShare">
|
||
<div class="tips-pic"></div>
|
||
<div class="tips-text">点击右上角分享给你的好友！</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.posterPop {
|
||
@include pos(100%, 1624px, 0px, 0px);
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #d6d1ca, #e5dccf);
|
||
visibility: hidden;
|
||
|
||
.poster-bg {
|
||
@include pos(750px, 1624px, 0px, 0px);
|
||
// transform: translateY(-50%);
|
||
@include bg_pos("index/bg.jpg");
|
||
}
|
||
|
||
.poster-container {
|
||
@include pos(750px, 1624px, 0px, 0px);
|
||
@include flexCen();
|
||
background-color: rgba($color: #000000, $alpha: 0.3);
|
||
|
||
.poster-title {
|
||
@include box(592px, 156px);
|
||
@include bg_pos("index/title.png");
|
||
}
|
||
|
||
.save-tips {
|
||
font-size: 20px;
|
||
line-height: 20px;
|
||
color: #ffffff;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.poster-box {
|
||
@include box(720px, 882px);
|
||
margin-top: 20px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.poster-cls-btn {
|
||
@include pos(53px, 53px, 660px, 10px);
|
||
@include bg_pos("result/cls-btn.png");
|
||
}
|
||
|
||
.poster {
|
||
@include box(100%, 100%);
|
||
overflow: hidden;
|
||
@include bg_pos("result/card.png");
|
||
|
||
#posterSrc {
|
||
@include box(100%, 100%);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-box {
|
||
@include box(550px, 91px);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
|
||
.go-draw {
|
||
@include box(243px, 91px);
|
||
@include bg_pos("result/go-draw-btn.png");
|
||
}
|
||
|
||
.go-share {
|
||
@include box(243px, 91px);
|
||
@include bg_pos("result/go-share-btn.png");
|
||
}<script setup>
|
||
import { gsap } from "gsap";
|
||
import { debounceTap } from "@/plugins";
|
||
import { useMainStore } from "@/store";
|
||
|
||
import { Toast } from "vant";
|
||
import QRCode from "qrcode";
|
||
import { reactive } from "vue";
|
||
|
||
// 页面配置初始化
|
||
const emit = defineEmits(["ResultPage"]);
|
||
const userStore = useMainStore();
|
||
const posterId = ref(userStore.posterId); //海报背景id：1～11
|
||
|
||
console.log("海报id", posterId.value);
|
||
|
||
const posterImgSrc = new URL(
|
||
`../assets/images/result/poster.jpg`,
|
||
import.meta.url
|
||
).href;
|
||
|
||
// 生成二维码逻辑
|
||
const eqcodePic = ref();
|
||
onMounted(async () => {
|
||
// 执行任务队列
|
||
await executeTasks();
|
||
});
|
||
|
||
// 这是新加的函数封装异步任务
|
||
const executeTasks = async () => {
|
||
console.log("二维码生成中...");
|
||
|
||
// 生成二维码
|
||
const eqCodeUrl = import.meta.env.VITE_URL;
|
||
eqcodePic.value = await QRCode.toDataURL(eqCodeUrl);
|
||
|
||
console.log("生成海报中...");
|
||
|
||
if (posterImgSrc && eqcodePic.value) {
|
||
posterCreate({ width: 750, height: 2502 }, [
|
||
{ name: "bg", src: posterImgSrc, pos: { w: 750, h: 2502, x: 0, y: 0 } },
|
||
{
|
||
name: "eqcode",
|
||
src: eqcodePic.value,
|
||
pos: { w: 187, h: 187, x: 527, y: 2227 },
|
||
},
|
||
]);
|
||
} else {
|
||
Toast.fail({ message: "生成失败" });
|
||
emit("ResultPage", { action: "hide" });
|
||
}
|
||
};
|
||
|
||
const showPoster = () => {
|
||
gsap.to(".posterPop", {
|
||
duration: 0.3,
|
||
autoAlpha: 1,
|
||
});
|
||
gsap.from(".poster-title", {
|
||
duration: 0.7,
|
||
scale: 0.3,
|
||
autoAlpha: 0,
|
||
});
|
||
gsap.from(".poster-box", {
|
||
duration: 0.7,
|
||
scale: 0.6,
|
||
autoAlpha: 0,
|
||
});
|
||
gsap.from(".save-tips", {
|
||
duration: 0.7,
|
||
scale: 0.7,
|
||
autoAlpha: 0,
|
||
delay: 0.3,
|
||
});
|
||
gsap.from(".go-draw", {
|
||
duration: 0.7,
|
||
y: -30,
|
||
autoAlpha: 0,
|
||
delay: 0.5,
|
||
});
|
||
gsap.from(".go-share", {
|
||
duration: 0.7,
|
||
y: -30,
|
||
autoAlpha: 0,
|
||
delay: 0.7,
|
||
});
|
||
};
|
||
|
||
// 去抽奖
|
||
const goDraw = (event) => {
|
||
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,
|
||
onComplete: () => {
|
||
emit("ResultPage", { action: "hide" });
|
||
},
|
||
});
|
||
});
|
||
};
|
||
|
||
const hide = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
gsap.to(".posterPop", {
|
||
duration: 0.5,
|
||
autoAlpha: 0,
|
||
onComplete: () => {
|
||
emit("ResultPage", { action: "showQuestion" });
|
||
},
|
||
});
|
||
});
|
||
};
|
||
|
||
// 展示分享
|
||
const goShare = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
|
||
});
|
||
};
|
||
|
||
// 隐藏分享提示
|
||
const hideShare = () => {
|
||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
|
||
};
|
||
|
||
// 海报生成
|
||
const posterCreate = (option, imageArr) => {
|
||
let posterUrl = "";
|
||
const { width, height } = option;
|
||
Toast.loading({
|
||
message: "海报生成中",
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
|
||
let mycanvas = document.createElement("canvas"); // 创建一个canvas画布元素
|
||
let ctx = mycanvas.getContext("2d");
|
||
mycanvas.style.width = `${width}px`; //设置canvas的宽
|
||
mycanvas.style.height = `${height}px`; //设置canvas的高
|
||
mycanvas.width = width;
|
||
mycanvas.height = height;
|
||
//Promise对象加载资源
|
||
let loader_p = [];
|
||
imageArr.map((item) => {
|
||
const _p = new Promise((resolve) => {
|
||
const img = new Image();
|
||
img.crossOrigin = "Anonymous";
|
||
img.onload = () => {
|
||
resolve(img);
|
||
};
|
||
img.src = item.src;
|
||
});
|
||
loader_p.push(_p);
|
||
});
|
||
//Promise的.all方法，当所有预加载的图像加载好的回调函数
|
||
Promise.all(loader_p)
|
||
.then((imgList) => {
|
||
console.log("imgList", imgList);
|
||
|
||
// 图片素材遍历绘制
|
||
imgList.map((item, index) => {
|
||
ctx.drawImage(
|
||
item,
|
||
imageArr[index].pos.x,
|
||
imageArr[index].pos.y,
|
||
imageArr[index].pos.w,
|
||
imageArr[index].pos.h
|
||
); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
|
||
});
|
||
|
||
//海报绘制完 ，转成图片对象
|
||
return mycanvas.toDataURL("image/jpeg", 1);
|
||
})
|
||
.then((baseURL) => {
|
||
//返回的图片地址，就是最后海报的地址，可以放在DOM显示
|
||
let posterImg = document.querySelector("#posterSrc");
|
||
posterImg.src = baseURL;
|
||
setTimeout(() => {
|
||
// 展示海报
|
||
showPoster();
|
||
Toast.success({ message: "生成成功！" });
|
||
}, 500);
|
||
})
|
||
.catch((error) => {
|
||
console.error("生成海报失败");
|
||
gsap.to(".posterPop", {
|
||
duration: 0.5,
|
||
autoAlpha: 0,
|
||
onComplete: () => {
|
||
emit("ResultPage", { action: "hide" });
|
||
},
|
||
});
|
||
Toast.fail({ message: "生成失败，请重试！" });
|
||
});
|
||
|
||
// return posterUrl
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="posterPop" @touchmove.prevent>
|
||
<div class="poster-bg"></div>
|
||
<div class="poster-container">
|
||
<div class="poster-title"></div>
|
||
<div class="poster-box">
|
||
<div class="poster">
|
||
<img id="posterSrc" src="" alt="" srcset="" />
|
||
</div>
|
||
<!-- <div class="poster-cls-btn" @click="hide($event)"></div> -->
|
||
</div>
|
||
<div class="save-tips">*长按保存海报</div>
|
||
<div class="btn-box">
|
||
<div class="go-draw" @click="goDraw($event)"></div>
|
||
<div class="go-share" @click="goShare($event)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 分享提示 -->
|
||
<div class="sharePop" @click="hideShare">
|
||
<div class="tips-pic"></div>
|
||
<div class="tips-text">点击右上角分享给你的好友！</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.posterPop {
|
||
@include pos(100%, 1624px, 0px, 0px);
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #d6d1ca, #e5dccf);
|
||
visibility: hidden;
|
||
|
||
.poster-bg {
|
||
@include pos(750px, 1624px, 0px, 0px);
|
||
// transform: translateY(-50%);
|
||
@include bg_pos("index/bg.jpg");
|
||
}
|
||
|
||
.poster-container {
|
||
@include pos(750px, 1624px, 0px, 0px);
|
||
@include flexCen();
|
||
background-color: rgba($color: #000000, $alpha: 0.3);
|
||
|
||
.poster-title {
|
||
@include box(592px, 156px);
|
||
@include bg_pos("index/title.png");
|
||
}
|
||
|
||
.save-tips {
|
||
font-size: 20px;
|
||
line-height: 20px;
|
||
color: #ffffff;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.poster-box {
|
||
@include box(720px, 882px);
|
||
margin-top: 20px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.poster-cls-btn {
|
||
@include pos(53px, 53px, 660px, 10px);
|
||
@include bg_pos("result/cls-btn.png");
|
||
}
|
||
|
||
.poster {
|
||
@include box(100%, 100%);
|
||
overflow: hidden;
|
||
@include bg_pos("result/card.png");
|
||
|
||
#posterSrc {
|
||
@include box(100%, 100%);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-box {
|
||
@include box(550px, 91px);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
|
||
.go-draw {
|
||
@include box(243px, 91px);
|
||
@include bg_pos("result/go-draw-btn.png");
|
||
}
|
||
|
||
.go-share {
|
||
@include box(243px, 91px);
|
||
@include bg_pos("result/go-share-btn.png");
|
||
}
|
||
}
|
||
}
|
||
}<script setup>
|
||
import { debounceTap } from "@/plugins";
|
||
import gsap from "gsap";
|
||
import BScroll from '@better-scroll/core'
|
||
|
||
// 页面配置初始化
|
||
const emit = defineEmits(["RulePage"]);
|
||
|
||
const hide = (event) => {
|
||
debounceTap(event.target, () => {
|
||
scroll.value.destroy()
|
||
emit("RulePage", { action: "hide" });
|
||
});
|
||
};
|
||
|
||
let scroll = ref()
|
||
onMounted(() => {
|
||
|
||
let wrapper = document.querySelector('.wrapper')
|
||
scroll.value = new BScroll(wrapper)
|
||
|
||
gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
|
||
gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
|
||
gsap.to(".rule-arrow", { duration: 2.5, y: 10, repeat: -1, yoyo: true });
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="RulePage" @touchmove.prevent>
|
||
<div class="rule-container">
|
||
<div class="content">
|
||
<div class="rule-content">
|
||
<div class="rule-text-area wrapper">
|
||
<div>
|
||
<div class="part">
|
||
<div>活动时间：2025年5月28日——5月31日</div>
|
||
<div>活动奖励：微信红包</div>
|
||
</div>
|
||
<div class="part">
|
||
<div>活动攻略：</div>
|
||
<div>
|
||
1、【龙舟争渡 稳健为先——端午赛龙舟中的投资哲学】活动共设计4道题目，首页进入后点击进行答题，全部答对即可获取专属赛龙舟海报，并参与抽奖；答错时刷新即可重新回答本题。
|
||
</div>
|
||
<div>2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。</div>
|
||
</div>
|
||
<div class="part">
|
||
<div>领奖说明：</div>
|
||
<div>
|
||
1、中奖后在中奖页面复制兑换码，前往<span
|
||
class="blod">[平安理财服务号]</span>消息框输入“端午安康”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品]
|
||
内查看兑换码；
|
||
</div>
|
||
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
|
||
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
|
||
</div>
|
||
|
||
<div class="part">
|
||
<div>其他：</div>
|
||
活动期间如遇到任何问题，请在<span class="blod">[平安理财服务号]</span>后台咨询，我们会在一个工作日内回复。
|
||
<div>说明：平安理财有权对活动规则进行解释</div>
|
||
</div>
|
||
<div class="part">
|
||
<div>活动说明：</div>
|
||
<div>
|
||
（1）本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，并保留追究其法律责任的权利：
|
||
</div>
|
||
<div>
|
||
(2)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式、不正当手段等参与本活动;同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等）单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的；
|
||
</div>
|
||
<div>
|
||
(3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为；
|
||
</div>
|
||
<div>
|
||
(4)平安理财保留调整、暂停和终止本活动的权利，并经公告后生效；
|
||
</div>
|
||
<div>
|
||
(5)用户参与本活动，即视为理解并同意本活动细则。在法律法规及监管规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
|
||
</div>
|
||
</div>
|
||
<div class="margin-bottom-area"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rule-bottom-bg"></div>
|
||
<div class="rule-arrow"></div>
|
||
<div class="rule-icon"></div>
|
||
</div>
|
||
</div>
|
||
<div class="rule-cls-btn" @click="hide($event)"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.RulePage {
|
||
@include fixed();
|
||
@include flexCen();
|
||
background-color: rgba($color: #000000, $alpha: 0.3);
|
||
|
||
.rule-container {
|
||
position: relative;
|
||
@include box(708px, 880px);
|
||
overflow: hidden;
|
||
|
||
.content {
|
||
.rule-content {
|
||
@include box(708px, 880px);
|
||
@include bg_pos("rule/rule-box.png");
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.rule-text-area {
|
||
@include pos(635px, 709px, 25px, 83px);
|
||
overflow: hidden;
|
||
// overflow-y: scroll;
|
||
padding: 0px 20px;
|
||
|
||
|
||
.part {
|
||
color: #a74f00;
|
||
font-size: 20px;
|
||
line-height: 35px;
|
||
margin-top: 30px;
|
||
text-align: justify;
|
||
padding: 0 10px;
|
||
font-family: 'HarmonyOS_Sans_SC_Regular';
|
||
}
|
||
|
||
.blod {
|
||
font-weight: 700;
|
||
color: #a74f00;
|
||
}
|
||
|
||
.margin-bottom-area {
|
||
// margin-bottom: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rule-arrow {
|
||
@include pos(161px, 102px, 262px, 682px);
|
||
@include bg_pos("rule/arrow.png");
|
||
pointer-events: none;
|
||
}
|
||
<template>
|
||
<div class="home" @click.once="firstClick">
|
||
<div class="home-container">
|
||
<Index v-if="showIndex" @IndexPage="indexFn"></Index>
|
||
<Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
|
||
<Result v-if="showResult" @ResultPage="resultFn"></Result>
|
||
<MyPrize v-if="showMyPrize" @MyPrizePage="myPrizeFn"></MyPrize>
|
||
<Draw v-if="showDraw" @DrawPage="drawFn"></Draw>
|
||
<Rule v-if="showRule" @RulePage="ruleFn"></Rule>
|
||
<Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
|
||
<!-- 音乐图标 -->
|
||
<div class="music_icon" @click="musicPlay">
|
||
<audio
|
||
style="display: none; height: 0"
|
||
id="bg-music"
|
||
autoplay="autoplay"
|
||
preload="auto"
|
||
:src="musicUrl"
|
||
loop="loop"
|
||
></audio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import gsap from "gsap";
|
||
import Loading from "@/components/Loading";
|
||
import Index from "@/components/Index";
|
||
import Question from "@/components/Question";
|
||
import MyPrize from "@/components/MyPrize";
|
||
import Draw from "@/components/Draw";
|
||
import Result from "@/components/Result";
|
||
import Rule from "@/components/Rule";
|
||
import { getQueryString, screenOrientation, fontAdpat } from "@/plugins";
|
||
import { authorize, getUserInfo } from "@/api";
|
||
import { Toast } from "vant";
|
||
import { useMainStore } from "@/store";
|
||
|
||
const userStore = useMainStore();
|
||
|
||
const musicUrl = new URL(`@/assets/media/bgm.mp3`, import.meta.url).href;
|
||
|
||
const showLoad = ref(false);
|
||
const loadFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showLoad.value = false;
|
||
showIndex.value = true;
|
||
}
|
||
};
|
||
|
||
const showIndex = ref(false);
|
||
const indexFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showIndex.value = false;
|
||
}
|
||
if (item.action == "showMyPrize") {
|
||
showMyPrize.value = true;
|
||
}
|
||
if (item.action == "start") {
|
||
showQuestion.value = true;
|
||
}
|
||
|
||
if (item.action == "showRule") {
|
||
showRule.value = true;
|
||
}
|
||
};
|
||
|
||
const showQuestion = ref(false);
|
||
const questionFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showQuestion.value = false;
|
||
}
|
||
|
||
if (item.action == "showResult") {
|
||
showResult.value = true;
|
||
showQuestion.value = false;
|
||
}
|
||
};
|
||
|
||
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;
|
||
console.log("hide", showResult.value);
|
||
}
|
||
|
||
if (item.action == "showDraw") {
|
||
showDraw.value = true;
|
||
}
|
||
};
|
||
|
||
const showRule = ref(false);
|
||
const ruleFn = (item) => {
|
||
if (item.action == "hide") {
|
||
showRule.value = false;
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
fontAdpat(); //字体适配
|
||
screenOrientation(); //横竖屏检测
|
||
|
||
let code = getQueryString("code");
|
||
let url = import.meta.env.VITE_URL;
|
||
|
||
let dev = import.meta.env.VITE_MODE;
|
||
if (dev != "dev") {
|
||
if (code) {
|
||
getUserInfo({ code: code }).then((res) => {
|
||
if (res.code == 0) {
|
||
console.log("我的信息：", res.data);
|
||
userStore.updateToken(res.data);
|
||
// 开始加载组件
|
||
showLoad.value = true;
|
||
iosMusic(); //自动播放音乐
|
||
gsap.set(".music_icon", { autoAlpha: 1 });
|
||
return;
|
||
} else {
|
||
authorize({ scopeType: 1, redirectUri: url }).then((res) => {
|
||
if (res.code == 0) {
|
||
console.log("重定向地址：", res.data);
|
||
location.replace(res.data);
|
||
} else {
|
||
// 活动已结束：6001
|
||
if (res.code == "6001") {
|
||
Toast.fail({
|
||
message: res.msg,
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 活动未开启：6002
|
||
if (res.code == "6002") {
|
||
Toast({
|
||
message: res.msg,
|
||
duration: 0,
|
||
icon: "flag-o",
|
||
forbidClick: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 其余情况
|
||
Toast({
|
||
message: res.msg,
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
authorize({ scopeType: 1, redirectUri: url }).then((res) => {
|
||
if (res.code == 0) {
|
||
console.log("重定向地址：", res.data);
|
||
location.replace(res.data);
|
||
} else {
|
||
// 活动已结束：6001
|
||
if (res.code == "6001") {
|
||
Toast.fail({
|
||
message: "活动已结束",
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 活动未开启：6002
|
||
if (res.code == "6002") {
|
||
Toast({
|
||
message: "活动未开始",
|
||
duration: 0,
|
||
icon: "flag-o",
|
||
forbidClick: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
Toast.fail({
|
||
message: "活动已结束",
|
||
duration: 0,
|
||
forbidClick: true,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
showLoad.value = true;
|
||
iosMusic(); //自动播放音乐
|
||
gsap.set(".music_icon", { autoAlpha: 1 });
|
||
}
|
||
});
|
||
|
||
// ios端音乐自动播放
|
||
const iosMusic = () => {
|
||
// ios自动播放音乐
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
function audioAutoPlay() {
|
||
var audio = document.getElementById("bg-music");
|
||
audio.play();
|
||
document.addEventListener(
|
||
"WeixinJSBridgeReady",
|
||
function () {
|
||
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
|
||
audio.play();
|
||
});
|
||
},
|
||
false
|
||
);
|
||
}
|
||
audioAutoPlay();
|
||
});
|
||
|
||
musicBtnAni.fromTo(
|
||
".music_icon",
|
||
{ rotation: "0" },
|
||
{ rotation: "+=360", repeat: -1, duration: 7, ease: "none" }
|
||
);
|
||
musicBtnAni.play();
|
||
};
|
||
|
||
// 音乐播放
|
||
const musicBtnAni = gsap.timeline();
|
||
const playStatu = ref(true);
|
||
const musicPlay = () => {
|
||
let audio = document.getElementById("bg-music");
|
||
if (playStatu.value == true) {
|
||
musicBtnAni.pause();
|
||
audio.pause();
|
||
playStatu.value = false;
|
||
console.log("暂停");
|
||
} else {
|
||
musicBtnAni.play();
|
||
audio.play();
|
||
playStatu.value = true;
|
||
console.log("播放");
|
||
}
|
||
};
|
||
|
||
const firstClick = () => {
|
||
let audio = document.getElementById("bg-music");
|
||
|
||
musicBtnAni.play();
|
||
audio.play();
|
||
playStatu.value = true;
|
||
console.log("播放");
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
#app {
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #d6d1ca, #e5dccf);
|
||
font-family: "FZZY_Regular";
|
||
}
|
||
|
||
#__vconsole {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.music_icon {
|
||
@include pos(60px, 60px, 20px, 305px);
|
||
@include bg_pos("music-on.png");
|
||
z-index: 99;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.home {
|
||
@include pos(100%, 100vh, 0px, 0px);
|
||
overflow: hidden;
|
||
|
||
.home-container {
|
||
@include pos(750px, 1624px, 0px, 50%);
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
// 音乐-on样式
|
||
.music-on {
|
||
@include bg_pos("music-on.png");
|
||
}
|
||
|
||
// 音乐-off样式
|
||
.music-off {
|
||
@include bg_pos("music-off.png");
|
||
}export const data = [
|
||
{
|
||
id: 1,
|
||
question: [
|
||
"赛龙舟时，鼓手用节奏统一行动，舵手把控方向，划手齐心发力，三者缺一不可。这体现了哪种投资模式？",
|
||
],
|
||
answer: [
|
||
{
|
||
aid: "A",
|
||
text: "平台化高效协作投资模式，集体智慧",
|
||
result: 1,
|
||
},
|
||
{
|
||
aid: "B",
|
||
text: "明星基金经理的单打独斗，个人英雄主义",
|
||
result: 0,
|
||
},
|
||
],
|
||
tips: [`平安理财采取平台化、模块化的投资模式，通过团队作战能更好协调更优势、更广泛的资源，并最终为客户创造可持续的投资收益，截至 2025 年 5月15日已累计为 1700 万名客户创造1092亿元投资收益。`],
|
||
},
|
||
{
|
||
id: 2,
|
||
question: [
|
||
"赛龙舟经常会遇上河道弯曲或河流湍急，常常出现翻船风险，为了确保顺利抵达终点，在拐弯及面对急流时所使用的技巧与投资中的哪种情况相符？",
|
||
],
|
||
answer: [
|
||
{
|
||
aid: "A",
|
||
text: "追求单车变摩托，冒险前进，重仓搏一把",
|
||
result: 0,
|
||
},
|
||
{
|
||
aid: "B",
|
||
text: "坚持绝对收益目标，严格风险控制，稳健为先",
|
||
result: 1,
|
||
},
|
||
],
|
||
tips: [`稳健是资产长期增值的关键，平安理财坚持以绝对收益为目标，截至2025年5月15日，旗下定开/封闭式多个产品线实现历史到期兑付100%正收益（如启航系列、稳健精选系列、启元系列、新安鑫系列、卓越成长系列、卓越稳健系列等）。`],
|
||
},
|
||
{
|
||
id: 3,
|
||
question: [
|
||
"赛龙舟中，队伍需在发令枪响的瞬间同步起桨，冲刺阶段更需高频划桨。这与下列哪种投资策略相符？",
|
||
],
|
||
answer: [
|
||
{
|
||
aid: "A",
|
||
text: "精准把握市场机会，适当追求超额收益",
|
||
result: 1,
|
||
},
|
||
{
|
||
aid: "B",
|
||
text: "一旦配置长期不动，顺其自然随遇而安",
|
||
result: 0,
|
||
},
|
||
],
|
||
tips: [`稳健为先的前提下，平安理财通过多资产、多策略的能力优势，在低利率时代中力争为投资者创造相对不错的超额收益。如鑫享全球动量策略日开180天持有1号A今年以来年`],
|
||
},
|
||
{
|
||
id: 4,
|
||
question: [
|
||
"赛龙舟通常500米，但有一种达到了30公里，号称龙舟马拉松。如果说500米赛龙舟对应的是投资中短期主义，那么龙舟马拉松对应的是哪种情怀？",
|
||
],
|
||
answer: [一二三四
|
||
{
|
||
aid: "A",
|
||
text: "投机主义，左右摇摆或见风使舵",
|
||
result: 0,
|
||
},
|
||
{
|
||
aid: "B",
|
||
text: "长期主义精神，坚持长期稳健经营理念",
|
||
result: 1,
|
||
},
|
||
],
|
||
tips: [`行稳方能致远。长期主义是以长远视角进行决策和行动的价值观，其核心在于追求可持续的价值增长，而非短期利益的最大化。这是平安理财自成立以来一直坚持的投资和经营理念。`],
|
||
},
|
||
];
|
||
|
||
|
||
.orientationPop {
|
||
@include fixed();
|
||
@include flexCen();
|
||
background-color: rgba($color: #000000, $alpha: 1);
|
||
visibility: hidden;
|
||
}
|
||
|
||
.orientation-icon {
|
||
@include box(60px, 60px);
|
||
@include bg_pos("orientation-icon.png");
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.orientation-text {
|
||
color: #fff;
|
||
font-size: 30px;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|
||
|
||
.rule-bottom-bg {
|
||
// @include pos(685px, 102px, 0px, 712px);
|
||
// border-radius: 10px;
|
||
// pointer-events: none;
|
||
// background-image: -webkit-linear-gradient(90deg, rgba(255, 238, 186, 0.7), rgba(255, 255, 255, 0.1) 100%);
|
||
}
|
||
|
||
.rule-icon {
|
||
@include pos(121px, 104px, 501px, 25px);
|
||
@include bg_pos("rule/icon.png");
|
||
pointer-events: none;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.rule-cls-btn {
|
||
@include box(49px, 49px);
|
||
@include bg_pos("rule/cls-btn.png");
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
.sharePop {
|
||
@include fixed();
|
||
background-color: rgba($color: #000000, $alpha: 0.54);
|
||
visibility: hidden;
|
||
|
||
.tips-pic {
|
||
@include pos(100px, 100px, 600px, 180px);
|
||
@include bg_pos("result/share-tips.svg");
|
||
stroke: #ffffff;
|
||
}
|
||
|
||
.tips-text {
|
||
font-size: 25px;
|
||
@include pos(750px, 100px, 0px, 300px);
|
||
color: #ffffff;
|
||
text-align: right;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.sharePop {
|
||
@include fixed();
|
||
background-color: rgba($color: #000000, $alpha: 0.54);
|
||
visibility: hidden;
|
||
|
||
.tips-pic {
|
||
@include pos(100px, 100px, 600px, 180px);
|
||
@include bg_pos("result/share-tips.svg");
|
||
stroke: #ffffff;
|
||
}
|
||
|
||
.tips-text {
|
||
font-size: 25px;
|
||
@include pos(750px, 100px, 0px, 300px);
|
||
color: #ffffff;
|
||
text-align: right;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
color: #ffffff;
|
||
}
|
||
.qp-tips-text {
|
||
@include pos(569px, 220px, 0px, 150px);
|
||
~！@#￥%……&*（）——+=-0 font-size: 25px;
|
||
line-height: 35px;
|
||
text-align: justify;
|
||
color: #b3640d;
|
||
}
|
||
}
|
||
|
||
.next-btn {
|
||
@include box(190px, 65px);
|
||
border: 1px solid #ffffff;
|
||
@include flexCen();
|
||
font-size: 35px;
|
||
color: #ffffff;
|
||
border-radius: 31px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
</style>
|
||
1234567890.$$$￥￥￥￥
|
||
font-size: 20px;
|
||
// font-weight: 700;
|
||
color: #fff6cc;
|
||
letter-spacing: 2px;
|
||
// background-color: aqua;
|
||
}
|
||
|
||
.exchnage-tips2 {
|
||
@include pos(390px, 52px, 110px, 638px);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 15px;
|
||
// font-weight: 700;
|
||
color: #fff6cc;
|
||
// background-color: aqua;
|
||
}
|
||
|
||
.myPrize-cls-btn {
|
||
@include pos(82px, 82px, 517px, 114px);
|
||
@include bg_pos("prize/cls-btn.png");
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
.num {
|
||
font-size: 40px;
|
||
color: #f25501;
|
||
font-weight: 700;
|
||
|
||
/* 文字填充色 */
|
||
text-shadow:
|
||
-1px -1px 0 #ffffff,
|
||
1px -1px 0 #ffffff,
|
||
-1px 1px 0 #ffffff,
|
||
1px 1px 0 #ffffff;
|
||
/* 四个方向阴影叠加 */
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
@include box(200px, 40px);
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background-color: aliceblue;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
.b {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.orange {
|
||
color: #ff7127;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
.cls-btn {
|
||
@include pos(82px, 82px, 517px, 114px);
|
||
@include bg_pos("prize/cls-btn.png");
|
||
}
|
||
}
|
||
|
||
// 未中奖弹窗样式
|
||
.draw-none {
|
||
@include flexCen();
|
||
|
||
.none-prize {
|
||
@include box(521px, 447px);
|
||
@include bg_pos("prize/no-prize.png");
|
||
}
|
||
|
||
.cls-btn {
|
||
@include box(82px, 82px);
|
||
@include bg_pos("prize/cls-btn.png");
|
||
margin-top: 40px;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |