index.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. .scroll {
  2. position: sticky;
  3. top: 0;
  4. display: flex;
  5. flex-wrap: nowrap;
  6. width: 100vw;
  7. height: 120rpx;
  8. background-color: #ffffff;
  9. z-index: 9;
  10. box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8rpx;
  11. .item {
  12. flex-shrink: 0;
  13. display: flex;
  14. flex-direction: column;
  15. align-items: center;
  16. height: 100%;
  17. width: 172rpx;
  18. padding-top: 16rpx;
  19. text-align: center;
  20. box-sizing: border-box;
  21. .icon {
  22. width: 46rpx;
  23. height: 46rpx;
  24. .iconfont {
  25. font-size: 36rpx;
  26. color: #000;
  27. }
  28. }
  29. .num {
  30. width: 80%;
  31. height: 46rpx;
  32. font-size: 28rpx;
  33. font-family: PingFang SC-Bold, PingFang SC;
  34. font-weight: bold;
  35. color: #333333;
  36. }
  37. .label {
  38. height: 34rpx;
  39. font-size: 24rpx;
  40. font-family: PingFang SC-Regular, PingFang SC;
  41. color: #999999;
  42. margin-top: 8rpx;
  43. }
  44. }
  45. .active {
  46. border-bottom: 4rpx solid #3874F6;
  47. .label,
  48. .num,
  49. .icon {
  50. color: #3874F6 !important;
  51. }
  52. }
  53. }
  54. .slot-box {
  55. width: 100vw;
  56. min-height: 200rpx;
  57. }
  58. .line-1 {
  59. overflow: hidden;
  60. white-space: nowrap;
  61. text-overflow: ellipsis;
  62. }
  63. .buts-scroll {
  64. // position: sticky;
  65. top: 0;
  66. display: flex;
  67. flex-wrap: nowrap;
  68. width: 100vw;
  69. height: 70rpx;
  70. z-index: 9;
  71. padding: 0 30rpx;
  72. box-sizing: border-box;
  73. .buts-box {
  74. padding: 10rpx 5rpx;
  75. .but-item {
  76. background: #FFFFFF;
  77. border-radius: 8rpx;
  78. border: 1rpx solid #E0E0E0;
  79. box-sizing: border-box;
  80. line-height: 34rpx;
  81. font-family: PingFang SC, PingFang SC;
  82. font-size: 24rpx;
  83. color: #333333;
  84. padding: 8rpx 20rpx;
  85. }
  86. .active {
  87. background-color: #FAE5E5;
  88. border-color: #FAE5E5;
  89. color: #F56C6C;
  90. }
  91. }
  92. .buts-box:first-child {
  93. padding-left: 0;
  94. }
  95. .buts-box:last-child {
  96. padding-right: 0;
  97. }
  98. }
  99. .safety {
  100. padding-bottom: constant(safe-area-inset-bottom);
  101. padding-bottom: env(safe-area-inset-bottom);
  102. height: 40rpx;
  103. }