fix:功能优化完善。
This commit is contained in:
@@ -36,6 +36,11 @@
|
|||||||
|
|
||||||
<div id="allTrajectoriesMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
|
<div id="allTrajectoriesMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
|
||||||
|
|
||||||
|
<!-- 系统名称 -->
|
||||||
|
<div class="system-title">
|
||||||
|
<h1>海面油膜微型跟踪定位装置轨迹跟踪查询系统</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 移动端折叠按钮 - 独立于面板外部 -->
|
<!-- 移动端折叠按钮 - 独立于面板外部 -->
|
||||||
<div class="mobile-collapse-btn" @click="toggleDevicePanel">
|
<div class="mobile-collapse-btn" @click="toggleDevicePanel">
|
||||||
<el-icon class="toggle-icon">
|
<el-icon class="toggle-icon">
|
||||||
@@ -858,6 +863,30 @@ onBeforeUnmount(() => {
|
|||||||
width: 100%;
|
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 {
|
.device-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 80px;
|
top: 80px;
|
||||||
@@ -1271,6 +1300,19 @@ onBeforeUnmount(() => {
|
|||||||
// 移动端适配
|
// 移动端适配
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.all-trajectories-container {
|
.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 {
|
.mobile-collapse-btn {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
|||||||
@@ -1,6 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="map-test-container">
|
<div class="map-test-container">
|
||||||
<div id="mapContainer" class="map-container" v-loading="loading" element-loading-text="加载设备数据中..."></div>
|
<div id="mapContainer" class="map-container" v-loading="loading" element-loading-text="加载设备数据中..."></div>
|
||||||
|
|
||||||
|
<!-- 系统名称 -->
|
||||||
|
<div class="system-title">
|
||||||
|
<h1>海面油膜微型跟踪定位装置轨迹跟踪查询系统</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="info-panel">
|
<div class="info-panel">
|
||||||
<h3>地图信息</h3>
|
<h3>地图信息</h3>
|
||||||
<p>总点位数: {{ points.length }}</p>
|
<p>总点位数: {{ points.length }}</p>
|
||||||
@@ -494,6 +500,30 @@ onBeforeUnmount(() => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 系统名称样式
|
||||||
|
.system-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.info-panel {
|
.info-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
|||||||
@@ -37,6 +37,11 @@
|
|||||||
|
|
||||||
<div id="trajectoryMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
|
<div id="trajectoryMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
|
||||||
|
|
||||||
|
<!-- 系统名称 -->
|
||||||
|
<div class="system-title">
|
||||||
|
<h1>海面油膜微型跟踪定位装置轨迹跟踪查询系统</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="info-panel">
|
<div class="info-panel">
|
||||||
<h3>轨迹信息</h3>
|
<h3>轨迹信息</h3>
|
||||||
<p>轨迹点数: {{ trajectoryPoints.length }}</p>
|
<p>轨迹点数: {{ trajectoryPoints.length }}</p>
|
||||||
@@ -590,6 +595,30 @@ onBeforeUnmount(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 系统名称样式
|
||||||
|
.system-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 80px;
|
||||||
|
left: 20px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.info-panel {
|
.info-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 80px;
|
top: 80px;
|
||||||
@@ -628,6 +657,19 @@ onBeforeUnmount(() => {
|
|||||||
// 移动端适配
|
// 移动端适配
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.trajectory-container {
|
.trajectory-container {
|
||||||
|
// 系统名称移动端样式
|
||||||
|
.system-title {
|
||||||
|
top: 70px;
|
||||||
|
left: 10px;
|
||||||
|
right: 10px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.header-bar {
|
.header-bar {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|||||||
Reference in New Issue
Block a user