🎈 perf: 优化部分细节

src/pages/Main/Main.vue

@@ -87,52 +87,53 @@ const scrollToSection = (sectionId) => {
     height: 200%;
     background: linear-gradient(
         -45deg,
-        @home-gradient-pale,
-        @home-gradient-mint,
-        @home-gradient-green,
-        @home-gradient-teal,
-        @home-gradient-sage,
-        @home-gradient-mint
+        @home-gradient-pale 0%,
+        @home-gradient-mint 18%,
+        @home-gradient-green 38%,
+        @home-gradient-teal 55%,
+        @home-gradient-sage 72%,
+        @home-gradient-deep 88%,
+        @home-gradient-pale 100%
     );
-    background-size: 400% 400%;
-    animation: homeGradientFlow 14s ease infinite;
+    background-size: 500% 500%;
+    animation: homeGradientFlow 10s ease-in-out infinite;
 }
 
 .hero-bg-orb {
     position: absolute;
     border-radius: 50%;
-    filter: blur(60px);
-    opacity: 0.55;
-    animation: homeOrbFloat 18s ease-in-out infinite;
+    filter: blur(72px);
+    opacity: 0.72;
+    animation: homeOrbFloat 14s ease-in-out infinite;
 }
 
 .hero-bg-orb--1 {
-    width: 420px;
-    height: 420px;
-    top: -8%;
-    right: 5%;
-    background: radial-gradient(circle, fade(@home-gradient-green, 70%) 0%, transparent 70%);
-    animation-duration: 16s;
+    width: 480px;
+    height: 480px;
+    top: -10%;
+    right: 0;
+    background: radial-gradient(circle, fade(@home-gradient-deep, 85%) 0%, fade(@home-gradient-green, 45%) 45%, transparent 72%);
+    animation-duration: 12s;
 }
 
 .hero-bg-orb--2 {
-    width: 360px;
-    height: 360px;
-    bottom: 10%;
-    left: -5%;
-    background: radial-gradient(circle, fade(@home-gradient-teal, 65%) 0%, transparent 70%);
-    animation-duration: 20s;
-    animation-delay: -4s;
+    width: 400px;
+    height: 400px;
+    bottom: 5%;
+    left: -8%;
+    background: radial-gradient(circle, fade(@home-gradient-teal, 80%) 0%, fade(@home-gradient-sage, 40%) 50%, transparent 72%);
+    animation-duration: 16s;
+    animation-delay: -3s;
 }
 
 .hero-bg-orb--3 {
-    width: 280px;
-    height: 280px;
-    top: 40%;
-    left: 35%;
-    background: radial-gradient(circle, fade(@home-gradient-pale, 80%) 0%, transparent 70%);
-    animation-duration: 22s;
-    animation-delay: -8s;
+    width: 320px;
+    height: 320px;
+    top: 38%;
+    left: 32%;
+    background: radial-gradient(circle, fade(@home-gradient-pale, 95%) 0%, fade(@home-gradient-mint, 50%) 40%, transparent 70%);
+    animation-duration: 18s;
+    animation-delay: -6s;
 }
 
 .hero-inner {
@@ -201,14 +202,14 @@ const scrollToSection = (sectionId) => {
     height: 180%;
     background: linear-gradient(
         120deg,
-        @home-bg-page,
-        fade(@home-gradient-mint, 55%),
-        @home-bg-page,
-        fade(@home-gradient-teal, 40%),
-        @home-bg-page
+        @home-bg-page 0%,
+        fade(@home-gradient-mint, 85%) 25%,
+        fade(@home-gradient-green, 70%) 50%,
+        fade(@home-gradient-teal, 75%) 75%,
+        @home-bg-page 100%
     );
-    background-size: 300% 300%;
-    animation: homeGradientFlow 18s ease infinite reverse;
+    background-size: 400% 400%;
+    animation: homeGradientFlow 12s ease-in-out infinite reverse;
 }
 
 .features-wrap > :not(.features-bg) {
@@ -237,11 +238,11 @@ const scrollToSection = (sectionId) => {
     }
 
     33% {
-        transform: translate(28px, -24px) scale(1.06);
+        transform: translate(48px, -36px) scale(1.1);
     }
 
     66% {
-        transform: translate(-22px, 18px) scale(0.94);
+        transform: translate(-40px, 32px) scale(0.9);
     }
 }
 
@@ -256,7 +257,7 @@ const scrollToSection = (sectionId) => {
         inset: 0;
         width: 100%;
         height: 100%;
-        background: linear-gradient(135deg, @home-bg-hero 0%, @home-bg-hero-end 55%, @home-gradient-sage 100%);
+        background: linear-gradient(135deg, @home-gradient-pale 0%, @home-bg-hero 35%, @home-bg-hero-end 65%, @home-gradient-deep 100%);
         background-size: 100% 100%;
     }
 }

src/pages/Main/theme.less

@@ -11,9 +11,10 @@
 @home-radius-card: 16px;
 @home-shadow-card: 0 8px 32px rgba(27, 48, 34, 0.08);
 
-// 动态渐变辅助色
-@home-gradient-mint: #d4f0dc;
-@home-gradient-green: #a6e7b8;
-@home-gradient-sage: #9fd9b0;
-@home-gradient-pale: #e8f8ec;
-@home-gradient-teal: #b8e6d0;
+// 动态渐变辅助色（拉大明度/色相差，便于流动动画可见）
+@home-gradient-pale: #f2fcf5;
+@home-gradient-mint: #c8ebd4;
+@home-gradient-green: #8ed4a6;
+@home-gradient-sage: #6bc48a;
+@home-gradient-teal: #7dd4be;
+@home-gradient-deep: #52b878;