Reserve.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. .page-yy-form{
  2. width:100vw;
  3. height:100vh;
  4. min-height:100vh;
  5. overflow: hidden;
  6. background:#000;
  7. display:flex;
  8. flex-direction: column;
  9. .date-list{
  10. display:flex;
  11. width:100%;
  12. height:60px;
  13. // border:1px solid red;
  14. padding-top:10px;
  15. background:#e2e2e2;
  16. padding-bottom:5px;
  17. .date-item{
  18. display: flex;
  19. height:100%;
  20. width:15%;
  21. flex-direction: column;
  22. justify-content: center;
  23. align-items: center;
  24. font-size:12px;
  25. .week{
  26. display:flex;
  27. height:40%;
  28. justify-content: center;
  29. align-items: center;
  30. font-size:14px;
  31. .text{
  32. }
  33. }
  34. .day{
  35. display:flex;
  36. height:60%;
  37. justify-content: center;
  38. align-items: center;
  39. font-size:14px;
  40. margin-top:10px;
  41. }
  42. }
  43. .active{
  44. .week{
  45. .text{
  46. display:flex;
  47. color:#FFf;
  48. width:25px;
  49. height:25px;
  50. background:#b21c1c;
  51. border-radius: 50%;
  52. justify-content: center;
  53. align-items: center;
  54. }
  55. }
  56. }
  57. }
  58. .time-list{
  59. width:100%;
  60. height:90%;
  61. background:#f0f0f0;
  62. padding-bottom:80px;
  63. overflow: hidden;
  64. overflow-y: scroll;
  65. .times{
  66. height:100%;
  67. width:100%;
  68. .item{
  69. display: flex;
  70. flex-direction: row;
  71. height:35px!important;
  72. border-bottom: 1px solid #f4f4f4;
  73. justify-content: flex-start;
  74. background:#FFF;
  75. align-items: center;
  76. .time{
  77. display:flex;
  78. width:15%;
  79. height:100%;
  80. justify-content: center;
  81. align-items: center;
  82. .text{
  83. color:#a2a2a2;
  84. }
  85. }
  86. .status{
  87. display:flex;
  88. height:100%;
  89. width:85%;
  90. justify-content: flex-start;
  91. align-items: center;
  92. .text{
  93. font-size:12px;
  94. width:100%;
  95. height:100%;
  96. display:flex;
  97. justify-content:center;
  98. align-items: center;
  99. }
  100. }
  101. }
  102. .disabled{
  103. background:#f1f1f1;
  104. .time{
  105. .text{
  106. color:#b3b3b3;
  107. }
  108. }
  109. .status{
  110. .text{
  111. color:#b3b3b3;
  112. }
  113. }
  114. }
  115. .Full{
  116. background:#ff5500;
  117. .time{
  118. .text{
  119. color:#FFF;
  120. }
  121. }
  122. .status{
  123. .text{
  124. color:#FFF;
  125. }
  126. }
  127. }
  128. .active{
  129. background:#ffffff;
  130. .time{
  131. .text{
  132. color:#333;
  133. }
  134. }
  135. .status{
  136. .text{
  137. color:#333;
  138. }
  139. }
  140. }
  141. .selected{
  142. background:#ffaa00;
  143. .time{
  144. .text{
  145. color:#FFF;
  146. }
  147. }
  148. .status{
  149. .text{
  150. color:#FFF;
  151. }
  152. }
  153. }
  154. }
  155. }
  156. .footer{
  157. position: absolute;
  158. bottom:0px;
  159. height:50px;
  160. display:flex;
  161. width:100%;
  162. background:#eeeeee;
  163. flex-direction: row;
  164. border-top:1px solid #dcdcdc;
  165. justify-content: center;
  166. align-items: center;
  167. .btn{
  168. background:#eb5c20;
  169. height:30px;
  170. width:80%;
  171. justify-content: center;
  172. align-items: center;
  173. font-size:12px;
  174. display:flex;
  175. color:#FFF;
  176. border-radius: 10px;
  177. }
  178. }
  179. .package{
  180. width:100%;
  181. min-height: 200px;
  182. background:#FFF;
  183. overflow: hidden;
  184. border-top-left-radius: 10px;
  185. border-top-right-radius: 10px;
  186. .title{
  187. font-size:14px;
  188. font-weight: bold;
  189. width:100%;
  190. height:30px;
  191. line-height: 30px;
  192. text-align:center;
  193. }
  194. .list{
  195. width:100%;
  196. background:#FFF;
  197. padding:10px;
  198. .item{
  199. width:180px;
  200. height:200px;
  201. border:1px solid red;
  202. display:flex;
  203. flex-direction: column;
  204. justify-content: flex-start;
  205. align-items: center;
  206. .img{
  207. width:100%;
  208. display:flex;
  209. flex-direction: column;
  210. justify-content: center;
  211. align-items: center;
  212. border:1px solid red;
  213. .icon{
  214. width:150px;
  215. height:150px;
  216. border:1px solid red;
  217. }
  218. }
  219. }
  220. }
  221. }
  222. }