68 lines
1.5 KiB
SCSS
68 lines
1.5 KiB
SCSS
@use '../mixins/mixins.scss' as *;
|
|
|
|
$switch-tab-border-radius: 15rpx;
|
|
|
|
@include b(switch-tab) {
|
|
position: relative;
|
|
width: 100%;
|
|
border-radius: $switch-tab-border-radius;
|
|
|
|
/* 标签 start */
|
|
@include e(tabs) {
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
@include e(tab) {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 70rpx;
|
|
|
|
/* tab内部内容 start */
|
|
.tab-item {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: inherit;
|
|
border-radius: inherit;
|
|
transition-property: height, border-top-left-radius,
|
|
border-top-right-radius, border-bottom-left-radius,
|
|
border-bottom-right-radius, background-color, color;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: linear;
|
|
|
|
&.bg {
|
|
transform-origin: center bottom;
|
|
background-color: inherit;
|
|
}
|
|
|
|
&.text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
/* tab内部内容 end */
|
|
|
|
&:nth-of-type(1) {
|
|
border-top-left-radius: $switch-tab-border-radius;
|
|
}
|
|
&:nth-last-of-type(1) {
|
|
border-top-right-radius: $switch-tab-border-radius;
|
|
}
|
|
|
|
/* 激活状态 start */
|
|
@include when(active) {
|
|
.tab-item {
|
|
border-top-left-radius: $switch-tab-border-radius;
|
|
border-top-right-radius: $switch-tab-border-radius;
|
|
height: 90rpx;
|
|
}
|
|
}
|
|
/* 激活状态 end */
|
|
}
|
|
/* 标签 end */
|
|
}
|