feat(screen): 为地图工具提示添加操作槽
为 MapTooltip 组件添加一个新的操作区域,用于显示“连线”和“联动”等交互式按钮。包含相应的 CSS 样式,用于布局和视觉分隔。
This commit is contained in:
parent
dadfa1b1cc
commit
0d2b9b27d0
@ -94,6 +94,11 @@
|
|||||||
<div class="map-tooltip__content">
|
<div class="map-tooltip__content">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮区域 -->
|
||||||
|
<div v-if="$slots.actions" class="map-tooltip__actions">
|
||||||
|
<slot name="actions" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -280,8 +285,8 @@ const handleClose = () => {
|
|||||||
*/
|
*/
|
||||||
.map-tooltip__corner {
|
.map-tooltip__corner {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: vw(20);
|
// width: vw(20);
|
||||||
height: vw(20); // 使用 vw 保持正方形
|
// height: vw(20); // 使用 vw 保持正方形
|
||||||
pointer-events: none; // 装饰元素不响应鼠标事件
|
pointer-events: none; // 装饰元素不响应鼠标事件
|
||||||
z-index: 1; // 确保显示在背景之上
|
z-index: 1; // 确保显示在背景之上
|
||||||
|
|
||||||
@ -431,6 +436,19 @@ const handleClose = () => {
|
|||||||
gap: vh(6);
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 淡入淡出动画
|
* 淡入淡出动画
|
||||||
* 结合缩放效果,提升视觉体验
|
* 结合缩放效果,提升视觉体验
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user