|
|
@@ -1,71 +1,68 @@
|
|
|
-.task-tabs-box {
|
|
|
+.scroll {
|
|
|
position: relative;
|
|
|
+ width:100%;
|
|
|
+ height: 84rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ z-index: 9;
|
|
|
|
|
|
- .scroll {
|
|
|
- width: 100vw;
|
|
|
- height: 84rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- z-index: 9;
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .box {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- >.parallel:first-child {
|
|
|
- margin-left: 15rpx;
|
|
|
- }
|
|
|
+ >.parallel:first-child {
|
|
|
+ margin-left: 15rpx;
|
|
|
+ }
|
|
|
|
|
|
- .parallel {
|
|
|
- flex-shrink: 0;
|
|
|
- position: relative;
|
|
|
- height: 64rpx;
|
|
|
- background: #EEEEEE;
|
|
|
- border-radius: 8rpx;
|
|
|
- transform: skew(-8deg, 0);
|
|
|
- margin-top: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 10rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
+ .parallel {
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+ height: 64rpx;
|
|
|
+ background: #EEEEEE;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ transform: skew(-8deg, 0);
|
|
|
+ margin-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
|
- .mian {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- padding: 0 30rpx;
|
|
|
- transform: skew(8deg, 0);
|
|
|
+ .mian {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ transform: skew(8deg, 0);
|
|
|
|
|
|
- .label {
|
|
|
- flex: 1;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- color: #666666;
|
|
|
- margin: 0 10rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .label {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ color: #666666;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
- background-color: #3874F6;
|
|
|
+ .active {
|
|
|
+ background-color: #3874F6;
|
|
|
|
|
|
- .mian {
|
|
|
- .label {
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ .mian {
|
|
|
+ .label {
|
|
|
+ color: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .select {
|
|
|
- position: absolute;
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- right: -20rpx;
|
|
|
- top: 20rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- transform: rotate(90deg);
|
|
|
- color: #3874F6;
|
|
|
- }
|
|
|
+.select {
|
|
|
+ position: absolute;
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ right: -20rpx;
|
|
|
+ top: 20rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ color: #3874F6;
|
|
|
}
|