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

切图完成

Browse Source
This commit is contained in:
梁泽军
2024-07-18 18:31:47 +08:00
parent e8fbcd48aa
commit bc1454a0e6
95 changed files with 1046 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/Index.vue
View File

@@ -35,16 +35,9 @@ const showRule = (event) => {
onMounted(() => {
gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
gsap.from(".index-bottom-bg", { duration: 1, y: 100, });
gsap.from(".index-windows", { duration: 1, scale: 0.5,autoAlpha:0, });
gsap.from(".index-pet", { duration: 1, y: -50,autoAlpha:0,delay:0.5 });
gsap.from(".index-bg,.index-island,.index-cloud-1,.index-cloud-2,.index-tree-1", { duration: 1, scale: 1.2, autoAlpha: 0 });
gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0,delay:1 });
gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0,delay:0.5 });
gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0,delay:0.5 });
gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0,delay:0.75 });
gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0,delay:0.75 });
gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0,delay:0.75 });
gsap.from(".index-sub-title", { duration: 1, x: 20, autoAlpha: 0,delay:1 });
gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
gsap.from(".index-prize-btn", {
duration: 1,
@@ -65,11 +58,12 @@ onMounted(() => {
delay: 0.5,
onComplete:()=>{
// gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-fan-1',{duration:2,x:'-=30',repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-fan-2',{duration:1.5,x:'-=20',repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-fan-3',{duration:1.5,y:'+=20',repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-fan-4',{duration:2,x:'+=20',repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-pet',{duration:2,y:'-=10',repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-cloud-1',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-cloud-2',{duration:2,x:30,repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-tree-1',{duration:2,y:10,repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-title',{duration:2.5,y:-20,repeat:-1,yoyo:true,ease:'none'})
gsap.to('.index-sub-title',{duration:3,x:10,repeat:-1,yoyo:true,ease:'none'})
}
});
@@ -92,25 +86,21 @@ const showVC = () => {
<div class="IndexPage" @touchmove.prevent>
<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-cloud-1"></div>
<div class="index-cloud-2"></div>
<div class="index-tree-1"></div>
<div class="index-island"></div>
<div class="index-logo"></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-sub-title"></div>
<div class="index-rule-btn" @click="showRule($event)"></div>
<div class="index-prize-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)"></div>
<!-- v-if="userStore.hasPrize" -->
<div class="index-prize-btn" @click="showMyPrize($event)"></div>
<div class="index-start-btn" @click="start"></div>
<div class="index-agreement">
风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
风险提示: 本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
</div>
</div>
</div>
@@ -120,7 +110,7 @@ const showVC = () => {
.IndexPage {
@include pos(100%, 100vh, 0px, 0px);
overflow: hidden;
background: linear-gradient(135deg, #a11b15, #f80c00);
background: linear-gradient(135deg, #90dcff, #51b7ff);
.index-bg {
@include pos(750px, 1624px, 0px, 50%);
@@ -132,95 +122,76 @@ const showVC = () => {
@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-logo{
pointer-events: none;
@include pos(632px, 94px, 59px, 267px);
@include bg_pos("index/logo.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, 253px);
@include bg_pos("index/cloud.png");
}
.index-firework{
pointer-events: none;
@include pos(120px, 120px, 651px, 474px);
@include bg_pos("index/firework.png");
}
.index-windows{
pointer-events: none;
@include pos(743px, 744px, 3px, 440px);
@include bg_pos("index/windows.png");
}
.index-pet{
pointer-events: none;
@include pos(234px, 386px, 353px, 614px);
@include bg_pos("index/pet-icon.png");
}
// .index-logo{
// pointer-events: none;
// @include pos(632px, 94px, 59px, 267px);
// @include bg_pos("index/logo.png");
// }
.index-title {
// pointer-events: none;
@include pos(542px, 101px, 104px, 369px);
@include pos(632px, 253px, 46px, 254px);
@include bg_pos("index/title.png");
}
.index-island{
pointer-events: none;
@include pos(714px, 867px, 15px, 542px);
@include bg_pos("index/island.png");
}
.index-cloud-1{
pointer-events: none;
@include pos(210px, 147px, -15px, 535px);
@include bg_pos("index/cloud-1.png");
}
.index-cloud-2{
pointer-events: none;
@include pos(151px, 172px, 656px, 486px);
@include bg_pos("index/cloud-2.png");
}
.index-tree-1{
pointer-events: none;
@include pos(228px, 199px, -45px, 492px);
@include bg_pos("index/tree-1.png");
}
.index-sub-title {
pointer-events: none;
@include pos(423px, 87px, 170px, 486px);
@include bg_pos("index/sub-title.png");
}
.index-rule-btn {
@include pos(184px, 49px, -37px, 506px);
@include pos(193px, 50px, 612px, 553px);
@include bg_pos("index/rule-btn.png");
}
.index-prize-btn {
@include pos(184px, 49px, -37px, 575px);
@include pos(184px, 49px, 612px, 615px);
@include bg_pos("index/prize-btn.png");
}
.index-start-btn {
@include pos(311px, 90px, 220px, 1168px);
@include pos(423px, 152px, 156px, 1025px);
@include bg_pos("index/start-btn.png");
}
.index-agreement {
font-family: "HarmonyOS_Sans_SC_Regular";
font-family: 'HarmonyOS_Sans_SC_Regular';
pointer-events: none;
@include pos(736px, 182px, 7px, 1258px);
// background: rgba($color: #f49e6a, $alpha: 0.55);
@include pos(736px, 182px, 7px, 1203px);
background-color: rgba(255, 255, 255,0.75);
font-size: 14px;
text-align: justify;
letter-spacing: 0.1px;
color: #ff8c84;
color: #124284;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
border-radius: 2px;
line-height: 20px;
.b {
@@ -228,7 +199,7 @@ const showVC = () => {
}
.orange {
color: #fdf9de;
color: #f5430c;
font-weight: 700;
}
}