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

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>