101 lines
1.8 KiB
SCSS
101 lines
1.8 KiB
SCSS
.tab-container {
|
|
position: relative;
|
|
}
|
|
|
|
.tab-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 30px;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: $uni-font-size-base;
|
|
color: #666;
|
|
font-weight: 400;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab-text-active {
|
|
color: $uni-text-color;
|
|
font-size: $uni-font-size-lg;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-item-active {
|
|
.tab-text {
|
|
color: $uni-text-color;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.tab-indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 3px;
|
|
min-height: 3px; /* 确保最小高度 */
|
|
background-color: #007aff;
|
|
border-radius: 10px;
|
|
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 1;
|
|
transform: translateZ(0); /* 启用硬件加速 */
|
|
will-change: left, width; /* 优化动画性能 */
|
|
|
|
/* 初始状态：未初始化时隐藏 */
|
|
opacity: 0;
|
|
width: 15px; /* 默认宽度15px */
|
|
left: 0;
|
|
}
|
|
|
|
/* 已初始化状态 */
|
|
.tab-indicator.initialized {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 点击效果 */
|
|
.tab-item:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* 自定义主题色支持 */
|
|
.tab-container[data-indicator-color="red"] .tab-indicator {
|
|
background-color: #ff4d4f;
|
|
}
|
|
|
|
.tab-container[data-indicator-color="green"] .tab-indicator {
|
|
background-color: #52c41a;
|
|
}
|
|
|
|
.tab-container[data-indicator-color="orange"] .tab-indicator {
|
|
background-color: #fa8c16;
|
|
}
|
|
|
|
/* 动画增强 */
|
|
@keyframes tabSwitch {
|
|
0% {
|
|
transform: translateZ(0) scaleX(0.8);
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
transform: translateZ(0) scaleX(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.tab-indicator.animating {
|
|
animation: tabSwitch 0.3s ease-out;
|
|
}
|