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-01-21 01:32:58 +08:00
parent 770ca4b5c8
commit 57b35eb7e4
5 changed files with 305 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/components/Rule.vue
View File

@@ -1,117 +1,137 @@
<script setup>
import { debounceTap } from '@/plugins'
import { debounceTap } from "@/plugins";
import gsap from "gsap";
// 页面配置初始化
const emit = defineEmits(["RulePage"]);
const hide = (event) => {
debounceTap(event.target, () => {
emit('RulePage', { action: 'hide' })
})
}
debounceTap(event.target, () => {
emit("RulePage", { action: "hide" });
});
};
onMounted(() => {
gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
});
</script>
<template>
<div class="RulePage">
<div class="rule-container">
<div class="content">
<div class="rule-content">
<div class="rule-text-area">
<div class="part">
<div>【活动时间】：2024年2月5日——2月8日</div>
<div>【活动奖励】：0.5-8.88元微信红包</div>
</div>
<div class="part">
<div>【活动攻略】：</div>
<div>1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；</div>
<div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
</div>
<div class="part">
<div>【领奖说明】：</div>
<div>1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框发送兑换码即可领取奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；</div>
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
<div>其他：</div>
<div>活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。</div>
<div>说明：</div>
<div>
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权
</div>
<div>(1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；</div>
<div>(2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;</div>
<div>(3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;</div>
<div>2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;</div>
</div>
<div class="part">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="rule-cls-btn" @click="hide($event)"></div>
<div class="rule-arrow"></div>
<div class="RulePage">
<div class="rule-container">
<div class="content">
<div class="rule-content">
<div class="rule-text-area">
<div class="part">
<div>【活动时间】：2024年2月5日——2月8日</div>
<div>【活动奖励】：0.5-8.88元微信红包</div>
</div>
<div class="rule-caidai"></div>
<div class="part">
<div>【活动攻略】：</div>
<div>
1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
</div>
<div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
</div>
<div class="part">
<div>【领奖说明】：</div>
<div>
1、中奖后在中奖页面复制兑换码，前往[平安理财服务号]
消息框发送兑换码即可领取奖品。如关闭了中奖界面，可在首页-[我的奖品]
内查看兑换码；
</div>
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
<div>其他：</div>
<div>
活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
</div>
<div>说明：</div>
<div>
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权
</div>
<div>
(1)
以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
</div>
<div>
(2)
同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等)
单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
</div>
<div>
(3)
有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
</div>
<div>
2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
</div>
</div>
<div class="part">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="rule-cls-btn" @click="hide($event)"></div>
<div class="rule-arrow"></div>
</div>
<div class="rule-caidai"></div>
</div>
</div>
</template>
<style lang="scss" scoped>
.RulePage {
@include fixed();
@include flexCen();
background-color: rgba($color: #000000, $alpha: 0.7);
@include fixed();
@include flexCen();
background-color: rgba($color: #000000, $alpha: 0.7);
.rule-container {
.rule-container {
position: relative;
@include box(492px, 712px);
.content {
.rule-content {
@include box(490px, 709px);
@include bg_pos("rule/rule-box.png");
position: relative;
@include box(492px, 712px);
.content {
.rule-text-area {
@include pos(405px, 523px, 41px, 101px);
// background-color: #000000;
overflow: hidden;
overflow-y: scroll;
.rule-content {
@include box(490px, 709px);
@include bg_pos('rule/rule-box.png');
position: relative;
.rule-text-area {
@include pos(405px, 523px, 41px, 101px);
// background-color: #000000;
overflow: hidden;
overflow-y: scroll;
.part {
font-family: 'fzcy';
color: #ac4d31;
font-size: 20px;
line-height: 30px;
margin-top: 30px;
text-align: justify;
padding: 0 10px;
}
}
}
.rule-arrow {
@include pos(38px, 23px, 224px, 641px);
@include bg_pos('rule/arrow.png');
}
.rule-cls-btn {
@include pos(48px, 48px, 441px, -76px);
@include bg_pos('rule/cls-btn.png');
}
.part {
font-family: "fzcy";
color: #ac4d31;
font-size: 20px;
line-height: 30px;
margin-top: 30px;
text-align: justify;
padding: 0 10px;
}
}
}
.rule-caidai {
@include pos(135px, 185px, 357px, 557px);
@include bg_pos('rule/caidai.png');
pointer-events: none;
}
.rule-arrow {
@include pos(38px, 23px, 224px, 641px);
@include bg_pos("rule/arrow.png");
}
.rule-cls-btn {
@include pos(48px, 48px, 441px, -76px);
@include bg_pos("rule/cls-btn.png");
}
}
.rule-caidai {
@include pos(135px, 185px, 357px, 557px);
@include bg_pos("rule/caidai.png");
pointer-events: none;
}
}
}
</style>