zc

call-word/play.md

@@ -155,4 +155,20 @@ views/ # 页面视图
 
 # 修改页面
 1. src\views\LabStatus.vue 内的 智能环境感知应用设备统计 模块 
-- 在线设备 文字 颜色应为 #7EACC8 数据数字颜色保持不变
+- 在线设备 文字 颜色应为 #7EACC8 数据数字颜色保持不变
+
+# 修改页面
+1. header组件内 .screen-header下的after
+- 期望改为流光效果 从左到右 最高亮的颜色为 #3BAFD6
+
+
+# 修改页面
+1. 页面下 多个组件的边框 .panel-box 也期望加入流光效果 最高亮的颜色为 #3BAFD6
+- 包含的页面有 实验室基本情况统计/实验室安全分级统计/实验室进入人数统计及走势/实验环境安全智能感知/实验室实时风险预警/智能环境感知应用设备统计/实验室设备分类及使用统计
+
+# 修改页面
+1. 页面下 刚才组件增加的流光效果 期望是旋转的 由坐上流转到右上再流转到右下再流转到左下再流转到左上 如此循环
+- 包含的页面有 实验室基本情况统计/实验室安全分级统计/实验室进入人数统计及走势/实验环境安全智能感知/实验室实时风险预警/智能环境感知应用设备统计/实验室设备分类及使用统计
+
+# 修改页面
+1. 刚才的流光修改 我透过组件的透明背景可以看到旋转的锥形体 我不期望看到他

src/components/Header.vue

@@ -97,14 +97,20 @@ export default {
     content: '';
     position: absolute;
     bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 60%;
+    left: 0;
+    width: 100%;
     height: 2px;
-    background: linear-gradient(90deg, transparent, rgba(30,144,255,0.6), transparent);
+    background: linear-gradient(90deg, transparent 0%, #3BAFD6 50%, transparent 100%);
+    background-size: 200% 100%;
+    animation: headerGlow 3s linear infinite;
   }
 }
 
+@keyframes headerGlow {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
 .header-left {
   flex: 1;
 }

src/styles/global.scss

@@ -40,6 +40,42 @@ html, body {
   position: relative;
   overflow: hidden;
 
+  // 旋转流光层
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200%;
+    aspect-ratio: 1;
+    background: conic-gradient(
+      transparent 0deg,
+      transparent 250deg,
+      rgba(59, 175, 214, 0.3) 265deg,
+      #3BAFD6 280deg,
+      rgba(59, 175, 214, 0.3) 295deg,
+      transparent 310deg,
+      transparent 360deg
+    );
+    animation: panelGlow 4s linear infinite;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  // 内部遮罩层（只露出1px边框流光）
+  &::after {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+    background: #0c2044;
+    border-radius: 3px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
   .panel-title {
     font-size: 15px;
     font-weight: bold;
@@ -49,6 +85,8 @@ html, body {
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    position: relative;
+    z-index: 1;
 
     &::before {
       content: '';
@@ -63,5 +101,12 @@ html, body {
 
   .panel-content {
     padding: 10px 14px;
+    position: relative;
+    z-index: 1;
   }
 }
+
+@keyframes panelGlow {
+  from { transform: translate(-50%, -50%) rotate(0deg); }
+  to { transform: translate(-50%, -50%) rotate(360deg); }
+}