Преглед на файлове

修改顶部标题的样式

画安 преди 3 седмици
родител
ревизия
7dc03ee4fa
променени са 3 файла, в които са добавени 20 реда и са изтрити 27 реда
  1. 2 2
      src/layouts/DashboardLayout.vue
  2. 2 2
      src/layouts/LoginLayout.vue
  3. 16 23
      src/styles/base.css

+ 2 - 2
src/layouts/DashboardLayout.vue

@@ -4,7 +4,7 @@
             <div class="top-logo">
                 <img src="@/assets/images/logo.png" />
             </div>
-            <div class="title breathe-glow-text ">{{ title }}</div>
+            <div class="title glow-text" :data-text="title">{{ title }}</div>
             <div class="top-right-user">
                 <UserProfile />
             </div>
@@ -153,7 +153,7 @@ export default {
     },
     data() {
         return {
-            title: '灵智交通信号控制平台',
+            title: '灵智交通信号控制平台',
         }
     },
     methods: {

+ 2 - 2
src/layouts/LoginLayout.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="fluid-dashboard">
         <div class="frame-top">
-            <div class="title breathe-glow-text">{{ title }}</div>
+            <div class="title glow-text" :data-text="title">{{ title }}</div>
         </div>
 
         <div class="frame-bottom"></div>
@@ -37,7 +37,7 @@ export default {
     },
     data() {
         return {
-            title: '灵智交通信号控制平台',
+            title: '灵智交通信号控制平台',
         }
     },
     methods: {

+ 16 - 23
src/styles/base.css

@@ -138,27 +138,20 @@ html, body {
   background: transparent; 
 }
 
-.breathe-glow-text {
-    /* 应用呼吸灯动画:3秒一个周期,缓入缓出,无限循环 */
-    animation: breatheGlow 5s ease-in-out infinite;
-}
-/* 呼吸灯动画关键帧 */
-@keyframes breatheGlow {
-    /* 0% 和 100% 是呼吸的最暗点:光晕收拢,微微变暗 */
-    0%, 100% {
-        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% {
-        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;
-    }
+.glow-text {
+  position: relative;
+  color: #fff; /* 文字保持纯白 */
+}
+
+.glow-text::before {
+  content: attr(data-text);
+  position: absolute;
+  z-index: -1;
+
+  background: linear-gradient(45deg, #0033ff, #00aaff, #00ddff);
+  -webkit-background-clip: text;
+  color: transparent;
+
+  filter: blur(8px); /* 发光关键 */
+  opacity: 0.8;
 }