my.wxss 11 KB

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