serviceOrder.wxss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826
  1. page {
  2. background: #F3F3F3;
  3. color: #333;
  4. padding:80rpx 0;
  5. /* padding:0 24rpx; */
  6. }
  7. view,text{
  8. box-sizing: border-box;
  9. color:#333;
  10. font-size: 34rpx;
  11. }
  12. .whole-page{
  13. /* min-height: 2000rpx; */
  14. }
  15. /* 服务单 */
  16. .service-order{
  17. margin:10rpx 24rpx 16rpx;
  18. width:702rpx;
  19. background: #fff;
  20. border-radius: 18rpx;
  21. min-height: 300rpx;
  22. padding:0 20rpx 32rpx;
  23. }
  24. .service-title{
  25. height:96rpx;
  26. display: flex;
  27. justify-content: space-between;
  28. align-items: center;
  29. line-height: 96rpx;
  30. }
  31. .ser-title-left image{
  32. width:36rpx;
  33. height:36rpx;
  34. margin-right:6rpx;
  35. }
  36. .ser-title-left view{
  37. font-size: 32rpx;
  38. }
  39. .ser-title-right view{
  40. font-size: 22rpx;
  41. color: #09AFFF;
  42. }
  43. .ser-title-right image{
  44. width:76px;
  45. height:36px;
  46. margin-right:6rpx;
  47. }
  48. .ser-title-left,.ser-title-right{
  49. display: flex;
  50. align-items: center;
  51. height: 96rpx;
  52. }
  53. .related-info{
  54. background: #F6FFED;
  55. border-radius: 18rpx;
  56. padding:18rpx 12rpx 32rpx;
  57. }
  58. .related-info .column{
  59. height: 60rpx;
  60. line-height: 60rpx;
  61. display: flex;
  62. justify-content: space-between;
  63. }
  64. .column .title{
  65. font-weight: bold;
  66. }
  67. .related-info .row{
  68. line-height: 60rpx;
  69. }
  70. .notice{
  71. padding:10rpx 12rpx;
  72. background: #E6F7FF;
  73. border-radius: 14rpx;
  74. display: flex;
  75. line-height: 36rpx;
  76. align-items: center;
  77. }
  78. .notice image{
  79. width:30rpx;
  80. height:30rpx;
  81. margin-right:20rpx;
  82. }
  83. .notice view{
  84. color: #09AFFF;
  85. font-size: 26rpx;
  86. }
  87. .service-info{
  88. padding-left:12rpx;
  89. }
  90. .service-info .row{
  91. line-height: 60rpx;
  92. }
  93. .service-info .order-num{
  94. height: 60rpx;
  95. display: flex;
  96. align-items: center;
  97. }
  98. .copy-img{
  99. width:36rpx;
  100. height:36rpx;
  101. margin-left:4rpx;
  102. }
  103. .service-info .column{
  104. height: 60rpx;
  105. line-height: 60rpx;
  106. display: flex;
  107. justify-content: space-between;
  108. align-items: center;
  109. }
  110. .callup-img{
  111. width:36rpx;
  112. height: 36rpx;
  113. }
  114. .service-info .address{
  115. display: flex;
  116. margin:6rpx 0;
  117. line-height: 48rpx;
  118. }
  119. .service-info .address .detail{
  120. flex:1;
  121. }
  122. .service-info .address image{
  123. margin:12rpx 0 0 30rpx;
  124. width:36rpx;
  125. height: 36rpx;
  126. }
  127. .operate-block{
  128. display: flex;
  129. align-items: center;
  130. margin-top:22rpx;
  131. /* height: 40rpx; */
  132. line-height: 40rpx;
  133. justify-content: flex-end;
  134. flex-wrap: wrap;
  135. }
  136. .operate-item{
  137. display: flex;
  138. height: 40rpx;
  139. align-items: center;
  140. margin-left:20rpx;
  141. margin-top:10rpx;
  142. }
  143. .operate-item image{
  144. width:32rpx;
  145. height:32rpx;
  146. margin-right:4rpx;
  147. }
  148. .operate-item view{
  149. font-size: 26rpx;
  150. color: #0EAEFC;
  151. }
  152. .operate-item.disable view{
  153. color: rgba(0,0,0,0.25);
  154. }
  155. /* 日维度 */
  156. .date-board-wrapper{
  157. width: 702rpx;
  158. height: 250rpx;
  159. background: #FFFFFF;
  160. border-radius: 18rpx;
  161. padding:16rpx 26rpx;
  162. margin:0 24rpx;
  163. }
  164. .date-board{
  165. width: 650rpx;
  166. height: 218rpx;
  167. background: #E6F7FF;
  168. border-radius: 15rpx;
  169. display:flex;
  170. align-items: center;
  171. margin-bottom:38rpx;
  172. }
  173. view.date-order-left{
  174. height:218rpx;
  175. width:172rpx;
  176. border-right:2rpx solid #e4e4e4;
  177. display: flex;
  178. flex-direction: column;
  179. align-items: center;
  180. justify-content: center;
  181. font-size:30rpx;
  182. }
  183. .date-order-left view{
  184. font-size: 30rpx;
  185. }
  186. view.date-order-left .number{
  187. font-size: 36rpx;
  188. height: 50rpx;
  189. line-height: 50rpx;
  190. margin-bottom:10rpx;
  191. }
  192. .date-order-right{
  193. display:flex;
  194. flex-wrap: wrap;
  195. height: 218rpx;
  196. flex:1;
  197. }
  198. .data-item{
  199. height: 100rpx;
  200. display: flex;
  201. flex-direction: column;
  202. align-items: center;
  203. justify-content: space-around;
  204. width:158rpx;
  205. }
  206. .data-item .num{
  207. font-size: 36rpx;
  208. height: 50rpx;
  209. color:#E2B650;
  210. }
  211. .data-item .item-tag{
  212. font-size: 24rpx;
  213. height: 36rpx;
  214. line-height: 36rpx;
  215. border-radius:4rpx;
  216. color:#fff;
  217. width:120rpx;
  218. text-align: center;
  219. background:#E2B650;
  220. }
  221. .data-item.red .num{
  222. color: #E85050;
  223. }
  224. .data-item.red .item-tag{
  225. width:74rpx;
  226. background: #FF5050;
  227. }
  228. .data-item.green .num{
  229. color: #39CB7F;
  230. }
  231. .data-item.green .num text{
  232. font-size: 24rpx;
  233. color: #39CB7F;
  234. }
  235. .data-item.green .item-tag{
  236. width:74rpx;
  237. background: #39CB7F;
  238. }
  239. .data-item.blue .num{
  240. color: #09AFFF;
  241. }
  242. .data-item.blue .num text{
  243. font-size: 24rpx;
  244. color: #09AFFF;
  245. }
  246. .data-item.blue .item-tag{
  247. width:74rpx;
  248. background: #09AFFF;
  249. }
  250. .current-date{
  251. height: 70rpx;
  252. display:flex;
  253. align-items: center;
  254. padding-left:48rpx;
  255. background:#F3F3F3;
  256. }
  257. .current-date .day{
  258. color: #09AFFF;
  259. line-height: 48rpx;
  260. height: 48rpx;
  261. font-size: 30rpx;
  262. border-bottom: 4rpx solid #09afff;
  263. }
  264. .current-date .today{
  265. width: 64rpx;
  266. height: 40rpx;
  267. background: #FFFFFF;
  268. border-radius: 4rpx;
  269. border: 2rpx solid #1677FF;
  270. font-size: 24rpx;
  271. color:#1677FF;
  272. margin:8rpx 0 0 8rpx;
  273. text-align: center;
  274. }
  275. /* 请假记录 */
  276. .leave-fold{
  277. width: 702rpx;
  278. height: 66rpx;
  279. background: #FFFFFF;
  280. border-radius: 16rpx;
  281. display: flex;
  282. align-items: center;
  283. justify-content: space-between;
  284. margin:12rpx 24rpx;
  285. padding:0 20rpx 0 40rpx;
  286. }
  287. .fold-left{
  288. font-size: 32rpx;
  289. }
  290. .fold-right{
  291. display: flex;
  292. align-items: center;
  293. height: 66rpx;
  294. }
  295. .fold-right .leave-num{
  296. color: #666;
  297. }
  298. .fold-right image{
  299. width:24rpx;
  300. height: 24rpx;
  301. margin-left:6rpx;
  302. }
  303. .leave-item{
  304. width: 702rpx;
  305. background: #FFFFFF;
  306. border-radius: 18rpx;
  307. padding:28rpx 26rpx 40rpx;
  308. margin:0 24rpx;
  309. }
  310. .leave-title{
  311. height: 48rpx;
  312. display:flex;
  313. align-items: center;
  314. margin-bottom:16rpx;
  315. }
  316. .leave-title image{
  317. width:34rpx;
  318. height: 34rpx;
  319. margin-right:10rpx;
  320. }
  321. .leave-title view{
  322. font-size: 32rpx;
  323. line-height: 48rpx;
  324. }
  325. .leave-line{
  326. margin-bottom:6rpx;
  327. line-height: 48rpx;
  328. display:flex ;
  329. }
  330. .leave-line view:first-child{
  331. width:150rpx;
  332. }
  333. .leave-line view:last-child{
  334. flex:1;
  335. }
  336. .dqjsq{
  337. width:110rpx;
  338. height: 110rpx;
  339. background:#fff;
  340. border-radius: 110rpx;
  341. position:fixed;
  342. z-index: 99;
  343. right:64rpx;
  344. bottom:254rpx;
  345. }
  346. .calendar-wrapper{
  347. margin:12rpx 24rpx 0;
  348. width:702rpx;
  349. border-radius:18rpx;
  350. background:#fff;
  351. min-height: 200rpx;
  352. padding:30rpx 24rpx 18rpx;
  353. }
  354. .current-month{
  355. margin:12rpx 0 22rpx;
  356. height: 48rpx;
  357. font-size: 28rpx;
  358. line-height: 48rpx;
  359. }
  360. .month-title{
  361. height: 48rpx;
  362. display: flex;
  363. align-items: center;
  364. justify-content: space-between;
  365. }
  366. .month-title-left{
  367. height: 48rpx;
  368. display: flex;
  369. align-items: center;
  370. }
  371. .month-title-left view{
  372. font-size: 32rpx;
  373. }
  374. .month-title-left image{
  375. margin-left:12rpx;
  376. width:32rpx;
  377. height: 32rpx;
  378. }
  379. .month-title-right{
  380. display: flex;
  381. align-items: center;
  382. height: 48rpx;
  383. }
  384. .month-title-right image{
  385. width:28rpx;
  386. height: 28rpx;
  387. margin-left:4rpx;
  388. }
  389. .last-month{
  390. line-height: 48rpx;
  391. }
  392. .next-month{
  393. line-height: 48rpx;
  394. margin-left:14rpx;
  395. }
  396. .month-border-wrapper view.date-order-left{
  397. justify-content: space-between;
  398. }
  399. .month-order-item{
  400. height: 100rpx;
  401. display:flex;
  402. flex-direction: column;
  403. align-items: center;
  404. }
  405. view.date-order-left .month-order-item .number{
  406. margin-bottom:0;
  407. }
  408. .whole-calendar{
  409. display: flex;
  410. flex-wrap: wrap;
  411. }
  412. .calendar-item{
  413. display: flex;
  414. flex-direction: column;
  415. width:92rpx;
  416. align-items: flex-end;
  417. padding:14rpx 0 6rpx;
  418. }
  419. .calendar-week{
  420. font-size: 32rpx;
  421. color:#999;
  422. height: 36rpx;
  423. line-height: 36rpx;
  424. width: 68rpx;
  425. text-align: center;
  426. }
  427. .calendar-day{
  428. height: 30rpx;
  429. line-height: 30rpx;
  430. font-size: 32rpx;
  431. color:#666;
  432. margin:6rpx 0;
  433. width: 68rpx;
  434. text-align: center;
  435. }
  436. .selected-calendar{
  437. background: rgba(9,175,255,0.05);
  438. border-radius: 12rpx;
  439. }
  440. .selected-calendar .calendar-week{
  441. color:#09afff;
  442. }
  443. .selected-calendar .calendar-day{
  444. color:#09afff;
  445. }
  446. .selected-dot{
  447. margin:0 30rpx 6rpx 0;
  448. width:6rpx;
  449. height: 6rpx;
  450. border-radius: 6rpx;
  451. background:transparent;
  452. }
  453. .selected-calendar .selected-dot{
  454. background:#09afff;
  455. }
  456. .calendar-order-item .time{
  457. /* width: 48rpx;
  458. height: 18rpx;
  459. line-height: 18rpx;
  460. font-size: 12rpx; */
  461. width: 68rpx;
  462. height: 32rpx;
  463. line-height: 32rpx;
  464. font-size: 24rpx;
  465. border-radius: 4rpx;
  466. background: #39CB7F;
  467. color:#fff;
  468. text-align:center;
  469. margin-bottom:8rpx;
  470. }
  471. .calendar-order-item .time.pl{
  472. background: #09AFFF;
  473. }
  474. .calendar-order-item .time.no-finish{
  475. background: #fff;
  476. color:#39CB7F;
  477. border:2rpx solid #39CB7F;
  478. }
  479. .calendar-order-item .time.pl.no-finish{
  480. background: #fff;
  481. color:#09AFFF;
  482. border:2rpx solid #09AFFF;
  483. }
  484. .eval-wrapper{
  485. width:14rpx;
  486. height: 32rpx;
  487. align-items: center;
  488. display: flex;
  489. margin-right:2rpx;
  490. }
  491. .calendar-order-item{
  492. display: flex;
  493. width:92rpx;
  494. justify-content: flex-end;
  495. }
  496. .eval-wrapper image{
  497. width:14rpx;
  498. height: 14rpx;
  499. }
  500. .fold-calcendar{
  501. display: flex;
  502. align-items: center;
  503. flex-direction: column;
  504. width:140rpx;
  505. margin:0 auto;
  506. }
  507. .fold-calcendar image{
  508. width:36rpx;
  509. height: 36rpx;
  510. }
  511. .fold-calcendar view{
  512. color: #09AFFF;
  513. font-size: 24rpx;
  514. margin-left:6rpx;
  515. line-height: 14rpx;
  516. }
  517. .service-status{
  518. height:60rpx;
  519. align-items: center;
  520. display: flex;
  521. }
  522. .service-status image{
  523. width:24rpx;
  524. height:24rpx;
  525. margin-right:8rpx;
  526. }
  527. .invite-comment{
  528. background: #E6F7FF;
  529. border-radius: 7rpx;
  530. border: 2px solid #91D5FF;
  531. color: #096DD9;
  532. font-size: 22rpx;
  533. width: 92rpx;
  534. height: 32rpx;
  535. text-align:center;
  536. margin:0 10rpx;
  537. line-height: 24rpx;
  538. }
  539. .hp-wrapper{
  540. display:flex;
  541. align-items: center;
  542. margin-right:10rpx;
  543. width: 96rpx;
  544. height: 32rpx;
  545. background: #F6FFED;
  546. border-radius: 7rpx;
  547. border: 2rpx solid #A0D911;
  548. justify-content: center;
  549. }
  550. .hp-wrapper text{
  551. color: #73D13D;
  552. line-height: 24rpx;
  553. font-size: 22rpx;
  554. }
  555. .cp-wrapper{
  556. display:flex;
  557. align-items: center;
  558. width: 96rpx;
  559. height: 32rpx;
  560. background: #FFF2E8;
  561. border-radius: 7rpx;
  562. border: 2rpx solid #FA541C;
  563. justify-content: center;
  564. }
  565. .cp-wrapper text{
  566. color: #FA541C;
  567. line-height: 24rpx;
  568. font-size: 22rpx;
  569. }
  570. .service-order.cancel-order view{
  571. color:#aaa;
  572. }
  573. .service-order.cancel-order view.blue-font{
  574. color:#09AFFF;
  575. }
  576. .interview{
  577. width: 702rpx;
  578. /* height: 476rpx; */
  579. background: #FFFFFF;
  580. border-radius: 18rpx;
  581. padding:46rpx 24rpx 32rpx 24rpx;
  582. margin:20rpx 24rpx;
  583. }
  584. .interview-title{
  585. height:48rpx;
  586. display: flex;
  587. align-items: center;
  588. }
  589. .interview-title image{
  590. width:34rpx;
  591. height:34rpx;
  592. margin-right:14rpx;
  593. }
  594. .interview-date{
  595. height:48rpx;
  596. line-height: 48rpx;
  597. margin:70rpx 0 46rpx;
  598. }
  599. .interview-location{
  600. line-height: 48rpx;
  601. margin-bottom:48rpx;
  602. padding-right:24rpx;
  603. }
  604. .interview-operate{
  605. display:flex;
  606. align-items: center;
  607. justify-content: flex-end;
  608. height: 40rpx;
  609. color: #0EAEFC;
  610. }
  611. .overlay-wrapper{
  612. display: flex;
  613. align-items: center;
  614. justify-content: center;
  615. height: 100%;
  616. /* z-index:999; */
  617. padding:0 50rpx;
  618. flex-direction: column;
  619. }
  620. .star-wrapper{
  621. width: 650rpx;
  622. height: 624rpx;
  623. background: #FFFFFF;
  624. border-radius: 33rpx;
  625. border: 1px solid #979797;
  626. padding:44rpx 40rpx 0;
  627. display:flex;
  628. flex-direction: column;
  629. align-items: center;
  630. }
  631. .star-wrapper .title{
  632. font-size: 34rpx;
  633. height: 48rpx;
  634. margin-bottom:40rpx;
  635. }
  636. .submit-eval{
  637. width: 650rpx;
  638. height: 110rpx;
  639. background: #3D7FFF linear-gradient(270deg, rgba(0,202,255,0.5) 0%, rgba(9,175,255,0.5) 100%);
  640. border-radius: 110rpx;
  641. line-height: 110rpx;
  642. font-size: 44rpx;
  643. text-align: center;
  644. color:#fff;
  645. margin-top:40rpx;
  646. }
  647. .comment-area{
  648. margin-top: 40rpx;
  649. height: 280rpx;
  650. border: 2rpx solid #ddd;
  651. padding: 16rpx;
  652. width: 560rpx;
  653. box-sizing: border-box;
  654. text-align: justify;
  655. border-radius: 8rpx;
  656. }
  657. view.van-radio__icon-wrap .van-icon{
  658. color:#fff;
  659. font-size: 32rpx;
  660. }
  661. .logout{
  662. font-weight: 600;
  663. color: #716F6F;
  664. line-height: 42rpx;
  665. text-decoration: underline;
  666. margin:34rpx 0 80rpx;
  667. font-size: 30rpx;
  668. text-align: center;
  669. }
  670. .user-wrapper{
  671. margin:0 24rpx 16rpx;
  672. background: #FFFFFF;
  673. border-radius: 18rpx;
  674. padding:28rpx 18rpx 32rpx 24rpx;
  675. width:702rpx;
  676. }
  677. .user-info{
  678. display: flex;
  679. align-items: center;
  680. height:100rpx;
  681. }
  682. .user-img{
  683. width:148rpx;
  684. height: 148rpx;
  685. border-radius:148rpx;
  686. margin-right:16rpx;
  687. background: #eee;
  688. margin-top:-100rpx;
  689. }
  690. .user-right{
  691. /* height: 150rpx; */
  692. display: flex;
  693. flex-direction: column;
  694. /* justify-content: space-between; */
  695. flex:1;
  696. line-height:32rpx;
  697. }
  698. .user-name{
  699. display: flex;
  700. height: 32rpx;
  701. justify-content: space-between;
  702. margin-bottom:24rpx;
  703. }
  704. .user-name text{
  705. font-size: 38rpx;
  706. font-weight: bold;
  707. }
  708. .city-station{
  709. line-height: 40rpx;
  710. }
  711. .job-year{
  712. color: #096DD9;
  713. }
  714. .user-bottom{
  715. display: flex;
  716. justify-content: space-between;
  717. }
  718. .user-tag{
  719. display: flex;
  720. }
  721. .user-tag view{
  722. background: #E6F7FF;
  723. border-radius: 4rpx;
  724. border: 1rpx solid #91D5FF;
  725. width:74rpx;
  726. height: 34rpx;
  727. color: #096DD9;
  728. font-size: 22rpx;
  729. text-align: center;
  730. margin-right:10rpx;
  731. }
  732. .health{
  733. display: flex;
  734. }
  735. .health image{
  736. width:36rpx;
  737. height: 34rpx;
  738. /* margin-right:6rpx; */
  739. }
  740. .health text{
  741. color: #096DD9;
  742. font-size: 26rpx;
  743. line-height: 26rpx;
  744. }
  745. .company{
  746. color: #666;
  747. margin:0 0 16rpx 10rpx;
  748. height: 68rpx;
  749. line-height: 68rpx;
  750. }
  751. .recommend{
  752. display: flex;
  753. height: 68rpx;
  754. align-items: center;
  755. }
  756. .recommend view{
  757. font-size: 32rpx;
  758. margin-left:10rpx;
  759. }
  760. .recommend view text{
  761. font-weight: bold;
  762. color:#064952;
  763. font-size: 36rpx;
  764. }
  765. .recommend .copy-img{
  766. width:40rpx;
  767. height:40rpx;
  768. margin:4rpx 0 0 8rpx;
  769. }
  770. /*二维码弹框*/
  771. .myqr{
  772. position: absolute;
  773. z-index: 999;
  774. width: 100%;
  775. text-align: center;
  776. height: auto;
  777. }
  778. .myqr .cancel{
  779. width: 60rpx;
  780. height: 60rpx;
  781. margin-top: 30rpx;
  782. margin-left: 480rpx;
  783. }
  784. .myqr .img{
  785. width: 480rpx;
  786. /* margin-top: 150rpx; */
  787. }
  788. .myqr .btn{
  789. width: 120rpx;
  790. height: 120rpx;
  791. line-height: 120rpx;
  792. margin-top: 40rpx;
  793. padding: 30rpx;
  794. background: #ffffff;
  795. border-radius:60rpx;
  796. }
  797. .pay-row{
  798. display: flex;
  799. justify-content: space-between;
  800. }
  801. .pay-total{
  802. color:#FF004E;
  803. flex:1;
  804. margin-right:14rpx;
  805. text-align: right;
  806. }
  807. .pay-success{
  808. color:#00B63D;
  809. }