From 96a48e30cd02fe021daee51ae21690dba98c2f49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=A1=E5=A4=8D=E4=B9=A0?= <2353956224@qq.com>
Date: Fri, 27 Feb 2026 16:14:47 +0800
Subject: [PATCH] 1.0

---
 src/components/PageHome.vue | 61 ++++++++++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/components/PageHome.vue b/src/components/PageHome.vue
index 456070e..7677c35 100644
--- a/src/components/PageHome.vue
+++ b/src/components/PageHome.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="page page-home">
+  <section class="page page-home" ref="pageRef">
     <!-- 背景图层 -->
     <img src="/src/assets/images/bg-top.png" class="bg-main" />
     <img src="/src/assets/images/bg-top-points.png" class="bg-points" />
@@ -26,6 +26,18 @@
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
+
+const pageRef = ref(null)
+
+onMounted(() => {
+  const page = pageRef.value
+  if (!page) return
+  page.classList.add('home-first-enter')
+  setTimeout(() => {
+    page.classList.remove('home-first-enter')
+  }, 1400)
+})
 </script>
 
 <style scoped lang="less">
@@ -134,6 +146,10 @@
   animation: none;
 }
 
+:global(.home-first-enter .hero-title) {
+  animation: homeTitleFromLeft 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
 .hero-buttons {
   display: flex;
   gap: clamp(10px, 3vw, 35px);
@@ -141,6 +157,10 @@
   animation: none;
 }
 
+:global(.home-first-enter .hero-buttons) {
+  animation: homeButtonsFromRight 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
+}
+
 .btn-img {
   height: clamp(36px, 6.6vh, 120px);
   width: auto;
@@ -199,14 +219,41 @@
   animation: none;
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
+:global(.home-first-enter .phone-main) {
+  animation: homePhoneFromBottom 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
 }
 
-@keyframes fadeSlideUp {
-  from { opacity: 0; transform: translateY(40px); }
-  to   { opacity: 1; transform: translateY(0); }
+@keyframes homeTitleFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-120vw);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes homeButtonsFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(120vw);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes homePhoneFromBottom {
+  from {
+    opacity: 0;
+    transform: translateY(120vh);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .phone-placeholder {