index.wxss 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518
  1. @charset "UTF-8";
  2. ::-webkit-scrollbar {
  3. width: 0;
  4. height: 0;
  5. color: transparent;
  6. }
  7. .mt120 {
  8. margin-top: 120rpx;
  9. }
  10. .swipe {
  11. height: 320rpx;
  12. margin-bottom: 20rpx;
  13. }
  14. .swiper-content {
  15. width: 750rpx;
  16. height: 320rpx;
  17. border-radius: 12rpx;
  18. }
  19. .swiper-content swiper-item {
  20. border-radius: 12rpx;
  21. margin-right: 20rpx;
  22. display: flex;
  23. justify-content: flex-start;
  24. }
  25. .swiper-content swiper-item:last-child {
  26. margin: 0;
  27. }
  28. .swiper-content .banner {
  29. width: 710rpx;
  30. height: 320rpx;
  31. /* margin-right: 20rpx; */
  32. margin: 0 20rpx;
  33. display: block;
  34. border-radius: 12rpx;
  35. position: relative;
  36. overflow: hidden;
  37. }
  38. .swiper-content .banner .banner-img {
  39. width: 710rpx;
  40. height: 320rpx;
  41. border-radius: 12rpx;
  42. display: block;
  43. overflow: hidden;
  44. }
  45. .active-item {
  46. position: relative;
  47. width: 750rpx;
  48. height: 288rpx;
  49. margin-bottom: 10rpx;
  50. }
  51. .active-item .list-item-tag-content {
  52. position: absolute;
  53. left: 300rpx;
  54. top: 0;
  55. z-index: 9;
  56. display: flex;
  57. flex-direction: column;
  58. align-items: flex-start;
  59. padding-top: 20rpx;
  60. pointer-events: none;
  61. }
  62. .active-item .list-item-tag-content .empty-1 {
  63. height: 32rpx;
  64. width: 400rpx;
  65. margin-bottom: 12rpx;
  66. margin-top: 10rpx;
  67. }
  68. .active-item .list-item-tag-content .empty-2 {
  69. width: 400rpx;
  70. height: 26rpx;
  71. margin-bottom: 12rpx;
  72. }
  73. .active-item .list-item-tag-content .list-item-count-down {
  74. white-space: nowrap;
  75. /* padding: 0 8rpx; */
  76. height: 28rpx;
  77. border-radius: 28rpx;
  78. /* border: 1rpx solid #ff5344; */
  79. color: #f78076;
  80. text-align: center;
  81. font-size: 24rpx;
  82. line-height: 24rpx;
  83. display: flex;
  84. justify-content: center;
  85. align-items: center;
  86. margin-right: 8rpx;
  87. font-weight: 500;
  88. }
  89. .active-item .list-item-tag-content .list-item-count-down em {
  90. margin: 0 4rpx 0 0;
  91. }
  92. .active-item .list-item-tag-content .list-item-count-down span {
  93. margin: 0;
  94. }
  95. .active-item .list-item-tag-content .tag {
  96. width: 52rpx;
  97. height: 22rpx;
  98. font-size: 20rpx;
  99. border: 1rpx solid #ff5344;
  100. color: #ff5344;
  101. margin-right: 8rpx;
  102. line-height: 22rpx;
  103. border-radius: 22rpx;
  104. white-space: nowrap;
  105. display: flex;
  106. justify-content: center;
  107. align-items: center;
  108. vertical-align: middle;
  109. }
  110. .active-item .list-item-tag-content .tag.hidden {
  111. display: none;
  112. }
  113. .active-item .list-item-tag-content .tag-green {
  114. color: #4ab089;
  115. border-color: #4ab089;
  116. }
  117. .goods-skeleton-content {
  118. position: relative;
  119. z-index: 1;
  120. }
  121. .goods-skeleton-content .goods-skeleton-slogan-top-msg {
  122. width: 690rpx;
  123. height: 80rpx;
  124. border-radius: 80rpx;
  125. padding: 0 30rpx;
  126. display: flex;
  127. align-items: center;
  128. margin: 0 auto 40rpx;
  129. background: #fff9f4;
  130. }
  131. .goods-skeleton-content .goods-skeleton-slogan-top-msg view {
  132. width: 300rpx;
  133. height: 24rpx;
  134. background: #e4e4e4;
  135. }
  136. .goods-skeleton-content .goods-skeleton-slogan {
  137. height: 32rpx;
  138. width: 336rpx;
  139. margin: 0 auto 50rpx;
  140. background: #f7f7f7;
  141. }
  142. .goods-skeleton-content .goods-skeleton-swipe-box {
  143. width: 750rpx;
  144. height: 240rpx;
  145. margin-bottom: 40rpx;
  146. }
  147. .goods-skeleton-content .goods-skeleton-swipe-item {
  148. width: 670rpx;
  149. height: 240rpx;
  150. border-radius: 12rpx;
  151. background: #f7f7f7;
  152. margin: 0 auto;
  153. }
  154. .goods-skeleton-content .goods-skeleton {
  155. width: 710rpx;
  156. border-radius: 20rpx;
  157. background: #fff;
  158. box-shadow: 0 10rpx 60rpx rgba(0, 0, 0, 0.1);
  159. margin: 0 auto 40rpx;
  160. overflow: hidden;
  161. }
  162. .goods-skeleton-content .goods-skeleton .goods-img {
  163. width: 710rpx;
  164. height: 352rpx;
  165. display: block;
  166. }
  167. .goods-skeleton-content .goods-skeleton .goods-img image {
  168. width: 100%;
  169. height: 100%;
  170. }
  171. .goods-skeleton-content .goods-skeleton .text-content {
  172. box-sizing: border-box;
  173. padding: 24rpx 30rpx;
  174. height: 176rpx;
  175. }
  176. .goods-skeleton-content .goods-skeleton .text-content .title {
  177. width: 400rpx;
  178. height: 32rpx;
  179. background: #f7f7f7;
  180. margin-bottom: 16rpx;
  181. }
  182. .goods-skeleton-content .goods-skeleton .text-content .desc {
  183. width: 600rpx;
  184. height: 24rpx;
  185. background: #f7f7f7;
  186. margin-bottom: 16rpx;
  187. }
  188. .goods-skeleton-content .goods-skeleton .text-content .desc2 {
  189. width: 560rpx;
  190. height: 44rpx;
  191. background: #f7f7f7;
  192. }
  193. page {
  194. background: #fff;
  195. }
  196. .router-hover {
  197. opacity: 1;
  198. }
  199. .list-content {
  200. background: #fff;
  201. z-index: 1;
  202. position: relative;
  203. }
  204. .list-content .rush-list-title {
  205. width: 336rpx;
  206. height: 88rpx;
  207. display: block;
  208. margin: 0 auto 20rpx;
  209. }
  210. .rush-list-box {
  211. position: relative;
  212. min-height: 1300rpx;
  213. }
  214. .first-screen {
  215. background: #fff;
  216. padding-bottom: 48rpx;
  217. }
  218. .header-content {
  219. width: 750rpx;
  220. position: relative;
  221. margin-bottom: 20rpx;
  222. }
  223. .header-content .header-bg {
  224. width: 100%;
  225. height: 340rpx;
  226. position: absolute;
  227. left: 0;
  228. top: 0;
  229. }
  230. .header-content .location {
  231. display: flex;
  232. justify-content: space-around;
  233. padding: 20rpx 10rpx 0;
  234. color: #fff;
  235. position: relative;
  236. box-sizing: border-box;
  237. }
  238. .header-content .location .community-title {
  239. width: 560rpx;
  240. font-size: 40rpx;
  241. line-height: 40rpx;
  242. height: 40rpx;
  243. padding-top: 6rpx;
  244. display: flex;
  245. align-items: center;
  246. font-weight: 500;
  247. position: relative;
  248. }
  249. .header-content .location .community-title span {
  250. line-height: 56rpx;
  251. position: absolute;
  252. max-width: 100%;
  253. left: 0;
  254. top: -8rpx;
  255. display: flex;
  256. align-items: baseline;
  257. overflow: hidden;
  258. text-overflow: ellipsis;
  259. white-space: nowrap;
  260. }
  261. .header-content .location .community-title image {
  262. width: 10rpx;
  263. height: 18rpx;
  264. margin-left: 4rpx;
  265. }
  266. .header-content .location .community-change {
  267. font-size: 24rpx;
  268. margin-left: 30rpx;
  269. /* color: rgba(255, 255, 255, 0.8); */
  270. }
  271. .header-content .location .community-address {
  272. font-size: 24rpx;
  273. line-height: 30rpx;
  274. width: 516rpx;
  275. display: -webkit-box;
  276. -webkit-box-orient: vertical;
  277. -webkit-line-clamp: 2;
  278. overflow: hidden;
  279. text-overflow: initial;
  280. white-space: normal;
  281. margin-top: 24rpx;
  282. }
  283. .header-content .location .location-right {
  284. width: 72rpx;
  285. display: flex;
  286. flex-direction: column;
  287. justify-content: center;
  288. align-items: center;
  289. margin-top: -10rpx;
  290. }
  291. .header-content .location .location-right .img {
  292. width: 70rpx;
  293. height: 70rpx;
  294. border-radius: 70rpx;
  295. margin-bottom: 8rpx;
  296. }
  297. .header-content .location .location-right text {
  298. font-size: 24rpx;
  299. width: 140rpx;
  300. text-align: center;
  301. overflow: hidden;
  302. text-overflow: ellipsis;
  303. white-space: nowrap;
  304. }
  305. .top-msg {
  306. width: 690rpx;
  307. height: 80rpx;
  308. display: flex;
  309. align-items: center;
  310. padding: 0 30rpx;
  311. box-sizing: border-box;
  312. color: #ff5344;
  313. font-size: 24rpx;
  314. line-height: 24rpx;
  315. margin: 0 auto 20rpx;
  316. background: #fff9f4;
  317. border-radius: 40rpx;
  318. }
  319. .top-msg image {
  320. width: 42rpx;
  321. height: 26rpx;
  322. margin-right: 20rpx;
  323. margin-top: -4rpx;
  324. line-height: 80rpx;
  325. }
  326. .notice-swipe {
  327. flex: 1;
  328. height: 80rpx;
  329. }
  330. .notice-swipe-item {
  331. line-height: 80rpx;
  332. overflow: hidden;
  333. text-overflow: ellipsis;
  334. white-space: nowrap;
  335. }
  336. .list-title {
  337. display: block;
  338. margin: 0 auto 12rpx;
  339. width: 336rpx;
  340. height: 116rpx;
  341. }
  342. .comming-list {
  343. padding: 20rpx 24rpx;
  344. }
  345. .comming-list .comming-spu-item {
  346. width: 340rpx;
  347. /* height: 526rpx; */
  348. height: 460rpx;
  349. margin-bottom: 20rpx;
  350. display: inline-block;
  351. }
  352. .comming-list .comming-spu-item:nth-child(odd) {
  353. margin-right: 20rpx;
  354. }
  355. .sticky-title {
  356. display: flex;
  357. justify-content: center;
  358. background: #fff;
  359. height: 160rpx;
  360. position: relative;
  361. z-index: 20;
  362. }
  363. .sticky-title.sticky {
  364. position: fixed;
  365. top: 0;
  366. left: 0;
  367. width: 100%;
  368. height: 80rpx;
  369. line-height: 80rpx;
  370. border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  371. }
  372. .sticky-title.sticky .tab-btn {
  373. margin-top: 0;
  374. }
  375. .sticky-title .tab-btn {
  376. width: 112rpx;
  377. height: 80rpx;
  378. line-height: 80rpx;
  379. margin: 0 30rpx;
  380. color: #666;
  381. font-size: 28rpx;
  382. position: relative;
  383. }
  384. .sticky-title .tab-btn-active {
  385. color: #ff5344;
  386. line-height: 80rpx;
  387. }
  388. .sticky-title .tab-btn-active:after {
  389. content: '';
  390. width: 112rpx;
  391. height: 6rpx;
  392. border-radius: 6rpx;
  393. background: linear-gradient(to right, #fe655c, #fa875b);
  394. position: absolute;
  395. bottom: 0;
  396. left: 0;
  397. box-shadow: 0 4rpx 8rpx rgba(255, 89, 9, 0.25);
  398. }
  399. .none-rush-list {
  400. display: flex;
  401. flex-direction: column;
  402. align-items: center;
  403. justify-content: center;
  404. padding-bottom: 140rpx;
  405. padding-top: 140rpx;
  406. }
  407. .none-rush-list .img-block {
  408. width: 240rpx;
  409. height: 240rpx;
  410. margin-bottom: 30rpx;
  411. }
  412. .none-rush-list .h1 {
  413. font-size: 32rpx;
  414. line-height: 32rpx;
  415. color: #444;
  416. margin-bottom: 20rpx;
  417. }
  418. .none-rush-list .h2 {
  419. font-size: 24rpx;
  420. line-height: 24rpx;
  421. color: #aaa;
  422. }
  423. .slogan {
  424. height: 120rpx;
  425. padding-bottom: 40rpx;
  426. display: flex;
  427. align-items: center;
  428. justify-content: center;
  429. }
  430. .slogan image {
  431. width: 250rpx;
  432. height: 56rpx;
  433. }
  434. .back-top {
  435. bottom: 150rpx;
  436. right: 30rpx;
  437. width: 80rpx;
  438. height: 80rpx;
  439. position: fixed;
  440. background: rgba(0, 0, 0, 0.5);
  441. border-radius: 50%;
  442. color: #fff;
  443. text-align: center;
  444. transform: translate3d(0, 100%, 0);
  445. opacity: 0;
  446. transition: all 0.3s;
  447. }
  448. .back-top image {
  449. margin-top: 22%;
  450. width: 60%;
  451. height: 60%;
  452. }
  453. .back-top.show-icon {
  454. transform: translate3d(0, 0, 0);
  455. opacity: 1;
  456. }
  457. .fixed-share {
  458. display: inline-block;
  459. bottom: 22%;
  460. right: 30rpx;
  461. width: 80rpx;
  462. height: 80rpx;
  463. position: fixed;
  464. background: rgba(0, 0, 0, 0.5);
  465. border-radius: 50%;
  466. text-align: center;
  467. color: #fff;
  468. box-sizing: border-box;
  469. font-size: 20rpx;
  470. padding: 10rpx;
  471. line-height: 1.2;
  472. z-index: 100;
  473. }
  474. .fixed-share image {
  475. width: 50%;
  476. height: 50%;
  477. }
  478. .i-router-hover {
  479. opacity: 1;
  480. }
  481. .spu {
  482. width: 100%;
  483. display: block;
  484. }
  485. .spu .img-class {
  486. width: 240rpx;
  487. height: 240rpx;
  488. border-radius: 10rpx;
  489. }
  490. .spu .mask {
  491. background: rgba(255, 255, 255, 0.5);
  492. width: 240rpx;
  493. height: 240rpx;
  494. position: absolute;
  495. left: 20rpx;
  496. top: 20rpx;
  497. }
  498. .spu .act-end {
  499. position: absolute;
  500. height: 60rpx;
  501. border-radius: 10rpx;
  502. background: rgba(0, 0, 0, 0.5);
  503. color: #fff;
  504. font-size: 28rpx;
  505. text-align: center;
  506. line-height: 60rpx;
  507. left: 70rpx;
  508. top: 112rpx;
  509. padding: 0 12rpx;
  510. }
  511. .spu .spu-content {
  512. background: #fff;
  513. width: 710rpx;
  514. border-radius: 20rpx;
  515. overflow: hidden;
  516. position: relative;
  517. box-shadow: 0 0 40rpx rgba(0, 0, 0, 0.05);
  518. margin: 0 auto 20rpx;
  519. display: flex;
  520. padding: 20rpx;
  521. box-sizing: border-box;
  522. }
  523. .spu .spu-content.disabled {
  524. opacity: 0.6;
  525. }
  526. .spu .spu-content .item-left {
  527. width: 240rpx;
  528. height: 240rpx;
  529. position: relative;
  530. }
  531. .spu .spu-content .item-right {
  532. box-sizing: border-box;
  533. margin-left: 20rpx;
  534. display: flex;
  535. flex-direction: column;
  536. justify-content: space-between;
  537. }
  538. .spu .spu-content .item-right .spu-title {
  539. color: #222;
  540. font-size: 30rpx;
  541. height: 32rpx;
  542. width: 400rpx;
  543. margin-bottom: 12rpx;
  544. margin-top: 10rpx;
  545. font-weight: 500;
  546. position: relative;
  547. }
  548. .spu .spu-content .item-right .spu-title span {
  549. width: 100%;
  550. height: 40rpx;
  551. position: absolute;
  552. left: 0;
  553. top: -4rpx;
  554. line-height: 40rpx;
  555. overflow: hidden;
  556. text-overflow: ellipsis;
  557. white-space: nowrap;
  558. color: #000;
  559. font-weight: 500;
  560. }
  561. .spu .spu-content .item-right .spu-tag {
  562. padding-left: 196rpx;
  563. margin-bottom: 16rpx;
  564. display: flex;
  565. height: 22rpx;
  566. }
  567. .spu .spu-content .item-right .spu-desc {
  568. font-size: 26rpx;
  569. line-height: 26rpx;
  570. color: #999;
  571. position: relative;
  572. width: 400rpx;
  573. height: 26rpx;
  574. margin-bottom: 12rpx;
  575. }
  576. .spu .spu-content .item-right .spu-desc em {
  577. width: 100%;
  578. height: 32rpx;
  579. position: absolute;
  580. left: 0;
  581. top: -2rpx;
  582. line-height: 32rpx;
  583. overflow: hidden;
  584. text-overflow: ellipsis;
  585. white-space: nowrap;
  586. }
  587. .spu .spu-content .item-right .spu-price {
  588. display: flex;
  589. align-items: flex-end;
  590. font-size: 24rpx;
  591. line-height: 24rpx;
  592. overflow: hidden;
  593. margin-bottom: 10rpx;
  594. }
  595. .spu .spu-content .item-right .spu-price .sale-price {
  596. color: #ff5344;
  597. margin-right: 12rpx;
  598. }
  599. .spu .spu-content .item-right .spu-price .sale-price span {
  600. font-size: 44rpx;
  601. line-height: 40rpx;
  602. margin: 0;
  603. font-weight: bold;
  604. }
  605. .spu .spu-content .item-right .spu-price .market-price {
  606. text-decoration: line-through;
  607. color: #999;
  608. margin-right: 30rpx;
  609. }
  610. .spu .spu-content .item-right .spu-count {
  611. font-size: 20rpx;
  612. line-height: 20rpx;
  613. color: #999;
  614. margin-bottom: 32rpx;
  615. }
  616. .spu .spu-content .add-cart {
  617. width: 68rpx;
  618. height: 68rpx;
  619. padding: 0;
  620. margin: 0;
  621. position: absolute;
  622. right: 28rpx;
  623. bottom: 20rpx;
  624. display: flex;
  625. align-items: center;
  626. justify-content: center;
  627. }
  628. .spu .spu-content .add-cart image {
  629. width: 54rpx;
  630. height: 54rpx;
  631. display: block;
  632. }
  633. .spu .spu-content .spu-active {
  634. position: absolute;
  635. left: 0;
  636. bottom: 16rpx;
  637. z-index: 9;
  638. display: flex;
  639. flex-direction: column-reverse;
  640. align-items: flex-start;
  641. }
  642. .spu .spu-content .spu-active .tag {
  643. background: linear-gradient(to right, #ff5041, #ff994b);
  644. border-radius: 0 14rpx 14rpx 0;
  645. padding: 0 12rpx;
  646. height: 24rpx;
  647. font-size: 18rpx;
  648. line-height: 24rpx;
  649. color: #fff;
  650. display: inline-block;
  651. align-items: center;
  652. justify-content: center;
  653. margin-bottom: 8rpx;
  654. width: auto;
  655. }
  656. .spu .spu-content .spu-active .tag-green {
  657. background: linear-gradient(to left, #46c8d0, #29ba9a);
  658. }
  659. .img-content {
  660. position: relative;
  661. }
  662. .img-def {
  663. position: absolute !important;
  664. transition: opacity 0.6s;
  665. }
  666. .opacity {
  667. opacity: 0;
  668. }
  669. .show-img {
  670. opacity: 1;
  671. }
  672. .auth-box {
  673. position: absolute;
  674. top: 0;
  675. left: 0;
  676. }
  677. .tabs {
  678. margin-bottom: 20rpx;
  679. background-color: #fff;
  680. }
  681. .tabs.sticky {
  682. position: fixed;
  683. display: flex;
  684. top: 0;
  685. left: 0;
  686. height: 80rpx;
  687. line-height: 80rpx;
  688. width: 100vw;
  689. border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  690. z-index: 99;
  691. }
  692. @keyframes opacity {
  693. from {
  694. opacity: 0;
  695. }
  696. to {
  697. opacity: 1;
  698. }
  699. }
  700. .community-content {
  701. width: 580rpx;
  702. background: #fff;
  703. border-radius: 24rpx;
  704. position: relative;
  705. display: flex;
  706. flex-direction: column;
  707. align-items: center;
  708. justify-content: flex-start;
  709. margin: 60px auto;
  710. overflow: hidden;
  711. z-index: 1001;
  712. }
  713. .community-content-title {
  714. position: relative;
  715. line-height: 2.4;
  716. background-color: #f75451;
  717. color: #fff;
  718. font-size: 36rpx;
  719. width: 100%;
  720. text-align: center;
  721. }
  722. .community-content-title image {
  723. position: absolute;
  724. right: 0;
  725. top: 0;
  726. width: 42rpx;
  727. height: 42rpx;
  728. padding: 23rpx;
  729. }
  730. .community-content-change {
  731. color: #44abf7;
  732. margin-left: 15rpx;
  733. }
  734. .community-content-tip {
  735. color: #666;
  736. font-size: 32rpx;
  737. line-height: 1.6;
  738. width: 514rpx;
  739. margin-top: 20rpx;
  740. }
  741. .community-content-name {
  742. color: #f75451;
  743. font-size: 30rpx;
  744. padding: 0 30rpx;
  745. }
  746. .community-content-btn {
  747. text-align: center;
  748. width: 432rpx;
  749. height: 72rpx;
  750. color: #fff;
  751. background: #f75451;
  752. font-size: 30rpx;
  753. line-height: 72rpx;
  754. border-radius: 12rpx;
  755. margin: 40rpx 0 30rpx;
  756. }
  757. /* 添加我的小程序提示 S */
  758. .miniAppTip {
  759. position: relative;
  760. z-index: 100;
  761. }
  762. .add-myapp {
  763. position: fixed;
  764. right: 10rpx;
  765. top: 10rpx;
  766. color: #333;
  767. font-size: 22rpx;
  768. background-color: #fbe94e;
  769. padding: 15rpx 20rpx;
  770. border-radius: 30rpx;
  771. transition: all 400ms ease-in;
  772. }
  773. .add-myapp:after {
  774. border-left: 5px solid transparent;
  775. border-right: 5px solid transparent;
  776. border-bottom: 5px solid #fbe94e;
  777. content: "";
  778. position: absolute;
  779. width: 0;
  780. height: 0;
  781. top: -5px;
  782. right: 132rpx;
  783. }
  784. .guide {
  785. position: fixed;
  786. left: 0;
  787. right: 0;
  788. top: 0;
  789. bottom: 0;
  790. background: rgba(0, 0, 0, 0.5);
  791. z-index: 1000;
  792. }
  793. .guide image {
  794. width: 100%;
  795. }
  796. /* 添加我的小程序提示 E */
  797. /* 列表类型二 S */
  798. .active-item-two {
  799. position: relative;
  800. width: 750rpx;
  801. margin-bottom: 10rpx;
  802. }
  803. .list-item-count-down.type-two {
  804. position: absolute;
  805. z-index: 10;
  806. top: 361rpx;
  807. right: 20rpx;
  808. color: #fff;
  809. font-size: 24rpx;
  810. background: #ff5344;
  811. height: 40rpx;
  812. line-height: 40rpx;
  813. border-radius: 8rpx 0 0 0;
  814. padding: 0 20rpx;
  815. }
  816. /* 列表类型二 E */
  817. /* 导航列表 S */
  818. .nav-list {
  819. margin: 30rpx 0 10rpx;
  820. display: flex;
  821. padding: 0 30rpx;
  822. flex-wrap: wrap;
  823. }
  824. .nav-list-item {
  825. width: 20%;
  826. color: #333;
  827. margin-bottom: 20rpx;
  828. }
  829. .nav-list-item .nav-list-img {
  830. width: 80rpx;
  831. height: 80rpx;
  832. margin: 0 auto;
  833. border-radius: 50%;
  834. }
  835. .nav-list-item .nav-list-text {
  836. text-align: center;
  837. margin-top: 8rpx;
  838. }
  839. /* 导航列表 E */
  840. /* sticky-content 20190115 Start */
  841. .sticky-content {
  842. background: #fff;
  843. padding-bottom: 14rpx;
  844. position: sticky;
  845. position: -webkit-sticky;
  846. z-index: 99;
  847. top: -80rpx;
  848. transition: top 0.3s;
  849. }
  850. .sticky-content.tab-nav-sticky {
  851. top: 0;
  852. }
  853. .sticky-content .tab-nav {
  854. height: 70rpx;
  855. display: flex;
  856. margin: 0 30rpx;
  857. border-bottom: 4rpx solid #fc4443;
  858. transition: all 0.3s linear;
  859. }
  860. .sticky-content .tab-nav .count-down-content {
  861. flex: 1;
  862. display: flex;
  863. justify-content: flex-end;
  864. align-items: center;
  865. color: #444;
  866. }
  867. .sticky-content .tab-nav .count-down-content em {
  868. font-size: 26rpx;
  869. }
  870. .sticky-content .tab-nav .count-down-content .count-down-left-text {
  871. font-size: 26rpx;
  872. }
  873. .sticky-content .tab-nav .count-down-content .count-down {
  874. height: 68rpx;
  875. line-height: 68rpx;
  876. color: #444;
  877. font-size: 26rpx;
  878. display: flex;
  879. align-items: center;
  880. flex: 1;
  881. }
  882. .sticky-content .tab-nav .count-down-content .count-down .item-time {
  883. width: 34rpx;
  884. height: 32rpx;
  885. line-height: 32rpx;
  886. color: #fff;
  887. text-align: center;
  888. background: #444;
  889. border-radius: 4rpx;
  890. padding: 0 2rpx;
  891. }
  892. .sticky-content .tab-nav .tab-nav-item {
  893. color: #6c6c6c;
  894. font-size: 26rpx;
  895. font-weight: bold;
  896. position: relative;
  897. z-index: 1;
  898. width: 190rpx;
  899. height: 70rpx;
  900. display: flex;
  901. align-items: center;
  902. justify-content: center;
  903. }
  904. .sticky-content .tab-nav .tab-nav-item image {
  905. width: 190rpx;
  906. height: 70rpx;
  907. position: absolute;
  908. left: 0;
  909. top: 0;
  910. }
  911. .sticky-content .tab-nav .tab-nav-item span {
  912. position: relative;
  913. }
  914. .sticky-content .tab-nav .tab-nav-item.active {
  915. color: #fff;
  916. z-index: 2;
  917. }
  918. .sticky-content .tab-nav .tab-nav-item:nth-child(1) span {
  919. margin-left: -10rpx;
  920. }
  921. .sticky-content .tab-nav .tab-nav-item:nth-child(2) {
  922. margin-left: -20rpx;
  923. }
  924. .sticky-content .tab-nav .tab-nav-item:nth-child(2) span {
  925. margin-left: 30rpx;
  926. }
  927. .sticky-content .category-list {
  928. margin-top: 20rpx;
  929. background-color: #fff;
  930. }
  931. .sticky-cate {
  932. background: #fff;
  933. padding-bottom: 14rpx;
  934. position: sticky;
  935. position: -webkit-sticky;
  936. top: 0;
  937. z-index: 99;
  938. }
  939. .sticky-cate .category-list {
  940. margin-top: 20rpx;
  941. background-color: #fff;
  942. }
  943. /* sticky-content End */
  944. /*分享begin*/
  945. .ui-mask {
  946. position: fixed;
  947. display: block;
  948. top: 0;
  949. left: 0;
  950. width: 100%;
  951. height: 100%;
  952. z-index: 999;
  953. background: rgba(0, 0, 0, 0.6);
  954. }
  955. .model-services {
  956. width: 100%;
  957. position: fixed;
  958. background-color: #fff;
  959. bottom: 0;
  960. z-index: 1000;
  961. color: #333;
  962. -webkit-transition: all 0.3s;
  963. transition: all 0.3s;
  964. -webkit-transform: translate(0, 100%);
  965. transform: translate(0, 100%);
  966. }
  967. .model-services.show {
  968. -webkit-transform: translate(0);
  969. transform: translate(0);
  970. }
  971. .model-services .model-services-title {
  972. font-size: 36rpx;
  973. text-align: center;
  974. height: 80rpx;
  975. line-height: 80rpx;
  976. border-bottom: 1px solid #f2f5f8;
  977. }
  978. .model-services .model-services-content {
  979. padding: 40rpx;
  980. }
  981. .model-services .model-services-content .service-item {
  982. margin-bottom: 20rpx;
  983. width: 50%;
  984. float: left;
  985. text-align: center;
  986. }
  987. .model-services .model-services-content .service-icon {
  988. width: 80rpx;
  989. display: inline-block;
  990. }
  991. .service-name {
  992. padding-left: 10rpx;
  993. }
  994. .cube-text {
  995. position: relative;
  996. width: 100%;
  997. height: 32rpx;
  998. line-height: 32rpx;
  999. color: #777;
  1000. margin-top: 5rpx;
  1001. font-size: 24rpx;
  1002. }
  1003. .none_btn {
  1004. border: none;
  1005. line-height: 38rpx;
  1006. padding: 0px;
  1007. }
  1008. button[plain] {
  1009. border: none;
  1010. }
  1011. .share-modal {
  1012. position: fixed;
  1013. left: 0;
  1014. right: 0;
  1015. top: 0;
  1016. bottom: 0;
  1017. background: rgba(0, 0, 0, 0.6);
  1018. z-index: 101;
  1019. transition: all 400ms ease-in;
  1020. }
  1021. .share-modal-content {
  1022. position: relative;
  1023. width: 70%;
  1024. top: 50%;
  1025. left: 15%;
  1026. transform: translateY(-50%);
  1027. z-index: 110;
  1028. }
  1029. .share-modal-img {
  1030. width: 100%;
  1031. height: 956rpx;
  1032. background: #f7f7f7;
  1033. }
  1034. .share-modal-img image {
  1035. width: 100%;
  1036. }
  1037. .share-modal-btn-list {
  1038. display: flex;
  1039. margin-top: 30rpx;
  1040. }
  1041. .share-modal-btn-item {
  1042. text-align: center;
  1043. flex: 1;
  1044. }
  1045. .share-modal .btn-icon {
  1046. width: 70rpx;
  1047. margin: 0 auto;
  1048. }
  1049. .share-modal .btn-text {
  1050. position: relative;
  1051. width: 100%;
  1052. height: 32rpx;
  1053. line-height: 32rpx;
  1054. color: #fff;
  1055. margin-top: 5rpx;
  1056. font-size: 24rpx;
  1057. }
  1058. /*分享end*/
  1059. .community-local {
  1060. width: 25rpx;
  1061. height: 24rpx;
  1062. margin-right: 8rpx;
  1063. }
  1064. /* 联系客服 */
  1065. .fixed-service {
  1066. display: inline-block;
  1067. bottom: 13%;
  1068. right: 30rpx;
  1069. width: 80rpx;
  1070. height: 80rpx;
  1071. position: fixed;
  1072. border-radius: 50%;
  1073. box-sizing: border-box;
  1074. z-index: 100;
  1075. padding: 0;
  1076. line-height: 1;
  1077. background-color: transparent;
  1078. }
  1079. .fixed-service::after {
  1080. border: 0;
  1081. }
  1082. .fixed-service image {
  1083. width: 80rpx;
  1084. height: 80rpx;
  1085. }
  1086. /* 搜索 S */
  1087. .search-bar {
  1088. padding: 12rpx 25rpx;
  1089. background-color: #fff;
  1090. margin-bottom: 20rpx;
  1091. }
  1092. .search-box {
  1093. background-color: #f0f0f0;
  1094. height: 56rpx;
  1095. line-height: 56rpx;
  1096. border-radius: 28rpx;
  1097. color: #acacac;
  1098. display: flex;
  1099. align-content: center;
  1100. }
  1101. .search-icon {
  1102. position: absolute;
  1103. left: 20rpx;
  1104. margin-left: 25rpx;
  1105. margin-right: 12rpx;
  1106. }
  1107. .search-icon image {
  1108. width: 36rpx;
  1109. height: 36rpx;
  1110. padding-top: 10rpx;
  1111. }
  1112. .search-box .ipt {
  1113. padding: 0 30rpx 0 60rpx;
  1114. line-height: 56rpx;
  1115. height: 56rpx;
  1116. width: 100%;
  1117. box-sizing: border-box;
  1118. }
  1119. /* 搜索 E */
  1120. .location-left {
  1121. display: flex;
  1122. flex-direction: column;
  1123. justify-content: space-around;
  1124. }
  1125. /* 新人优惠券 S */
  1126. .new-coupou {
  1127. position: fixed;
  1128. left: 0;
  1129. right: 0;
  1130. top: 0;
  1131. bottom: 0;
  1132. background: rgba(0, 0, 0, 0.3);
  1133. z-index: 999;
  1134. transition: all 400ms ease-in;
  1135. }
  1136. .new-coupou-content {
  1137. position: absolute;
  1138. left: 50%;
  1139. top: 50%;
  1140. width: 640rpx;
  1141. display: flex;
  1142. flex-direction: column;
  1143. justify-content: space-between;
  1144. align-items: center;
  1145. transform: translate(-50%, -50%);
  1146. }
  1147. .new-coupou-body {
  1148. flex: 1;
  1149. height: 830rpx;
  1150. width: 100%;
  1151. background: linear-gradient(to right, #fe655c, #fa875b);
  1152. border-radius: 20rpx;
  1153. box-sizing: border-box;
  1154. padding: 0 40rpx;
  1155. }
  1156. .new-coupou-foot {
  1157. padding: 40rpx 0;
  1158. }
  1159. .new-coupou-foot image {
  1160. width: 60rpx;
  1161. height: 60rpx;
  1162. }
  1163. .new-coupou-body-head {
  1164. height: 108rpx;
  1165. line-height: 108rpx;
  1166. text-align: center;
  1167. color: #fff;
  1168. font-size: 40rpx;
  1169. font-weight: bold;
  1170. }
  1171. .new-coupou-body-foot {
  1172. height: 122rpx;
  1173. }
  1174. .new-coupou-body-btn {
  1175. background: #f9d44f;
  1176. width: 100%;
  1177. text-align: center;
  1178. color: #c34f14;
  1179. font-size: 34rpx;
  1180. font-weight: bold;
  1181. line-height: 78rpx;
  1182. border-radius: 39rpx;
  1183. margin-top: 20rpx;
  1184. }
  1185. .preventTouchMove {
  1186. top: 0px;
  1187. left: 0px;
  1188. width: 100%;
  1189. height: 100%;
  1190. overflow: hidden;
  1191. position: fixed;
  1192. z-index: 0;
  1193. }
  1194. .new-coupou-item {
  1195. display: flex;
  1196. justify-content: space-between;
  1197. align-items: center;
  1198. background: #fff;
  1199. border-radius: 10rpx;
  1200. padding: 20rpx;
  1201. margin-bottom: 20rpx;
  1202. }
  1203. .new-coupou-title {
  1204. font-size: 32rpx;
  1205. color: #000;
  1206. }
  1207. .new-coupou-time {
  1208. font-size: 24rpx;
  1209. color: #fe655c;
  1210. margin-top: 10rpx;
  1211. }
  1212. .new-coupou-r {
  1213. text-align: center;
  1214. }
  1215. .new-coupou-price {
  1216. color: #fe655c;
  1217. font-size: 48rpx;
  1218. font-weight: bold;
  1219. }
  1220. .new-coupou-price text {
  1221. font-size: 24rpx;
  1222. font-weight: normal;
  1223. display: inline-block;
  1224. vertical-align: middle;
  1225. }
  1226. .new-coupou-use {
  1227. background: #fe655c;
  1228. border-radius: 20rpx;
  1229. color: #fff;
  1230. font-size: 22rpx;
  1231. padding: 5rpx 20rpx;
  1232. }
  1233. /* 新人优惠券 E */
  1234. .blank10 {
  1235. margin-bottom: 20rpx;
  1236. }
  1237. /* 复制信息 */
  1238. .copytext {
  1239. width: 640rpx;
  1240. background: #fff;
  1241. border-radius: 24rpx;
  1242. position: relative;
  1243. display: flex;
  1244. flex-direction: column;
  1245. align-items: center;
  1246. justify-content: flex-start;
  1247. margin: 0 auto;
  1248. overflow: hidden;
  1249. z-index: 1001;
  1250. }
  1251. .copytext-title {
  1252. width: 100%;
  1253. background-color: #f75451;
  1254. text-align: center;
  1255. color: #fff;
  1256. font-weight: bold;
  1257. font-size: 34rpx;
  1258. line-height: 100rpx;
  1259. margin-bottom: 30rpx;
  1260. }
  1261. .copytext-p {
  1262. width: 100%;
  1263. box-sizing: border-box;
  1264. padding: 5rpx 30rpx;
  1265. font-size: 30rpx;
  1266. }
  1267. .copytext-h3 {
  1268. width: 100%;
  1269. box-sizing: border-box;
  1270. padding: 5rpx 30rpx;
  1271. font-size: 32rpx;
  1272. font-weight: bold;
  1273. margin-top: 24rpx;
  1274. }
  1275. .copytext-content {
  1276. box-sizing: border-box;
  1277. height: 400rpx;
  1278. padding: 20rpx 30rpx 0;
  1279. }
  1280. .copytext-item {
  1281. line-height: 1.8;
  1282. }
  1283. .copytext-item text{
  1284. margin-left: 5px;
  1285. }
  1286. .copytext-close {
  1287. position: absolute;
  1288. width: 50rpx;
  1289. height: 50rpx;
  1290. top: 25rpx;
  1291. right: 30rpx;
  1292. }
  1293. .copytext-btn {
  1294. position: fixed;
  1295. right: 0;
  1296. bottom: 32%;
  1297. font-size: 20rpx;
  1298. color: #999;
  1299. z-index:100;
  1300. width: 80rpx;
  1301. line-height: 1.2;
  1302. border: 1px solid #999;
  1303. border-right: 0;
  1304. padding: 5rpx 15rpx 5rpx 20rpx;
  1305. border-radius: 40rpx 0 0 40rpx;
  1306. }