serviceDetail.wxss 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  1. page{
  2. background:#F6F5F5;
  3. }
  4. /* 服务详情顶部 */
  5. .order-main-top{
  6. height:160rpx;
  7. background:url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/service-detail-bg.png') no-repeat center;
  8. background-size: 100% 100%;
  9. display: flex;
  10. align-items: center;
  11. justify-content: space-between;
  12. margin:0 0 20rpx;
  13. padding:0 24rpx;
  14. }
  15. .order-main-top view,.order-main-top text{
  16. color:#fff;
  17. font-size: 28rpx;
  18. }
  19. .order-main-top .order-detail-status{
  20. font-size: 36rpx;
  21. font-weight: bold;
  22. margin-bottom:10rpx;
  23. }
  24. .order-main-right{
  25. text-align: right;
  26. }
  27. .order-main-right .view-service{
  28. width:148rpx;
  29. height: 44rpx;
  30. line-height: 44rpx;
  31. border-radius:44rpx;
  32. border:1rpx solid #fff;
  33. text-align:center;
  34. margin:10rpx 0 0;
  35. }
  36. .order-main-right .current-times{
  37. font-size: 40rpx;
  38. font-weight: bold;
  39. }
  40. .service-info{
  41. margin:20rpx 24rpx;
  42. border-radius:10rpx;
  43. background: #fff;
  44. height: 322rpx;
  45. padding:32rpx 40rpx;
  46. display:flex;
  47. flex-direction: column;
  48. justify-content: space-between;
  49. }
  50. .info-content{
  51. height: 180rpx;
  52. display: flex;
  53. align-items: center;
  54. }
  55. .service-info view.info-title{
  56. font-size: 32rpx;
  57. color:#000;
  58. }
  59. .product-img{
  60. width:180rpx;
  61. height: 180rpx;
  62. margin-right:20rpx;
  63. }
  64. .info-detail view{
  65. color:#999;
  66. font-size: 28rpx;
  67. line-height: 46rpx;
  68. }
  69. .van-tabs view{
  70. color:#666;
  71. }
  72. .van-tab--active view{
  73. color:#09afff;
  74. }
  75. .service-list{
  76. border-top:1rpx solid #ddd;
  77. padding:20rpx 24rpx;
  78. }
  79. .service-item{
  80. /* height: 180rpx; */
  81. border-radius:10rpx;
  82. margin:0 0 20rpx;
  83. padding:42rpx 24rpx 34rpx;
  84. background:#fff;
  85. display: flex;
  86. flex-direction: column;
  87. justify-content: space-between;
  88. }
  89. .service-time{
  90. display: flex;
  91. justify-content: space-between;
  92. }
  93. .service-time text{
  94. color:#999;
  95. font-size: 28rpx;
  96. }
  97. .item-left .service-item-status{
  98. font-size:28rpx;
  99. }
  100. .service-item-top{
  101. display: flex;
  102. align-items: center;
  103. justify-content: space-between;
  104. height: 42rpx;
  105. margin-bottom:10rpx;
  106. }
  107. .item-left{
  108. display: flex;
  109. align-items: center;
  110. }
  111. .service-item-top .item-left text{
  112. color:#333;
  113. font-weight: bold;
  114. font-size: 28rpx;
  115. }
  116. .ci-img{
  117. width:32rpx;
  118. height: 32rpx;
  119. margin-right:16rpx;
  120. }
  121. .service-item view.go-appoint{
  122. margin-top: 10rpx;
  123. float: right;
  124. width:136rpx;
  125. height: 44rpx;
  126. line-height: 44rpx;
  127. text-align: center;
  128. border-radius:44rpx;
  129. border:1rpx solid #09afff;
  130. font-size: 28rpx;
  131. margin-left:20rpx;
  132. }
  133. .full-time{
  134. color:#09AFFF;
  135. }
  136. .service-detail-page .no-list{
  137. margin:56rpx 0 0;
  138. text-align: center;
  139. color:#999;
  140. font-size: 28rpx;
  141. }
  142. /* 选择时间 */
  143. view.popup-wrapper{
  144. /* padding: 0 0 20rpx; */
  145. color:#333;
  146. display: flex;
  147. flex-direction: column;
  148. justify-content: space-between;
  149. height: 100%;
  150. overflow: hidden;
  151. }
  152. .popup-wrapper view{
  153. color:#888;
  154. font-size: 30rpx;
  155. }
  156. .popup-content{
  157. flex:1;
  158. }
  159. .popup-title{
  160. height: 96rpx;
  161. line-height: 96rpx;
  162. text-align: center;
  163. border-bottom: 1rpx solid #ddd;
  164. }
  165. .popup-content{
  166. display: flex;
  167. }
  168. .time-select-left{
  169. /* flex:2; */
  170. border-right:1rpx solid #ddd;
  171. /* padding:0 20rpx; */
  172. padding: 0 8rpx 0 20rpx;
  173. width:370rpx;
  174. }
  175. .time-select-right{
  176. flex: 1.6;
  177. /* padding: 0 8rpx; */
  178. height: 900rpx;
  179. overflow-y: hidden;
  180. }
  181. .popup-content-special .time-select-right{
  182. flex:1;
  183. }
  184. .time-select-left-item{
  185. height: 108rpx;
  186. display: flex;
  187. /* flex-direction: column;
  188. justify-content: center; */
  189. align-items: center;
  190. }
  191. .popup-wrapper .popup-content .current-date {
  192. color:#09afff;
  193. font-weight: bold;
  194. }
  195. view.popup-wrapper .time-select-right-item{
  196. height: 104rpx;
  197. border-bottom:1rpx solid #d1d1d1;
  198. display: flex;
  199. align-items: center;
  200. justify-content: space-between;
  201. padding:0 10rpx 0 12rpx;
  202. }
  203. .time-select-right-item view{
  204. color:#6D7278;
  205. font-weight: bold;
  206. }
  207. view.popup-btn-wrapper{
  208. margin:20rpx 0 0;
  209. padding:0 24rpx 20rpx;
  210. }
  211. view.popup-btn-wrapper button > view{
  212. color:#fff;
  213. }
  214. view.popup-wrapper .date-tag{
  215. color:#09afff;
  216. height: 44rpx;
  217. line-height: 42rpx;
  218. width:76rpx;
  219. border:2rpx solid #09afff;
  220. border-radius:44rpx;
  221. text-align: center;
  222. font-weight: normal;
  223. /* font-size: 24rpx;
  224. display: inline-block; */
  225. font-size: 22rpx;
  226. display: inline-block;
  227. margin-left:8rpx;
  228. }
  229. view.popup-wrapper .time-select-right-item.invalid-time text{
  230. color: #999;
  231. }
  232. view.popup-wrapper .time-select-right-item.invalid-time{
  233. /* background: #E1E1E1; */
  234. background: #eee;
  235. }
  236. .time-select-right-item view.time-msg{
  237. height: 40rpx;
  238. line-height: 38rpx;
  239. border-radius: 40rpx;
  240. padding:0 8rpx;
  241. font-size: 22rpx;
  242. border: 2rpx solid #999;
  243. color: #999;
  244. font-weight: normal;
  245. white-space: nowrap;
  246. }
  247. view.popup-wrapper .full-time{
  248. color:#09AFFF;
  249. font-size: 24rpx;
  250. margin:0 0 0 20rpx;
  251. height: 44rpx;
  252. line-height: 44rpx;
  253. float: right;
  254. padding-right:40rpx;
  255. }
  256. .first-appoint-date-item{
  257. height: 108rpx;
  258. display: flex;
  259. align-items: center;
  260. padding:0 0 0 240rpx;
  261. }
  262. .first-time-selected{
  263. margin:0 0 0 60rpx;
  264. }
  265. .select-week-times{
  266. border-top:1rpx solid #ddd;
  267. }
  268. .week-select-left{
  269. flex:1.2;
  270. }
  271. .week-select-left>view.time-select-left-item{
  272. padding:0 0 0 60rpx;
  273. display: flex;
  274. align-items: flex-start;
  275. justify-content: flex-start;
  276. flex-direction: row;
  277. padding:10rpx 0 0 60rpx;
  278. }
  279. .week-select-left>view.time-select-left-item .week-str{
  280. padding:12rpx 0 0 0;
  281. }
  282. view.popup-wrapper view.select-num-tag{
  283. width:32rpx;
  284. height: 32rpx;
  285. line-height: 32rpx;
  286. background:#09AFFF;
  287. border-radius: 34rpx;
  288. font-size: 20rpx;
  289. color:#fff;
  290. text-align: center;
  291. margin:0 0 0 6rpx;
  292. }
  293. .popup-content-special{
  294. position: relative;
  295. }
  296. .popup-title-special{
  297. position: absolute;
  298. left:0;
  299. top:0;
  300. right:0;
  301. background: #fff;
  302. }
  303. .popup-content-special{
  304. height:900rpx ;
  305. /* margin-top:96rpx; */
  306. margin-top: 116rpx;
  307. }
  308. .popup-content-special .time-select-left{
  309. height: 900rpx;
  310. overflow-y: scroll;
  311. }
  312. .stock-text{
  313. font-size: 20rpx;
  314. font-weight: normal;
  315. color:#888
  316. }
  317. .zero-stock{
  318. color:#ccc;
  319. }
  320. .address-box {
  321. margin: 0 10px;
  322. /* width: 100%; */
  323. /* height: 166.55rpx;
  324. background-size: 62.5rpx 10.5rpx; */
  325. /* margin-bottom: 20rpx; */
  326. /* padding-top: 10.5rpx; */
  327. }
  328. .address-item {
  329. display: flex;
  330. /* height: 142rpx; */
  331. background: #fff;
  332. padding: 36rpx 16rpx 32rpx;
  333. border-radius: 10rpx;
  334. }
  335. .address-item.address-empty {
  336. line-height: 75rpx;
  337. text-align: center;
  338. }
  339. .address-item .map-icon{
  340. width:28rpx;
  341. height: 28rpx;
  342. margin:0 18rpx 0 0;
  343. }
  344. .address-box .l {
  345. width: 125rpx;
  346. height: 100%;
  347. }
  348. .address-box .l .name {
  349. margin-left: 6.25rpx;
  350. margin-top: -7.25rpx;
  351. display: block;
  352. width: 125rpx;
  353. height: 43rpx;
  354. line-height: 43rpx;
  355. font-size: 30rpx;
  356. color: #333;
  357. margin-bottom: 5rpx;
  358. }
  359. .address-box .l .default {
  360. margin-left: 6.25rpx;
  361. display: block;
  362. width: 62rpx;
  363. height: 33rpx;
  364. border-radius: 5rpx;
  365. border: 1px solid #b4282d;
  366. font-size: 20.5rpx;
  367. text-align: center;
  368. line-height: 29rpx;
  369. color: #b4282d;
  370. }
  371. .address-box .m {
  372. flex: 1;
  373. }
  374. .address-box .mobile {
  375. display: block;
  376. height: 29rpx;
  377. line-height: 29rpx;
  378. margin-bottom: 6.25rpx;
  379. font-size: 26rpx;
  380. }
  381. .address-box .address {
  382. display: block;
  383. /* height: 30rpx; */
  384. line-height: 30rpx;
  385. font-size: 26rpx;
  386. margin:0 0 18rpx 0;
  387. }
  388. .address-bottom{
  389. color: #85868A;
  390. line-height: 24rpx;
  391. height: 24rpx;
  392. font-size: 22rpx;
  393. }
  394. .address-bottom .user-name{
  395. margin:0 32rpx 0 0;
  396. }
  397. .address-box .r {
  398. width: 77rpx;
  399. height: 77rpx;
  400. display: flex;
  401. justify-content: center;
  402. align-items: center;
  403. }
  404. .address-box .r image {
  405. width: 52.078rpx;
  406. height: 52.078rpx;
  407. }
  408. .noon-select{
  409. height:64rpx;
  410. display: flex;
  411. border-bottom:1rpx solid #ddd;
  412. }
  413. .time-select-right .noon-item{
  414. flex:1;
  415. text-align: center;
  416. line-height: 64rpx;
  417. color: #979797;
  418. font-size: 26rpx;
  419. }
  420. .time-select-right view.noon-item.active-noon{
  421. color: #fff;
  422. background: #09afff;
  423. }
  424. view.popup-wrapper .time-select-right-item .date-tag{
  425. width: 124rpx;
  426. height: 40rpx;
  427. line-height: 38rpx;
  428. /* margin-left:120rpx; */
  429. }
  430. .popup-title-new.popup-title{
  431. display: flex;
  432. flex-direction: column;
  433. justify-content: center;
  434. align-items: center;
  435. height:116rpx;
  436. line-height: normal;
  437. }
  438. .popup-title-new view{
  439. color:#333;
  440. font-size: 32rpx;
  441. }
  442. .popup-title-new view.fee-tips{
  443. color: #FF5735;
  444. font-size: 22rpx;
  445. }
  446. .time-select-right-item text{
  447. color:#888;
  448. }
  449. .time-select-right .time-item-wrapper{
  450. height: 836rpx;
  451. overflow-y: scroll;
  452. }
  453. .time-line{
  454. display: flex;
  455. align-items: center;
  456. justify-content: space-between;
  457. width:100%;
  458. }