index.scss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. .groud {
  2. width: 100%;
  3. padding: 30rpx;
  4. border-bottom: 1px solid #DDDDDD;
  5. overflow: hidden;
  6. .title {
  7. display: flex;
  8. justify-content: space-between;
  9. box-sizing: border-box;
  10. .label {
  11. height: 40rpx;
  12. font-size: 28rpx;
  13. font-family: PingFang SC-Regular, PingFang SC;
  14. color: #333333;
  15. }
  16. .tabs-box {
  17. display: flex;
  18. align-items: center;
  19. height: 50rpx;
  20. background: #F5F5F5;
  21. border-radius: 30rpx;
  22. padding: 4rpx;
  23. background-color: #F5F5F5;
  24. box-sizing: content-box;
  25. margin-right: 50rpx;
  26. .item {
  27. font-size: 24rpx;
  28. font-family: PingFang SC-Regular, PingFang SC;
  29. color: #FFFFFF;
  30. height: 42rpx;
  31. line-height: 42rpx;
  32. padding: 0 16rpx;
  33. background-color: #F5F5F5;
  34. color: #999999;
  35. border-radius: 26rpx;
  36. box-sizing: border-box;
  37. }
  38. .active {
  39. background-color: #3874F6;
  40. color: #FFFFFF;
  41. transition: color 0.3s;
  42. }
  43. }
  44. }
  45. .content {
  46. display: flex;
  47. flex-wrap: wrap;
  48. width: 100%;
  49. .but {
  50. min-width: 188rpx;
  51. height: 72rpx;
  52. background: #F5F5F5;
  53. border-radius: 8rpx;
  54. font-size: 28rpx;
  55. font-family: PingFang SC-Regular, PingFang SC;
  56. color: #333333;
  57. margin-right: 20rpx;
  58. margin-top: 20rpx;
  59. padding: 0 20rpx;
  60. box-sizing: border-box;
  61. }
  62. .active {
  63. border: 1px solid #3874F6;
  64. color: #3874F6;
  65. font-weight: bold;
  66. background-color: #F5F5F5;
  67. }
  68. }
  69. .time {
  70. .partition {
  71. margin-right: 20rpx;
  72. display: flex;
  73. align-items: center;
  74. }
  75. .tbox {
  76. width: 220rpx;
  77. height: 72rpx;
  78. text-align: center;
  79. line-height: 72rpx;
  80. background: #F5F5F5;
  81. border-radius: 8rpx;
  82. font-size: 28rpx;
  83. font-family: PingFang SC-Regular, PingFang SC;
  84. color: #333333;
  85. box-sizing: border-box;
  86. margin-right: 20rpx;
  87. margin-top: 20rpx;
  88. }
  89. }
  90. }
  91. .exclution {
  92. opacity: .7;
  93. .content {
  94. .active {
  95. border: 0px solid #3874F6;
  96. color: #333333;
  97. font-weight: bold;
  98. background-color: #F5F5F5;
  99. }
  100. }
  101. }
  102. .footer {
  103. display: flex;
  104. justify-content: space-around;
  105. width: 100%;
  106. box-sizing: border-box;
  107. padding: 10rpx;
  108. box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 8rpx;
  109. .v-but {
  110. width: 190rpx;
  111. height: 90rpx;
  112. background: #FFFFFF;
  113. border-radius: 8rpx;
  114. border: 1px solid #CCCCCC;
  115. font-size: 28rpx;
  116. font-family: PingFang SC-Regular, PingFang SC;
  117. color: #666666;
  118. }
  119. .confirm {
  120. border: none;
  121. background: #3874F6;
  122. font-size: 28rpx;
  123. font-family: PingFang SC-Bold, PingFang SC;
  124. font-weight: bold;
  125. color: #FFFFFF;
  126. }
  127. }