From e156a8d34c7c60fd8b87916db5dd0395459104d0 Mon Sep 17 00:00:00 2001
From: shih <510524130@qq.com>
Date: Sat, 9 May 2026 14:52:55 +0800
Subject: [PATCH] =?UTF-8?q?=E8=99=9A=E7=BA=BF=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/scada/picture/screen.vue  | 22 +++++++++++++++-----
 src/views/scada/picture/screen2.vue | 32 +++++++++++++++++++++++------
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/views/scada/picture/screen.vue b/src/views/scada/picture/screen.vue
index d7fe8f1..e6f0fde 100644
--- a/src/views/scada/picture/screen.vue
+++ b/src/views/scada/picture/screen.vue
@@ -1015,12 +1015,24 @@ export default {
 .dashed-line {
     position: absolute;
     z-index: 4;
-    height: 6px;
-    background: repeating-linear-gradient(90deg, #0ea5e9 0px, #0ea5e9 12px, #0f172a 12px, #0f172a 20px);
+    height: 8px;
+    background: #0c2445;
+    border-radius: 4px;
+    overflow: hidden;
+    padding: 0 2px;
+}
+
+.dashed-line::before {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 2px);
+    background: repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.85) 0px, rgba(34, 211, 238, 0.85) 8px, transparent 8px, transparent 20px);
     background-size: 20px 6px;
-    border-radius: 3px;
-    animation: dashFlow 0.6s linear infinite;
-    box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
+    animation: dashFlow 0.8s linear infinite;
+    border-radius: 100px;
 }
 
 @keyframes dashFlow {
diff --git a/src/views/scada/picture/screen2.vue b/src/views/scada/picture/screen2.vue
index 821c223..739e6d8 100644
--- a/src/views/scada/picture/screen2.vue
+++ b/src/views/scada/picture/screen2.vue
@@ -166,6 +166,7 @@
                 <div class="dashed-line dashed-line-30"></div>
                 <div class="dashed-line dashed-line-31"></div>
                 <div class="dashed-line dashed-line-32"></div>
+                <div class="dashed-line dashed-line-33"></div>
             </div>
         </div>
 
@@ -1001,15 +1002,28 @@ export default {
     transform: rotate(0deg);
 }
 
+/* 虚线样式 */
 .dashed-line {
     position: absolute;
     z-index: 4;
-    height: 6px;
-    background: repeating-linear-gradient(90deg, #0ea5e9 0px, #0ea5e9 12px, #0f172a 12px, #0f172a 20px);
+    height: 8px;
+    background: #0c2445;
+    border-radius: 4px;
+    overflow: hidden;
+    padding: 0 2px;
+}
+
+.dashed-line::before {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 2px);
+    background: repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.85) 0px, rgba(34, 211, 238, 0.85) 8px, transparent 8px, transparent 20px);
     background-size: 20px 6px;
-    border-radius: 3px;
-    animation: dashFlow 0.6s linear infinite;
-    box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
+    animation: dashFlow 0.8s linear infinite;
+    border-radius: 100px;
 }
 
 @keyframes dashFlow {
@@ -1213,7 +1227,7 @@ export default {
     transform: rotate(180deg);
 }
 .dashed-line-18 {
-    top: 49%;
+    top: 49.2%;
     left: 58.3%;
     width: 1.2%;
     transform: rotate(180deg);
@@ -1302,6 +1316,12 @@ export default {
     width: 9%;
     transform: rotate(243deg);
 }
+.dashed-line-33 {
+    top: 43.5%;
+    left: 66%;
+    width: 8%;
+    transform: rotate(75deg);
+}
 .marker-popup {
     position: fixed;
     z-index: 1000;