抖音b端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

158 lines
2.5 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: 590rpx;
  50. text-align: center;
  51. }
  52. .pickedTime .picker {
  53. display: inline-block;
  54. background-color: #529ffd86;
  55. font-size: 30rpx;
  56. padding: 10rpx;
  57. border-radius: 10rpx;
  58. color: #ffffff;
  59. }
  60. .pickedTime .search {
  61. display: inline-block;
  62. width: 120rpx;
  63. height: 60rpx;
  64. line-height: 50rpx;
  65. padding: 5rpx;
  66. margin-left: 40rpx;
  67. }
  68. .list {
  69. position: relative;
  70. bottom: 590rpx;
  71. margin-top: 20rpx;
  72. z-index: -1;
  73. }
  74. .list.active {
  75. z-index: 1;
  76. }
  77. .list .item {
  78. width: 95%;
  79. border: 1px solid #ffffff93;
  80. margin: auto;
  81. overflow: hidden;
  82. background-color: #0000000a;
  83. border-radius: 20rpx;
  84. margin-bottom: 30rpx;
  85. }
  86. .list .itemXX {
  87. text-align: center;
  88. }
  89. .list .item .head {
  90. position: relative;
  91. padding: 20rpx;
  92. font-size: 30rpx;
  93. border-bottom: 1px solid #ffffffbb;
  94. }
  95. .notice {
  96. position: absolute;
  97. width: 250rpx;
  98. text-align: center;
  99. top: 28rpx;
  100. right: -80rpx;
  101. transform: rotate(45deg);
  102. font-size: 35rpx;
  103. }
  104. .notice.noAppoint {
  105. color: red;
  106. background-color: #ffcc66;
  107. }
  108. .notice.confirm {
  109. color: #ffffff;
  110. background-color: #ffcc66;
  111. }
  112. .notice.refund {
  113. color: #ffffff;
  114. background-color: #ff0000;
  115. }
  116. .notice.complete {
  117. color: #ffffff;
  118. background-color: #19be27;
  119. }
  120. .list .item .body {
  121. padding: 20rpx 20rpx;
  122. border-bottom: 1px solid #ffffffbb;
  123. }
  124. .list .item .body .items {
  125. margin-bottom: 10rpx;
  126. }
  127. .list .item .footer {
  128. margin: 25rpx 0;
  129. padding: 0 170rpx;
  130. }
  131. .list .item .footer button {
  132. background-color: #52a0fd;
  133. }