修改顶部标题样式效果

src/layouts/DashboardLayout.vue

@@ -4,7 +4,7 @@
             <div class="top-logo">
                 <img src="@/assets/images/logo.png" />
             </div>
-            <div class="title neon-pulse-style">{{ title }}</div>
+            <div class="title breathe-glow-text ">{{ title }}</div>
             <div class="top-right-user">
                 <UserProfile />
             </div>
@@ -197,14 +197,11 @@ export default {
 .frame-top .title {
     font-family: var(--title-font-family);
     font-size: 48px;
-    color: #707070;
+    color: #ffffff;
     line-height: 63px;
     text-align: center;
     font-style: normal;
     text-transform: none;
-    background: linear-gradient(90deg, #9ED3FD 0%, #FFFFFF 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
 }
 
 .frame-left {

src/layouts/LoginLayout.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="fluid-dashboard">
         <div class="frame-top">
-            <div class="title neon-pulse-style">{{ title }}</div>
+            <div class="title breathe-glow-text">{{ title }}</div>
         </div>
 
         <div class="frame-bottom"></div>
@@ -81,17 +81,13 @@ export default {
 .frame-top .title {
     font-family: var(--title-font-family);
     font-size: 48px;
-    color: #707070;
+    color: #ffffff;
     line-height: 63px;
     text-align: center;
     font-style: normal;
     text-transform: none;
-    /* background: linear-gradient(90deg, #9ED3FD 0%, #FFFFFF 100%); */
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
 }
 
-
 .frame-left {
     top: 10px;
     left: 0;

src/styles/base.css

@@ -37,6 +37,7 @@ html, body {
   --radius: 8px;
   --fs-title: clamp(18px, 1.4vw, 28px);
   --fs-base: clamp(12px, 0.95vw, 16px);
+  --color : #42fff6
 }
 
 /* ==========================================
@@ -137,46 +138,27 @@ html, body {
   background: transparent; 
 }
 
-.neon-pulse-style {
-
-    letter-spacing: 4px; /* 增加字间距 */
-    
-    /* 2. 文字渐变：模拟霓虹灯管的亮芯 */
-    background: linear-gradient(
-        to bottom,
-        #ffffff 20%,   /* 核心最亮处 */
-        #b3e5fc 50%,   /* 浅蓝色过渡 */
-        #4fc3f7 100%   /* 底部稍深 */
-    );
-
-    /* 3. 核心：霓虹灯发光效果 (多层 drop-shadow) */
-    /* 第一层：近距离白色高亮 */
-    /* 第二层：中距离主题色发光 */
-    /* 第三层：远距离环境光晕 */
-    filter: 
-        drop-shadow(0 0 5px rgba(255, 255, 255, 0.8))
-        drop-shadow(0 0 15px rgba(79, 195, 247, 0.6))
-        drop-shadow(0 0 30px rgba(3, 169, 244, 0.4));
-
-    /* 4. 动画：让霓虹灯“活”起来 */
-    animation: neon-pulse 3s ease-in-out infinite;
-    transition: all 0.3s ease;
+.breathe-glow-text {
+    /* 应用呼吸灯动画：3秒一个周期，缓入缓出，无限循环 */
+    animation: breatheGlow 3s ease-in-out infinite;
 }
-
-/* 霓虹灯呼吸动画：模拟电流不稳定的真实感 */
-@keyframes neon-pulse {
+/* 呼吸灯动画关键帧 */
+@keyframes breatheGlow {
+    /* 0% 和 100% 是呼吸的最暗点：光晕收拢，微微变暗 */
     0%, 100% {
-        filter: 
-            drop-shadow(0 0 5px rgba(255, 255, 255, 0.8))
-            drop-shadow(0 0 15px rgba(79, 195, 247, 0.6))
-            drop-shadow(0 0 30px rgba(3, 169, 244, 0.4));
-        opacity: 1;
+        text-shadow: 
+            0px 0px 2px var(--color, #00e5ff),
+            0px 0px 5px var(--color, #00e5ff),
+            0px 0px 10px var(--color, #00e5ff);
+        opacity: 0.8;
     }
+    /* 50% 是呼吸的最亮点：光晕扩散，完全高亮 */
     50% {
-        filter: 
-            drop-shadow(0 0 8px rgba(255, 255, 255, 0.9))
-            drop-shadow(0 0 22px rgba(79, 195, 247, 0.8))
-            drop-shadow(0 0 45px rgba(3, 169, 244, 0.6));
-        opacity: 0.95; /* 微微闪烁 */
+        text-shadow: 
+            0px 0px 5px var(--color, #00e5ff),
+            0px 0px 15px var(--color, #00e5ff),
+            0px 0px 30px var(--color, #00e5ff),
+            0px 0px 50px var(--color, #00e5ff);
+        opacity: 1;
     }
 }