调整DockIndicator上区指示器位置,将其移至中心区域容器内部并设置正确的相对定位
This commit is contained in:
@@ -65,31 +65,7 @@
|
|||||||
</symbol>
|
</symbol>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<!-- 上区指示 -->
|
|
||||||
<svg
|
|
||||||
width="41"
|
|
||||||
height="41"
|
|
||||||
viewBox="0 0 40 40"
|
|
||||||
aria-hidden="false"
|
|
||||||
>
|
|
||||||
<use xlink:href="#shared-area" />
|
|
||||||
<path
|
|
||||||
fill="url(#Area)"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M10 13 L30 13 L30 20 L10 20 Z" />
|
|
||||||
<path
|
|
||||||
d="M10 20 L30 20"
|
|
||||||
stroke="#4C5E83"
|
|
||||||
stroke-dasharray="2,2"
|
|
||||||
stroke-width="1"
|
|
||||||
fill="none" />
|
|
||||||
<path
|
|
||||||
fill="#F0F2F6"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M10 21 L30 21 L30 30 L10 30 Z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<!-- 右区指示 -->
|
<!-- 右区指示 -->
|
||||||
<svg
|
<svg
|
||||||
@@ -267,6 +243,32 @@
|
|||||||
|
|
||||||
<!-- 中心区域容器:包装中心指示区和中心指示器 -->
|
<!-- 中心区域容器:包装中心指示区和中心指示器 -->
|
||||||
<div class="center-dock-container">
|
<div class="center-dock-container">
|
||||||
|
<!-- 上区指示 -->
|
||||||
|
<svg
|
||||||
|
width="41"
|
||||||
|
height="41"
|
||||||
|
viewBox="0 0 40 40"
|
||||||
|
aria-hidden="false"
|
||||||
|
class="dock-top-area"
|
||||||
|
>
|
||||||
|
<use xlink:href="#shared-area" />
|
||||||
|
<path
|
||||||
|
fill="url(#Area)"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 13 L30 13 L30 20 L10 20 Z" />
|
||||||
|
<path
|
||||||
|
d="M10 20 L30 20"
|
||||||
|
stroke="#4C5E83"
|
||||||
|
stroke-dasharray="2,2"
|
||||||
|
stroke-width="1"
|
||||||
|
fill="none" />
|
||||||
|
<path
|
||||||
|
fill="#F0F2F6"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 21 L30 21 L30 30 L10 30 Z" />
|
||||||
|
</svg>
|
||||||
<!-- 中心指示区:一直可见 -->
|
<!-- 中心指示区:一直可见 -->
|
||||||
<svg
|
<svg
|
||||||
width="185"
|
width="185"
|
||||||
@@ -280,12 +282,12 @@
|
|||||||
fill="#636873"
|
fill="#636873"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M0 72 L63 72 L72 63 L72 0 L113 0 L113 63 L123 72 L185 72 L185 113 L123 113 L113 123 L113 185 L72 185 L72 123 L63 113 L0 113 Z" />
|
d="M0 67 L58 67 L67 58 L67 0 L118 0 L118 58 L128 67 L185 67 L185 118 L128 118 L118 128 L118 185 L67 185 L67 128 L58 118 L0 118 Z" />
|
||||||
<path
|
<path
|
||||||
fill="#D5DCF0"
|
fill="#D5DCF0"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M1 73 L64 73 L73 64 L73 1 L112 1 L112 64 L122 73 L184 73 L184 112 L122 112 L112 122 L112 184 L73 184 L73 122 L64 112 L1 112 Z" />
|
d="M1 68 L59 68 L68 59 L68 1 L117 1 L117 59 L127 68 L184 68 L184 117 L127 117 L117 127 L117 184 L68 184 L68 127 L59 117 L1 117 Z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<!-- 中心指示区上方指示器:位于中心指示区上边缘,距离上边框5像素 -->
|
<!-- 中心指示区上方指示器:位于中心指示区上边缘,距离上边框5像素 -->
|
||||||
@@ -663,6 +665,17 @@ watch(activeDockZone, (newZone) => {
|
|||||||
z-index: 1; /* 中心指示区在下层 */
|
z-index: 1; /* 中心指示区在下层 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 上区指示器:位于中心指示区上方指示器的上方4个像素处 */
|
||||||
|
.dock-top-area {
|
||||||
|
position: absolute;
|
||||||
|
top: -45px; /* 向上偏移,确保距离中心指示区上方指示器上边缘4个像素 */
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
opacity: 0.7; /* 默认半透明 */
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
z-index: 2; /* 确保在中心指示区上方 */
|
||||||
|
}
|
||||||
|
|
||||||
/* 中心指示区上方指示器:位于中心指示区上边缘,距离上边框5像素 */
|
/* 中心指示区上方指示器:位于中心指示区上边缘,距离上边框5像素 */
|
||||||
.indicator-center-top {
|
.indicator-center-top {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dock-layout" ref="dockLayoutRef" style="display: flex; flex-direction: column; position: relative;">
|
<div class="dock-layout" ref="dockLayoutRef" style="display: flex; flex-direction: column; position: relative;">
|
||||||
<!-- 停靠指示器组件 - 设置高z-index确保显示在最顶层 -->
|
<!-- 停靠指示器组件 - 设置高z-index确保显示在最顶层 -->
|
||||||
|
<!-- :visible="showDockIndicator" :visible="true" -->
|
||||||
<DockIndicator
|
<DockIndicator
|
||||||
:visible="showDockIndicator"
|
:visible="showDockIndicator"
|
||||||
:target-rect="targetAreaRect"
|
:target-rect="targetAreaRect"
|
||||||
|
|||||||
Reference in New Issue
Block a user