bdzl2/bxztApp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(screen): 为地图工具提示添加操作槽

Browse Source 
为 MapTooltip 组件添加一个新的操作区域，用于显示“连线”和“联动”等交互式按钮。包含相应的 CSS 样式，用于布局和视觉分隔。
This commit is contained in:
Zzc 2025-11-20 18:08:24 +08:00
parent dadfa1b1cc
commit 0d2b9b27d0
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/MapTooltip.vue
View File

@ -94,6 +94,11 @@
<div class="map-tooltip__content">
<slot />
</div>
<!-- 操作按钮区域 -->
<div v-if="$slots.actions" class="map-tooltip__actions">
<slot name="actions" />
</div>
</div>
</div>
</div>
@ -280,8 +285,8 @@ const handleClose = () => {
*/
.map-tooltip__corner {
position: absolute;
width: vw(20);
height: vw(20); // 使用 vw 保持正方形
// width: vw(20);
// height: vw(20); // 使用 vw 保持正方形
pointer-events: none; // 装饰元素不响应鼠标事件
z-index: 1; // 确保显示在背景之上
@ -431,6 +436,19 @@ const handleClose = () => {
gap: vh(6);
}
/**
* 操作按钮区域
* 用于显示"连线"、"联动"等交互按钮
*/
.map-tooltip__actions {
display: flex;
justify-content: center;
align-items: center;
margin-top: vh(16);
padding-top: vh(12);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/**
* 淡入淡出动画
* 结合缩放效果，提升视觉体验