抖音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.

157 lignes
2.4 KiB

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