From 05da8be48c41fd154c39c0c3a1955d8e7ceb0912 Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 12:58:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20App.vue=20=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E8=8A=B1=E6=9C=B5=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C=EF=BC=8C=E8=B0=83=E6=95=B4=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8=E3=80=81=E5=8A=A8=E7=94=BB=E6=97=B6=E9=95=BF=E5=8F=8A?=
 =?UTF-8?q?=E9=80=8F=E6=98=8E=E5=BA=A6=EF=BC=8C=E5=90=8C=E6=97=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=92=8C=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E9=80=82=E9=85=8D=EF=BC=8C=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 126 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 72 insertions(+), 54 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 318a5cb..a39e0a5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -187,13 +187,13 @@ onUnmounted(() => {
 /* 花朵样式 */
 .floating-flower {
   position: absolute;
-  width: 30px;
-  height: 30px;
+  width: 24px;
+  height: 24px;
   will-change: transform;
   transform: translateZ(0);
-  animation: floatFlower 25s ease-in-out infinite;
+  animation: floatFlower 30s linear infinite;
   animation-delay: var(--delay);
-  opacity: 0.5;
+  opacity: 0.4;
   transform-origin: center;
   backface-visibility: hidden;
   perspective: 1000px;
@@ -201,85 +201,104 @@ onUnmounted(() => {
 
 .flower-center {
   position: absolute;
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   background: #ffd700;
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  animation: pulse 2s ease-in-out infinite;
 }
 
 .flower-petal {
   position: absolute;
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
   background: #ffb7d0;
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform-origin: 0 0;
-  animation: petalWave 3s ease-in-out infinite;
 }
 
-.flower-petal:nth-child(1) { 
-  transform: rotate(0deg) translate(10px, 0);
-  animation-delay: 0s;
-}
-.flower-petal:nth-child(2) { 
-  transform: rotate(72deg) translate(10px, 0);
-  animation-delay: 0.2s;
-}
-.flower-petal:nth-child(3) { 
-  transform: rotate(144deg) translate(10px, 0);
-  animation-delay: 0.4s;
-}
-.flower-petal:nth-child(4) { 
-  transform: rotate(216deg) translate(10px, 0);
-  animation-delay: 0.6s;
-}
-.flower-petal:nth-child(5) { 
-  transform: rotate(288deg) translate(10px, 0);
-  animation-delay: 0.8s;
-}
+.flower-petal:nth-child(1) { transform: rotate(0deg) translate(8px, 0); }
+.flower-petal:nth-child(2) { transform: rotate(72deg) translate(8px, 0); }
+.flower-petal:nth-child(3) { transform: rotate(144deg) translate(8px, 0); }
+.flower-petal:nth-child(4) { transform: rotate(216deg) translate(8px, 0); }
+.flower-petal:nth-child(5) { transform: rotate(288deg) translate(8px, 0); }
 
 @keyframes floatFlower {
   0% {
-    transform: translate(0, -50px) rotate(0deg) scale(1);
-  }
-  25% {
-    transform: translate(calc(100vw * 0.25), calc(100vh * 0.25)) rotate(180deg) scale(1.1);
-  }
-  50% {
-    transform: translate(calc(100vw * 0.5), calc(100vh * 0.5)) rotate(360deg) scale(1);
-  }
-  75% {
-    transform: translate(calc(100vw * 0.75), calc(100vh * 0.75)) rotate(540deg) scale(0.9);
+    transform: translate(0, -30px) rotate(0deg);
   }
   100% {
-    transform: translate(100vw, -50px) rotate(720deg) scale(1);
+    transform: translate(100vw, calc(100vh + 30px)) rotate(360deg);
   }
 }
 
-@keyframes petalWave {
-  0%, 100% {
-    transform: rotate(var(--rotation)) translate(10px, 0) scale(1);
+/* 优化移动端性能 */
+@media (max-width: 768px) {
+  .floating-flower {
+    width: 20px;
+    height: 20px;
+    animation-duration: 25s;
   }
-  50% {
-    transform: rotate(var(--rotation)) translate(10px, 0) scale(1.1);
+  
+  .flower-center {
+    width: 6px;
+    height: 6px;
+  }
+  
+  .flower-petal {
+    width: 8px;
+    height: 8px;
+  }
+  
+  .flower-petal:nth-child(1) { transform: rotate(0deg) translate(6px, 0); }
+  .flower-petal:nth-child(2) { transform: rotate(72deg) translate(6px, 0); }
+  .flower-petal:nth-child(3) { transform: rotate(144deg) translate(6px, 0); }
+  .flower-petal:nth-child(4) { transform: rotate(216deg) translate(6px, 0); }
+  .flower-petal:nth-child(5) { transform: rotate(288deg) translate(6px, 0); }
+}
+
+/* 暗色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .floating-flower {
+    opacity: 0.3;
+  }
+  
+  .flower-center {
+    background: #ffd700;
+    opacity: 0.8;
+  }
+  
+  .flower-petal {
+    background: #ffb7d0;
+    opacity: 0.6;
   }
 }
 
-@keyframes pulse {
-  0%, 100% {
-    transform: translate(-50%, -50%) scale(1);
-  }
-  50% {
-    transform: translate(-50%, -50%) scale(1.2);
+/* 性能优化 */
+.floating-flower {
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+  animation-play-state: running;
+}
+
+/* 添加动画性能优化 */
+@media (prefers-reduced-motion: no-preference) {
+  .floating-flower {
+    animation-play-state: running !important;
   }
 }
 
+/* 添加动画暂停状态 */
+.animation-paused .floating-flower {
+  animation-play-state: paused !important;
+}
+
 /* 云朵样式 */
 .floating-cloud {
   position: absolute;
@@ -370,8 +389,7 @@ onUnmounted(() => {
   }
   
   .floating-flower {
-    opacity: 0.6;
-    filter: brightness(0.8);
+    opacity: 0.3;
   }
   
   .floating-cloud {