diff --git a/src/assets/images/logo.jpg b/src/assets/images/logo.jpg
new file mode 100644
index 0000000..71e4a42
Binary files /dev/null and b/src/assets/images/logo.jpg differ
diff --git a/src/views/mapTest/allTrajectories.vue b/src/views/mapTest/allTrajectories.vue
index 8650aaa..de530f7 100644
--- a/src/views/mapTest/allTrajectories.vue
+++ b/src/views/mapTest/allTrajectories.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="all-trajectories-container">
     <div class="header-bar">
-      <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
-      <h2>所有设备历史轨迹</h2>
+      <el-button @click="goBack" icon="ArrowLeft" class="back-btn">返回</el-button>
+      <h2 class="page-title">所有设备历史轨迹</h2>
       <div class="time-selector">
         <div class="sample-count-input">
           <label>采样数:</label>
@@ -27,17 +27,34 @@
           value-format="YYYY-MM-DD HH:mm:ss"
           @change="handleTimeChange"
         />
-        <el-button type="primary" @click="fetchAllTrajectories" :loading="loading">
+        <el-button type="primary" @click="fetchAllTrajectories" :loading="loading" class="query-btn">
           <el-icon><Search /></el-icon>
-          查询轨迹
+          <span class="btn-text">查询轨迹</span>
         </el-button>
       </div>
     </div>
     
     <div id="allTrajectoriesMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
     
+    <!-- 移动端折叠按钮 - 独立于面板外部 -->
+    <div class="mobile-collapse-btn" @click="toggleDevicePanel">
+      <el-icon class="toggle-icon">
+        <ArrowUp v-if="devicePanelCollapsed" />
+        <ArrowDown v-if="!devicePanelCollapsed" />
+      </el-icon>
+      <span class="toggle-text">{{ devicePanelCollapsed ? '展开设备列表' : '收起设备列表' }}</span>
+    </div>
+    
     <!-- 设备列表面板 -->
-    <div class="device-panel">
+    <div class="device-panel" :class="{ collapsed: devicePanelCollapsed }">
+      <!-- 折叠按钮 - 桌面端 -->
+      <div class="collapse-toggle desktop-toggle" @click="toggleDevicePanel">
+        <el-icon>
+          <DArrowLeft v-if="!devicePanelCollapsed" />
+          <DArrowRight v-if="devicePanelCollapsed" />
+        </el-icon>
+      </div>
+      
       <div class="panel-header">
         <h3>设备列表 <span class="device-count">({{ devices.length }})</span></h3>
       </div>
@@ -98,7 +115,7 @@ import { mapConfig, layerUrl, imageArr } from '@/config/map'
 import { PointLayer, LineLayer, Marker, Popup } from '@antv/l7'
 import { getLastData, getDeviceTrajectory } from '@/api/td/tdEngine'
 import { ElMessage } from 'element-plus'
-import { ArrowLeft, Search, View, Hide } from '@element-plus/icons-vue'
+import { ArrowLeft, Search, View, Hide, DArrowLeft, DArrowRight, ArrowUp, ArrowDown } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const scene = ref(null)
@@ -111,6 +128,24 @@ const sampleCount = ref(10) // 采样数，默认10
 const currentPopup = ref(null) // 存储当前显示的弹窗
 const popupTimer = ref(null) // 存储弹窗定时器
 
+// 检测是否为移动端
+const isMobile = ref(window.innerWidth <= 768)
+const devicePanelCollapsed = ref(isMobile.value) // 移动端默认折叠
+
+// 监听窗口大小变化
+const handleResize = () => {
+  const wasMobile = isMobile.value
+  isMobile.value = window.innerWidth <= 768
+  // 如果从桌面切换到移动端，自动折叠
+  if (!wasMobile && isMobile.value) {
+    devicePanelCollapsed.value = true
+  }
+  // 如果从移动端切换到桌面，自动展开
+  if (wasMobile && !isMobile.value) {
+    devicePanelCollapsed.value = false
+  }
+}
+
 // 预定义颜色数组
 const colors = [
   '#1890FF', '#52C41A', '#FA8C16', '#F5222D', '#722ED1',
@@ -139,6 +174,11 @@ const goBack = () => {
   router.back()
 }
 
+// 切换设备面板折叠状态
+const toggleDevicePanel = () => {
+  devicePanelCollapsed.value = !devicePanelCollapsed.value
+}
+
 // 时间范围改变
 const handleTimeChange = (val) => {
   // 时间范围改变处理
@@ -697,6 +737,9 @@ const fitBoundsToAllDevices = () => {
 }
 
 onMounted(async () => {
+  // 添加窗口大小变化监听
+  window.addEventListener('resize', handleResize)
+  
   // 设置默认时间范围为最近24小时
   const now = new Date()
   const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
@@ -726,6 +769,9 @@ onMounted(async () => {
 })
 
 onBeforeUnmount(() => {
+  // 移除窗口大小变化监听
+  window.removeEventListener('resize', handleResize)
+  
   // 清理所有图层
   Object.keys(trajectoryLayers.value).forEach(deviceId => {
     const device = devices.value.find(d => d.id === deviceId)
@@ -762,19 +808,29 @@ onBeforeUnmount(() => {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     z-index: 10;
     gap: 20px;
+    flex-wrap: wrap; // 移动端允许换行
     
-    h2 {
+    .back-btn {
+      flex-shrink: 0;
+    }
+    
+    .page-title {
       margin: 0;
       font-size: 18px;
       color: #333;
       flex: 1;
+      min-width: 150px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     
     .time-selector {
       display: flex;
       gap: 12px;
       align-items: center;
-      transform: translateX(-300px); // 整体向左平移400px
+      transform: translateX(-300px);
+      flex-wrap: wrap; // 移动端允许换行
       
       .sample-count-input {
         display: flex;
@@ -788,6 +844,12 @@ onBeforeUnmount(() => {
           font-weight: 500;
         }
       }
+      
+      .query-btn {
+        .btn-text {
+          margin-left: 4px;
+        }
+      }
     }
   }
   
@@ -809,6 +871,53 @@ onBeforeUnmount(() => {
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    transition: transform 0.3s ease, left 0.3s ease;
+    
+    // 折叠按钮
+    .collapse-toggle {
+      position: absolute;
+      top: 50%;
+      right: -30px;
+      transform: translateY(-50%);
+      width: 30px;
+      height: 60px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 0 8px 8px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+      z-index: 2; // 确保按钮在面板之上
+      gap: 4px;
+      
+      &:hover {
+        background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
+        right: -32px;
+        box-shadow: 2px 0 12px rgba(102, 126, 234, 0.4);
+      }
+      
+      .el-icon {
+        color: #fff;
+        font-size: 18px;
+      }
+      
+      .toggle-text {
+        display: none; // 桌面端隐藏文字
+      }
+    }
+    
+    &.collapsed {
+      transform: translateX(-100%);
+      left: -280px;
+      
+      .collapse-toggle {
+        right: -30px;
+        z-index: 2; // 确保折叠时按钮也可见
+      }
+    }
     
     .panel-header {
       padding: 20px 20px 16px;
@@ -985,7 +1094,7 @@ onBeforeUnmount(() => {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     min-width: 180px;
     backdrop-filter: blur(10px);
-    z-index: 100;
+    z-index: 100; // 降低z-index，确保不会遮挡折叠按钮
     
     h3 {
       margin: 0 0 15px 0;
@@ -1007,6 +1116,46 @@ onBeforeUnmount(() => {
       }
     }
   }
+  
+  // 移动端折叠按钮 - 独立于面板外
+  .mobile-collapse-btn {
+    display: none; // 桌面端默认隐藏
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    min-width: 160px;
+    height: 50px;
+    padding: 0 24px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    border-radius: 25px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+    z-index: 9999;
+    cursor: pointer;
+    user-select: none;
+    
+    &:active {
+      transform: translateX(-50%) scale(0.95);
+    }
+    
+    .toggle-icon {
+      color: #fff;
+      font-size: 22px;
+      flex-shrink: 0;
+    }
+    
+    .toggle-text {
+      color: #fff;
+      font-size: 15px;
+      font-weight: 700;
+      white-space: nowrap;
+    }
+  }
 }
 
 :deep(.trajectory-marker) {
@@ -1118,4 +1267,239 @@ onBeforeUnmount(() => {
 :deep(.trajectory-tooltip) {
   pointer-events: none !important;
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  .all-trajectories-container {
+    // 显示移动端折叠按钮
+    .mobile-collapse-btn {
+      display: flex !important;
+    }
+    .header-bar {
+      padding: 12px;
+      gap: 8px;
+      
+      .page-title {
+        font-size: 16px;
+        width: 100%;
+        order: 1;
+      }
+      
+      .back-btn {
+        order: 0;
+      }
+      
+      .time-selector {
+        width: 100%;
+        order: 2;
+        transform: none !important; // 移动端不偏移
+        gap: 8px;
+        
+        .sample-count-input {
+          width: 100%;
+          
+          label {
+            font-size: 13px;
+          }
+          
+          :deep(.el-input-number) {
+            flex: 1;
+            width: auto !important;
+          }
+        }
+        
+        :deep(.el-date-editor) {
+          width: 100% !important;
+          
+          .el-range-separator {
+            padding: 0 2px;
+          }
+          
+          .el-range-input {
+            font-size: 12px;
+          }
+        }
+        
+        .query-btn {
+          width: 100%;
+          
+          .btn-text {
+            display: inline;
+          }
+        }
+      }
+    }
+    
+    .device-panel {
+      position: fixed; // 使用fixed定位
+      top: auto;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      max-height: 65vh;
+      border-radius: 16px 16px 0 0;
+      transition: transform 0.3s ease;
+      z-index: 1000;
+      
+      .collapse-toggle {
+        &.desktop-toggle {
+          display: none !important; // 移动端隐藏桌面按钮
+        }
+        
+        &.mobile-toggle {
+          display: flex !important; // 移动端显示
+          position: fixed !important;
+          bottom: 20px !important;
+          left: 50% !important;
+          transform: translateX(-50%) !important;
+          width: auto;
+          min-width: 160px;
+          height: 48px;
+          padding: 0 24px;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: 10px;
+          border-radius: 24px;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+          box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+          z-index: 9999 !important;
+          
+          &:active {
+            transform: translateX(-50%) scale(0.95) !important;
+          }
+          
+          .toggle-icon {
+            color: #fff;
+            font-size: 22px;
+            flex-shrink: 0;
+          }
+          
+          .toggle-text {
+            color: #fff;
+            font-size: 15px;
+            font-weight: 700;
+            white-space: nowrap;
+          }
+        }
+      }
+      
+      &.collapsed {
+        transform: translateY(100%); // 折叠时完全隐藏面板，但按钮是fixed定位会保留
+      }
+      
+      .panel-header {
+        h3 {
+          font-size: 16px;
+        }
+      }
+      
+      .action-buttons {
+        padding: 12px;
+        
+        .el-button {
+          font-size: 12px;
+        }
+      }
+      
+      .device-list {
+        .device-item {
+          padding: 10px;
+          
+          .device-info {
+            .device-name {
+              font-size: 13px;
+            }
+          }
+          
+          .device-stats {
+            .point-count {
+              font-size: 11px;
+              padding: 2px 8px;
+            }
+          }
+        }
+      }
+    }
+    
+    .info-panel {
+      top: auto;
+      bottom: 10px;
+      right: 10px;
+      left: auto;
+      min-width: auto;
+      padding: 10px 12px;
+      z-index: 99; // 确保不会遮挡设备面板
+      
+      h3 {
+        font-size: 13px;
+        margin-bottom: 8px;
+        padding-bottom: 6px;
+      }
+      
+      p {
+        font-size: 11px;
+        margin: 4px 0;
+        
+        &:first-of-type {
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .all-trajectories-container {
+    .header-bar {
+      padding: 8px;
+      
+      .page-title {
+        font-size: 14px;
+      }
+      
+      .back-btn {
+        :deep(.el-button) {
+          padding: 8px 12px;
+          font-size: 12px;
+        }
+      }
+      
+      .time-selector {
+        .sample-count-input {
+          label {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+    
+    .device-panel {
+      position: fixed; // 使用fixed定位
+      max-height: 55vh;
+      
+      &.collapsed {
+        transform: translateY(100%); // 折叠时完全隐藏
+      }
+      
+      .collapse-toggle {
+        width: 100px;
+        height: 36px;
+        border-radius: 18px;
+        top: -36px;
+        cursor: pointer;
+        
+        .toggle-text {
+          font-size: 13px;
+        }
+        
+        .el-icon {
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/mapTest/trajectory.vue b/src/views/mapTest/trajectory.vue
index b97c6db..17aec7f 100644
--- a/src/views/mapTest/trajectory.vue
+++ b/src/views/mapTest/trajectory.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="trajectory-container">
     <div class="header-bar">
-      <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
-      <h2>历史轨迹 - {{ deviceId }}</h2>
+      <el-button @click="goBack" icon="ArrowLeft" class="back-btn">返回</el-button>
+      <h2 class="page-title">历史轨迹 - {{ deviceId }}</h2>
       <div class="time-selector">
         <div class="sample-count-input">
           <label>采样数:</label>
@@ -28,9 +28,9 @@
           @change="handleTimeChange"
           @visible-change="handlePickerVisibleChange"
         />
-        <el-button type="primary" @click="fetchTrajectory" :loading="loading">
+        <el-button type="primary" @click="fetchTrajectory" :loading="loading" class="query-btn">
           <el-icon><Search /></el-icon>
-          查询轨迹
+          <span class="btn-text">查询轨迹</span>
         </el-button>
       </div>
     </div>
@@ -41,8 +41,8 @@
       <h3>轨迹信息</h3>
       <p>轨迹点数: {{ trajectoryPoints.length }}</p>
       <p>当前缩放级别: {{ currentZoom }}</p>
-      <p v-if="trajectoryPoints.length > 0">起点时间: {{ trajectoryPoints[0]?.time }}</p>
-      <p v-if="trajectoryPoints.length > 0">终点时间: {{ trajectoryPoints[trajectoryPoints.length - 1]?.time }}</p>
+      <p v-if="trajectoryPoints.length > 0">起始: {{ trajectoryPoints[0]?.time }}</p>
+      <p v-if="trajectoryPoints.length > 0">终止: {{ trajectoryPoints[trajectoryPoints.length - 1]?.time }}</p>
     </div>
   </div>
 </template>
@@ -449,8 +449,12 @@ const fitBounds = () => {
   const centerLat = (minLat + maxLat) / 2
   
   scene.value.setCenter([centerLng, centerLat])
-  scene.value.setZoom(16)  // 增大默认缩放级别
-  currentZoom.value = 16
+  
+  // 移动端使用缩放级别15，桌面端使用16
+  const isMobile = window.innerWidth <= 768
+  const zoomLevel = isMobile ? 15 : 16
+  scene.value.setZoom(zoomLevel)
+  currentZoom.value = zoomLevel
 }
 
 onMounted(() => {
@@ -533,22 +537,32 @@ onBeforeUnmount(() => {
     padding: 16px 24px;
     background: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    z-index: 1000; // 提高z-index，确保日期选择器下拉面板在最上层
+    z-index: 1000;
     gap: 20px;
-    position: relative; // 添加定位
+    position: relative;
+    flex-wrap: wrap; // 移动端允许换行
     
-    h2 {
+    .back-btn {
+      flex-shrink: 0;
+    }
+    
+    .page-title {
       margin: 0;
       font-size: 18px;
       color: #333;
       flex: 1;
+      min-width: 150px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     
     .time-selector {
       display: flex;
       gap: 12px;
       align-items: center;
-      transform: translateX(-300px); // 整体向左平移400px
+      transform: translateX(-300px);
+      flex-wrap: wrap; // 移动端允许换行
       
       .sample-count-input {
         display: flex;
@@ -562,6 +576,12 @@ onBeforeUnmount(() => {
           font-weight: 500;
         }
       }
+      
+      .query-btn {
+        .btn-text {
+          margin-left: 4px;
+        }
+      }
     }
   }
   
@@ -575,30 +595,145 @@ onBeforeUnmount(() => {
     top: 80px;
     right: 20px;
     background: rgba(255, 255, 255, 0.95);
-    padding: 20px;
+    padding: 12px 16px;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    min-width: 220px;
+    min-width: 160px;
     backdrop-filter: blur(10px);
-    z-index: 100;  // 确保信息面板显示在地图之上
+    z-index: 100;
     
     h3 {
-      margin: 0 0 15px 0;
-      font-size: 16px;
+      margin: 0 0 10px 0;
+      font-size: 14px;
       color: #333;
       border-bottom: 2px solid #5B8FF9;
-      padding-bottom: 10px;
+      padding-bottom: 6px;
     }
     
     p {
-      margin: 8px 0;
-      font-size: 14px;
+      margin: 6px 0;
+      font-size: 12px;
       color: #666;
+      line-height: 1.4;
       
       &:first-of-type {
         font-weight: bold;
         color: #5B8FF9;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+// 移动端适配
+@media (max-width: 768px) {
+  .trajectory-container {
+    .header-bar {
+      padding: 12px;
+      gap: 8px;
+      
+      .page-title {
         font-size: 16px;
+        width: 100%;
+        order: 1;
+      }
+      
+      .back-btn {
+        order: 0;
+      }
+      
+      .time-selector {
+        width: 100%;
+        order: 2;
+        transform: none !important; // 移动端不偏移
+        gap: 8px;
+        
+        .sample-count-input {
+          width: 100%;
+          
+          label {
+            font-size: 13px;
+          }
+          
+          :deep(.el-input-number) {
+            flex: 1;
+            width: auto !important;
+          }
+        }
+        
+        :deep(.el-date-editor) {
+          width: 100% !important;
+          
+          .el-range-separator {
+            padding: 0 2px;
+          }
+          
+          .el-range-input {
+            font-size: 12px;
+          }
+        }
+        
+        .query-btn {
+          width: 100%;
+          
+          .btn-text {
+            display: inline;
+          }
+        }
+      }
+    }
+    
+    .info-panel {
+      top: auto;
+      bottom: 10px;
+      right: 8px;
+      left: auto;
+      min-width: 140px;
+      max-width: 180px;
+      padding: 8px 12px;
+      
+      h3 {
+        font-size: 13px;
+        margin-bottom: 8px;
+        padding-bottom: 6px;
+      }
+      
+      p {
+        font-size: 11px;
+        margin: 4px 0;
+        line-height: 1.3;
+        
+        &:first-of-type {
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+
+// 超小屏幕适配
+@media (max-width: 480px) {
+  .trajectory-container {
+    .header-bar {
+      padding: 8px;
+      
+      .page-title {
+        font-size: 14px;
+      }
+      
+      .back-btn {
+        :deep(.el-button) {
+          padding: 8px 12px;
+          font-size: 12px;
+        }
+      }
+      
+      .time-selector {
+        .sample-count-input {
+          label {
+            font-size: 12px;
+          }
+        }
       }
     }
   }