tempDetail.wxss 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637
  1. page {
  2. background: #F3F3F3;
  3. color: #333;
  4. }
  5. view,text{
  6. box-sizing: border-box;
  7. color:#333;
  8. font-size: 34rpx;
  9. }
  10. .van-tab--active view.van-ellipsis{
  11. color:#09afff;
  12. }
  13. .ticket-list{
  14. margin:22rpx 24rpx 0;
  15. width:702rpx;
  16. }
  17. .ticket-item{
  18. background: #FFFFFF;
  19. border-radius: 18rpx;
  20. min-height:200rpx;
  21. margin-bottom:24rpx;
  22. padding:30rpx 24rpx 28rpx;
  23. }
  24. .ticket-top{
  25. margin-bottom:18rpx;
  26. height: 48rpx;
  27. display: flex;
  28. align-items: center;
  29. justify-content: space-between;
  30. }
  31. .top-left,.top-right{
  32. height: 48rpx;
  33. display: flex;
  34. align-items: center;
  35. line-height: 48rpx;
  36. }
  37. .top-left image{
  38. width:34rpx;
  39. height: 34rpx;
  40. margin-right:10rpx;
  41. }
  42. .top-left view{
  43. font-size: 32rpx;
  44. }
  45. .top-right view{
  46. color: #09AFFF;
  47. font-size: 22rpx;
  48. }
  49. .top-right image{
  50. width:24rpx;
  51. height: 24rpx;
  52. margin-right:10rpx;
  53. }
  54. .ticket-content view{
  55. line-height: 48rpx;
  56. }
  57. .prorgress{
  58. height: 48rpx;
  59. display: flex;
  60. align-items: center;
  61. }
  62. .progress-dot{
  63. width: 10rpx;
  64. height: 10rpx;
  65. background: #09AFFF;
  66. border-radius: 10rpx;
  67. margin-right:8rpx;
  68. }
  69. .progress-tip{
  70. font-size: 16rpx;
  71. color:#999;
  72. line-height: 24rpx;
  73. padding-left:18rpx;
  74. }
  75. .ticket-bottom{
  76. display: flex;
  77. align-items: center;
  78. margin-top: 22rpx;
  79. height: 40rpx;
  80. line-height: 40rpx;
  81. justify-content: flex-end;
  82. }
  83. .ticket-bottom view{
  84. color: #0EAEFC;
  85. line-height: 40rpx;
  86. }
  87. .ticket-bottom image{
  88. width:24rpx;
  89. height: 24rpx;
  90. margin-right:8rpx;
  91. }
  92. /* 服务单 */
  93. .service-order{
  94. margin:14rpx 24rpx 16rpx;
  95. width:702rpx;
  96. background: #fff;
  97. border-radius: 18rpx;
  98. min-height: 300rpx;
  99. padding:0 20rpx 32rpx;
  100. }
  101. .service-title{
  102. height:96rpx;
  103. display: flex;
  104. justify-content: space-between;
  105. align-items: center;
  106. line-height: 96rpx;
  107. }
  108. .ser-title-left image{
  109. width:36rpx;
  110. height:36rpx;
  111. margin-right:6rpx;
  112. }
  113. .ser-title-left view{
  114. font-size: 32rpx;
  115. }
  116. .ser-title-right view{
  117. font-size: 22rpx;
  118. color: #09AFFF;
  119. }
  120. .ser-title-right image{
  121. width:156rpx;
  122. height:32rpx;
  123. }
  124. .ser-title-left,.ser-title-right{
  125. display: flex;
  126. align-items: center;
  127. height: 96rpx;
  128. }
  129. .related-info{
  130. background: #F6FFED;
  131. border-radius: 18rpx;
  132. padding:24rpx 32rpx 32rpx;
  133. }
  134. .related-info .column{
  135. height: 60rpx;
  136. line-height: 60rpx;
  137. display: flex;
  138. justify-content: space-between;
  139. }
  140. .column .title{
  141. font-weight: bold;
  142. }
  143. .related-info .row{
  144. line-height: 60rpx;
  145. }
  146. .notice{
  147. padding:10rpx 12rpx;
  148. background: #E6F7FF;
  149. border-radius: 14rpx;
  150. display: flex;
  151. line-height: 36rpx;
  152. align-items: center;
  153. }
  154. .notice image{
  155. width:30rpx;
  156. height:30rpx;
  157. margin-right:20rpx;
  158. }
  159. .notice view{
  160. color: #09AFFF;
  161. font-size: 28rpx;
  162. }
  163. .service-info{
  164. padding-left:12rpx;
  165. }
  166. .service-info .row{
  167. line-height: 60rpx;
  168. }
  169. .service-info .order-num{
  170. height: 60rpx;
  171. display: flex;
  172. align-items: center;
  173. }
  174. .copy-img{
  175. width:36rpx;
  176. height:36rpx;
  177. margin-left:4rpx;
  178. }
  179. .service-info .column{
  180. height: 60rpx;
  181. line-height: 60rpx;
  182. display: flex;
  183. justify-content: space-between;
  184. align-items: center;
  185. }
  186. .callup-img{
  187. width:34rpx;
  188. height: 34rpx;
  189. }
  190. .service-info .address{
  191. display: flex;
  192. margin:6rpx 0;
  193. line-height: 48rpx;
  194. }
  195. .service-info .address .detail{
  196. flex:1;
  197. }
  198. .service-info .address image{
  199. margin:12rpx 0 0 30rpx;
  200. width:34rpx;
  201. height: 34rpx;
  202. }
  203. .operate-block{
  204. display: flex;
  205. align-items: center;
  206. margin-top:22rpx;
  207. height: 40rpx;
  208. line-height: 40rpx;
  209. justify-content: flex-end;
  210. }
  211. .operate-item{
  212. display: flex;
  213. height: 40rpx;
  214. align-items: center;
  215. margin-left:12rpx;
  216. }
  217. .operate-item image{
  218. width:30rpx;
  219. height:30rpx;
  220. margin-right:6rpx;
  221. }
  222. .operate-item view{
  223. font-size: 30rpx;
  224. color: #0EAEFC;
  225. }
  226. .operate-item.disable view{
  227. color: rgba(0,0,0,0.25);
  228. }
  229. .service-status{
  230. height:60rpx;
  231. align-items: center;
  232. display: flex;
  233. }
  234. .service-status image{
  235. width:24rpx;
  236. height:24rpx;
  237. margin-right:8rpx;
  238. }
  239. .invite-comment{
  240. background: #E6F7FF;
  241. border-radius: 7rpx;
  242. border: 2px solid #91D5FF;
  243. color: #096DD9;
  244. font-size: 22rpx;
  245. width: 92rpx;
  246. height: 32rpx;
  247. text-align:center;
  248. margin:0 10rpx;
  249. line-height: 24rpx;
  250. }
  251. .hp-wrapper{
  252. display:flex;
  253. align-items: center;
  254. margin-right:10rpx;
  255. width: 96rpx;
  256. height: 32rpx;
  257. background: #F6FFED;
  258. border-radius: 7rpx;
  259. border: 2rpx solid #A0D911;
  260. justify-content: center;
  261. }
  262. .hp-wrapper text{
  263. color: #73D13D;
  264. line-height: 24rpx;
  265. font-size: 22rpx;
  266. }
  267. .cp-wrapper{
  268. display:flex;
  269. align-items: center;
  270. width: 96rpx;
  271. height: 32rpx;
  272. background: #FFF2E8;
  273. border-radius: 7rpx;
  274. border: 2rpx solid #FA541C;
  275. justify-content: center;
  276. }
  277. .cp-wrapper text{
  278. color: #FA541C;
  279. line-height: 24rpx;
  280. font-size: 22rpx;
  281. }
  282. .book{
  283. margin: 20rpx 20rpx;
  284. /* margin-bottom: 20rpx; */
  285. /* height: 320rpx; */
  286. /* width: 710rpx; */
  287. border: 1rpx solid #999;
  288. border-radius: 10rpx;
  289. display: flex;
  290. flex-flow: column;
  291. padding-bottom: 20rpx;
  292. }
  293. .bookname {
  294. display: block;
  295. color: #333;
  296. line-height: 42rpx;
  297. font-size: 42rpx;
  298. margin: 20rpx 20rpx;
  299. font-weight: 500;
  300. }
  301. .serviceTime{
  302. display: block;
  303. color: #333;
  304. line-height: 32rpx;
  305. font-size: 32rpx;
  306. margin: 20rpx 20rpx;
  307. font-weight: 300;
  308. }
  309. .goodsname{
  310. color: #333;
  311. line-height: 32rpx;
  312. font-size: 32rpx;
  313. margin: 20rpx 20rpx;
  314. font-weight: 300;
  315. }
  316. .status{
  317. line-height: 40rpx;
  318. /* height: 40rpx; */
  319. float: right;
  320. margin: 10rpx;
  321. background-color: #09AFFF;
  322. padding: 10rpx;
  323. border-radius: 10rpx;
  324. color: #fff;
  325. font-size: 20rpx;
  326. }
  327. .address {
  328. display: block;
  329. color: darkred;
  330. line-height: 46rpx;
  331. font-size: 36rpx;
  332. margin: 20rpx 20rpx;
  333. }
  334. .service{
  335. display: block;
  336. line-height: 40rpx;
  337. font-size: 33rpx;
  338. margin-left: 20rpx;
  339. }
  340. .tool{
  341. margin-right : 20rpx;
  342. margin-top: 10rpx;
  343. }
  344. .btn {
  345. height: 76rpx;
  346. line-height: 76rpx;
  347. float: right;
  348. color: #333;
  349. font-size: 30rpx;
  350. /* background-color: #09AFFF; */
  351. margin-left: 10rpx;
  352. border-radius: 10rpx;
  353. }
  354. /* 预检项目样式 */
  355. /* .row{
  356. margin-top: 20rpx;
  357. padding: 20rpx;
  358. border: 1rpx solid #999;
  359. border-radius: 10rpx;
  360. } */
  361. .title{
  362. display: block;
  363. height: 50rpx;
  364. }
  365. .left{
  366. float: left;
  367. color:#333;
  368. }
  369. .right{
  370. float:right;
  371. color:#333;
  372. }
  373. .category{
  374. font-size: 36rpx;
  375. color: #333;
  376. font-weight: 500;
  377. }
  378. .content{
  379. margin-top: 20rpx;
  380. }
  381. .device{
  382. font-size: 36rpx;
  383. font-weight: 200;
  384. }
  385. .problem{
  386. display: flex;
  387. flex-wrap: wrap;
  388. }
  389. .item{
  390. margin: 6rpx;
  391. }
  392. .img{
  393. margin: 10rpx;
  394. width: 80rpx;
  395. height: 80rpx;
  396. }
  397. .myqr {
  398. width: 560rpx;
  399. position: fixed;
  400. left: 50%;
  401. top: 50%;
  402. transform: translate3d(-50%, -50%, 0);
  403. background: #efe2e2;
  404. z-index: 999;
  405. border-radius: 20rpx;
  406. /* border: 1rpx solid #999; */
  407. padding: 20rpx;
  408. }
  409. .myqr .cancel {
  410. position: absolute;
  411. width: 60rpx;
  412. height: 60rpx;
  413. margin-left: 280rpx;
  414. }
  415. .myqr .img {
  416. width: 480rpx;
  417. }
  418. .star{
  419. display: flex;
  420. margin: 20rpx 0;
  421. }
  422. .star image{
  423. width: 60rpx;
  424. height: 60rpx;
  425. }
  426. .comment-txt{
  427. width:auto;
  428. border:3rpx solid #999;
  429. border-radius:10rpx;
  430. text-align: left;
  431. padding:10rpx;color:#333;
  432. }
  433. .btn {
  434. height: 56rpx;
  435. line-height: 56rpx;
  436. width: 300rpx;
  437. color: #fff;
  438. font-size: 30rpx;
  439. background-color: #09AFFF;
  440. border-radius: 28rpx;
  441. letter-spacing: 3rpx;
  442. text-align: center;
  443. /* margin: 20rpx auto 0; */
  444. }
  445. .box-wrapper{
  446. height: 64rpx;
  447. background: #E6F7FF;
  448. border-radius: 14rpx;
  449. margin:14rpx 24rpx 0;
  450. display: flex;
  451. align-items: center;
  452. padding-left:30rpx;
  453. width:702rpx;
  454. }
  455. .msg-box{
  456. height: 64rpx;
  457. overflow: hidden;
  458. width:600rpx;
  459. }
  460. .msg-item{
  461. display: flex;
  462. align-items: center;
  463. height: 64rpx;
  464. }
  465. .box-wrapper image{
  466. width:32rpx;
  467. height: 32rpx;
  468. margin-right:8rpx;
  469. }
  470. .content-wrapper{
  471. flex:1;
  472. display: flex;
  473. align-items: center;
  474. height: 64rpx;
  475. }
  476. .content-wrapper view{
  477. line-height: 64rpx;
  478. color:#09afff;
  479. font-size: 26rpx;
  480. }
  481. .anim{
  482. margin-top:-60rpx;
  483. transition: all 0.5s;
  484. }
  485. .msg-content{
  486. width:600rpx;
  487. overflow: hidden;
  488. text-overflow: ellipsis;
  489. white-space: nowrap;
  490. }
  491. .finish-btn{
  492. width: 678rpx;
  493. height: 96rpx;
  494. line-height: 96rpx;
  495. background: #3D7FFF linear-gradient(270deg, rgba(0,202,255,0.5) 0%, rgba(9,175,255,0.5) 100%);
  496. border-radius: 96rpx;
  497. margin:60rpx 36rpx;
  498. text-align: center;
  499. color: #FFFFFF;
  500. font-size: 42rpx;
  501. }
  502. .finish-btn.disable-btn{
  503. background: #D8D8D8;
  504. }
  505. /* 自购/推广弹框 */
  506. .overlay-wrapper {
  507. display: flex;
  508. align-items: center;
  509. justify-content: center;
  510. height: 100%;
  511. }
  512. .tips-wrapper {
  513. width: 554rpx;
  514. height:420rpx;
  515. border-radius:10rpx;
  516. background: #fff;
  517. font-size: 26rpx;
  518. display: flex;
  519. flex-direction: column;
  520. /* justify-content: space-between; */
  521. align-items: center;
  522. padding-top:38rpx;
  523. }
  524. .tips-top{
  525. width:554rpx;
  526. height: 30rpx;
  527. line-height: 30rpx;
  528. font-size: 28rpx;
  529. font-weight: bold;
  530. margin-bottom:44rpx;
  531. text-align: center;
  532. }
  533. .tips-content{
  534. flex:1;
  535. width:376rpx;
  536. }
  537. .mobile-wrapper{
  538. width:376rpx;
  539. height: 48rpx;
  540. display: flex;
  541. align-items: center;
  542. border-bottom:2rpx solid #E7E7E7;
  543. }
  544. .input-block{
  545. flex:1;
  546. padding-left:16rpx;
  547. font-size: 24rpx;
  548. }
  549. .send-code{
  550. line-height: 24rpx;
  551. height:24rpx;
  552. padding:0 16rpx;
  553. color: #0052D9;
  554. font-size: 20rpx;
  555. border-left:2rpx solid #E7E7E7;
  556. }
  557. .mobile-tips{
  558. font-size: 20rpx;
  559. color:#666;
  560. height: 46rpx;
  561. line-height: 36rpx;
  562. width:376rpx;
  563. }
  564. .code-block{
  565. width:376rpx;
  566. height: 48rpx;
  567. border-bottom:2rpx solid #E7E7E7;
  568. padding-left:16rpx;
  569. font-size: 24rpx;
  570. }
  571. .code-tips{
  572. margin-top:18rpx;
  573. height: 24rpx;
  574. font-size: 20rpx;
  575. color: rgba(195,19,19,0.6);
  576. }
  577. .tips-bottom{
  578. width: 554rpx;
  579. height: 82rpx;
  580. border-top:2rpx solid #E4E4E4;
  581. display: flex;
  582. justify-content: space-between;
  583. align-items: center;
  584. }
  585. .tips-bottom .btn-devide{
  586. width:2rpx;
  587. height: 80rpx;
  588. background: #E4E4E4;
  589. }
  590. .cancel-btn{
  591. flex:1;
  592. height: 82rpx;
  593. line-height: 82rpx;
  594. color:#333;
  595. border-radius:72rpx;
  596. text-align: center;
  597. font-size: 28rpx;
  598. }
  599. .repay-btn{
  600. flex:1;
  601. height: 82rpx;
  602. line-height: 82rpx;
  603. color: #0052D9;
  604. text-align: center;
  605. font-size: 28rpx;
  606. }
  607. .backMini{
  608. border:2rpx solid #09afff;
  609. border-radius: 16rpx;
  610. padding:10rpx 30rpx;
  611. font-size: 32rpx;
  612. margin:8rpx 24rpx 20rpx;
  613. display: inline-block;
  614. background: #fff;
  615. }