大屏v1

src/views/showSituation/largeScreen.vue

@@ -652,7 +652,7 @@ export default {
 }
 
 .time-detail-item {
-  background-color: #363c4a;
+  background-color: transparent;
   padding: 10px;
   border-radius: 5px;
   border-left: 4px solid #1890ff;
@@ -686,7 +686,7 @@ html, body {
 }
 
 .full-container {
-  height: 99vh;
+  height: 100%;
   background-color: #2c313c;
   color: #e6e6e6;
 }
@@ -739,7 +739,7 @@ html, body {
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
-    width: 80%;
+    width: 60%;
     z-index: 15;
     background-color: rgba(35, 39, 48, 0.6);
     border: 1px solid rgba(74, 80, 99, 0.5);
@@ -886,8 +886,8 @@ html, body {
 /* 线路显示控制 */
 .legend-container {
   position: absolute;
-  right: 20px;
-  top: 20px;
+  right: 5px;
+  top: 50%;
   z-index: 20;
 }
 
@@ -1047,7 +1047,7 @@ html, body {
 /* 时间列表轮播样式 */
 .telemetry-card {
   height: 100%;
-  background-color: #2c313c;
+  background-color: transparent;
   border: 1px solid #4a5063;
   border-radius: 6px;
   padding: 15px;
@@ -1093,7 +1093,7 @@ html, body {
   flex: 1;
   padding: 15px;
   border-radius: 5px;
-  background-color: #363c4a;
+  background-color: transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
@@ -1208,4 +1208,49 @@ html, body {
 .status-success {
   color: #66d2a0;
 }
+/* 卡片内文字颜色优化 */
+.telemetry-label,
+.event-time,
+.detail-status {
+  color: rgba(200, 210, 230, 0.85); /* 稍淡但不模糊的次要文字 */
+}
+
+.event-name,
+.telemetry-value,
+.list-title,
+.section-title {
+  color: rgba(240, 245, 255, 0.95); /* 主文字更亮，确保可读性 */
+}
+
+/* 进度条背景调整，与容器融合 */
+.progress-bar {
+  background-color: rgba(74, 80, 99, 0.3); /* 更透明的进度条背景 */
+}
+
+/* 事件标记点优化 */
+.progress-marker {
+  background-color: rgba(255, 255, 255, 0.7); /* 半透明白色，减少突兀 */
+}
+.progress-marker.active {
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+}
+/* 卡片悬停效果 */
+.telemetry-card:hover,
+.event-progress-container:hover {
+  background-color: rgba(35, 39, 48, 0.75); /* 悬停时稍加深，增强交互感 */
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
+  transform: translateY(-2px); /* 轻微上浮，强化悬浮感 */
+  transition: all 0.3s ease;
+}
+
+/* 画中画容器优化 */
+.pip-container {
+  background-color: rgba(35, 39, 48, 0.5); /* 更透明的背景 */
+  backdrop-filter: blur(4px);
+  opacity: 0.9;
+}
+.pip-container:hover {
+  background-color: rgba(35, 39, 48, 0.7);
+}
 </style>