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

完成加载页、首页、答题页逻辑，待处理动画

Browse Source
This commit is contained in:
Andy Leong
2024-02-03 03:46:26 +08:00
parent c342ae3a01
commit dcb524eb5a
56 changed files with 406 additions and 508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Draw.vue
View File

@@ -100,7 +100,7 @@ const hide = (event) => {
duration: 0.3,
autoAlpha: 0,
onComplete: () => {
emit("DrawPage", "hide");
emit("DrawPage", {action:"hide"});
},
});
});

151
src/components/Index.vue
View File

@@ -32,26 +32,6 @@ const showRule = (event) => {
});
};
const clockAni = () => {
gsap.to(".index-clock-h", {
duration: 12,
rotation: "+=360",
repeat: -1,
ease: "none",
});
gsap.to(".index-clock-m", {
duration: 8,
rotation: "+=360",
repeat: -1,
ease: "none",
});
gsap.to(".index-clock-s", {
duration: 3,
rotation: "+=360",
repeat: -1,
ease: "none",
});
};
onMounted(() => {
gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
@@ -75,14 +55,8 @@ onMounted(() => {
autoAlpha: 0,
delay: 0.5,
});
gsap.from(".index-tips", {
duration: 1,
// scale: 0.4,
autoAlpha: 0,
delay: 0.5,
});
clockAni();
});
const vcNum = ref(false);
@@ -96,20 +70,21 @@ const showVC = () => {
<template>
<div class="IndexPage" @touchmove.prevent>
<div class="index-bg">
<div class="index-clock-box">
<div class="index-clock-h"></div>
<div class="index-clock-m"></div>
<div class="index-clock-s"></div>
<div class="index-clock-circle"></div>
</div>
</div>
<div class="index-bg"></div>
<div class="index-container">
<div class="index-fan-1"></div>
<div class="index-fan-2"></div>
<div class="index-fan-3"></div>
<div class="index-fan-4"></div>
<div class="index-bottom-bg"></div>
<div class="index-cloud"></div>
<div class="index-firework"></div>
<div class="index-windows"></div>
<div class="index-pet"></div>
<div class="index-title" @click="showVC"></div>
<div class="index-rule-btn" @click="showRule($event)"></div>
<div class="index-prize-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)"></div>
<div class="index-start-btn" @click="start"></div>
<div class="index-tips"> ———本活动测试结果仅供娱乐，不能代替投资者风险承受能力评级结果———</div>
<div class="index-agreement">
风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
@@ -129,67 +104,93 @@ const showVC = () => {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
@include bg_pos("index/bg.jpg");
.index-clock-box {
@include pos(125px, 125px, 213px, 700px);
@include bg_pos("load/clock-bg.png");
.index-clock-circle {
@include pos(13px, 13px, 57px, 55px);
@include bg_pos("load/clock-circle.png");
}
.index-clock-s {
@include pos(125px, 125px, 0px, 0px);
@include bg_pos("load/clock-second.png");
}
.index-clock-m {
@include pos(125px, 125px, 0px, 0px);
@include bg_pos("load/clock-minute.png");
}
.index-clock-h {
@include pos(125px, 125px, 0px, 0px);
@include bg_pos("load/clock-hour.png");
}
}
}
.index-container {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
.index-bottom-bg{
pointer-events: none;
@include pos(750px, 558px, 0px, 1066px);
@include bg_pos("index/bottom-bg.png");
}
.index-fan-1{
pointer-events: none;
@include pos(235px, 574px, 0px, 60px);
@include bg_pos("index/fan-1.png");
}
.index-fan-2{
pointer-events: none;
@include pos(316px, 317px, -205px, 405px);
@include bg_pos("index/fan-2.png");
}
.index-fan-3{
pointer-events: none;
@include pos(370px, 334px, 545px, 910px);
@include bg_pos("index/fan-3.png");
}
.index-fan-4{
pointer-events: none;
@include pos(350px, 205px, 494px, 1011px);
@include bg_pos("index/fan-4.png");
}
.index-cloud{
pointer-events: none;
@include pos(88px, 46px, 621px, 269px);
@include bg_pos("index/cloud.png");
}
.index-firework{
pointer-events: none;
@include pos(120px, 120px, 605px, 437px);
@include bg_pos("index/firework.png");
}
.index-windows{
pointer-events: none;
@include pos(743px, 744px, 4px, 440px);
@include bg_pos("index/windows.png");
}
.index-pet{
pointer-events: none;
@include pos(234px, 421px, 353px, 614px);
@include bg_pos("index/pet-icon.png");
}
.index-title {
// pointer-events: none;
@include pos(632px, 151px, 61px, 285px);
@include pos(603px, 167px, 75px, 247px);
@include bg_pos("index/title.png");
}
.index-rule-btn {
@include pos(168px, 51px, -67px, 474px);
@include pos(184px, 49px, -37px, 446px);
@include bg_pos("index/rule-btn.png");
}
.index-prize-btn {
@include pos(168px, 51px, -67px, 536px);
@include pos(184px, 49px, -37px, 515px);
@include bg_pos("index/prize-btn.png");
}
.index-start-btn {
@include pos(278px, 79px, 226px, 1081px);
@include pos(311px, 90px, 220px, 1168px);
@include bg_pos("index/start-btn.png");
}
.index-agreement {
font-family: "SourceHanSansCN";
font-family: "HarmonyOS_Sans_SC_Regular";
pointer-events: none;
@include pos(736px, 182px, 7px, 1219px);
background: rgba($color: #f49e6a, $alpha: 0.55);
@include pos(736px, 182px, 7px, 1258px);
// background: rgba($color: #f49e6a, $alpha: 0.55);
font-size: 14px;
text-align: justify;
letter-spacing: 0.1px;
color: #000000;
color: #ff8c84;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
@@ -200,21 +201,11 @@ const showVC = () => {
}
.orange {
color: #ea5404;
color: #fdf9de;
font-weight: 700;
}
}
.index-tips {
font-family: "SourceHanSansCN" !important;
pointer-events: none;
@include pos(750px, 30px, 0px, 1172px);
color: #fdedd3;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
}
}
</style>

68
src/components/Loading.vue
View File

@@ -12,28 +12,8 @@ const userStore = useMainStore();
const loadNum = ref(0);
const entryAni = () => {
gsap.to(".clock-h", {
duration: 10,
rotation: "+=360",
repeat: -1,
ease: "none",
});
gsap.to(".clock-m", {
duration: 3,
rotation: "+=360",
repeat: -1,
ease: "none",
});
gsap.to(".clock-s", {
duration: 1,
rotation: "+=360",
repeat: -1,
ease: "none",
});
};
onMounted(() => {
entryAni();
Preloader({
name: "加载页资源",
imgs: loadImg,
@@ -86,12 +66,7 @@ onMounted(() => {
<div class="LoadPage" @touchmove.prevent>
<div class="load-bg"></div>
<div class="load-container">
<div class="clock-box">
<div class="clock-h"></div>
<div class="clock-m"></div>
<div class="clock-s"></div>
<div class="clock-circle"></div>
</div>
<div class="load-icon"></div>
<div class="load-box">
<div class="bar"></div>
</div>
@@ -118,43 +93,25 @@ onMounted(() => {
@include box(750px, 1180px);
// transform: translateY(-50%);
.clock-box {
@include pos(125px, 125px, 313px, 299px);
@include bg_pos("load/clock-bg.png");
.clock-circle {
@include pos(13px, 13px, 57px, 55px);
@include bg_pos("load/clock-circle.png");
}
.clock-s {
@include pos(125px, 125px, 0px, 0px);
@include bg_pos("load/clock-second.png");
}
.clock-m {
@include pos(125px, 125px, 0px, 0px);
@include bg_pos("load/clock-minute.png");
}
.clock-h {
@include pos(125px, 125px, 0px, 0px);
@include bg_pos("load/clock-hour.png");
}
.load-icon{
@include pos(101px, 55px, 325px, 370px);
@include bg_pos("load/icon.png");
}
.load-box {
@include pos(512px, 38px, 119px, 450px);
@include pos(512px, 35px, 119px, 450px);
border-style: solid;
border-width: 2px;
border-color: #e17c4d;
border-radius: 20px;
overflow: hidden;
padding: 2px;
.bar {
@include box(10%, 38px);
@include box(0%, 26px);
border-radius: 20px;
background: linear-gradient(45deg, #f2733a, #ffd667);
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%);
}
}
@@ -169,8 +126,7 @@ onMounted(() => {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 2px;
font-style: italic;
// letter-spacing: 2px;
}
.btn {

353
src/components/Question.vue
View File

@@ -12,18 +12,42 @@ const userStore = useMainStore();
// 当前题目
const currentId = ref(0); //当前id 0~11
const questionList = ref(FYShuffle(data)); //随机打乱题库
const questionList = ref(data); //随机打乱题库
const answerList = ref([]); // 答案库统计
const activeId = ref(""); // 当前题目所选答案选项
const showResultBtn = ref(false);
// 答题事件
const answerFn = (item, event) => {
console.log('current：', currentId.value);
let e = event.target.parentElement.parentElement;
let e = event.target.parentElement;
activeId.value = item.aid; //更新选中状态
console.log('选项', item);
debounceTap(e, () => {
activeId.value = item.aid; //更新下一题
// console.log("答案库", answerList.value);
let cid = questionList.value[currentId.value].id;
let has = answerList.value.findIndex((obj) => obj.id === cid);
// 答案库中未存在该题的结果则新增，存在则更新最新选项
if (has == -1) {
answerList.value.push({
id: cid,
aid: item.aid,
answer: item.text,
});
} else {
answerList.value[has].aid = item.aid;
answerList.value[has].answer = item.text;
}
// 判断是否为最后一题
if (currentId.value < questionList.value.length - 1) {
currentId.value++
activeId.value = ''
} else {
Toast('答题结束')
gsap.set('.question-box',{pointerEvents:'none'})
}
console.log("答案库", answerList.value);
});
};
@@ -79,25 +103,6 @@ const showResult = () => {
};
// 上一页函数
const prevePage = (event) => {
let e = event.target;
debounceTap(e, () => {
if (currentId.value == 1) {
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
}
if (currentId.value >= 11) {
// resultBtnAni.reverse();
gsap.set(".answer", { pointerEvents: "initial" });
}
activeId.value = "";
currentId.value--;
// 查询上一题做的选择
console.log('当前题库：', answerList.value[currentId.value]);
activeId.value = answerList.value[currentId.value].aid
});
};
// 查看结果事件及动画
@@ -110,9 +115,48 @@ onMounted(() => {
<template>
<div class="QuestionPage" @touchmove.prevent>
<div class="question-bg">
<div class="bottom-fan-1"></div>
<div class="bottom-fan-2"></div>
<div class="question-bottom-bg"></div>
</div>
<div class="question-container">
<div class="container-fan-1"></div>
<div class="container-fan-2"></div>
<Progress :percentage="(currentId + 1) / 12 * 100" pivot-color="#7232dd" :show-pivot="false"
color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" />
<div class="question-box">
<!-- 问题序号 -->
<div class="qa-number">{{ questionList[currentId].id }}</div>
<div class="qa-question-box">
<!-- 问题 -->
<div class="question">
<div class="question-text" v-for="item in questionList[currentId].question" :key="item">
{{ item }}
</div>
</div>
<!-- 选项 -->
<div class="answer-box">
<div class="answer" :class="activeId == item.aid ? 'answer-active' : ''"
v-for="item in questionList[currentId].answer" :key="item.aid">
<div class="answer-option">{{ item.aid }}</div>
<div class="answer-text-box">
<div class="answer-text" v-for="a in item.text" :key="a">
{{ a }}
</div>
</div>
<!-- 可点击区域 -->
<div class="click-area" @click="answerFn(item, $event)"></div>
</div>
</div>
</div>
</div>
<div class="question-lantern-icon"></div>
<div class="question-gold-icon-1"></div>
<div class="question-gold-icon-2"></div>
</div>
<!-- 进度条 -->
<!-- <Progress :percentage="(currentId + 1) / 12 * 100" pivot-color="#7232dd" :show-pivot="false"
color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" /> -->
</div>
</template>
@@ -122,135 +166,184 @@ onMounted(() => {
overflow: hidden;
.question-bg {
@include pos(750px, 4500px, 0px, 50%);
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
background: linear-gradient(135deg, #f6d365, #fda085);
@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, 100%, 0px, 50%);
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
@include flexCen();
.question-content {
@include box(100%, 100%);
@include flexCen();
.question-lantern-icon {
pointer-events: none;
@include pos(349px, 443px, 489px, 49px);
@include bg_pos('qa/lantern-icon.png');
}
.question {
font-family: "alimama";
position: relative;
@include box(713px, 428px);
@include bg_pos("qa/question.png");
font-family: "alimama";
color: #c6672c;
.container-fan-1 {
pointer-events: none;
@include pos(235px, 574px, 0px, 60px);
@include bg_pos("index/fan-1.png");
}
.question-order {
@include pos(544px, 75px, 87px, 112px);
display: flex;
justify-content: center;
align-items: center;
font-size: 66px;
font-weight: 700;
line-height: 80px;
}
.container-fan-2 {
pointer-events: none;
@include pos(316px, 317px, -205px, 405px);
@include bg_pos("index/fan-2.png");
}
.question-text {
@include pos(544px, 170px, 87px, 192px);
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
// font-weight: 700;
// line-height: 50px;
font-family: "alimama";
.question-box {
@include pos(656px, 913px, 47px, 339px);
@include bg_pos("qa/question-box.png");
.text {
width: 90%;
display: flex;
justify-content: center;
align-content: center;
}
}
.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;
}
.answer-box {
// display: flex;
// flex-direction: column;
@include box(750px, 886px);
// margin-top: 10px;
position: relative;
.qa-question-box {
@include pos(570px, 620px, 43px, 194px);
display: flex;
flex-direction: column;
justify-content: space-around;
.answer {
@include box(481px, 471px);
position: absolute;
// font-family: "alimama";
color: #c6672c;
// 问题样式
.question {
display: flex;
flex-direction: column;
.answer-bg {
@include pos(481px, 471px, 0px, 0px);
@include bg_pos("qa/answer-box-1.png");
pointer-events: none;
}
.active {
@include bg_pos("qa/answer-box-2.png");
// color: rgb(255, 255, 255);
}
.answer-text {
// @include pos(367px, 357px, 0px, 0px);
position: relative;
left: 58px;
top: 58px;
@include box(367px, 357px);
padding: 10px;
border-radius: 50%;
font-family: "SourceHanSansCNMedium";
.question-text {
width: 100%;
font-family: 'DouyinSansBold';
font-size: 35px;
font-weight: 700;
border-radius: 50%;
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);
// -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0);
}
}
.text {
@include box(367px, 357px);
padding: 0px 20px;
box-sizing: border-box;
position: absolute;
text-align: center;
// 选项样式
.answer-box {
display: flex;
flex-direction: column;
align-items: center;
// 选中状态
.answer-active {
border: 2px 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;
}
}
.answer {
@include box(476px, 92px);
position: relative;
border-radius: 47.5px;
border: 2px solid rgb(255, 225, 172);
margin-bottom: 35px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.click-area {
@include pos(476px, 92px, 0px, 0px);
border-radius: 47.5px;
}
.answer-option {
@include box(92px, 77px);
border-radius: 38.5px;
background-color: rgb(233, 197, 143);
font-size: 52px;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 20px;
color: #cc1615;
font-weight: 700;
margin-left: 5px;
}
.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%;
}
}
}
}
.answer:nth-child(1) {
top: 0px;
left: 6px;
}
.answer:nth-child(2) {
top: 414px;
left: 258px;
}
}
.prev-btn {
@include pos(148px, 61px, 50px, 600px);
@include bg_pos("qa/prev-btn.png");
visibility: hidden;
}
.showResult-btn {
@include box(478px, 246px);
position: fixed;
left: 149px;
bottom: 0px;
@include bg_pos("qa/showResult-btn.png");
}
}
.question-gold-icon-1 {
pointer-events: none;
@include pos(135px, 128px, 604px, 773px);
@include bg_pos("qa/gold-icon.png");
}
.question-gold-icon-2 {
pointer-events: none;
@include pos(276px, 241px, -70px, 1089px);
@include bg_pos("qa/gold-icon-2.png");
}
}
}
</style>

8
src/components/Result.vue
View File

@@ -326,17 +326,14 @@ const hideShare = () => {
.mbti-title {
@include pos(600px, 120px, 90px, 418px);
font-size: 80px;
font-family: "HYYaKuHei";
text-align: center;
text-shadow: 3.109px 2.517px 4px rgba(215, 70, 56, 0.47);
text-stroke: 1px #ffffff;
-webkit-text-stroke: 1px #ffffff;
// -webkit-transform: matrix(2.63538838101382, -0.15627262233171, 0.15650043026188, 2.63155221026798, 0, 0);
font-weight: bolder;
transform: rotate(-4deg);
display: flex;
span {}
}
.mbti-des-box {
@@ -344,7 +341,6 @@ const hideShare = () => {
display: flex;
flex-direction: column;
justify-content: space-around;
font-family: "fzzy";
.des {
color: #af6f49;
@@ -358,7 +354,6 @@ const hideShare = () => {
display: flex;
flex-direction: column;
justify-content: space-around;
font-family: "fzcy";
.blessings {
font-size: 50px;
@@ -373,7 +368,6 @@ const hideShare = () => {
.mbti-product {
@include pos(630px, 140px, 134px, 948px);
font-family: "fzcy";
.product {
font-size: 45px;
@@ -485,7 +479,6 @@ const hideShare = () => {
.save-tips {
font-size: 20px;
font-family: "fzcy";
line-height: 20px;
margin-top: 20px;
color: #fff;
@@ -534,7 +527,6 @@ const hideShare = () => {
}
.tips-text {
font-family: "fzcy";
font-size: 25px;
@include pos(750px, 100px, 0px, 220px);
color: #ffffff;

82
src/components/Rule.vue
View File

@@ -13,6 +13,7 @@ const hide = (event) => {
onMounted(() => {
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>
@@ -23,20 +24,20 @@ onMounted(() => {
<div class="rule-content">
<div class="rule-text-area">
<div class="part">
<div>【活动时间】：2024年2月4日——2月8日</div>
<div>【活动奖励】：微信红包</div>
<div>活动时间：2024年2月23日——2月25日</div>
<div>活动奖励：微信红包</div>
</div>
<div class="part">
<div>【活动攻略】：</div>
<div>活动攻略：</div>
<div>
1、进入活动参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
1、进入活动参加【元宵赏灯会，测测你的专属花灯！】共设计3道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
</div>
<div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
</div>
<div class="part">
<div>【领奖说明】：</div>
<div>领奖说明：</div>
<div>
1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“2024”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“元宵快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
</div>
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
@@ -44,20 +45,21 @@ onMounted(() => {
<div>
活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
</div>
<div class="part">说明：</div>
<div>平安理财有权对活动规则进行解释</div>
<div class="part">【活动规则】：</div>
<div class="part">说明：平安理财有权对活动规则进行解释</div>
</div>
<div class="part">
<div>活动规则：</div>
<div>
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
</div>
<div>
(1)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
(1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
</div>
<div>
(2)同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
(2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
</div>
<div>
(3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
(3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
</div>
<div>
2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
@@ -66,13 +68,16 @@ onMounted(() => {
3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
</div>
</div>
<div class="margin-bottom-area"></div>
</div>
</div>
<div class="rule-cls-btn" @click="hide($event)"></div>
<div class="rule-bottom-bg"></div>
<div class="rule-arrow"></div>
<div class="rule-icon"></div>
</div>
<div class="rule-caidai"></div>
</div>
<div class="rule-cls-btn" @click="hide($event)"></div>
</div>
</template>
@@ -84,48 +89,65 @@ onMounted(() => {
.rule-container {
position: relative;
@include box(492px, 712px);
@include box(612px, 794px);
overflow: hidden;
.content {
.rule-content {
@include box(490px, 709px);
@include box(612px, 794px);
@include bg_pos("rule/rule-box.png");
position: relative;
overflow: hidden;
.rule-text-area {
@include pos(405px, 523px, 41px, 101px);
@include pos(612px, 676px, 0px, 101px);
// background-color: #000000;
overflow: hidden;
overflow-y: scroll;
padding: 0px 20px;
.part {
font-family: "fzcy";
color: #ac4d31;
color: #a31b15;
font-size: 20px;
line-height: 30px;
line-height: 35px;
margin-top: 30px;
text-align: justify;
padding: 0 10px;
font-family: 'HarmonyOS_Sans_SC_Regular';
}
.margin-bottom-area{
margin-bottom: 100px;
}
}
}
.rule-arrow {
@include pos(38px, 23px, 224px, 641px);
@include pos(149px, 84px, 231px, 682px);
@include bg_pos("rule/arrow.png");
pointer-events: none;
}
.rule-cls-btn {
@include pos(48px, 48px, 441px, -76px);
@include bg_pos("rule/cls-btn.png");
.rule-bottom-bg {
// visibility: hidden;
@include pos(588px, 102px, 12px, 682px);
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(118px, 146px, 511px, 25px);
@include bg_pos("rule/icon.png");
pointer-events: none;
}
}
.rule-caidai {
@include pos(135px, 185px, 357px, 557px);
@include bg_pos("rule/caidai.png");
pointer-events: none;
}
}
.rule-cls-btn {
@include box(43px, 43px);
@include bg_pos("rule/cls-btn.png");
margin-top: 40px;
}
}
</style>