prod.wxss 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749
  1. page {
  2. background: #f4f4f4;
  3. height: 100%;
  4. }
  5. image {
  6. width: 100%;
  7. height: 100%;
  8. }
  9. .container {
  10. height: auto;
  11. padding-bottom: 110rpx;
  12. }
  13. .swiper-con {
  14. position: relative;
  15. }
  16. swiper {
  17. height: 750rpx;
  18. width: 100%;
  19. }
  20. swiper image {
  21. height: 750rpx;
  22. width: 100%;
  23. }
  24. .video-container {
  25. position: relative;
  26. display: flex;
  27. flex-direction: column;
  28. width: 100%;
  29. height: 750rpx;
  30. justify-content: center;
  31. align-items: center;
  32. background: #000;
  33. z-index: 10;
  34. }
  35. .video-container video {
  36. display: block;
  37. width: 100%;
  38. }
  39. .play-btn {
  40. position: absolute;
  41. left: 50%;
  42. bottom: 8%;
  43. padding: 2rpx;
  44. background: rgba(255, 255, 255, 0.75);
  45. border-radius: 50rpx;
  46. color: #000;
  47. font-size: 24rpx;
  48. text-align: center;
  49. transform: translateX(-50%);
  50. display: flex;
  51. justify-content: space-between;
  52. align-items: center;
  53. z-index: 5;
  54. }
  55. .play-icon {
  56. width: 50rpx;
  57. height: 50rpx;
  58. }
  59. .play-text {
  60. padding-right: 10rpx;
  61. margin: 0 10rpx;
  62. }
  63. .video-stop {
  64. padding: 2rpx 8rpx;
  65. }
  66. .video-index {
  67. z-index: 15;
  68. }
  69. .content{
  70. padding: 24rpx;
  71. background: #F6F6F6;
  72. /* background: linear-gradient( 180deg, #FFFFFF 0%, #F6F6F6 100%); */
  73. border-radius: 32rpx 32rpx 0rpx 0rpx;
  74. margin-top: -20rpx;
  75. position: relative;
  76. z-index: 2;
  77. }
  78. /** 商品信息 */
  79. .prod-info {
  80. padding: 20rpx;
  81. position: relative;
  82. background: #fff;
  83. border-radius: 16rpx;
  84. }
  85. .tit-wrap {
  86. position: relative;
  87. line-height: 32rpx;
  88. /* padding-right: 104rpx; */
  89. text-align: justify;
  90. }
  91. .prod-tit {
  92. line-height: 46rpx;
  93. font-size: 32rpx;
  94. color: #222222;
  95. padding-right: 20rpx;
  96. font-weight: bold;
  97. }
  98. .tit-wrap .col {
  99. position: absolute;
  100. top: -90rpx;
  101. right: 0;
  102. width: 80rpx;
  103. color: #666;
  104. font-size: 24rpx;
  105. padding-left: 20rpx;
  106. text-align: center;
  107. }
  108. .tit-wrap .col image {
  109. display: block;
  110. margin: auto;
  111. width: 40rpx;
  112. height: 40rpx;
  113. }
  114. .tit-wrap .col::after {
  115. content: "";
  116. display: block;
  117. width: 1px;
  118. height: auto;
  119. background: #f1f1f1;
  120. position: absolute;
  121. top: 0;
  122. bottom: 5px;
  123. left: 0;
  124. }
  125. .sales-p {
  126. background: #fff;
  127. line-height: 40rpx;
  128. color: #999;
  129. font-size: 28rpx;
  130. margin-top: 6rpx;
  131. margin-right: 104rpx;
  132. text-align: justify;
  133. }
  134. .prod-price {
  135. font-size: 30rpx;
  136. height: 100rpx;
  137. line-height: 100rpx;
  138. }
  139. .price {
  140. color: #e43130;
  141. font-size: 26rpx;
  142. font-weight: 600;
  143. margin-right: 30rpx;
  144. font-size: 48rpx;
  145. }
  146. .price-num {
  147. font-size: 48rpx;
  148. font-weight: 600;
  149. /* font-weight: 400; */
  150. }
  151. .sales {
  152. color: #999;
  153. }
  154. .share-icon {
  155. position: absolute;
  156. right: 50rpx;
  157. top: 50rpx;
  158. background: none;
  159. line-height: 40rpx;
  160. border: none;
  161. outline: none;
  162. box-shadow: 0;
  163. padding: 0;
  164. }
  165. .share-icon::after {
  166. border: none;
  167. }
  168. .share-icon image {
  169. width: 60rpx;
  170. height: 60rpx;
  171. }
  172. .share-text {
  173. font-size: 26rpx;
  174. color: #999;
  175. line-height: 30rpx;
  176. }
  177. /* 积分商品价格 */
  178. .integral-prod-price {
  179. display: inline-block;
  180. padding: 10rpx 0 40rpx;
  181. color: #e43130;
  182. font-size: 30rpx;
  183. }
  184. /** end 商品信息 */
  185. /* 商品促销活动(优惠 */
  186. .discount {
  187. background: #fff;
  188. position: relative;
  189. margin-top: 20rpx;
  190. padding: 28rpx 100rpx;
  191. }
  192. .discount-con {
  193. display: flex;
  194. flex-direction: column;
  195. }
  196. .discount-item {
  197. display: flex;
  198. }
  199. .popup-discount {
  200. margin: 30rpx 0;
  201. }
  202. .popup-discount .discount-item {
  203. margin-bottom: 10rpx;
  204. padding-bottom: 8rpx;
  205. }
  206. .popup-discount .discount-item:last-child {
  207. padding-bottom: 8rpx;
  208. }
  209. .discount-tag {
  210. color: #e43130;
  211. font-size: 20rpx;
  212. border-radius: 4rpx;
  213. border: 2rpx solid #e43130;
  214. margin-right: 10rpx;
  215. padding: 0 6rpx;
  216. align-self: center;
  217. }
  218. .discount-content {
  219. font-size: 24rpx;
  220. flex: 1;
  221. display: -webkit-box;
  222. -webkit-box-orient: vertical;
  223. -webkit-line-clamp: 1;
  224. overflow: hidden;
  225. text-overflow: ellipsis;
  226. }
  227. /* 商品促销活动(优惠-end*/
  228. /**优惠券*/
  229. .coupon {
  230. padding: 28rpx 100rpx 14rpx 100rpx;
  231. background: #fff;
  232. position: relative;
  233. margin-top: 20rpx;
  234. }
  235. .discount .coupon-tit,
  236. .coupon .coupon-tit {
  237. position: absolute;
  238. display: inline-block;
  239. width: 60rpx;
  240. left: 20rpx;
  241. font-size: 24rpx;
  242. top: 28rpx;
  243. line-height: 36rpx;
  244. color: #999;
  245. }
  246. .coupon-con .item {
  247. position: relative;
  248. display: inline-block;
  249. vertical-align: top;
  250. padding: 0 18rpx;
  251. background: #e43130;
  252. height: 36rpx;
  253. line-height: 36rpx;
  254. color: #fff;
  255. font-size: 22rpx;
  256. margin: 0 16rpx 16rpx 0;
  257. font-family: arial;
  258. }
  259. .coupon-con .item:before,
  260. .coupon-con .item:after {
  261. content: "";
  262. display: block;
  263. width: 0;
  264. height: 0;
  265. position: absolute;
  266. top: 0;
  267. border: 18rpx solid transparent;
  268. }
  269. .coupon-con .item:before {
  270. left: 0;
  271. border-left: 4rpx solid #fff;
  272. }
  273. .coupon-con .item:after {
  274. right: 0;
  275. border-right: 4rpx solid #fff;
  276. }
  277. .coupon .num {
  278. position: absolute;
  279. right: 80rpx;
  280. width: 80rpx;
  281. top: 28rpx;
  282. text-align: right;
  283. font-size: 24rpx;
  284. color: #999;
  285. line-height: 36rpx;
  286. white-space: nowrap;
  287. overflow: hidden;
  288. text-overflow: ellipsis;
  289. font-family: arial;
  290. }
  291. .more {
  292. position: absolute;
  293. right: 20rpx;
  294. width: 60rpx;
  295. top: 10rpx;
  296. text-align: right;
  297. font-size: 40rpx;
  298. color: #999;
  299. letter-spacing: 1px;
  300. }
  301. /* 已选 */
  302. .sku {
  303. padding: 20rpx;
  304. background: #fff;
  305. margin-top: 20rpx;
  306. position: relative;
  307. line-height: 48rpx;
  308. }
  309. .sku-tit {
  310. position: absolute;
  311. display: inline-block;
  312. width: 60rpx;
  313. left: 20rpx;
  314. font-size: 24rpx;
  315. top: 20rpx;
  316. color: #999;
  317. }
  318. .sku-con {
  319. margin: 0 80rpx;
  320. white-space: nowrap;
  321. text-overflow: ellipsis;
  322. overflow: hidden;
  323. font-size: 28rpx;
  324. font-weight: bold;
  325. }
  326. /** 评价*/
  327. .cmt-wrap {
  328. background: #fff;
  329. margin-top: 20rpx;
  330. position: relative;
  331. line-height: 48rpx;
  332. }
  333. .cmt-tit {
  334. font-size: 32rpx;
  335. position: relative;
  336. border-bottom: 1px solid #ddd;
  337. padding: 20rpx;
  338. display: flex;
  339. justify-content: space-between;
  340. }
  341. .cmt-t {
  342. width: 300rpx;
  343. font-size: 32rpx;
  344. color: #222222;
  345. font-weight: bold;
  346. }
  347. .cmt-good {
  348. color: #FF4D3A;
  349. font-size: 24rpx;
  350. }
  351. .cmt-count {
  352. position: absolute;
  353. right: 20rpx;
  354. top: 20rpx;
  355. font-size: 24rpx;
  356. color: #666;
  357. }
  358. .cmt-more {
  359. width: 10rpx;
  360. height: 10rpx;
  361. border-top: 2rpx solid #FF4D3A;
  362. border-right: 2rpx solid #FF4D3A;
  363. transform: rotate(45deg);
  364. margin-left: 10rpx;
  365. display: inline-block;
  366. }
  367. .cmt-cont {
  368. padding: 0 20rpx;
  369. }
  370. .cmt-tag {
  371. position: relative;
  372. padding: 14px 3px 0 0;
  373. margin: 0;
  374. border-radius: 8rpx;
  375. }
  376. .cmt-tag text {
  377. margin: 0 6px 10px 0;
  378. background: #F0F0F0;
  379. display: inline-block;
  380. padding: 0 10px;
  381. height: 25px;
  382. border-radius: 3px;
  383. line-height: 25px;
  384. font-size: 12px;
  385. font-family: -apple-system, Helvetica, sans-serif;
  386. color: #666;
  387. }
  388. .cmt-tag text.selected {
  389. color: #fff;
  390. background: #04358D;
  391. }
  392. .cmt-item {
  393. position: relative;
  394. padding: 10px 0;
  395. }
  396. .cmt-item::after {
  397. content: "";
  398. height: 0;
  399. display: block;
  400. border-bottom: 1px solid #ddd;
  401. position: absolute;
  402. left: 0;
  403. right: 0;
  404. bottom: 0;
  405. border-bottom-color: #e5e5e5;
  406. }
  407. .cmt-user {
  408. line-height: 25px;
  409. margin-bottom: 8px;
  410. font-size: 12px;
  411. }
  412. .cmt-user-info {
  413. display: flex;
  414. align-items: center;
  415. width: 400rpx;
  416. }
  417. .cmt-user .user-img {
  418. width: 25px;
  419. height: 25px;
  420. border-radius: 50%;
  421. vertical-align: middle;
  422. }
  423. .cmt-user .nickname {
  424. margin-left: 10px;
  425. display: inline-block;
  426. color: #333;
  427. max-width: 8.2em;
  428. height: 25px;
  429. line-height: 27px;
  430. }
  431. .cmt-user .stars {
  432. display: flex;
  433. margin-left: 3px;
  434. }
  435. .cmt-user .stars image {
  436. width: 35rpx;
  437. height: 35rpx;
  438. }
  439. .cmt-user .date {
  440. float: right;
  441. color: #999;
  442. margin-left: -60px;
  443. }
  444. .cmt-cnt {
  445. overflow: hidden;
  446. text-overflow: ellipsis;
  447. display: -webkit-box;
  448. -webkit-line-clamp: 3;
  449. -webkit-box-orient: vertical;
  450. position: relative;
  451. line-height: 1.5;
  452. font-size: 14px;
  453. margin: 5px 0;
  454. word-break: break-all;
  455. max-height: 126px;
  456. }
  457. .cmt-attr {
  458. height: 85px;
  459. width: 100%;
  460. white-space: nowrap;
  461. }
  462. .cmt-attr .img-wrap {
  463. width: 85px;
  464. height: 85px;
  465. display: inline-block;
  466. }
  467. .cmt-attr image {
  468. display: inline-block;
  469. width: 80px;
  470. height: 80px;
  471. margin-right: 5px;
  472. margin-bottom: 5px;
  473. border-radius: 2px;
  474. background: #f3f3f3;
  475. }
  476. .cmt-more-v {
  477. text-align: center;
  478. background-color: #fff;
  479. font-size: 12px;
  480. }
  481. .cmt-more-v text {
  482. height: 25px;
  483. line-height: 25px;
  484. font-size: 12px;
  485. text-align: center;
  486. color: #333;
  487. padding: 0px 10px;
  488. margin: 10px 0;
  489. border: 1px solid #ccc;
  490. border-radius: 40px;
  491. display: inline-block;
  492. }
  493. /** 评价弹窗 */
  494. .cmt-popup {
  495. position: fixed;
  496. top: 0;
  497. bottom: 0;
  498. left: 0;
  499. right: 0;
  500. z-index: 5;
  501. background-color: #fff;
  502. padding-bottom: 98rpx;
  503. }
  504. .cmt-popup .cmt-cont {
  505. height: calc(100% - 80rpx);
  506. overflow: auto;
  507. }
  508. .cmt-popup .cmt-cnt {
  509. -webkit-line-clamp: 20;
  510. max-height: 500px;
  511. }
  512. .cmt-reply {
  513. font-size: 14px;
  514. border-top: 1px dashed #ddd;
  515. padding: 5px 0;
  516. }
  517. .cmt-reply .reply-tit {
  518. color: #e43130;
  519. }
  520. .cmt-reply .reply-content {
  521. word-wrap: break-word;
  522. }
  523. .cmt-popup .load-more {
  524. font-size: 14px;
  525. padding: 20px;
  526. text-align: center;
  527. margin-bottom: 10px;
  528. }
  529. .cmt-popup .load-more text {
  530. border: 1px solid #ddd;
  531. padding: 5px 10px;
  532. border-radius: 10px;
  533. color: #666;
  534. }
  535. /** 店铺 */
  536. .shop-box {
  537. margin: 20rpx 0;
  538. background: #fff;
  539. padding: 20rpx;
  540. }
  541. /* .shopbox-head {
  542. padding-bottom: 24rpx;
  543. } */
  544. .shop-logo {
  545. display: inline-block;
  546. width: 80rpx;
  547. height: 80rpx;
  548. background: #fff;
  549. margin-right: 20rpx;
  550. vertical-align: middle;
  551. }
  552. .shop-logo image{
  553. border-radius: 16rpx;
  554. }
  555. .shop-name,
  556. .self-operate {
  557. display: inline-block;
  558. vertical-align: middle;
  559. }
  560. .shop-name {
  561. font-size: 30rpx;
  562. font-weight: bold;
  563. }
  564. .self-operate {
  565. width: 112rpx;
  566. height: 36rpx;
  567. background: #FF4D3A;
  568. border-radius: 8rpx 8rpx 8rpx 8rpx;
  569. font-size: 24rpx;
  570. color: #FFFFFF;
  571. text-align: center;
  572. /* padding: 5rpx 15rpx; */
  573. margin-left: 15rpx;
  574. }
  575. /* 粉丝&商品 */
  576. .shop-situation {
  577. margin: 25rpx 0;
  578. }
  579. .situation-item {
  580. display: inline-block;
  581. width: 49%;
  582. border-right: 1rpx solid #e4e4e4;
  583. text-align: center;
  584. }
  585. .situation-item:last-child {
  586. border: none;
  587. }
  588. .situation-item-num {
  589. font-size: 32rpx;
  590. line-height: 2em;
  591. }
  592. .situation-item-txt {
  593. font-size: 23rpx;
  594. color: #999;
  595. }
  596. /* 收藏店铺&进入店铺 */
  597. .handle-shop-item {
  598. display: inline-block;
  599. width: 48%;
  600. margin-right: 20rpx;
  601. border: 1rpx solid #e4e4e4;
  602. border-radius: 8rpx;
  603. padding: 10rpx 0;
  604. text-align: center;
  605. }
  606. .handle-shop-item:last-child {
  607. margin: 0;
  608. }
  609. .handle-shop-icon {
  610. display: inline-block;
  611. width: 40rpx;
  612. height: 40rpx;
  613. margin-right: 10rpx;
  614. }
  615. .handle-shop-icon>image {
  616. width: 100%;
  617. height: 100%;
  618. vertical-align: middle;
  619. }
  620. .handle-txt {
  621. font-size: 28rpx;
  622. vertical-align: middle;
  623. }
  624. /** 商品详情 */
  625. .prod-detail {
  626. background: #fff;
  627. margin-top: 20rpx;
  628. position: relative;
  629. line-height: 48rpx;
  630. overflow: hidden;
  631. padding: 20rpx 0;
  632. }
  633. rich-text {
  634. width: 100% !important;
  635. }
  636. .det-tit {
  637. width: 300rpx;
  638. }
  639. .detail-tit {
  640. font-size: 32rpx;
  641. position: relative;
  642. border-bottom: 1px solid #ddd;
  643. padding: 20rpx;
  644. }
  645. .prod-detail image {
  646. width: 750rpx !important;
  647. display: block;
  648. }
  649. rich-text image {
  650. width: 100% !important;
  651. }
  652. img {
  653. width: 100% !important;
  654. display: block;
  655. }
  656. /** end 商品详情 */
  657. /** 底部按钮 */
  658. .cart-footer {
  659. position: fixed;
  660. bottom: 0;
  661. left: 0;
  662. width: 100%;
  663. display: flex;
  664. align-items: center;
  665. flex-direction: row nowrap;
  666. height: 110rpx;
  667. z-index: 3;
  668. box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  669. background: #fff;
  670. }
  671. .cart-footer .btn {
  672. position: relative;
  673. display: flex;
  674. flex-grow: 1;
  675. justify-content: center;
  676. align-items: center;
  677. width: 0;
  678. background-color: #fff;
  679. font-size: 28rpx;
  680. flex-flow: column;
  681. }
  682. .cart-footer .btn.icon {
  683. flex-grow: 0;
  684. flex-shrink: 0;
  685. width: 90rpx;
  686. font-size: 23rpx;
  687. color: #666;
  688. }
  689. .cart-footer .btn.icon image {
  690. width: 54rpx;
  691. height: 54rpx;
  692. }
  693. .cart-footer .btn.cart {
  694. border: 2rpx solid #ddd;
  695. font-weight: bold;
  696. font-size: 28rpx;
  697. color: #04358D;
  698. margin: 0 12rpx;
  699. text-align: center;
  700. }
  701. .cart-footer .btn.buy {
  702. background: #04358D;
  703. color: #fff;
  704. margin-right: 12rpx;
  705. font-size: 28rpx;
  706. text-align: center;
  707. }
  708. .cart-radius {
  709. border-radius: 60rpx;
  710. height: 2.8em;
  711. line-height: 2.8em;
  712. }
  713. .cart-footer.gray .btn.cart,
  714. .cart-footer.gray .btn.buy {
  715. display: block;
  716. background: #ddd;
  717. }
  718. .cart-footer .btn .badge {
  719. position: absolute;
  720. top: 3rpx;
  721. left: 55rpx;
  722. display: inline-block;
  723. width: 28rpx;
  724. height: 28rpx;
  725. border-radius: 14rpx;
  726. background-color: #e43130;
  727. text-align: center;
  728. line-height: 28rpx;
  729. font-size: 18rpx;
  730. color: #fff;
  731. }
  732. /* .cart-footer .btn .badge-1 {
  733. width: 36rpx;
  734. } */
  735. .cart-footer .btn .badge-2 {
  736. width: 48rpx;
  737. left: 52rpx;
  738. }
  739. /** end 底部按钮 */
  740. .contact-btn-box{
  741. position: relative;
  742. }
  743. .contact-btn{
  744. position: absolute;
  745. top: 0;
  746. left: 6rpx;
  747. height: 90rpx;
  748. width: 80rpx;
  749. text-align: center;
  750. background-color: transparent;
  751. }
  752. .contact-btn::after{
  753. border: none;
  754. }
  755. /* 积分 底部按钮 */
  756. .ex-integral-foot {
  757. position: fixed;
  758. bottom: 0;
  759. left: 0;
  760. width: 100%;
  761. display: flex;
  762. flex-direction: row nowrap;
  763. color: #fff;
  764. z-index: 4;
  765. box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  766. }
  767. .ex-integral-btn {
  768. box-sizing: border-box;
  769. width: 100%;
  770. margin: 20rpx;
  771. padding: 1em 0;
  772. background: #e43130;
  773. color: #fff;
  774. text-align: center;
  775. font-size: 30rpx;
  776. line-height: 1em;
  777. border-radius: 8rpx;
  778. }
  779. /** 【拼团】底部按钮 */
  780. .foot-box {
  781. margin-top: 100rpx;
  782. }
  783. .footer {
  784. position: fixed;
  785. bottom: 0;
  786. width: 100%;
  787. box-sizing: border-box;
  788. height: 100rpx;
  789. background: #fff;
  790. /* box-shadow: 10rpx 0 10rpx 0 #f0f0f0; */
  791. display: flex;
  792. align-items: center;
  793. }
  794. .foot-btn {
  795. position: relative;
  796. display: inline-block;
  797. width: 100rpx;
  798. font-size: 23rpx;
  799. color: #666;
  800. text-align: center;
  801. padding-top: 6rpx;
  802. background: #fff;
  803. }
  804. .foot-btn>image {
  805. display: block;
  806. width: 54rpx;
  807. height: 54rpx;
  808. margin: 0 auto;
  809. }
  810. .buy-btn {
  811. display: inline-block;
  812. font-size: 30rpx;
  813. /* height: 100rpx;
  814. line-height: 105rpx; */
  815. vertical-align: top;
  816. width: 34.3%;
  817. color: #fff;
  818. text-align: center;
  819. }
  820. .alone-buy {
  821. background: #fd7d46;
  822. margin: 0 12rpx;
  823. }
  824. .group-buy {
  825. background: #e43130;
  826. margin-right: 12rpx;
  827. }
  828. /* 购物车数量显示 */
  829. .badge {
  830. position: absolute;
  831. top: 10rpx;
  832. left: 50rpx;
  833. display: inline-block;
  834. width: 28rpx;
  835. height: 28rpx;
  836. border-radius: 14rpx;
  837. background-color: #e43130;
  838. text-align: center;
  839. line-height: 28rpx;
  840. font-size: 18rpx;
  841. color: #fff;
  842. }
  843. /* .badge-1 {
  844. width: 36rpx;
  845. } */
  846. .badge-2 {
  847. width: 48rpx;
  848. left: 52rpx;
  849. }
  850. /** end 底部按钮 */
  851. /** 优惠券弹窗 **/
  852. .popup-hide {
  853. position: fixed;
  854. top: 0;
  855. bottom: 0;
  856. left: 0;
  857. right: 0;
  858. z-index: 5;
  859. background-color: rgba(0, 0, 0, 0.3);
  860. }
  861. .popup-box {
  862. position: absolute;
  863. bottom: 0;
  864. width: 100%;
  865. min-height: 375px;
  866. max-height: 475px;
  867. overflow: hidden;
  868. background-color: #fff;
  869. }
  870. .popup-tit {
  871. position: relative;
  872. height: 46px;
  873. line-height: 46px;
  874. padding-left: 10px;
  875. font-size: 16px;
  876. color: #333;
  877. background-color: #f7f7f7;
  878. }
  879. .close {
  880. color: #aaa;
  881. border-radius: 12px;
  882. line-height: 20px;
  883. text-align: center;
  884. height: 20px;
  885. width: 20px;
  886. font-size: 18px;
  887. padding: 1px;
  888. top: 16rpx;
  889. right: 10px;
  890. position: absolute;
  891. }
  892. .close::before {
  893. content: "\2716";
  894. }
  895. .popup-cnt {
  896. max-height: 429px;
  897. overflow: auto;
  898. padding: 0 10px;
  899. }
  900. /** 规格弹窗**/
  901. .pup-sku {
  902. position: fixed;
  903. top: 0;
  904. bottom: 0;
  905. left: 0;
  906. right: 0;
  907. z-index: 6;
  908. background-color: rgba(0, 0, 0, 0.3);
  909. }
  910. .pup-sku-main {
  911. position: absolute;
  912. bottom: 0;
  913. width: 100%;
  914. min-height: 375px;
  915. max-height: 475px;
  916. background-color: #fff;
  917. }
  918. .pup-sku-header {
  919. position: relative;
  920. font-size: 16px;
  921. color: #333;
  922. padding: 20rpx 20rpx;
  923. background-color: #fff;
  924. border-bottom: 1rpx solid #f2f2f2;
  925. padding-top: 35rpx;
  926. }
  927. .pup-sku-img {
  928. display: inline-block;
  929. width: 27%;
  930. height: 180rpx;
  931. vertical-align: middle;
  932. border-radius: 10rpx;
  933. }
  934. .pup-sku-img image {
  935. display: block;
  936. width: 180rpx;
  937. height: 100%;
  938. }
  939. .pup-sku-prod {
  940. display: inline-block;
  941. width: 70%;
  942. vertical-align: middle;
  943. padding-left: 10rpx;
  944. }
  945. .prod-title {
  946. font-size: 28rpx;
  947. display: -webkit-box;
  948. -webkit-line-clamp: 1;
  949. /*设定显示行数*/
  950. -webkit-box-orient: vertical;
  951. word-break: break-all;
  952. overflow: hidden;
  953. text-overflow: ellipsis;
  954. max-width: 100%;
  955. margin: 15rpx 0;
  956. }
  957. .pup-sku-price {
  958. display: inline-block;
  959. height: 1.5em;
  960. line-height: 1.5em;
  961. color: #e43130;
  962. font-size: 26rpx;
  963. }
  964. .group-sku-pri {
  965. display: flex;
  966. align-items: center;
  967. }
  968. .pup-sku-price-int {
  969. font-size: 38rpx;
  970. }
  971. .pup-sku-prop {
  972. display: block;
  973. font-size: 26rpx;
  974. color: #333;
  975. line-height: 1.4em;
  976. padding-right: 10px;
  977. margin-top: 16rpx;
  978. display: -webkit-box;
  979. -webkit-line-clamp: 1;
  980. /*设定显示行数*/
  981. -webkit-box-orient: vertical;
  982. word-break: break-all;
  983. overflow: hidden;
  984. text-overflow: ellipsis;
  985. }
  986. .pup-sku-prop text:first-child {
  987. color: #999;
  988. }
  989. .pup-sku-body {
  990. box-sizing: border-box;
  991. padding-bottom: 100px;
  992. overflow: auto;
  993. }
  994. .pup-sku-area {
  995. max-height: 480rpx;
  996. overflow-y: scroll;
  997. }
  998. .pup-sku-area .sku-kind {
  999. font-size: 12px;
  1000. margin: 0 10px;
  1001. height: 40px;
  1002. line-height: 40px;
  1003. color: #000;
  1004. font-weight: bold;
  1005. }
  1006. .pup-sku-area .sku-choose {
  1007. overflow: hidden;
  1008. margin-bottom: 3px;
  1009. }
  1010. .sku-choose-item {
  1011. display: inline-block;
  1012. min-width: 100rpx;
  1013. max-width: 540rpx;
  1014. padding: 0 16rpx;
  1015. overflow: hidden;
  1016. height: 50rpx;
  1017. line-height: 50rpx;
  1018. text-align: center;
  1019. margin-left: 10px;
  1020. margin-bottom: 10px;
  1021. border-radius: 30rpx;
  1022. color: #333;
  1023. background-color: #f7f7f7;
  1024. font-size: 14px;
  1025. border: 1px solid #aaa;
  1026. }
  1027. .sku-choose-item.active {
  1028. background-color: #04358D;
  1029. color: #fff;
  1030. border: 1px solid #04358D !important;
  1031. }
  1032. .sku-choose-item.gray {
  1033. background-color: #f9f9f9;
  1034. color: #ddd;
  1035. }
  1036. .sku-choose-item.dashed {
  1037. border: 1px dashed #ccc;
  1038. }
  1039. .pup-sku-count {
  1040. padding: 0 20rpx;
  1041. font-size: 24rpx;
  1042. margin: 10rpx 0;
  1043. }
  1044. .pup-sku-count .count-name {
  1045. height: 31px;
  1046. line-height: 31px;
  1047. width: 100rpx;
  1048. color: #000;
  1049. font-weight: bold;
  1050. }
  1051. .pup-sku-count .num-wrap {
  1052. position: relative;
  1053. z-index: 0;
  1054. width: 110px;
  1055. float: right;
  1056. vertical-align: middle;
  1057. display: flex;
  1058. }
  1059. .num-wrap .minus,
  1060. .num-wrap .plus {
  1061. position: relative;
  1062. max-width: 30px;
  1063. min-width: 30px;
  1064. height: 30px;
  1065. line-height: 30px;
  1066. background: #f7f7f7;
  1067. text-align: center;
  1068. }
  1069. .num-wrap .minus {
  1070. border-top-left-radius: 3px;
  1071. border-bottom-left-radius: 3px;
  1072. }
  1073. .num-wrap .plus {
  1074. border-top-right-radius: 3px;
  1075. border-bottom-right-radius: 3px;
  1076. }
  1077. .num-wrap .row {
  1078. border-radius: 20px;
  1079. position: absolute;
  1080. top: 50%;
  1081. left: 50%;
  1082. margin-left: -7px;
  1083. margin-top: -1px;
  1084. width: 14px;
  1085. height: 2px;
  1086. background-color: #ccc;
  1087. }
  1088. .num-wrap .col {
  1089. border-radius: 20px;
  1090. position: absolute;
  1091. top: 50%;
  1092. left: 50%;
  1093. margin-left: -1px;
  1094. margin-top: -7px;
  1095. width: 2px;
  1096. height: 14px;
  1097. background-color: #999;
  1098. }
  1099. .pup-sku-count .text-wrap {
  1100. position: relative;
  1101. width: 45px;
  1102. z-index: 0;
  1103. margin: 0 1px;
  1104. }
  1105. .pup-sku-count .text-wrap input {
  1106. height: 30px;
  1107. width: 100%;
  1108. color: #333;
  1109. background: #fff;
  1110. font-size: 12px;
  1111. text-align: center;
  1112. border: none;
  1113. background: #f7f7f7;
  1114. }
  1115. .pup-sku-footer {
  1116. position: fixed;
  1117. bottom: 0;
  1118. left: 0;
  1119. width: 100%;
  1120. display: flex;
  1121. flex-direction: row nowrap;
  1122. height: 110rpx;
  1123. z-index: 6;
  1124. justify-content: center;
  1125. /* box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); */
  1126. }
  1127. .pup-sku-footer.gray .btn,
  1128. .pup-sku-footer.gray .btn,
  1129. .pup-sku-footer .btn {
  1130. position: relative;
  1131. display: flex;
  1132. flex-grow: 1;
  1133. justify-content: center;
  1134. align-items: center;
  1135. background-color: #fff;
  1136. font-size: 30rpx;
  1137. flex-flow: column;
  1138. border-radius: 60rpx;
  1139. height: 2.8em;
  1140. width: 45%;
  1141. margin: 0 15rpx;
  1142. }
  1143. .pup-sku-footer .btn.cart {
  1144. border: 2rpx solid #ddd;
  1145. color: #04358D;
  1146. }
  1147. .pup-sku-footer .btn.buy {
  1148. background: #04358D;
  1149. color: #fff;
  1150. }
  1151. .pup-sku-footer.gray .btn.cart {
  1152. background: #ddd;
  1153. }
  1154. .pup-sku-footer.gray .btn.buy {
  1155. background: #ddd;
  1156. }
  1157. /* 悬浮按钮 */
  1158. .suspension-box {
  1159. position: fixed;
  1160. top: 920rpx;
  1161. right: 40rpx;
  1162. z-index: 2;
  1163. }
  1164. .scroll-top {
  1165. top: 780rpx;
  1166. }
  1167. .suspension-btn {
  1168. display: flex;
  1169. justify-content: center;
  1170. align-items: center;
  1171. text-align: center;
  1172. width: 80rpx;
  1173. height: 80rpx;
  1174. border-radius: 50%;
  1175. background: #fff;
  1176. border: 1rpx solid #ccc;
  1177. margin-top: 30rpx;
  1178. }
  1179. button.btn-type {
  1180. background: #fff;
  1181. padding: 0;
  1182. margin: 0;
  1183. margin-top: 30rpx;
  1184. }
  1185. button.btn-type::after {
  1186. border: 0;
  1187. }
  1188. .suspension-btn image {
  1189. display: block;
  1190. width: 40rpx;
  1191. height: 40rpx;
  1192. }
  1193. /* 赚字浮层 */
  1194. .promo-con .earn {
  1195. background: rgba(230, 55, 58, 0.9);
  1196. box-shadow: 1px 2px 6px rgba(78, 78, 78, 0.4);
  1197. color: #fff;
  1198. border-radius: 50%;
  1199. width: 80rpx;
  1200. height: 80rpx;
  1201. font-size: 32rpx;
  1202. margin: auto;
  1203. text-align: center;
  1204. line-height: 80rpx;
  1205. }
  1206. /* /悬浮按钮 */
  1207. /*分享弹窗 */
  1208. .promo-share {
  1209. position: fixed;
  1210. top: 0;
  1211. left: 0;
  1212. background: rgba(0, 0, 0, 0.7);
  1213. width: 100%;
  1214. height: 100%;
  1215. z-index: 99;
  1216. }
  1217. .promo-tit {
  1218. padding-top: 40rpx;
  1219. font-size: 24rpx;
  1220. text-align: center;
  1221. margin-left: 80rpx;
  1222. }
  1223. .promo-main {
  1224. background: #fff;
  1225. position: absolute;
  1226. bottom: 0rpx;
  1227. width: 100%;
  1228. height: 500rpx;
  1229. z-index: 99;
  1230. }
  1231. .promo-icons-close image {
  1232. width: 45rpx;
  1233. height: 45rpx;
  1234. /* border-radius: 55%; */
  1235. float: right;
  1236. padding-right: 20rpx;
  1237. padding-top: 20rpx;
  1238. }
  1239. .promo-desc {
  1240. margin-left: 73rpx;
  1241. width: 600rpx;
  1242. text-align: center;
  1243. }
  1244. .promo-desc text {
  1245. padding: 20rpx;
  1246. font-size: 20rpx;
  1247. color: #999;
  1248. line-height: 34rpx;
  1249. display: inline-block;
  1250. }
  1251. .promo-icons {
  1252. font-size: 20rpx;
  1253. color: #666;
  1254. display: flex;
  1255. justify-content: space-around;
  1256. padding: 10rpx 150rpx;
  1257. }
  1258. .promo-icons image {
  1259. width: 75rpx;
  1260. height: 75rpx;
  1261. border-radius: 50%;
  1262. }
  1263. .promo-img1 {
  1264. display: flex;
  1265. flex-flow: column;
  1266. align-items: center;
  1267. line-height: 75rpx;
  1268. font-size: 22rpx;
  1269. background: none;
  1270. border: 0;
  1271. margin: 0;
  1272. padding: 0;
  1273. }
  1274. .promo-img1::after {
  1275. border: 0;
  1276. }
  1277. .promo-btn {
  1278. font-size: 28rpx;
  1279. width: 90%;
  1280. height: 80rpx;
  1281. border: 1px #e5e5e5 solid;
  1282. text-align: center;
  1283. line-height: 80rpx;
  1284. margin-left: 40rpx;
  1285. }
  1286. /** 二维码弹窗 */
  1287. .code-popup {
  1288. position: fixed;
  1289. top: 0;
  1290. left: 0;
  1291. background: rgba(0, 0, 0, 0.7);
  1292. width: 100%;
  1293. height: 100%;
  1294. z-index: 9;
  1295. }
  1296. .code-main {
  1297. margin: auto;
  1298. left: 0;
  1299. right: 0;
  1300. top: 0;
  1301. bottom: 0;
  1302. position: fixed;
  1303. width: 500rpx;
  1304. height: 700rpx;
  1305. }
  1306. .close-png {
  1307. width: 50rpx;
  1308. height: 50rpx;
  1309. margin-top: -10rpx;
  1310. }
  1311. .code-v {
  1312. padding: 20rpx;
  1313. border-radius: 6rpx;
  1314. background: #fff;
  1315. }
  1316. .wx-code {
  1317. width: 460rpx;
  1318. height: 460rpx;
  1319. }
  1320. .close-v {
  1321. text-align: right;
  1322. height: 60rpx;
  1323. }
  1324. .code-txt {
  1325. margin-top: 20rpx;
  1326. text-align: center;
  1327. color: #fff;
  1328. font-size: 28rpx;
  1329. background: #3a86b9;
  1330. border-radius: 6rpx;
  1331. height: 80rpx;
  1332. line-height: 80rpx;
  1333. }
  1334. /** 二维码弹窗 end */
  1335. /* 倒计时栏 */
  1336. .countdown-box {
  1337. width: 100%;
  1338. height: 85rpx;
  1339. line-height: 85rpx;
  1340. /* background: #e92121; */
  1341. background: #e43130;
  1342. color: #fff;
  1343. padding: 0 30rpx;
  1344. box-sizing: border-box;
  1345. }
  1346. .second-kill {
  1347. font-size: 33rpx;
  1348. }
  1349. .countdown-content {
  1350. float: right;
  1351. font-size: 28rpx;
  1352. height: 85rpx;
  1353. line-height: 85rpx;
  1354. text-align: left;
  1355. display: flex;
  1356. justify-content: space-between;
  1357. align-items: center;
  1358. }
  1359. .countdown-tips {
  1360. font-size: 24rpx;
  1361. opacity: 0.8;
  1362. margin-right: 10rpx;
  1363. }
  1364. .countdown-time {
  1365. font-size: 24rpx;
  1366. padding-top: 5rpx;
  1367. }
  1368. /* 价格 */
  1369. .goods-price {
  1370. padding: 15rpx 0;
  1371. border-bottom: 1px solid #f3f3f3;
  1372. }
  1373. .current-price {
  1374. display: flex;
  1375. align-items: center;
  1376. color: #e43130;
  1377. font-size: 34rpx;
  1378. /* margin-right: 15rpx; */
  1379. vertical-align: middle;
  1380. }
  1381. .original {
  1382. font-size: 26rpx;
  1383. color: #888888;
  1384. margin-top: 15rpx;
  1385. }
  1386. .original-price {
  1387. font-size: 26rpx;
  1388. text-decoration: line-through;
  1389. color: #999999;
  1390. margin-left: 10rpx;
  1391. }
  1392. /* 拼团价格 */
  1393. .condition {
  1394. font-size: 24rpx;
  1395. border: 1rpx solid red;
  1396. padding: 2rpx 10rpx;
  1397. vertical-align: middle;
  1398. }
  1399. /* 拼团详情 */
  1400. .spell-infor {
  1401. border-top: 20rpx solid #f7f7f7;
  1402. font-size: 28rpx;
  1403. padding: 20rpx;
  1404. background: #fff;
  1405. }
  1406. .spell-infor-title {
  1407. font-size: 26rxp;
  1408. }
  1409. .spell-infor-content {
  1410. position: relative;
  1411. padding-top: 20rpx;
  1412. padding-bottom: 20rpx;
  1413. border-bottom: 1rpx solid #f2f2f2;
  1414. }
  1415. .head-img {
  1416. display: inline-block;
  1417. width: 70rpx;
  1418. height: 70rpx;
  1419. margin-right: 15rpx;
  1420. vertical-align: bottom;
  1421. border-radius: 50%;
  1422. }
  1423. .head-img>image {
  1424. border-radius: 50%;
  1425. }
  1426. .spell-msg {
  1427. display: inline-block;
  1428. vertical-align: top;
  1429. font-size: 24rpx;
  1430. }
  1431. .spell-text {
  1432. padding-top: 10rpx;
  1433. color: #aaa;
  1434. }
  1435. .red-font {
  1436. color: #e43130;
  1437. }
  1438. .join-group {
  1439. position: absolute;
  1440. right: 10rpx;
  1441. bottom: 30rpx;
  1442. color: #e43130;
  1443. border: 1rpx solid #e43130;
  1444. padding: 10rpx 15rpx;
  1445. font-size: 24rpx;
  1446. }
  1447. .rules {
  1448. position: relative;
  1449. font-size: 24rpx;
  1450. padding-top: 20rpx;
  1451. }
  1452. .rules-text02 {
  1453. float: right;
  1454. font-size: 23rpx;
  1455. color: #aaa;
  1456. padding-right: 30rpx;
  1457. }
  1458. .right-arrow {
  1459. position: absolute;
  1460. right: 5rpx;
  1461. top: 20rpx;
  1462. display: inline-block;
  1463. width: 20rpx;
  1464. height: 20rpx;
  1465. }
  1466. .act-price-con {
  1467. border: 1px solid #e4393c;
  1468. margin-left: 20rpx;
  1469. padding: 2rpx 5rpx;
  1470. border-radius: 3rpx;
  1471. }
  1472. /* 列表为空 */
  1473. .empty {
  1474. margin-top: 100rpx;
  1475. text-align: cneter;
  1476. }
  1477. .empty-icon {
  1478. display: block;
  1479. width: 80rpx;
  1480. height: 80rpx;
  1481. margin: 0 auto;
  1482. margin-bottom: 20rpx;
  1483. }
  1484. .empty-icon>image {
  1485. width: 100%;
  1486. height: 100%;
  1487. }
  1488. .empty-text {
  1489. font-size: 28rpx;
  1490. text-align: center;
  1491. color: #999;
  1492. line-height: 2em;
  1493. }