更新TabPage标签鼠标样式并修改Area.vue
This commit is contained in:
@@ -92,7 +92,41 @@
|
|||||||
<!-- 内容区域 -->
|
<!-- 内容区域 -->
|
||||||
<div class="vs-content">
|
<div class="vs-content">
|
||||||
<!-- 这里是内容区域,使用slot接收子组件,并监听Panel的maximize事件 -->
|
<!-- 这里是内容区域,使用slot接收子组件,并监听Panel的maximize事件 -->
|
||||||
<slot @maximize="onPanelMaximize"></slot>
|
<slot @maximize="onPanelMaximize"></slot>
|
||||||
|
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="lightGradient"
|
||||||
|
x1="0%" y1="0%"
|
||||||
|
x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#DCE3F5" /> <!-- 高光色(比原色亮2个色阶) -->
|
||||||
|
<stop offset="100%" stop-color="#B7BED1" /> <!-- 阴影色(比原色暗2个色阶) -->
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path
|
||||||
|
fill="#61697E"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M0 0 L40 0 L40 40 L0 40 Z
|
||||||
|
M1 1 L39 1 L39 39 L1 39 Z" />
|
||||||
|
<path
|
||||||
|
fill="#A1A9C4"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M1 1 L39 1 L39 39 L1 39 Z
|
||||||
|
M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z" />
|
||||||
|
<path
|
||||||
|
fill="#7E869C"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M4 5 L5 4 L35 4 L36 5 L36 35 L35 36 L5 36 L4 35 Z
|
||||||
|
M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
|
||||||
|
<path
|
||||||
|
fill="url(#lightGradient)"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -199,6 +199,7 @@ const onTabDragEnd = () => {
|
|||||||
border-top-color: #0078d7;
|
border-top-color: #0078d7;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
cursor: move;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item:hover {
|
.tab-item:hover {
|
||||||
|
|||||||
@@ -17,6 +17,7 @@
|
|||||||
3. 当TabPage的页标签被选中时,背景颜色为#F5CC84,文字颜色为#000000。
|
3. 当TabPage的页标签被选中时,背景颜色为#F5CC84,文字颜色为#000000。
|
||||||
4. 当TabPage的页标签未被选中时,背景颜色与Area的背景颜色相同,文字颜色为#FFFFFF。
|
4. 当TabPage的页标签未被选中时,背景颜色与Area的背景颜色相同,文字颜色为#FFFFFF。
|
||||||
5. 当TabPage的页标签被选中时,激活的页标签不显示关闭按钮。
|
5. 当TabPage的页标签被选中时,激活的页标签不显示关闭按钮。
|
||||||
|
6. 当TabPage的页标签被选中时,鼠标显示为移动,否则显示为手型。
|
||||||
|
|
||||||
### Panel
|
### Panel
|
||||||
1. 填充满父容器。
|
1. 填充满父容器。
|
||||||
|
|||||||
Reference in New Issue
Block a user