|
@@ -2738,7 +2738,7 @@ onUnmounted(() => {
|
|
|
padding: 10px 12px;
|
|
padding: 10px 12px;
|
|
|
border-bottom: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
|
background: var(--white);
|
|
background: var(--white);
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
|
|
.panel-tab {
|
|
.panel-tab {
|
|
|
padding: 6px 10px;
|
|
padding: 6px 10px;
|
|
@@ -2785,43 +2785,18 @@ onUnmounted(() => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // Tab 滑入动画
|
|
|
|
|
|
|
+ // Tab 滑入动画 - 简化为淡入淡出
|
|
|
.tab-slide-enter-active {
|
|
.tab-slide-enter-active {
|
|
|
- animation: tabSlideIn 0.3s ease-out;
|
|
|
|
|
|
|
+ transition: opacity 0.25s ease-out;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tab-slide-leave-active {
|
|
.tab-slide-leave-active {
|
|
|
- animation: tabSlideOut 0.2s ease-in;
|
|
|
|
|
|
|
+ transition: opacity 0.15s ease-in;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- @keyframes tabSlideIn {
|
|
|
|
|
- from {
|
|
|
|
|
- opacity: 0;
|
|
|
|
|
- transform: translateX(-10px);
|
|
|
|
|
- max-width: 0;
|
|
|
|
|
- padding: 8px 0;
|
|
|
|
|
- }
|
|
|
|
|
- to {
|
|
|
|
|
- opacity: 1;
|
|
|
|
|
- transform: translateX(0);
|
|
|
|
|
- max-width: 150px;
|
|
|
|
|
- padding: 8px 14px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- @keyframes tabSlideOut {
|
|
|
|
|
- from {
|
|
|
|
|
- opacity: 1;
|
|
|
|
|
- transform: translateX(0);
|
|
|
|
|
- max-width: 150px;
|
|
|
|
|
- padding: 8px 14px;
|
|
|
|
|
- }
|
|
|
|
|
- to {
|
|
|
|
|
- opacity: 0;
|
|
|
|
|
- transform: translateX(-10px);
|
|
|
|
|
- max-width: 0;
|
|
|
|
|
- padding: 8px 0;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .tab-slide-enter-from,
|
|
|
|
|
+ .tab-slide-leave-to {
|
|
|
|
|
+ opacity: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.panel-header {
|
|
.panel-header {
|