index.scss 1.5 KB

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