index.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .task-tabs-box {
  2. position: relative;
  3. .scroll {
  4. width: 100vw;
  5. height: 84rpx;
  6. background-color: #ffffff;
  7. z-index: 9;
  8. .box {
  9. display: flex;
  10. >.parallel:first-child {
  11. margin-left: 15rpx;
  12. }
  13. .parallel {
  14. flex-shrink: 0;
  15. position: relative;
  16. height: 64rpx;
  17. background: #EEEEEE;
  18. border-radius: 8rpx;
  19. transform: skew(-8deg, 0);
  20. margin-top: 20rpx;
  21. box-sizing: border-box;
  22. padding: 0 10rpx;
  23. margin-right: 20rpx;
  24. .mian {
  25. display: flex;
  26. align-items: center;
  27. height: 100%;
  28. padding: 0 30rpx;
  29. transform: skew(8deg, 0);
  30. .label {
  31. flex: 1;
  32. font-size: 24rpx;
  33. font-family: PingFang SC-Regular, PingFang SC;
  34. color: #666666;
  35. margin: 0 10rpx;
  36. text-align: center;
  37. }
  38. }
  39. }
  40. .active {
  41. background-color: #3874F6;
  42. .mian {
  43. .label {
  44. color: #FFFFFF;
  45. }
  46. }
  47. }
  48. }
  49. }
  50. .select {
  51. position: absolute;
  52. width: 64rpx;
  53. height: 64rpx;
  54. line-height: 64rpx;
  55. text-align: center;
  56. right: -20rpx;
  57. top: 20rpx;
  58. background-color: #ffffff;
  59. transform: rotate(90deg);
  60. color: #3874F6;
  61. }
  62. }