完成加载页、首页、答题页逻辑，待处理动画
This commit is contained in:
Andy Leong
@@ -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>
|
||||
Reference in New Issue
Block a user