home.wxss 22 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403
  1. /* .wux-popup {
  2. width: 100% !important;
  3. max-width: 100% !important;
  4. } */
  5. page {
  6. background-color: #F7F8FA !important;
  7. }
  8. .homeBack {
  9. width: 750rpx;
  10. height: 574rpx;
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. }
  15. .home-poster .wux-landscape__inner {
  16. padding: 0 !important;
  17. }
  18. .home-poster .popup-index--wux-popup {
  19. width: 650rpx !important;
  20. max-width: 650rpx !important;
  21. }
  22. .location {
  23. height: 126rpx;
  24. padding: 0 30rpx;
  25. margin: 18rpx 30rpx 0;
  26. border-radius: 24rpx;
  27. /* opacity: 0.45; */
  28. /* background: #FFFFFF; */
  29. background: rgba(255, 255, 255, .45);
  30. /* background-image: linear-gradient(128deg, #1AACAC 0%, #13DAD8 100%); */
  31. }
  32. /*
  33. #popup1 .wux-popup__content {
  34. border-radius: 40rpx;
  35. } */
  36. /* .location .img {
  37. position: relative;
  38. } */
  39. .location image {
  40. width: 72rpx;
  41. height: 72rpx;
  42. margin-right: 20rpx;
  43. border-radius: 50%;
  44. }
  45. /* .location .img2 {
  46. width: 96rpx;
  47. height: 28rpx;
  48. position: absolute;
  49. left: 0;
  50. top: 68rpx;
  51. }
  52. .location .img text {
  53. position: absolute;
  54. left: 26rpx;
  55. top: 66rpx;
  56. font-size: 20rpx;
  57. color: #fff;
  58. } */
  59. /* .location .text {
  60. overflow: hidden;
  61. } */
  62. /* .location text {
  63. white-space: nowrap;
  64. overflow: hidden;
  65. text-overflow: ellipsis;
  66. color: #fff;
  67. } */
  68. .location .text-box .active {
  69. width: 44rpx;
  70. height: 30rpx;
  71. color: #FF8686;
  72. font-size: 16rpx;
  73. border-radius: 8rpx;
  74. border: 2rpx solid #FF8686;
  75. margin-left: 10rpx;
  76. }
  77. .swiper-box {
  78. position: relative;
  79. height: 300rpx;
  80. /* margin-top: 20rpx; */
  81. /* padding: 0 30rpx; */
  82. }
  83. .swiper-box swiper {
  84. width: 100%;
  85. height: 100%;
  86. border-radius: 24rpx;
  87. overflow: hidden;
  88. transform: translateY(0);
  89. }
  90. .swiper-box image {
  91. width: 100%;
  92. height: 100%;
  93. border-radius: 24rpx;
  94. /* box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.01), 0px 2px 4px 0px rgba(0, 0, 0, 0.15); */
  95. }
  96. /*用来包裹所有的小圆点 */
  97. .swiper-box .swiper-dots {
  98. position: absolute;
  99. width: 210rpx;
  100. height: 20rpx;
  101. display: flex;
  102. flex-direction: row;
  103. justify-content: center;
  104. left: 50%;
  105. transform: translateX(-50%);
  106. bottom: 16rpx;
  107. }
  108. /*未选中时的小圆点样式 */
  109. .swiper-dots .swiper-dot {
  110. width: 12rpx;
  111. height: 12rpx;
  112. background: #FA7D22;
  113. opacity: 0.2;
  114. margin-right: 8rpx;
  115. border-radius: 12rpx;
  116. }
  117. /*选中以后的小圆点样式 */
  118. .swiper-dots .swiper-dot-active {
  119. width: 24rpx;
  120. height: 12rpx;
  121. background: #FA7D22;
  122. border-radius: 6rpx;
  123. opacity: unset;
  124. }
  125. .content .title {
  126. margin-top: 12rpx;
  127. }
  128. .content .title,
  129. .content .title-text {
  130. height: 80rpx;
  131. /* padding: 0 30rpx; */
  132. font-size: 36rpx;
  133. font-family: PingFangSC-Semibold, PingFang SC;
  134. color: #333;
  135. /* font-family: PingFangSC-Medium; */
  136. /* font-size: 18px; */
  137. /* color: #fff; */
  138. }
  139. .content .title-text {
  140. margin-left: 10rpx;
  141. font-weight: 600;
  142. }
  143. .content .title image {
  144. width: 32rpx;
  145. height: 32rpx;
  146. }
  147. .content .list {
  148. padding: 0 30rpx;
  149. overflow: hidden;
  150. margin-top: -20rpx;
  151. }
  152. .content .item {
  153. margin: 20rpx 0;
  154. width: 100%;
  155. background: #fff;
  156. border-radius: 24rpx;
  157. box-shadow: 4rpx 24rpx 50rpx -8rpx rgba(255, 119, 176, 0.55);
  158. /* box-shadow: 0px 4rpx 8rpx 0px rgba(221, 190, 190, 0.01), 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.15); */
  159. }
  160. .content .item-top {
  161. width: 100%;
  162. height: 282rpx;
  163. /* background: blue; */
  164. }
  165. .content .item-text {
  166. padding: 22rpx 28rpx;
  167. }
  168. .content .item-text image {
  169. width: 54rpx;
  170. height: 38rpx;
  171. /* 46+8 */
  172. }
  173. .content .item-text .box {
  174. position: relative;
  175. margin-right: 12rpx;
  176. }
  177. .content .item-text .box view {
  178. position: absolute;
  179. left: 0;
  180. top: 0;
  181. width: 46rpx;
  182. height: 38rpx;
  183. color: #fff;
  184. }
  185. .content .item-btn {
  186. /* height: 78rpx; */
  187. /* width: 100%; */
  188. /* background: rgba(19,218,216,0.09); */
  189. position: relative;
  190. padding: 0 30rpx 30rpx;
  191. }
  192. .content .item-btn .btn {
  193. width: 190rpx;
  194. height: 68rpx;
  195. color: #fff;
  196. background: #FA7D22;
  197. box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.01);
  198. border-radius: 39rpx;
  199. font-family: PingFangSC-Semibold, PingFang SC;
  200. }
  201. /* .content .case-list {
  202. white-space: nowrap;
  203. margin-bottom: 48rpx;
  204. } */
  205. .content .case-list .case-item {
  206. margin-left: 30rpx;
  207. margin-bottom: 48rpx;
  208. width: 248rpx;
  209. /* height: 100px; */
  210. /* display: inline-block; */
  211. border-radius: 16rpx;
  212. box-shadow: 4rpx 24rpx 50rpx -8rpx rgba(255, 119, 176, 0.55);
  213. }
  214. .content .case-item image {
  215. width: 248rpx;
  216. height: 248rpx;
  217. border-top-left-radius: 16rpx;
  218. border-top-right-radius: 16rpx;
  219. }
  220. .content .case-item .text-box {
  221. padding: 20rpx;
  222. }
  223. /* .content .item-btn image {
  224. height: 84rpx;
  225. width: 303rpx;
  226. position: absolute;
  227. right: 0;
  228. top: -4rpx;
  229. } */
  230. /* .content .item-btn image text {
  231. position: absolute;
  232. left: 0;
  233. top: 0;
  234. width: 100%;
  235. height: 100%;
  236. color: #fff;
  237. font-family: PingFangSC-Semibold;
  238. padding-left: 22rpx;
  239. } */
  240. /* .content {
  241. min-height: 934rpx;
  242. } */
  243. .home-coupon .img-box {
  244. position: relative;
  245. }
  246. .home-coupon .coupon-popup-img {
  247. height: 958rpx;
  248. width: 100%;
  249. position: relative;
  250. }
  251. .coupon-popup-img1 {
  252. height: 958rpx;
  253. width: 100%;
  254. }
  255. .home-poster .coupon-popup-img {
  256. height: 824rpx;
  257. width: 100%;
  258. }
  259. .home-coupon .img-box text {
  260. position: absolute;
  261. bottom: 156rpx;
  262. left: 172rpx;
  263. color: #C3004C;
  264. font-size: 24rpx;
  265. }
  266. .coupon-popup {
  267. background-color: #fff;
  268. width: 558rpx;
  269. height: 446rpx;
  270. border-radius: 40rpx;
  271. padding: 0 66rpx;
  272. box-sizing: border-box;
  273. display: flex;
  274. flex-direction: column;
  275. justify-content: center;
  276. }
  277. .coupon-popup .item {
  278. height: 135rpx;
  279. padding: 34rpx 0 40rpx;
  280. }
  281. .coupon-popup .item-left {
  282. width: 145rpx;
  283. height: 100%;
  284. font-family: PingFangSC-Semibold;
  285. color: #FFFFFF;
  286. font-size: 32rpx;
  287. border-top-left-radius: 16rpx;
  288. border-bottom-left-radius: 16rpx;
  289. background-image: radial-gradient(circle at 0px 50%, #fff 15rpx, #FF7676 15rpx);
  290. }
  291. .coupon-popup .item-right {
  292. justify-content: center;
  293. align-items: flex-start;
  294. padding-left: 16rpx;
  295. border-top-right-radius: 16rpx;
  296. border-bottom-right-radius: 16rpx;
  297. box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.13);
  298. }
  299. .coupon-popup .item-right text {
  300. font-size: 20rpx;
  301. color: #000;
  302. }
  303. .coupon-popup .btn {
  304. width: 416rpx;
  305. height: 92rpx;
  306. background: #85DBD8;
  307. border-radius: 52px;
  308. color: #FFFFFF;
  309. font-size: 36rpx;
  310. }
  311. .btm-toast {
  312. position: fixed;
  313. bottom: 8rpx;
  314. width: 100%;
  315. /* overflow: hidden; */
  316. }
  317. .btm-toast .margin-box {
  318. margin: 0 20rpx;
  319. border-radius: 24rpx;
  320. height: 192rpx;
  321. padding: 0 44rpx;
  322. background-color: rgba(51, 51, 51, 0.89);
  323. position: relative;
  324. }
  325. .btm-toast .left-image {
  326. width: 112rpx;
  327. height: 112rpx;
  328. border: 2rpx solid #FFFFFF;
  329. box-sizing: border-box;
  330. border-radius: 50%;
  331. }
  332. .btm-toast .right {
  333. margin-left: 18rpx;
  334. line-height: 38rpx;
  335. }
  336. .btm-toast .right text {
  337. font-size: 28rpx;
  338. font-family: PingFangSC-Regular, PingFang SC;
  339. font-weight: 400;
  340. color: #FFFFFF;
  341. }
  342. .btm-toast .close {
  343. width: 48rpx;
  344. height: 48rpx;
  345. border-radius: 50%;
  346. position: absolute;
  347. right: -12rpx;
  348. top: -14rpx;
  349. }
  350. .btm-toast .btn {
  351. width: 136rpx;
  352. height: 50rpx;
  353. background: #FA7D22;
  354. border-radius: 29rpx;
  355. font-size: 28rpx;
  356. font-family: PingFangTC-Medium, PingFangTC;
  357. color: #fff;
  358. position: absolute;
  359. right: 48rpx;
  360. bottom: 28rpx;
  361. }
  362. .plan-scroll-x::-webkit-scrollbar {
  363. display: none;
  364. /* Chrome Safari */
  365. }
  366. .content {
  367. padding: 0 30rpx;
  368. }
  369. .content .image-bgc {
  370. width: 100%;
  371. position: absolute;
  372. top: 0;
  373. left: 0;
  374. z-index: -1;
  375. }
  376. .navbar-box {
  377. width: 100%;
  378. /* height: 100%; */
  379. position: fixed;
  380. top: 0;
  381. left: 0;
  382. }
  383. .navbar-box-container {
  384. box-sizing: border-box;
  385. position: absolute;
  386. display: flex;
  387. align-items: center;
  388. z-index: 999;
  389. }
  390. .navbar-box-container .navbar-location {
  391. width: 48rpx;
  392. height: 48rpx;
  393. margin-left: 20rpx;
  394. margin-top: 10rpx;
  395. }
  396. .navbar-box-container .navbar-tips {
  397. color: #333 !important;
  398. margin-top: 10rpx;
  399. }
  400. .navbar-distance {
  401. margin-left: 72rpx;
  402. font-size: 20rpx;
  403. color: #333;
  404. position: absolute;
  405. z-index: 99;
  406. }
  407. .navbar-hint {
  408. position: absolute;
  409. margin-top: 10rpx;
  410. z-index: 99;
  411. }
  412. .navbar-hint image {
  413. position: absolute;
  414. height: 78rpx;
  415. width: 356rpx;
  416. margin-left: 38rpx;
  417. color: #333;
  418. }
  419. .navbar-hint-tip {
  420. position: absolute;
  421. top: 36rpx;
  422. left: 0;
  423. font-size: 20rpx;
  424. margin-left: 68rpx;
  425. height: 60rpx;
  426. width: 356rpx;
  427. }
  428. .navbar-arrow {
  429. width: 48rpx;
  430. height: 48rpx;
  431. margin-top: 10rpx;
  432. }
  433. .navbar-bg-white {
  434. background: #ffffff;
  435. }
  436. /* 顶部banner样式 */
  437. .content {
  438. padding: 0;
  439. }
  440. /* 顶部banner */
  441. .top-banner {
  442. width: 750rpx;
  443. height: 700rpx;
  444. }
  445. .top-banner .top-swiper {
  446. width: 100%;
  447. height: 100%;
  448. }
  449. .active-swiper {
  450. margin-top: 110rpx !important;
  451. }
  452. .top-banner .top-swiper swiper-item image {
  453. width: 100%;
  454. height: 640rpx;
  455. }
  456. /* 消息提示框 */
  457. .message-box {
  458. width: 690rpx;
  459. height: 50rpx;
  460. margin-left: 30rpx;
  461. display: flex;
  462. align-items: center;
  463. }
  464. .message-box .trumpet {
  465. width: 30rpx;
  466. height: 30rpx;
  467. }
  468. .message-box .message-tip {
  469. height: 50rpx;
  470. line-height: 50rpx;
  471. width:400rpx;
  472. font-size: 20rpx;
  473. margin-left: 16rpx;
  474. }
  475. message-contents{
  476. width: 240rpx;
  477. overflow: hidden;
  478. text-overflow: ellipsis;
  479. white-space: nowrap;
  480. flex-shrink: 0;
  481. }
  482. .message-tip swiper-item{
  483. width: 100%;
  484. height: 100%;
  485. display: flex;
  486. flex-shrink: 0;
  487. }
  488. .message-box .goMessage {
  489. color: #FA7D22;
  490. font-size: 20rpx;
  491. margin-left: 60rpx;
  492. width: 100rpx;
  493. flex-shrink: 0;
  494. }
  495. .message-box .message-icon {
  496. width: 48rpx;
  497. height: 48rpx;
  498. margin-left: 194rpx;
  499. position: relative;
  500. }
  501. .message-box .message-icon image{
  502. width: 48rpx;
  503. height: 48rpx;
  504. }
  505. .message-total {
  506. padding: 2rpx;
  507. min-width: 27rpx;
  508. min-height: 27rpx;
  509. background-color: #FF4414;
  510. border-radius: 50%;
  511. position: absolute;
  512. top: -6rpx;
  513. right: -6rpx;
  514. color: #FFFFFF;
  515. font-size: 24rpx;
  516. line-height: 27rpx;
  517. text-align: center;
  518. }
  519. /* 展示图 */
  520. .showPic{
  521. margin-top: 50rpx;
  522. width: 750rpx;
  523. }
  524. .showPic image{
  525. display: block;
  526. }
  527. /* 肤龄 */
  528. .skin-box {
  529. width: 690rpx;
  530. margin-left: 30rpx;
  531. height: 120rpx;
  532. background-color: #FFFFFF;
  533. margin-top: 30rpx;
  534. border-radius: 20rpx;
  535. display: flex;
  536. align-items: center;
  537. overflow: hidden;
  538. }
  539. .skin-box-left {
  540. width: 400rpx;
  541. display: flex;
  542. align-items: center;
  543. }
  544. .skin-box-right {
  545. width: 290rpx;
  546. height: 100%;
  547. line-height: 120rpx;
  548. text-align: right;
  549. }
  550. .skin-box .skin-title {
  551. color: #333;
  552. margin-left: 40rpx;
  553. font-weight: 600;
  554. font-size: 32rpx;
  555. }
  556. .skin-box .skin-date {
  557. color: #333;
  558. margin-left: 38rpx;
  559. font-size: 20rpx;
  560. }
  561. .skin-box .skin-age {
  562. font-size: 20rpx;
  563. margin-right: 40rpx;
  564. }
  565. .skin-box .skin-age text {
  566. color: #FA7D22;
  567. font-size: 56rpx;
  568. }
  569. /* 项目分类 */
  570. .project-classify {
  571. width: 690rpx;
  572. height: auto;
  573. margin-left: 30rpx;
  574. background-color: #FFFFFF;
  575. margin-top: 20rpx;
  576. border-radius: 20rpx;
  577. display: flex;
  578. flex-wrap: wrap;
  579. padding-top: 40rpx;
  580. box-sizing: border-box;
  581. padding-bottom: 40rpx;
  582. }
  583. .project-classify .project-classify-item {
  584. flex-shrink: 0;
  585. width: 80rpx;
  586. text-align: center;
  587. margin-left: 100rpx;
  588. }
  589. .project-classify .project-classify-item:first-child {
  590. margin-left: 40rpx;
  591. }
  592. .project-classify .project-classify-item:nth-child(n+5) {
  593. margin-top: 40rpx;
  594. }
  595. .project-classify .project-classify-item:nth-child(5) {
  596. margin-left: 40rpx;
  597. }
  598. .project-classify .project-classify-item image {
  599. width: 56rpx;
  600. height: 56rpx;
  601. }
  602. .project-classify .project-classify-item view {
  603. font-size: 20rpx;
  604. color: #333;
  605. }
  606. /* 推荐项目 */
  607. .recommend-project {
  608. margin-left: 30rpx;
  609. font-weight: 600;
  610. font-size: 32rpx;
  611. margin-top: 40rpx;
  612. color: #333333;
  613. }
  614. /* 推荐项目轮播图 */
  615. .projectImage {
  616. width: 100%;
  617. height: 380rpx;
  618. margin-top: 34rpx;
  619. }
  620. .projectImage-item {
  621. height: 380rpx;
  622. margin: 0 auto;
  623. display: flex;
  624. justify-content: center;
  625. align-items: center;
  626. }
  627. .projectImage-item image {
  628. width: 100%;
  629. height: 100%;
  630. }
  631. .projectImage-item .project-box {
  632. width: 650rpx;
  633. height: 380rpx;
  634. border-radius: 20rpx;
  635. overflow: hidden;
  636. }
  637. .projectImage-item .project-box-top {
  638. width: 100%;
  639. height: 204rpx;
  640. }
  641. .projectImage-item .project-box-top image {
  642. height: 100%;
  643. width: 100%;
  644. }
  645. .projectImage-item .project-box-bottom {
  646. background-color: #FFFFFF;
  647. width: 650rpx;
  648. height: 120rpx;
  649. padding: 0 20rpx;
  650. padding-top: 20rpx;
  651. box-sizing: border-box;
  652. }
  653. .projectImage-item .project-box-bottom .project-title {
  654. color: #222222;
  655. font-size: 28rpx;
  656. overflow: hidden;
  657. white-space: nowrap;
  658. text-overflow: ellipsis;
  659. }
  660. .project-box-bottom .project-box-bottom-A {
  661. height: 56rpx;
  662. margin-top: 20rpx;
  663. display: flex;
  664. align-items: center;
  665. /* justify-content: space-between; */
  666. }
  667. .project-box-bottom-A .project-sum {
  668. font-size: 20rpx;
  669. color: #999999;
  670. }
  671. .project-box-bottom-A .project-price {
  672. color: #FA4622;
  673. font-size: 24rpx;
  674. margin-left: auto;
  675. }
  676. .project-box-bottom-A .project-price text {
  677. color: #FA4622;
  678. font-size: 40rpx;
  679. }
  680. .projectImage-item .boxSmall {
  681. width: 650rpx;
  682. height: 324rpx;
  683. margin: 0 auto;
  684. overflow: hidden;
  685. border-radius: 20rpx;
  686. }
  687. .projectImage-item .boxBig {
  688. width: 650rpx;
  689. height: 380rpx;
  690. border-radius: 20rpx;
  691. overflow: hidden;
  692. }
  693. .projectImage-item .imageBig {
  694. width: 650rpx;
  695. height: 240rpx;
  696. }
  697. .projectImage-item .bottomBig {
  698. width: 650rpx;
  699. height: 140rpx;
  700. }
  701. /* 美丽秘籍 */
  702. .article {
  703. width: 750rpx;
  704. background: linear-gradient(180deg, #FFFFFF 0%, #f7f8fa 100%);
  705. height: auto;
  706. margin-top: 40rpx;
  707. border-radius: 10px 10px 0px 0px;
  708. overflow: hidden;
  709. padding-bottom: 40rpx;
  710. }
  711. .article-tab {
  712. height: 100rpx;
  713. width: 100%;
  714. white-space: nowrap;
  715. display: flex;
  716. }
  717. .articleFixed {
  718. position: fixed;
  719. top: var(--top--);
  720. left: 0;
  721. background-color: #fff;
  722. }
  723. .article-tab .tab-item {
  724. margin-top: 40rpx;
  725. box-sizing: border-box;
  726. display: inline-block;
  727. position: relative;
  728. margin-left: 60rpx;
  729. font-size: 28rpx;
  730. color: #333333;
  731. }
  732. .article-tab .tab-item:first-child {
  733. margin-left: 30rpx;
  734. }
  735. .tab-item-active {
  736. font-weight: 700;
  737. position: relative;
  738. }
  739. .tab-item-active::before {
  740. content: '';
  741. position: absolute;
  742. bottom: 4rpx;
  743. left: 0px;
  744. width: 104%;
  745. height: 12rpx;
  746. background-color: #fa7d22;
  747. border-radius: 10rpx;
  748. }
  749. /* 美丽秘籍瀑布流布局 */
  750. .main {
  751. display: flex;
  752. align-items: flex-start;
  753. }
  754. .column {
  755. /* width: 50%; */
  756. }
  757. .column_item {
  758. margin-left: 30rpx;
  759. margin-top: 20rpx;
  760. }
  761. .column_pic {
  762. display: block;
  763. width: 330rpx;
  764. height: 330rpx;
  765. border-radius: 10px 10px 0 0;
  766. }
  767. .hide {
  768. display: none;
  769. }
  770. .main-content {
  771. height: 172rpx;
  772. width: 330rpx;
  773. background-color: #FFFFFF;
  774. border-radius: 0 0 10px 10px;
  775. padding: 20rpx;
  776. box-sizing: border-box;
  777. }
  778. .main-title {
  779. color: #222222;
  780. font-size: 28rpx;
  781. height: 80rpx;
  782. overflow: hidden;
  783. text-overflow: ellipsis;
  784. display: -webkit-box;
  785. -webkit-line-clamp: 2;
  786. -webkit-box-orient: vertical;
  787. }
  788. .main-bottom {
  789. margin-top: 20rpx;
  790. display: flex;
  791. justify-content: space-between;
  792. font-size: 24rpx;
  793. color: #666;
  794. }
  795. .plan {
  796. height: 240rpx;
  797. margin-top: 20rpx;
  798. }
  799. .plan .plan-item {
  800. height: 100%;
  801. padding: 2rpx;
  802. border-radius: 24rpx;
  803. overflow: hidden;
  804. background: #FFFFFF;
  805. }
  806. .plan .plan-item .top-text {
  807. height: 76rpx;
  808. padding: 0 20rpx;
  809. font-size: 28rpx;
  810. font-family: PingFangSC-Medium, PingFang SC;
  811. font-weight: 500;
  812. color: #333333;
  813. }
  814. .plan .plan-item .top-text text {
  815. font-size: 28rpx;
  816. font-family: PingFangSC-Medium, PingFang SC;
  817. font-weight: 500;
  818. color: #333333;
  819. }
  820. .plan .plan-item .top-text .plan-process {
  821. font-size: 28rpx;
  822. font-family: PingFangSC-Medium, PingFang SC;
  823. font-weight: 500;
  824. color: #FA7D22;
  825. }
  826. .prites {
  827. width: 160rpx;
  828. height: 160rpx;
  829. }
  830. .plan .plan-item .plan-item-guide-img {
  831. width: 100%;
  832. display: block;
  833. }
  834. .plan .plan-item .bottom-box {
  835. /* width: 100%; */
  836. border-radius: 24rpx;
  837. background-color: #fff;
  838. }
  839. .plan .bottom-box .sum {
  840. font-size: 80rpx;
  841. font-family: DINCondensed-Bold, DINCondensed;
  842. font-weight: bold;
  843. color: #FA7D22;
  844. }
  845. .plan .bottom-box .text {
  846. font-size: 24rpx;
  847. font-family: PingFang-SC-Medium, PingFang-SC;
  848. font-weight: 500;
  849. color: #666666;
  850. }
  851. .plan-scroll-x {
  852. padding: 0 12rpx;
  853. }
  854. .plan-scroll-x image {
  855. width: 140rpx;
  856. height: 140rpx;
  857. margin-right: 20rpx;
  858. background-color: #FA7D22;
  859. flex-shrink: 0;
  860. border-radius: 20rpx;
  861. }
  862. .project-item {
  863. margin-bottom: 20rpx;
  864. }
  865. .project-item image {
  866. height: 300rpx;
  867. width: 100%;
  868. border-radius: 24rpx;
  869. }
  870. .article text {
  871. font-family: PingFang-SC-Medium, PingFang-SC;
  872. font-weight: 500;
  873. }
  874. .article-item {
  875. background: #FFFFFF;
  876. border-radius: 24rpx;
  877. /* padding-left: 40rpx; */
  878. }
  879. .article .left {
  880. height: 300rpx;
  881. width: 300rpx;
  882. margin-right: 20rpx;
  883. }
  884. .article .left image {
  885. width: 166rpx;
  886. height: 166rpx;
  887. margin-bottom: 14rpx;
  888. /* background-color: yellow; */
  889. }
  890. .article .right-item image {
  891. width: 80rpx;
  892. height: 80rpx;
  893. }
  894. .article .right .article-item {
  895. padding-left: 40rpx;
  896. }
  897. .invite {
  898. margin-top: 32rpx;
  899. }
  900. .invite .invite-title {
  901. margin-left: 10rpx;
  902. font-size: 36rpx;
  903. font-family: PingFangSC-Semibold, PingFang SC;
  904. font-weight: 600;
  905. color: #333333;
  906. line-height: 50rpx;
  907. }
  908. .invite .invite-banner {
  909. margin-top: 20rpx;
  910. display: block;
  911. width: 100%;
  912. height: 300rpx;
  913. }
  914. /* <view>
  915. <view class="title flex-align-center">
  916. <text class="title-text flex-align-center">打卡活动</text>
  917. </view>
  918. <view class="carding">
  919. <view class="top">
  920. <view class="title">免费领取菲洛嘉产品</view>
  921. <image class="img"></image>
  922. </view>
  923. <view class="carding_content">
  924. <view class="item">
  925. <image class="status_img"></image>
  926. <view class="carding_number">几号</view>
  927. </view>
  928. </view>
  929. <view class="viewData">*体验项目累计6天/月</view>
  930. </view>
  931. </view> */
  932. .carding {
  933. width: 690rpx;
  934. height: 300rpx;
  935. background: #FFFFFF;
  936. border-radius: 24rpx;
  937. }
  938. .carding .top {
  939. display: flex;
  940. align-items: center;
  941. width: 100%;
  942. height: 80rpx;
  943. }
  944. .carding .top .title {
  945. margin-left: 20rpx;
  946. font-size: 28rpx;
  947. font-weight: 400;
  948. line-height: 80rpx;
  949. color: #333333;
  950. flex: 1;
  951. }
  952. .carding .top .img {
  953. margin-right: 20rpx;
  954. width: 56rpx;
  955. height: 56rpx;
  956. }
  957. .carding_content {
  958. margin-top: 16rpx;
  959. width: 590rpx;
  960. margin-left: 50rpx;
  961. display: flex;
  962. align-items: center;
  963. position: relative;
  964. }
  965. .carding_item {
  966. z-index: 11;
  967. margin-right: 31rpx;
  968. width: 72rpx;
  969. display: flex;
  970. flex-direction: column;
  971. align-items: center;
  972. justify-content: center;
  973. }
  974. .carding__img {
  975. width: 72rpx;
  976. height: 72rpx;
  977. }
  978. .carding_number {
  979. margin-top: 5rpx;
  980. font-size: 24rpx;
  981. font-weight: 400;
  982. color: #333333;
  983. }
  984. .viewData {
  985. margin-top: 20rpx;
  986. width: 100%;
  987. height: 50rpx;
  988. text-align: center;
  989. line-height: 50rpx;
  990. font-size: 24rpx;
  991. font-weight: 400;
  992. color: #999999;
  993. }
  994. .line_show {
  995. margin-left: 10rpx;
  996. z-index: 8;
  997. position: absolute;
  998. width: 534rpx;
  999. height: 4rpx;
  1000. background: #F9DB55;
  1001. top: 36rpx;
  1002. }
  1003. /* <view class="carding_content">
  1004. <view class="carding_item">
  1005. <image class="carding__img"></image>
  1006. <view class="carding_number">几号</view>
  1007. </view>
  1008. </view> */
  1009. /* ================================================= */
  1010. .use-popup {
  1011. width: 640rpx;
  1012. height: 598rpx;
  1013. background: #FFFFFF;
  1014. border-radius: 40rpx;
  1015. padding: 60rpx 48rpx;
  1016. box-sizing: border-box;
  1017. position: relative;
  1018. /* justify-content: center; */
  1019. /* justify-content: space-evenly; */
  1020. }
  1021. .use-popup .close-img {
  1022. width: 56rpx;
  1023. height: 56rpx;
  1024. /* background: red; */
  1025. position: absolute;
  1026. top: 16rpx;
  1027. right: 16rpx;
  1028. }
  1029. .use-popup .title {
  1030. /* margin-top: 60rpx; */
  1031. font-size: 36rpx;
  1032. font-family: PingFangSC-Medium, PingFang SC;
  1033. font-weight: 500;
  1034. color: #000000;
  1035. }
  1036. .use-popup .text-cotent {
  1037. /* background-color: red; */
  1038. overflow-y: scroll;
  1039. text-align: left;
  1040. /* height: 100%; */
  1041. }
  1042. .title_guild {
  1043. margin-bottom: 30rpx;
  1044. width: 520rpx;
  1045. text-align: center;
  1046. font-size: 36rpx;
  1047. font-weight: 500;
  1048. color: #000000;
  1049. }
  1050. .inText {
  1051. margin-top: 20rpx;
  1052. width: 540rpx;
  1053. font-size: 28rpx;
  1054. font-weight: 400;
  1055. color: #000000;
  1056. line-height: 40rpx;
  1057. }
  1058. .skin-popup .wux-landscape__inner {
  1059. padding: 0 !important;
  1060. }
  1061. .skin-popup .popup-index--wux-popup {
  1062. width: 650rpx !important;
  1063. max-width: 650rpx !important;
  1064. }
  1065. /* =============新用户需求============ */
  1066. .onTag {
  1067. margin-top: 20px;
  1068. width: 100%;
  1069. display: flex;
  1070. align-items: center;
  1071. justify-content: center;
  1072. }
  1073. .onTag-index {
  1074. width: 12rpx;
  1075. height: 12rpx;
  1076. background: #FFFFFF;
  1077. margin-right: 12rpx;
  1078. border-radius: 12rpx;
  1079. }
  1080. .onTag-index-select {
  1081. border-radius: 12rpx;
  1082. width: 12rpx;
  1083. height: 12rpx;
  1084. background: #999999;
  1085. margin-right: 12rpx;
  1086. }
  1087. /* <view class="couponCard"></view>
  1088. <view class="getNow"></view> */
  1089. /* <view class="onTag">
  1090. <view wx:for="{{3}}" wx:key="*this" class="onTag-index"></view>
  1091. </view> */
  1092. /* <view class="newAcountText">新用户专享</view>
  1093. <view class="couponCard">修丽可项目</view>
  1094. <view class="getNow">立即领取</view> */
  1095. .newAcountText {
  1096. width: 100%;
  1097. text-align: center;
  1098. position: absolute;
  1099. bottom: 324rpx;
  1100. font-size: 44rpx;
  1101. color: #FFFCF7;
  1102. }
  1103. .couponCard {
  1104. width: 100%;
  1105. text-align: center;
  1106. position: absolute;
  1107. bottom: 178rpx;
  1108. font-weight: 500;
  1109. font-size: 44rpx;
  1110. }
  1111. .colorShowLike {
  1112. color: #CC5D00;
  1113. }
  1114. .colorShowLikeGet {
  1115. color: #A84C01;
  1116. }
  1117. .colorVFace {
  1118. color: #AF6E0A;
  1119. }
  1120. .colorVFaceGet {
  1121. color: #925900;
  1122. }
  1123. .getNow {
  1124. width: 100%;
  1125. text-align: center;
  1126. position: absolute;
  1127. font-size: 46rpx;
  1128. font-weight: 500;
  1129. bottom: 32rpx;
  1130. }
  1131. .scape-block {
  1132. background: #FFFFFF;
  1133. position: relative;
  1134. }
  1135. .scape-block .close {
  1136. position: absolute;
  1137. right: 16rpx;
  1138. top: 16rpx;
  1139. width: 56rpx;
  1140. height: 56rpx;
  1141. }
  1142. .scape-block .close image {
  1143. width: 100%;
  1144. height: 100%;
  1145. }
  1146. .van-center-enter-to {
  1147. padding: 80rpx 48rpx 0 48rpx;
  1148. width: 640rpx;
  1149. height: 556rpx;
  1150. }
  1151. .loading {
  1152. /* margin-top: 80rpx; */
  1153. position: relative;
  1154. left: 50%;
  1155. transform: translateX(-50%);
  1156. width: 240rpx;
  1157. height: 240rpx;
  1158. }
  1159. .loading image {
  1160. width: 100%;
  1161. height: 100%;
  1162. }
  1163. .matching-tips {
  1164. margin-top: 50rpx;
  1165. font-size: 28rpx;
  1166. font-family: PingFangSC-Regular, PingFang SC;
  1167. font-weight: 400;
  1168. color: #000000;
  1169. line-height: 40rpx;
  1170. text-align: center;
  1171. }
  1172. /* 悬浮图标 */
  1173. .suspend {
  1174. width: 140rpx;
  1175. height: 140rpx;
  1176. position: fixed;
  1177. left: 20rpx;
  1178. bottom: 50rpx;
  1179. z-index: 1;
  1180. }
  1181. .suspend image {
  1182. width: 100%;
  1183. height: 100%;
  1184. }
  1185. /* 十月一活动弹窗 */
  1186. .activePop {
  1187. width: 490rpx;
  1188. height: 546rpx;
  1189. }
  1190. .activePop image {
  1191. width: 100%;
  1192. height: 100%;
  1193. }
  1194. .activePopBox {
  1195. margin-left: 20rpx;
  1196. margin-top: 40rpx;
  1197. }