抖音b端
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

182 lignes
2.8 KiB

  1. .nav {
  2. display: flex;
  3. flex-wrap: wrap;
  4. justify-content: space-between;
  5. padding: 20rpx 150rpx;
  6. background-color: #f7f7f7;
  7. }
  8. .input {
  9. /* width: 100%; */
  10. display: flex;
  11. justify-content: space-between;
  12. padding: 10rpx;
  13. height: 100rpx;
  14. }
  15. .input input {
  16. width: 70%;
  17. height: 60rpx;
  18. border: #52a0fd 1rpx solid;
  19. border-radius: 5rpx;
  20. padding: 20rpx;
  21. }
  22. .input button {
  23. width: 25%;
  24. height: 100rpx;
  25. }
  26. .nav .item image {
  27. position: relative;
  28. bottom: 5rpx;
  29. width: 30rpx;
  30. margin-left: 20rpx;
  31. }
  32. .nav .currentItem {
  33. color: #52a0fd;
  34. }
  35. .nav .currentItem image {
  36. position: relative;
  37. bottom: 5rpx;
  38. width: 30rpx;
  39. margin-left: 20rpx;
  40. transform: rotate(180deg);
  41. transition: all 0.3s;
  42. }
  43. .type {
  44. text-align: center;
  45. padding: 40rpx;
  46. transform: translateY(-150%);
  47. opacity: 0;
  48. transition: all 0.3s;
  49. background-color: #ffffff86;
  50. z-index: 99;
  51. }
  52. .type.active {
  53. transform: translateY(0);
  54. opacity: 1;
  55. }
  56. .type .item {
  57. color: #ffffff;
  58. background-color: #52a0fd;
  59. border-radius: 5rpx;
  60. padding: 10rpx 0;
  61. margin-bottom: 40rpx;
  62. }
  63. .type .item.center {
  64. margin: 30rpx 0;
  65. }
  66. .pickedTime {
  67. position: relative;
  68. bottom: 590rpx;
  69. text-align: center;
  70. }
  71. .pickedTime .picker {
  72. display: inline-block;
  73. background-color: #529ffd86;
  74. font-size: 30rpx;
  75. padding: 10rpx;
  76. border-radius: 10rpx;
  77. color: #ffffff;
  78. }
  79. .pickedTime .search {
  80. display: inline-block;
  81. width: 120rpx;
  82. height: 60rpx;
  83. line-height: 50rpx;
  84. padding: 5rpx;
  85. margin-left: 40rpx;
  86. }
  87. .list {
  88. position: relative;
  89. bottom: 590rpx;
  90. margin-top: 20rpx;
  91. z-index: -1;
  92. }
  93. .list.active {
  94. z-index: 1;
  95. }
  96. .list .item {
  97. width: 95%;
  98. border: 1px solid #ffffff93;
  99. margin: auto;
  100. overflow: hidden;
  101. background-color: #0000000a;
  102. border-radius: 20rpx;
  103. margin-bottom: 30rpx;
  104. }
  105. .list .itemXX {
  106. text-align: center;
  107. }
  108. .list .item .head {
  109. position: relative;
  110. padding: 20rpx;
  111. font-size: 30rpx;
  112. border-bottom: 1px solid #ffffffbb;
  113. }
  114. .notice {
  115. position: absolute;
  116. width: 250rpx;
  117. text-align: center;
  118. top: 28rpx;
  119. right: -80rpx;
  120. transform: rotate(45deg);
  121. font-size: 35rpx;
  122. }
  123. .notice.noAppoint {
  124. color: red;
  125. background-color: #ffcc66;
  126. }
  127. .notice.confirm {
  128. color: #ffffff;
  129. background-color: #ffcc66;
  130. }
  131. .notice.refund {
  132. color: #ffffff;
  133. background-color: #ff0000;
  134. }
  135. .notice.complete {
  136. color: #ffffff;
  137. background-color: #19be27;
  138. }
  139. .list .item .body {
  140. padding: 20rpx 20rpx;
  141. border-bottom: 1px solid #ffffffbb;
  142. }
  143. .list .item .body .items {
  144. margin-bottom: 10rpx;
  145. }
  146. .list .item .footer {
  147. display: flex;
  148. margin: 25rpx 0;
  149. padding: 0 170rpx;
  150. }
  151. .list .item .footer button {
  152. background-color: #52a0fd;
  153. }