index.wxss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. .wux-tabs {
  2. position: relative
  3. }
  4. .wux-tabs--scroll .wux-tabs__scroll-view {
  5. display: block;
  6. overflow: auto;
  7. white-space: nowrap
  8. }
  9. .wux-tabs--vertical {
  10. display: inline-flex
  11. }
  12. .wux-tabs--vertical .wux-tabs__scroll-view {
  13. display: inline-flex;
  14. width: auto;
  15. height: auto;
  16. max-height: 540rpx;
  17. flex-direction: column
  18. }
  19. .wux-tabs__scroll-view {
  20. display: flex;
  21. width: 100%;
  22. height: 88rpx;
  23. line-height: 88rpx;
  24. box-sizing: border-box;
  25. position: relative;
  26. justify-content: space-around;
  27. align-items: center;
  28. background: #fff
  29. }
  30. .wux-tabs__mask {
  31. position: absolute;
  32. top: 0;
  33. bottom: 0;
  34. z-index: 1;
  35. width: 40rpx;
  36. height: 100%;
  37. pointer-events: none
  38. }
  39. .wux-tabs__mask--prev {
  40. left: 0;
  41. background: linear-gradient(90deg,#fff,rgba(255,255,255,0))
  42. }
  43. .wux-tabs__mask--next {
  44. right: 0;
  45. background: linear-gradient(270deg,#fff,rgba(255,255,255,0))
  46. }
  47. .wux-tabs--vertical .wux-tabs__mask {
  48. width: 100%;
  49. height: 40rpx;
  50. left: 0;
  51. right: unset
  52. }
  53. .wux-tabs--vertical .wux-tabs__mask--prev {
  54. bottom: unset;
  55. background: linear-gradient(180deg,#fff,rgba(255,255,255,0))
  56. }
  57. .wux-tabs--vertical .wux-tabs__mask--next {
  58. top: unset;
  59. background: linear-gradient(0deg,#fff,rgba(255,255,255,0))
  60. }