-
-
{{ item.name }}
-
{{ item.count }}
-
{{ item.level }}
+
@@ -248,12 +120,16 @@ onUnmounted(() => {
box-sizing: border-box;
background: rgba(6, 30, 93, 0.5);
border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid rgba(63, 167, 221, 0.2);
.card-header {
+ flex: none;
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 20px;
+ margin-bottom: 5px;
.title {
font-size: 18px;
@@ -286,55 +162,134 @@ onUnmounted(() => {
}
}
- .chart-container {
- height: calc(100% - 140px);
- width: 100%;
- }
-
- .indicators-list {
+ .scroll-container {
+ flex: 1;
+ background: rgba(0, 24, 75, 0.3);
+ border-radius: 4px;
+ overflow: hidden;
+ border: 1px solid rgba(63, 167, 221, 0.1);
display: flex;
- justify-content: space-between;
- padding: 10px 0;
- border-top: 1px solid rgba(255, 255, 255, 0.1);
+ flex-direction: column;
- .indicator-item {
+ .header {
+ flex: none;
display: flex;
- flex-direction: column;
align-items: center;
- gap: 4px;
- padding: 0 10px;
- position: relative;
+ padding: 12px 16px;
+ background: linear-gradient(to right, rgba(0, 24, 75, 0.8), rgba(0, 38, 123, 0.5));
+ color: #fff;
+ font-size: 14px;
+ font-weight: 500;
+ border-bottom: 1px solid rgba(63, 167, 221, 0.2);
- &:not(:last-child)::after {
- content: '';
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- width: 1px;
- height: 70%;
- background: rgba(255, 255, 255, 0.1);
+ .no-wrap {
+ white-space: nowrap;
}
- .name {
- font-size: 12px;
- color: rgba(255, 255, 255, 0.8);
+ .point {
+ flex: 1.5;
+ padding-right: 12px;
}
- .value {
- font-size: 20px;
- font-weight: bold;
- font-family: 'Monaco', monospace;
+ .location {
+ flex: 2;
+ padding-right: 12px;
}
- .level {
- padding: 2px 8px;
- border-radius: 10px;
- font-size: 12px;
- color: #fff;
- opacity: 0.8;
+ .type {
+ flex: 0.8;
+ text-align: center;
+ }
+
+ .alert {
+ flex: 0.8;
+ text-align: center;
+ padding-left: 12px;
}
}
+
+ .scroll-body {
+ flex: 1;
+ overflow: hidden;
+ position: relative;
+ }
+
+ .scroll-list {
+ animation: scrollUp 20s linear infinite;
+
+ &:hover {
+ animation-play-state: paused;
+ }
+ }
+
+ .scroll-item {
+ display: flex;
+ align-items: flex-start;
+ padding: 12px 16px;
+ border-bottom: 1px solid rgba(63, 167, 221, 0.1);
+ transition: all 0.3s;
+ font-size: 14px;
+ line-height: 1.5;
+ min-height: 48px;
+
+ &:nth-child(odd) {
+ background: rgba(0, 38, 123, 0.4);
+ }
+
+ &:nth-child(even) {
+ background: rgba(0, 24, 75, 0.3);
+ }
+
+ &:hover {
+ background: rgba(63, 167, 221, 0.1);
+ }
+
+ .point {
+ flex: 1.5;
+ padding-right: 12px;
+ white-space: pre-wrap;
+ word-break: break-all;
+ }
+
+ .location {
+ flex: 2;
+ padding-right: 12px;
+ white-space: pre-wrap;
+ word-break: break-all;
+ }
+
+ .type {
+ flex: 0.8;
+ text-align: center;
+ font-weight: 500;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .alert {
+ flex: 0.8;
+ text-align: center;
+ font-weight: 500;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-left: 12px;
+ }
+ }
+
+ .point, .location, .type, .alert {
+ line-height: 1.5;
+ }
+ }
+}
+
+@keyframes scrollUp {
+ 0% {
+ transform: translateY(0);
+ }
+ 100% {
+ transform: translateY(-50%);
}
}
diff --git a/src/views/dashboard/screen/components/LeftPanel/index.vue b/src/views/dashboard/screen/components/LeftPanel/index.vue
index cf86e1c..a2eb8b2 100644
--- a/src/views/dashboard/screen/components/LeftPanel/index.vue
+++ b/src/views/dashboard/screen/components/LeftPanel/index.vue
@@ -2,18 +2,22 @@
import TopCard from './TopCard.vue'
import MiddleCard from './MiddleCard.vue'
import BottomCard from './BottomCard.vue'
+import { Decoration5 } from 'datav-vue3'
-
-
-
-
-
-
-
@@ -21,17 +25,31 @@ import BottomCard from './BottomCard.vue'
\ No newline at end of file
diff --git a/src/views/dashboard/screen/components/RightPanel/BottomCard.vue b/src/views/dashboard/screen/components/RightPanel/BottomCard.vue
index 12e1b2b..d3e0691 100644
--- a/src/views/dashboard/screen/components/RightPanel/BottomCard.vue
+++ b/src/views/dashboard/screen/components/RightPanel/BottomCard.vue
@@ -1,5 +1,5 @@
-
-
-
-
-
-
-
@@ -21,17 +25,31 @@ import BottomCard from './BottomCard.vue'
\ No newline at end of file
diff --git a/src/views/dashboard/screen/index.vue b/src/views/dashboard/screen/index.vue
index e49e2fe..9c7a865 100644
--- a/src/views/dashboard/screen/index.vue
+++ b/src/views/dashboard/screen/index.vue
@@ -1,14 +1,10 @@