完成加载页、首页、选择页切图

src/components/Index.vue

@@ -36,30 +36,29 @@ 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-paper", { duration: 1, y: 20, autoAlpha: 0, delay: 0.3, });
+  gsap.from(".index-card-1", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.5, });
+  gsap.from(".index-card-2", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.7, });
+  gsap.from(".index-card-3", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.5, });
+  gsap.from(".index-card-4", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.7, });
+  gsap.from(".index-card-5", { duration: 1, scale: 1.2, autoAlpha: 0, delay: 0.5, });
   gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0, delay: 1 });
-  gsap.from(".index-sub-title", { duration: 1, scale: 0, autoAlpha: 0, delay: 1.2 });
-  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-firework", { duration: 1, scale: 0, autoAlpha: 0, delay: 0.3 });
-  gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0, delay: 0.75 });
-  gsap.from(".index-gift", { duration: 1, y: 50, autoAlpha: 0, delay: 0.75 });
-  gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0, delay: 0.75 });
+  gsap.from(".index-time", { duration: 1, x: 40, autoAlpha: 0, delay: 1 });
+  gsap.from(".index-text", { duration: 1, scale: 2, autoAlpha: 0, delay: 1 });
+  gsap.from(".index-megaphone", { duration: 1, x: 140, autoAlpha: 0, delay: 1 });
   gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0, delay: 0.75 });
-  gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
+  gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0, delay: 1.3 });
   gsap.from(".index-prize-btn", {
     duration: 1,
     x: -100,
     autoAlpha: 0,
-    delay: 0.3,
+    delay: 1.5,
   });
   gsap.from(".index-start-btn", {
     duration: 1,
     y: 30,
     autoAlpha: 0,
-    delay: 0.5,
+    delay: 1.5,
   });
   gsap.from(".index-agreement", {
     duration: 1,
@@ -67,14 +66,7 @@ onMounted(() => {
     autoAlpha: 0,
     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-gift', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
-      gsap.to('.index-start-btn', { duration: 1, scale: '0.85', repeat: -1, yoyo: true, ease: 'bounce.out' })
+      gsap.to('.index-start-btn', { duration: 1, scale: '0.95', repeat: -1, yoyo: true, ease: 'bounce.out' })
     }
   });
 
@@ -94,27 +86,32 @@ 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-logo"></div>
-      <div class="index-gift"></div>
-      <div class="index-firework"></div>
-      <div class="index-bottom-bg"></div>
-      <!-- <div class="index-cloud"></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>
+      <div class="index-paper">
+        <div class="index-title" @click="showVC"></div>
+        <div class="index-time"></div>
+        <div class="index-card-1"></div>
+        <div class="index-card-2"></div>
+        <div class="index-card-3"></div>
+        <div class="index-card-4"></div>
+        <div class="index-card-5"></div>
+        <div class="index-line"></div>
+        <div class="index-text"></div>
+      </div>
+      <div class="index-megaphone"></div>
+      <div class="index-rule-btn index-left-btn" @click="showRule($event)">活动规则</div>
+      <div class="index-prize-btn index-left-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)">我的奖品</div>
       <div class="index-start-btn" @click="start"></div>
       <div class="index-agreement">
-        风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
-          class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
-          class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
-          class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
+        <div class="tips">数据来源：平安理财，数据截至2025年4月11日，产品历史业绩不代表未来表现</div>
+        <span>风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。</span>
+        <span class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>
+        <span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。</span>
+        <span class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
+          class="orange">理财非存款，产品有风险，投资须谨慎。</span>
+        <span>
+          金融消费者不得利用金融产品和服务从事违法活动。
+        </span>
       </div>
     </div>
   </div>
@@ -124,7 +121,7 @@ const showVC = () => {
 .IndexPage {
   @include pos(100%, 100vh, 0px, 0px);
   overflow: hidden;
-  background: linear-gradient(135deg, #a11b15, #f80c00);
+  background: linear-gradient(135deg, #d6d1ca, #e5dccf);
 
   .index-bg {
     @include pos(750px, 1624px, 0px, 50%);
@@ -136,23 +133,6 @@ const showVC = () => {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
 
-    .index-bottom-bg {
-      pointer-events: none;
-      @include pos(750px, 549px, 0px, 1075px);
-      @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;
@@ -160,95 +140,115 @@ const showVC = () => {
       @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-paper {
+      @include pos(706px, 777px, 19px, 394px);
+      @include bg_pos("index/paper.png");
+
+      .index-title {
+        // pointer-events: none;
+        @include pos(611px, 233px, 59px, -56px);
+        @include bg_pos("index/title.png");
+      }
+
+      .index-time {
+        @include pos(385px, 70px, 257px, 161px);
+        @include bg_pos("index/time.png");
+      }
+
+      .index-card-1 {
+        @include pos(207px, 182px, 45px, 194px);
+        @include bg_pos("index/card-1.png");
+      }
+
+      .index-card-2 {
+        @include pos(227px, 159px, 275px, 260px);
+        @include bg_pos("index/card-2.png");
+      }
+
+      .index-card-3 {
+        @include pos(208px, 180px, 496px, 237px);
+        @include bg_pos("index/card-3.png");
+      }
+
+      .index-card-4 {
+        @include pos(204px, 168px, 77px, 460px);
+        @include bg_pos("index/card-4.png");
+      }
+
+      .index-card-5 {
+        @include pos(215px, 162px, 358px, 524px);
+        @include bg_pos("index/card-5.png");
+      }
+
+      .index-text {
+        @include pos(325px, 74px, 307px, 448px);
+        @include bg_pos("index/text.png");
+      }
+
+      .index-line {
+        @include pos(661px, 359px, 22px, 346px);
+        @include bg_pos("index/line.png");
+      }
     }
 
-    .index-fan-4 {
-      pointer-events: none;
-      @include pos(350px, 205px, 494px, 1011px);
-      @include bg_pos("index/fan-4.png");
+
+    .index-megaphone {
+      @include pos(104px, 113px, 646px, 540px);
+      @include bg_pos("index/megaphone.png");
     }
 
-    .index-cloud {
-      pointer-events: none;
-      @include pos(88px, 46px, 621px, 253px);
-      @include bg_pos("index/cloud.png");
-    }
-
-    .index-gift {
-      pointer-events: none;
-      @include pos(169px, 172px, 16px, 1004px);
-      @include bg_pos("index/gift-icon.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(378px, 452px, 187px, 614px);
-      @include bg_pos("index/pet-icon.png");
-    }
-
-    .index-title {
-      // pointer-events: none;
-      @include pos(528px, 198px, 111px, 231px);
-      @include bg_pos("index/title.png");
-    }
-
-    .index-sub-title {
-      pointer-events: none;
-      @include pos(200px, 130px, 517px, 472px);
-      @include bg_pos("index/sub-title.png");
-    }
-
-    .index-firework {
-      pointer-events: none;
-      @include pos(95px, 95px, -38px, 889px);
-      @include bg_pos("index/firework.png");
+    .index-left-btn{
+      border: 2px solid rgb(255, 255, 255);
+      background-color: rgb(243, 87, 4);
+      box-shadow: 0px 6px 11px 0px rgba(155, 122, 68, 0.4);
+      font-size: 25px;
+      display: flex;
+      align-items: center;
+      justify-content:center;
+      padding-left: 20px;
+      color: #ffffff;
+      letter-spacing: 1.5px;
+      border-radius: 21px;
     }
 
     .index-rule-btn {
-      @include pos(184px, 49px, -37px, 506px);
-      @include bg_pos("index/rule-btn.png");
+      @include pos(184px, 49px, -37px, 578px);
     }
 
     .index-prize-btn {
-      @include pos(184px, 49px, -37px, 575px);
-      @include bg_pos("index/prize-btn.png");
+      @include pos(184px, 49px, -37px, 642px);
     }
 
     .index-start-btn {
-      @include pos(319px, 93px, 241px, 1169px);
-      @include bg_pos("index/start-btn.png");
+      @include pos(339px, 117px, 203px, 1077px);
+      @include bg_pos("index/btn.png");
     }
 
     .index-agreement {
       font-family: "HarmonyOS_Sans_SC_Regular";
       pointer-events: none;
       @include pos(736px, 182px, 7px, 1258px);
-      // background: rgba($color: #f49e6a, $alpha: 0.55);
       font-size: 14px;
       text-align: justify;
       letter-spacing: 0.1px;
-      color: #ff8c84;
+      color: #815e3c;
       padding: 10px;
       box-sizing: border-box;
       border-radius: 10px;
       line-height: 20px;
 
+      .tips {
+        text-align: center;
+        margin: 10px;
+        color: #ab7133;
+      }
+
       .b {
         font-weight: 700;
       }
 
       .orange {
-        color: #fdf9de;
+        color: #ff7127;
         font-weight: 700;
       }
     }