orderBoard.wxss 14 KB

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