From 4b37c1cb3ed6bc9659a347c4d6445b23cd6187b5 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 25 Feb 2026 16:02:50 +0800
Subject: [PATCH] feat:图层管理调整
---
applications/drone-command/src/components/map-container/device-map-container.vue | 52 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 33 insertions(+), 19 deletions(-)
diff --git a/applications/drone-command/src/components/map-container/device-map-container.vue b/applications/drone-command/src/components/map-container/device-map-container.vue
index 5555f05..a16f191 100644
--- a/applications/drone-command/src/components/map-container/device-map-container.vue
+++ b/applications/drone-command/src/components/map-container/device-map-container.vue
@@ -10,28 +10,30 @@
<div class="layer-control" @click="toggleLayerPanel">
<img :src="layerControlIcon" alt="图层控制" />
</div>
- <div v-if="showLayerPanel" class="layer-panel">
- <div class="panel-title">底图切换</div>
- <div class="base-map-options">
- <div class="base-map-card" :class="{ active: baseLayerKey === 'base-standard' }"
- @click="handleBaseLayerSelect('base-standard')">
- <img class="base-map-thumb standard" :src="dzIcon" alt="">
- <div class="base-map-label">标准地图</div>
+ <transition name="layer-panel-slide">
+ <div v-if="showLayerPanel" class="layer-panel">
+ <div class="panel-title">底图切换</div>
+ <div class="base-map-options">
+ <div class="base-map-card" :class="{ active: baseLayerKey === 'base-standard' }"
+ @click="handleBaseLayerSelect('base-standard')">
+ <img class="base-map-thumb standard" :src="dzIcon" alt="">
+ <div class="base-map-label">标准地图</div>
+ </div>
+ <div class="base-map-card" :class="{ active: baseLayerKey === 'base-satellite' }"
+ @click="handleBaseLayerSelect('base-satellite')">
+ <img class="base-map-thumb satellite" :src="yxIcon" alt="">
+ <div class="base-map-label">卫星地图</div>
+ </div>
</div>
- <div class="base-map-card" :class="{ active: baseLayerKey === 'base-satellite' }"
- @click="handleBaseLayerSelect('base-satellite')">
- <img class="base-map-thumb satellite" :src="yxIcon" alt="">
- <div class="base-map-label">卫星地图</div>
- </div>
- </div>
- <div class="panel-title">图层管理</div>
- <div class="panel-content">
- <el-tree ref="layerTreeRef" class="command-tree map-layer-tree" :data="layerTree" show-checkbox
- default-expand-all node-key="key" :props="layerTreeProps"
- :default-checked-keys="treeCheckedKeys" @check="handleLayerCheck" />
+ <div class="panel-title">图层管理</div>
+ <div class="panel-content">
+ <el-tree ref="layerTreeRef" class="command-tree map-layer-tree" :data="layerTree" show-checkbox
+ default-expand-all node-key="key" :props="layerTreeProps"
+ :default-checked-keys="treeCheckedKeys" @check="handleLayerCheck" />
+ </div>
</div>
- </div>
+ </transition>
</div>
</div>
@@ -1524,4 +1526,16 @@
}
}
}
+
+.layer-panel-slide-enter-active,
+.layer-panel-slide-leave-active {
+ transition: transform 0.24s ease, opacity 0.24s ease;
+ transform-origin: right center;
+}
+
+.layer-panel-slide-enter-from,
+.layer-panel-slide-leave-to {
+ transform: translateX(24px);
+ opacity: 0;
+}
</style>
--
Gitblit v1.9.3