admin/iot_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

虚线样式调整

Browse Source
This commit is contained in:
shih
2026-05-09 14:52:55 +08:00
parent 998e9afd33
commit e156a8d34c
2 changed files with 43 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/scada/picture/screen.vue
View File

@@ -1015,12 +1015,24 @@ export default {
.dashed-line { .dashed-line {
position: absolute; position: absolute;
z-index: 4; z-index: 4;
height: 6px; height: 8px;
background: repeating-linear-gradient(90deg, #0ea5e9 0px, #0ea5e9 12px, #0f172a 12px, #0f172a 20px); 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; background-size: 20px 6px;
border-radius: 3px; animation: dashFlow 0.8s linear infinite;
animation: dashFlow 0.6s linear infinite; border-radius: 100px;
box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
} }
@keyframes dashFlow { @keyframes dashFlow {

32
src/views/scada/picture/screen2.vue
View File

@@ -166,6 +166,7 @@
<div class="dashed-line dashed-line-30"></div> <div class="dashed-line dashed-line-30"></div>
<div class="dashed-line dashed-line-31"></div> <div class="dashed-line dashed-line-31"></div>
<div class="dashed-line dashed-line-32"></div> <div class="dashed-line dashed-line-32"></div>
<div class="dashed-line dashed-line-33"></div>
</div> </div>
</div> </div>
@@ -1001,15 +1002,28 @@ export default {
transform: rotate(0deg); transform: rotate(0deg);
} }
/* 虚线样式 */
.dashed-line { .dashed-line {
position: absolute; position: absolute;
z-index: 4; z-index: 4;
height: 6px; height: 8px;
background: repeating-linear-gradient(90deg, #0ea5e9 0px, #0ea5e9 12px, #0f172a 12px, #0f172a 20px); 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; background-size: 20px 6px;
border-radius: 3px; animation: dashFlow 0.8s linear infinite;
animation: dashFlow 0.6s linear infinite; border-radius: 100px;
box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
} }
@keyframes dashFlow { @keyframes dashFlow {
@@ -1213,7 +1227,7 @@ export default {
transform: rotate(180deg); transform: rotate(180deg);
} }
.dashed-line-18 { .dashed-line-18 {
top: 49%; top: 49.2%;
left: 58.3%; left: 58.3%;
width: 1.2%; width: 1.2%;
transform: rotate(180deg); transform: rotate(180deg);
@@ -1302,6 +1316,12 @@ export default {
width: 9%; width: 9%;
transform: rotate(243deg); transform: rotate(243deg);
} }
.dashed-line-33 {
top: 43.5%;
left: 66%;
width: 8%;
transform: rotate(75deg);
}
.marker-popup { .marker-popup {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;