tabs.wxss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. .scroll-view_H{
  2. white-space: nowrap;
  3. position: fixed;
  4. top: 80rpx;
  5. left: 0;
  6. z-index: 10;
  7. background:#2b2b2b;
  8. }
  9. .scroll-view-item{
  10. height: 300rpx;
  11. }
  12. .scroll-view-item_H{
  13. position: relative;
  14. display: inline-block;
  15. padding: 10rpx 28rpx;
  16. height: 40rpx;
  17. font-size: 28rpx;
  18. color: #777777;
  19. background: #2b2b2b;
  20. }
  21. .scroll-view-item_H:after {
  22. content: '';
  23. position: absolute;
  24. width: 70%;
  25. height: 4rpx;
  26. left: 15%;
  27. bottom: 6rpx;
  28. background: transparent;
  29. }
  30. .scroll-view-item_H.active {
  31. color: #fff
  32. }
  33. .scroll-view-item_H.active:after {
  34. background: #fff;
  35. }
  36. .scroll-view_auto {
  37. display: flex;
  38. z-index: 10;
  39. align-items:center;
  40. overflow-x: auto;
  41. position: fixed;
  42. top: 80rpx;
  43. left: 0;
  44. width: 100%;
  45. white-space: nowrap;
  46. background:#2b2b2b;
  47. }
  48. .scroll-view-item_auto {
  49. display: inline-block;
  50. position: relative;
  51. padding: 10rpx 28rpx;
  52. min-width: 56rpx;
  53. height: 40rpx;
  54. font-size: 28rpx;
  55. color: #777777;
  56. background: #2b2b2b;
  57. text-align: center;
  58. flex-grow: 1;
  59. flex-shrink: 0;
  60. }
  61. .scroll-view-item_auto.active .scroll-view_name {
  62. color: #fff
  63. }
  64. .scroll-view-item_auto.active .scroll-view_name:after {
  65. background: #fff;
  66. }
  67. .scroll-view_name {
  68. display: inline-block;
  69. position: relative;
  70. }
  71. .scroll-view_name:after {
  72. content: '';
  73. position: absolute;
  74. left: -10rpx;
  75. right: -10rpx;
  76. bottom: -8rpx;
  77. /* width: 70%; */
  78. height: 4rpx;
  79. /* left: 15%; */
  80. background: transparent;
  81. }