diff --git a/src/views/mapTest/allTrajectories.vue b/src/views/mapTest/allTrajectories.vue index de530f7..35286e4 100644 --- a/src/views/mapTest/allTrajectories.vue +++ b/src/views/mapTest/allTrajectories.vue @@ -36,6 +36,11 @@
+ +
+

海面油膜微型跟踪定位装置轨迹跟踪查询系统

+
+
@@ -858,6 +863,30 @@ onBeforeUnmount(() => { width: 100%; } + // 系统名称样式 + .system-title { + position: absolute; + top: 80px; + left: 350px; // 左侧留出设备面板的位置 + z-index: 100; + background: linear-gradient(135deg, rgba(91, 143, 249, 0.95) 0%, rgba(123, 163, 255, 0.95) 100%); + padding: 16px 28px; + border-radius: 12px; + box-shadow: 0 4px 16px rgba(91, 143, 249, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + + h1 { + margin: 0; + font-size: 20px; + font-weight: 700; + color: #fff; + letter-spacing: 1px; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + white-space: nowrap; + } + } + .device-panel { position: absolute; top: 80px; @@ -1271,6 +1300,19 @@ onBeforeUnmount(() => { // 移动端适配 @media (max-width: 768px) { .all-trajectories-container { + // 系统名称移动端样式 + .system-title { + top: 70px; + left: 10px; + right: 10px; + padding: 12px 16px; + + h1 { + font-size: 14px; + letter-spacing: 0.5px; + } + } + // 显示移动端折叠按钮 .mobile-collapse-btn { display: flex !important; diff --git a/src/views/mapTest/index.vue b/src/views/mapTest/index.vue index 00322b9..3d505bd 100644 --- a/src/views/mapTest/index.vue +++ b/src/views/mapTest/index.vue @@ -1,6 +1,12 @@