my.wxss 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696
  1. page {
  2. background: #F3F3F3;
  3. color: #333;
  4. box-sizing: border-box;
  5. width:750rpx;
  6. }
  7. .container{
  8. padding:0 24rpx 80rpx;
  9. margin-top:-200rpx;
  10. }
  11. .user-top-bj{
  12. width: 750rpx;
  13. height: 274rpx;
  14. /* background: linear-gradient(180deg, #91D5FF 0%, #FFFFFF 83%, #F3F3F3 100%); */
  15. background: url('https://mall.zhaijieshi.cc/file/wx-servant/new/my-bg.png') no-repeat;
  16. background-size: 750rpx 256rpx;
  17. padding-top:24rpx;
  18. }
  19. .study-center{
  20. display: flex;
  21. width: 218rpx;
  22. height: 50rpx;
  23. background: rgb(83,182,32);
  24. /* background: linear-gradient(251deg, #AE794B 0%, #C19937 100%); */
  25. border-radius: 18rpx 18rpx 0px 0px;
  26. align-items: center;
  27. justify-content: center;
  28. margin-left:474rpx;
  29. padding-right:6rpx;
  30. }
  31. .study-center image{
  32. width:46rpx;
  33. height: 46rpx;
  34. margin-right:8rpx;
  35. }
  36. .study-center view{
  37. font-weight: 600;
  38. color: #FFFFFF;
  39. font-size: 32rpx;
  40. line-height: 50rpx;
  41. }
  42. view,text{
  43. box-sizing: border-box;
  44. color:#333;
  45. font-size: 30rpx;
  46. }
  47. .user-wrapper{
  48. margin:0 0 16rpx;
  49. background: #FFFFFF;
  50. border-radius: 18rpx;
  51. padding:28rpx 18rpx 32rpx 24rpx;
  52. width:702rpx;
  53. }
  54. .user-info{
  55. display: flex;
  56. align-items: center;
  57. }
  58. .user-img{
  59. width:148rpx;
  60. height: 148rpx;
  61. border-radius:148rpx;
  62. margin-right:16rpx;
  63. background: #eee;
  64. margin-top:-100rpx;
  65. }
  66. .user-right{
  67. height: 120rpx;
  68. display: flex;
  69. flex-direction: column;
  70. /* justify-content: space-between; */
  71. flex:1;
  72. line-height:32rpx;
  73. }
  74. .user-name{
  75. display: flex;
  76. height: 32rpx;
  77. /* justify-content: space-between; */
  78. margin-bottom:24rpx;
  79. }
  80. .user-name text{
  81. font-size: 38rpx;
  82. font-weight: bold;
  83. }
  84. .city-station{
  85. line-height: 40rpx;
  86. }
  87. .job-year{
  88. color: #096DD9;
  89. margin-left:20rpx;
  90. font-size: 24rpx;
  91. }
  92. .user-bottom{
  93. display: flex;
  94. align-items: center;
  95. justify-content: space-between;
  96. }
  97. .user-tag{
  98. display: flex;
  99. }
  100. .user-tag view{
  101. background: #E6F7FF;
  102. border-radius: 4rpx;
  103. border: 1rpx solid #91D5FF;
  104. width:74rpx;
  105. height: 34rpx;
  106. color: #096DD9;
  107. font-size: 22rpx;
  108. text-align: center;
  109. margin-right:10rpx;
  110. }
  111. .health{
  112. display: flex;
  113. }
  114. .health image{
  115. width:36rpx;
  116. height: 34rpx;
  117. /* margin-right:6rpx; */
  118. }
  119. .health text{
  120. color: #096DD9;
  121. font-size: 26rpx;
  122. line-height: 26rpx;
  123. }
  124. .module-nav{
  125. width:702rpx;
  126. margin:0 0 16rpx;
  127. background: #fff;
  128. border-radius: 18rpx;
  129. height:200rpx;
  130. display: flex;
  131. align-items: center;
  132. justify-content: space-between;
  133. padding:0 24rpx;
  134. }
  135. .nav-item{
  136. flex:1;
  137. text-align: center;
  138. }
  139. .nav-img{
  140. width:60rpx;
  141. height: 60rpx;
  142. margin-bottom:14rpx;
  143. }
  144. .nav-text{
  145. height:48rpx;
  146. line-height:48rpx;
  147. font-size: 36rpx;
  148. color:#333;
  149. }
  150. /* 我的站长 */
  151. .my-leader{
  152. background:#fff;
  153. border-radius: 18rpx;
  154. padding:28rpx 24rpx 10rpx;
  155. width:702rpx;
  156. }
  157. .leader-title{
  158. height: 28rpx;
  159. display: flex;
  160. align-items: center;
  161. line-height: 28rpx;
  162. }
  163. .leader-title image{
  164. width:28rpx;
  165. height:28rpx;
  166. margin-right:8rpx;
  167. }
  168. .leader-name{
  169. margin:24rpx 0 16rpx 0;
  170. padding-left:34rpx;
  171. height: 32rpx;
  172. line-height: 32rpx;
  173. font-size: 28rpx;
  174. }
  175. .call-wrapper{
  176. display: flex;
  177. align-items: center;
  178. justify-content: space-between;
  179. }
  180. .call-wrapper view{
  181. width: 316rpx;
  182. height: 56rpx;
  183. line-height: 56rpx;
  184. background: #3D7FFF linear-gradient(270deg, rgba(0,202,255,0.5) 0%, rgba(9,175,255,0.5) 100%);
  185. border-radius: 56rpx;
  186. color: #fff;
  187. text-align: center;
  188. }
  189. /* 服务费记账本 */
  190. .sally-book{
  191. width:702rpx;
  192. margin:16rpx 0 16rpx;
  193. padding:34rpx 24rpx 46rpx;
  194. border-radius:18rpx;
  195. background: #fff;
  196. }
  197. .sally-title{
  198. display: flex;
  199. align-items: center;
  200. }
  201. .sally-title image{
  202. width:34rpx;
  203. height: 34rpx;
  204. margin-right:12rpx;
  205. }
  206. .sally-title .middle{
  207. font-size: 36rpx;
  208. color:#333333;
  209. flex:1;
  210. }
  211. .sally-detail{
  212. color:#09afff;
  213. }
  214. .sally-content{
  215. margin:24rpx 0 14rpx;
  216. padding-left:36rpx;
  217. }
  218. .sally-history{
  219. height: 32rpx;
  220. line-height: 32rpx;
  221. padding-left:36rpx;
  222. }
  223. .history-num{
  224. margin-left:20rpx;
  225. }
  226. .sally-content text,.sally-history text{
  227. color:#999;
  228. }
  229. .sally-content text.sally-num{
  230. font-weight: 600;
  231. color: #FFAA00;
  232. margin-left:20rpx;
  233. font-size: 40rpx;
  234. }
  235. /* 消息中心 */
  236. .message-center{
  237. margin-bottom:16rpx;
  238. background-color: #fff;
  239. border-radius:18rpx;
  240. padding:32rpx 24rpx;
  241. width:702rpx;
  242. }
  243. .message-title{
  244. display: flex;
  245. align-items: center;
  246. justify-content: space-between;
  247. height: 36rpx;
  248. }
  249. .msg-title-left{
  250. height: 36rpx;
  251. display: flex;
  252. align-items: center;
  253. }
  254. .msg-title-left image{
  255. width:36rpx;
  256. height:36rpx;
  257. margin-right:10rpx;
  258. }
  259. .message-title .title-text{
  260. font-size: 36rpx;
  261. font-weight: 500;
  262. line-height: 36rpx;
  263. }
  264. .msg-num{
  265. width: 36rpx;
  266. height: 36rpx;
  267. background: #FA0000;
  268. font-size: 22rpx;
  269. line-height: 34rpx;
  270. font-weight: 500;
  271. text-align: center;
  272. margin-left:6rpx;
  273. border-radius: 38rpx;
  274. color:#fff;
  275. }
  276. .msg-title-right{
  277. color:#09afff;
  278. font-size: 28rpx;
  279. }
  280. .box-wrapper{
  281. height: 64rpx;
  282. background: #E6F7FF;
  283. border-radius: 14rpx;
  284. margin-top:32rpx;
  285. display: flex;
  286. align-items: center;
  287. padding-left:20rpx;
  288. }
  289. .msg-box{
  290. height: 64rpx;
  291. overflow: hidden;
  292. }
  293. .msg-item{
  294. display: flex;
  295. align-items: center;
  296. height: 64rpx;
  297. }
  298. .box-wrapper image{
  299. width:32rpx;
  300. height: 32rpx;
  301. margin-right:16rpx;
  302. }
  303. .content-wrapper{
  304. flex:1;
  305. display: flex;
  306. align-items: center;
  307. height: 64rpx;
  308. }
  309. .content-wrapper view{
  310. line-height: 64rpx;
  311. color:#09afff;
  312. font-size: 26rpx;
  313. }
  314. .anim{
  315. margin-top:-60rpx;
  316. transition: all 0.5s;
  317. }
  318. .msg-content{
  319. width:560rpx;
  320. overflow: hidden;
  321. text-overflow: ellipsis;
  322. white-space: nowrap;
  323. }
  324. /* 复购看板 */
  325. .rebuy-board{
  326. background: #fff;
  327. border-radius:18rpx;
  328. width:702rpx;
  329. padding:24rpx 24rpx 28rpx;
  330. }
  331. .rebuy-title{
  332. display:flex;
  333. align-items: center;
  334. justify-content: space-between;
  335. height: 48rpx;
  336. }
  337. .rebuy-title-left image{
  338. width:40rpx;
  339. height:40rpx;
  340. margin-right:10rpx;
  341. }
  342. .rebuy-title-left view{
  343. font-size: 32rpx;
  344. }
  345. .rebuy-title-left{
  346. display:flex;
  347. align-items: center;
  348. height: 48rpx;
  349. line-height: 48rpx;
  350. }
  351. .rebuy-week{
  352. display:flex;
  353. align-items: center;
  354. height: 48rpx;
  355. line-height: 48rpx;
  356. }
  357. .rebuy-week image{
  358. width:24rpx;
  359. height:24rpx;
  360. margin-left:4rpx;
  361. }
  362. .current-week{
  363. color: #09AFFF;
  364. margin:0 12rpx;
  365. }
  366. .last-week{
  367. margin-left:4rpx;
  368. }
  369. .rebuy-content{
  370. /* height: 218rpx; */
  371. background: #E6F7FF;
  372. border-radius: 15rpx;
  373. margin-top:10rpx;
  374. padding:20rpx 32rpx 24rpx 24rpx;
  375. }
  376. .rebuy-orders{
  377. display: flex;
  378. align-items: center;
  379. justify-content: space-between;
  380. height: 90rpx;
  381. }
  382. .rebuy-orders .title{
  383. font-size: 32rpx;
  384. color:#666;
  385. }
  386. .single-block{
  387. flex:1;
  388. margin-left:60rpx;
  389. display: flex;
  390. flex-direction: column;
  391. justify-content: space-between;
  392. height: 90rpx;
  393. }
  394. .single-block view{
  395. color: #39CB7F;
  396. font-size: 22rpx;
  397. width:74rpx;
  398. text-align: center;
  399. }
  400. .single-block text{
  401. font-size: 36rpx;
  402. color: #39CB7F;
  403. }
  404. .single-block .tag{
  405. width: 74rpx;
  406. height: 30prx;
  407. line-height: 28rpx;
  408. background: #39CB7F;
  409. font-size: 20rpx;
  410. color:#fff;
  411. text-align: center;
  412. border-radius: 4rpx;
  413. margin-left:4rpx;
  414. }
  415. .cycle-block{
  416. width:104rpx;
  417. display: flex;
  418. flex-direction: column;
  419. justify-content: space-between;
  420. /* align-items: center; */
  421. height: 90rpx;
  422. flex:1;
  423. margin-left:60rpx;
  424. }
  425. .cycle-block view{
  426. color: #09AFF0;
  427. font-size: 22rpx;
  428. width:104rpx;
  429. text-align: center;
  430. }
  431. .cycle-block text{
  432. font-size: 36rpx;
  433. color: #09AFF0;
  434. }
  435. .cycle-block .tag{
  436. width: 104rpx;
  437. height: 30prx;
  438. line-height: 28rpx;
  439. background: #09AFFF;
  440. font-size: 20rpx;
  441. color:#fff;
  442. text-align: center;
  443. border-radius: 4rpx;
  444. }
  445. .rebuy-goals{
  446. margin-top:20rpx;
  447. }
  448. .rebuy-goals .single-block text{
  449. color: #E2B650;
  450. width:104rpx;
  451. text-align: center;
  452. display:inline-block;
  453. }
  454. .rebuy-goals .single-block .tag{
  455. background: #E2B650;
  456. width:102rpx;
  457. margin-left:-8rpx;
  458. }
  459. .rebuy-goals .cycle-block text{
  460. color: #E2B650;
  461. width:104rpx;
  462. text-align: center;
  463. display:inline-block;
  464. }
  465. .rebuy-goals .cycle-block .tag{
  466. background: #E2B650;
  467. }
  468. .mark-wrapper{
  469. position: relative;
  470. }
  471. .mark-wrapper .mark{
  472. position: absolute;
  473. width: 84rpx;
  474. height: 58rpx;
  475. color:#fff;
  476. font-size: 16rpx;
  477. background: url('https://jzmall.lifejingzhi.com/file/wx-servant/bg-tips.png') no-repeat center;
  478. background-size: 100% 100%;
  479. top:-56rpx;
  480. left:100rpx;
  481. line-height: 24rpx;
  482. padding:4rpx 0 0 4rpx;
  483. }
  484. .logout{
  485. font-weight: 600;
  486. color: #716F6F;
  487. line-height: 42rpx;
  488. text-decoration: underline;
  489. margin:34rpx 0 80rpx;
  490. font-size: 30rpx;
  491. text-align: center;
  492. }
  493. .swiper-container{
  494. width:560rpx;
  495. height: 64rpx;
  496. }
  497. .recommand-line{
  498. height: 36rpx;
  499. display:flex;
  500. align-items: center;
  501. line-height: 36rpx;
  502. margin:30rpx 0 10rpx;
  503. }
  504. .recommand-line .code{
  505. color: #146A7F;
  506. margin:0 8rpx 0 12rpx;
  507. font-weight: bold;
  508. }
  509. .recommand-line image{
  510. width:30rpx;
  511. height:30rpx;
  512. margin-bottom:4rpx;
  513. }
  514. .interview{
  515. width: 702rpx;
  516. /* height: 476rpx; */
  517. background: #FFFFFF;
  518. border-radius: 18rpx;
  519. padding:46rpx 24rpx 42rpx 24rpx;
  520. margin:50rpx 0;
  521. }
  522. .interview-title{
  523. height:48rpx;
  524. display: flex;
  525. align-items: center;
  526. }
  527. .interview-title image{
  528. width:34rpx;
  529. height:34rpx;
  530. margin-right:14rpx;
  531. }
  532. .interview-date{
  533. height:48rpx;
  534. line-height: 48rpx;
  535. margin:70rpx 0 46rpx;
  536. }
  537. .interview-location{
  538. line-height: 48rpx;
  539. margin-bottom:48rpx;
  540. padding-right:24rpx;
  541. }
  542. .interview-operate{
  543. display:flex;
  544. align-items: center;
  545. justify-content: flex-end;
  546. height: 40rpx;
  547. }
  548. .interview-operate image{
  549. width:24rpx;
  550. height: 24rpx;
  551. margin-right:8rpx;
  552. padding-top:6rpx;
  553. }
  554. .interview-refuse,.interview-accept{
  555. display: flex;
  556. align-items: center;
  557. margin-left:32rpx;
  558. height: 40rpx;
  559. }
  560. .interview-accept view{
  561. color: #0EAEFC;
  562. }
  563. .overlay-wrapper{
  564. display: flex;
  565. align-items: center;
  566. justify-content: center;
  567. height: 100%;
  568. z-index:999;
  569. }
  570. .modal-list{
  571. position: relative;
  572. width:720rpx;
  573. height:508rpx;
  574. background:transparent;
  575. }
  576. .modal-block{
  577. width: 700rpx;
  578. height: 478rpx;
  579. background: #FFFFFF;
  580. box-shadow: 0px 2rpx 4rpx 0px rgba(0,0,0,0.5);
  581. border-radius: 18rpx;
  582. }
  583. .modal-block-bottom{
  584. position:absolute;
  585. top:0;
  586. left:0;
  587. z-index:999;
  588. }
  589. .modal-block-top{
  590. position:absolute;
  591. top:32rpx;
  592. left:20rpx;
  593. z-index:1000;
  594. }
  595. .content{
  596. padding:38rpx 24rpx 40rpx 12rpx;
  597. }
  598. .modal-block .title{
  599. display: flex;
  600. height: 50rpx;
  601. align-items: center;
  602. justify-content: space-between;
  603. margin-bottom:28rpx;
  604. }
  605. .modal-block .left{
  606. display: flex;
  607. height: 50rpx;
  608. align-items: center;
  609. overflow: hidden;
  610. }
  611. .modal-block .title image{
  612. width:55rpx;
  613. height:50rpx;
  614. margin-right:6rpx;
  615. }
  616. .title .left view{
  617. height: 50rpx;
  618. font-size: 38rpx;
  619. font-weight: 500;
  620. color: #333333;
  621. }
  622. .content .line{
  623. height:55rpx;
  624. line-height: 55rpx;
  625. margin-bottom:7rpx;
  626. padding-left:24rpx;
  627. }
  628. .tiket-num text{
  629. color: #2A8DE2;
  630. text-decoration: underline;
  631. }
  632. .content .line-two{
  633. height:110rpx;
  634. line-height: 55rpx;
  635. overflow: hidden;
  636. -webkit-line-clamp: 2;
  637. display:-webkit-box;
  638. -webkit-box-orient:vertical;
  639. padding-left:24rpx;
  640. }
  641. .modal-list .operate{
  642. height:84rpx;
  643. border-top: 2rpx solid #EFEFEF;
  644. display: flex;
  645. padding:0 10rpx 0 24rpx;
  646. align-items: center;
  647. justify-content: space-between;
  648. }
  649. .modal-list .operate view{
  650. color: #4E4E4E;
  651. font-size: 38rpx;
  652. }
  653. .modal-list .operate image{
  654. width:70rpx;
  655. height:70rpx;
  656. }
  657. .modal-list .close{
  658. width:52rpx;
  659. height:52rpx;
  660. bottom:-116rpx;
  661. position:absolute;
  662. left:344rpx;
  663. }
  664. .modal-block-top.one-modal{
  665. left:10rpx!important;
  666. }
  667. .total-customer{
  668. height:48rpx;
  669. font-size: 24rpx;
  670. color: #666666;
  671. display: flex;
  672. justify-content: flex-end;
  673. align-items: center;
  674. width:660rpx;
  675. }
  676. .total-customer text{
  677. font-size: 24rpx;
  678. line-height: 40rpx;
  679. padding-top:10rpx;
  680. color:#666;
  681. }
  682. .total-customer text.customer-num{
  683. color:#096DD9;
  684. font-size: 40rpx;
  685. font-weight: bold;
  686. line-height: 40rpx;
  687. padding-top:0;
  688. margin:0 6rpx;
  689. }