Commit 6e4005111db58ca10f10e9aa4bca4aec57363736
1 parent
c7cfeb54
perf: tabs optimization
Showing
2 changed files
with
13 additions
and
19 deletions
src/layouts/default/multitabs/index.less
| @@ -7,19 +7,6 @@ | @@ -7,19 +7,6 @@ | ||
| 7 | height: @multiple-height; | 7 | height: @multiple-height; |
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | - // .ant-tabs:not(.ant-tabs-card) { | ||
| 11 | - // .ant-tabs-nav-container { | ||
| 12 | - // height: @multiple-height; | ||
| 13 | - // background: @white; | ||
| 14 | - // } | ||
| 15 | - | ||
| 16 | - // .ant-tabs-tab { | ||
| 17 | - // font-size: 14px; | ||
| 18 | - // line-height: 1.5515; | ||
| 19 | - // background: @white; | ||
| 20 | - // } | ||
| 21 | - // } | ||
| 22 | - | ||
| 23 | .ant-tabs.ant-tabs-card { | 10 | .ant-tabs.ant-tabs-card { |
| 24 | .ant-tabs-card-bar { | 11 | .ant-tabs-card-bar { |
| 25 | height: @multiple-height; | 12 | height: @multiple-height; |
| @@ -39,14 +26,21 @@ | @@ -39,14 +26,21 @@ | ||
| 39 | line-height: calc(@multiple-height - 2px); | 26 | line-height: calc(@multiple-height - 2px); |
| 40 | color: @text-color-call-out; | 27 | color: @text-color-call-out; |
| 41 | background: @white; | 28 | background: @white; |
| 42 | - border: 1px solid @border-color-shallow-dark; | ||
| 43 | - border-radius: 4px 4px 0 0; | 29 | + border: 1px solid darken(@border-color-light, 6%); |
| 30 | + border-radius: 2px 2px 0 0; | ||
| 44 | transition: none; | 31 | transition: none; |
| 45 | 32 | ||
| 46 | .ant-tabs-close-x { | 33 | .ant-tabs-close-x { |
| 34 | + // display: none; | ||
| 47 | color: inherit; | 35 | color: inherit; |
| 48 | } | 36 | } |
| 49 | 37 | ||
| 38 | + &:hover { | ||
| 39 | + .ant-tabs-close-x { | ||
| 40 | + display: block; | ||
| 41 | + } | ||
| 42 | + } | ||
| 43 | + | ||
| 50 | > div { | 44 | > div { |
| 51 | display: flex; | 45 | display: flex; |
| 52 | justify-content: center; | 46 | justify-content: center; |
| @@ -72,7 +66,7 @@ | @@ -72,7 +66,7 @@ | ||
| 72 | 66 | ||
| 73 | &:hover::before { | 67 | &:hover::before { |
| 74 | transform: scaleX(1); | 68 | transform: scaleX(1); |
| 75 | - transition: transform 0.4s ease; | 69 | + transition: transform 0.3s ease; |
| 76 | transform-origin: bottom left; | 70 | transform-origin: bottom left; |
| 77 | } | 71 | } |
| 78 | } | 72 | } |
| @@ -80,14 +74,13 @@ | @@ -80,14 +74,13 @@ | ||
| 80 | .ant-tabs-tab-active { | 74 | .ant-tabs-tab-active { |
| 81 | height: calc(@multiple-height - 3px); | 75 | height: calc(@multiple-height - 3px); |
| 82 | color: @white; | 76 | color: @white; |
| 83 | - // background: @primary-color; | ||
| 84 | background: linear-gradient( | 77 | background: linear-gradient( |
| 85 | 118deg, | 78 | 118deg, |
| 86 | - rgba(@primary-color, 0.8), | 79 | + rgba(@primary-color, 0.7), |
| 87 | rgba(@primary-color, 1) | 80 | rgba(@primary-color, 1) |
| 88 | ) !important; | 81 | ) !important; |
| 89 | border: 0; | 82 | border: 0; |
| 90 | - box-shadow: 0 0 6px 1px rgba(@primary-color, 0.4); | 83 | + box-shadow: 0 0 6px 1px rgba(@primary-color, 0.7); |
| 91 | 84 | ||
| 92 | &::before { | 85 | &::before { |
| 93 | display: none; | 86 | display: none; |
src/layouts/default/multitabs/index.tsx
| @@ -148,6 +148,7 @@ export default defineComponent({ | @@ -148,6 +148,7 @@ export default defineComponent({ | ||
| 148 | <Tabs | 148 | <Tabs |
| 149 | type="editable-card" | 149 | type="editable-card" |
| 150 | size="small" | 150 | size="small" |
| 151 | + animated={false} | ||
| 151 | hideAdd={true} | 152 | hideAdd={true} |
| 152 | tabBarGutter={2} | 153 | tabBarGutter={2} |
| 153 | activeKey={unref(activeKeyRef)} | 154 | activeKey={unref(activeKeyRef)} |