zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: tabs optimization

This commit is contained in:
vben 2020-10-24 00:29:33 +08:00
parent c7cfeb5456
commit 6e4005111d
2 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/layouts/default/multitabs/index.less
View File

@ -7,19 +7,6 @@
height: @multiple-height; height: @multiple-height;
} }
// .ant-tabs:not(.ant-tabs-card) {
// .ant-tabs-nav-container {
// height: @multiple-height;
// background: @white;
// }
// .ant-tabs-tab {
// font-size: 14px;
// line-height: 1.5515;
// background: @white;
// }
// }
.ant-tabs.ant-tabs-card { .ant-tabs.ant-tabs-card {
.ant-tabs-card-bar { .ant-tabs-card-bar {
height: @multiple-height; height: @multiple-height;
@ -39,14 +26,21 @@
line-height: calc(@multiple-height - 2px); line-height: calc(@multiple-height - 2px);
color: @text-color-call-out; color: @text-color-call-out;
background: @white; background: @white;
border: 1px solid @border-color-shallow-dark; border: 1px solid darken(@border-color-light, 6%);
border-radius: 4px 4px 0 0; border-radius: 2px 2px 0 0;
transition: none; transition: none;
.ant-tabs-close-x { .ant-tabs-close-x {
// display: none;
color: inherit; color: inherit;
} }
&:hover {
.ant-tabs-close-x {
display: block;
}
}
> div { > div {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -72,7 +66,7 @@
&:hover::before { &:hover::before {
transform: scaleX(1); transform: scaleX(1);
transition: transform 0.4s ease; transition: transform 0.3s ease;
transform-origin: bottom left; transform-origin: bottom left;
} }
} }
@ -80,14 +74,13 @@
.ant-tabs-tab-active { .ant-tabs-tab-active {
height: calc(@multiple-height - 3px); height: calc(@multiple-height - 3px);
color: @white; color: @white;
// background: @primary-color;
background: linear-gradient( background: linear-gradient(
118deg, 118deg,
rgba(@primary-color, 0.8), rgba(@primary-color, 0.7),
rgba(@primary-color, 1) rgba(@primary-color, 1)
) !important; ) !important;
border: 0; border: 0;
box-shadow: 0 0 6px 1px rgba(@primary-color, 0.4); box-shadow: 0 0 6px 1px rgba(@primary-color, 0.7);
&::before { &::before {
display: none; display: none;

1
src/layouts/default/multitabs/index.tsx
View File

@ -148,6 +148,7 @@ export default defineComponent({
<Tabs <Tabs
type="editable-card" type="editable-card"
size="small" size="small"
animated={false}
hideAdd={true} hideAdd={true}
tabBarGutter={2} tabBarGutter={2}
activeKey={unref(activeKeyRef)} activeKey={unref(activeKeyRef)}