修改tabpage页标签
This commit is contained in:
@@ -60,17 +60,13 @@ const closeTab = (tabId) => {
|
|||||||
.tab-page {
|
.tab-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 300px;
|
width: 100%;
|
||||||
height: 250px;
|
height: 100%;
|
||||||
background: #5D6B99;
|
background: #5D6B99;
|
||||||
border: 1px solid #c7d2ea;
|
border: 1px solid #c7d2ea;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
position: relative;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@@ -83,7 +79,7 @@ const closeTab = (tabId) => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
|
background: transparent;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
@@ -98,8 +94,7 @@ const closeTab = (tabId) => {
|
|||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
margin-left: 1px;
|
margin-left: 1px;
|
||||||
background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
|
background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
|
||||||
border: 1px solid #c7d2ea;
|
border-bottom-color: #c7d2ea;
|
||||||
border-bottom: none;
|
|
||||||
border-radius: 3px 3px 0 0;
|
border-radius: 3px 3px 0 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -111,7 +106,7 @@ const closeTab = (tabId) => {
|
|||||||
.tab-item.active {
|
.tab-item.active {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: 1px solid #c7d2ea;
|
border: 1px solid #c7d2ea;
|
||||||
border-bottom: none;
|
border-bottom-color: #ffffff;
|
||||||
border-top-width: 2px;
|
border-top-width: 2px;
|
||||||
border-top-color: #0078d7;
|
border-top-color: #0078d7;
|
||||||
color: #333;
|
color: #333;
|
||||||
@@ -142,12 +137,9 @@ const closeTab = (tabId) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tab-placeholder {
|
.tab-placeholder {
|
||||||
flex: 1;
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
height: 26px;
|
border: transparent;
|
||||||
margin-left: 1px;
|
border-bottom-color: #c7d2ea;
|
||||||
border: 1px solid transparent;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 内容区域样式 */
|
/* 内容区域样式 */
|
||||||
@@ -155,9 +147,6 @@ const closeTab = (tabId) => {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-top: 1px solid #c7d2ea;
|
|
||||||
margin-top: -1px;
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-panel {
|
.tab-panel {
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
|
|
||||||
### TabPage
|
### TabPage
|
||||||
1. 初始添加时,默认宽300px,高250px。位置相对父容器水平居中,垂直居中。
|
1. 初始添加时,默认宽300px,高250px。位置相对父容器水平居中,垂直居中。
|
||||||
|
2. 背景颜色为#5D6B99
|
||||||
|
|
||||||
### Panel
|
### Panel
|
||||||
1. 填充满父容器。
|
1. 填充满父容器。
|
||||||
|
|||||||
Reference in New Issue
Block a user