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

初始化端午项目

Browse Source
This commit is contained in:
梁泽军
2025-05-20 18:28:02 +08:00
parent d239b3f8fb
commit 749a61f00b
95 changed files with 1399 additions and 1387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/Rule.vue
View File

@@ -17,11 +17,11 @@ let scroll = ref()
onMounted(() => {
let wrapper = document.querySelector('.wrapper')
scroll.value = new BScroll(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 });
gsap.to(".rule-arrow", { duration: 2.5, y: 10, repeat: -1, yoyo: true });
});
</script>
@@ -32,49 +32,53 @@ onMounted(() => {
<div class="rule-content">
<div class="rule-text-area wrapper">
<div>
<div class="part">
<div>活动时间：</div>
<div>2024年8月14日8:30-2024年8月16日17:30</div>
<div>活动奖励：微信红包</div>
<div class="part">
<div>活动时间：2025年4月27日——4月30日</div>
<div>活动奖励：微信红包</div>
</div>
<div class="part">
<div>活动攻略：</div>
<div>
1、【打卡理想假期，五一好礼等你】活动共设计5道题目，首页进入后左右滑动选择您想打卡的地点，点击进行答题，答对后即可获取专属打卡海报，并参与抽奖；答错时将跳转回选择打卡地点的页面，重新答题。
</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 class="part">
<div>活动攻略：</div>
<div>
1、进入活动参加【好“理”在手，邂逅清凉一夏】答题，共设计3道题目，全部选择完毕后即可参与抽奖活动；
</div>
<div>2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。</div>
</div>
<div class="part">
<div>领奖说明：</div>
<div>
<span class="blod">1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“清凉一夏”获取兑换链接，进入链接输入兑换码兑换奖品。</span>如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
</div>
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
</div>
<div class="part">
<div>其他说明：</div>
<div>
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
</div>
<div>
(1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
</div>
<div>
(2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
</div>
<div>
(3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
</div>
<div>
2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
</div>
<div>
3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
</div>
</div>
<div class="margin-bottom-area"></div>
</div>
</div>
</div>
<div class="rule-bottom-bg"></div>
@@ -84,49 +88,49 @@ onMounted(() => {
</div>
<div class="rule-cls-btn" @click="hide($event)"></div>
</div>
</template>
</template>
<style lang="scss" scoped>
.RulePage {
@include fixed();
@include flexCen();
background-color: rgba($color: #000000, $alpha: 0.7);
background-color: rgba($color: #000000, $alpha: 0.3);
.rule-container {
position: relative;
@include box(664px, 861px);
@include box(685px, 876px);
overflow: hidden;
.content {
.rule-content {
@include box(663px, 861px);
@include box(685px, 876px);
@include bg_pos("rule/rule-box.png");
position: relative;
overflow: hidden;
.rule-text-area {
@include pos(663px, 645px, 0px, 131px);
@include pos(635px, 709px, 25px, 83px);
overflow: hidden;
// overflow-y: scroll;
padding: 0px 50px;
padding: 0px 20px;
.part {
color: #0070d9;
font-size: 24px;
line-height: 40px;
color: #a74f00;
font-size: 20px;
line-height: 35px;
margin-top: 30px;
text-align: justify;
padding: 0 10px;
font-family: 'HarmonyOS_Sans_SC_Regular';
font-family: 'FZZY_Regular';
}
.blod{
.blod {
font-weight: 700;
color: #0070d9;
color: #a74f00;
}
.margin-bottom-area{
.margin-bottom-area {
// margin-bottom: 100px;
height: 100px;
}
@@ -134,30 +138,32 @@ onMounted(() => {
}
.rule-arrow {
@include pos(149px, 84px, 257px, 712px);
@include pos(161px, 102px, 262px, 682px);
@include bg_pos("rule/arrow.png");
pointer-events: none;
}
.rule-bottom-bg {
// visibility: hidden;
@include pos(600px, 102px, 30px, 728px);
pointer-events: none;
background-image: -webkit-linear-gradient( 90deg, rgba(0, 112, 217, 0.1) , rgba(255, 255, 255, 0.1) 100%);
// @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(165px, 180px, 517px, 666px);
@include pos(97px, 120px, 561px, 25px);
@include bg_pos("rule/icon.png");
pointer-events: none;
}
}
}
.rule-cls-btn {
@include box(43px, 43px);
@include box(49px, 49px);
@include bg_pos("rule/cls-btn.png");
margin-top: 40px;
margin-top: 0px;
}
}
</style>