product.wxss 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. page {
  12. background: #f8f8f8;
  13. }
  14. .seckillBottom {
  15. height: 110rpx;
  16. }
  17. .contentBottomHeight {
  18. height: 110rpx;
  19. }
  20. .goodsBottom {
  21. height: 100rpx;
  22. }
  23. .iconenter {
  24. font-size: 30rpx;
  25. color: #888;
  26. }
  27. .carousel {
  28. height: 722rpx;
  29. position: relative;
  30. }
  31. .carousel swiper {
  32. height: 100%;
  33. }
  34. .carousel .image-wrapper {
  35. width: 100%;
  36. height: 100%;
  37. }
  38. .carousel .swiper-item {
  39. display: flex;
  40. justify-content: center;
  41. align-content: center;
  42. height: 710rpx;
  43. overflow: hidden;
  44. }
  45. .carousel .swiper-item image {
  46. width: 100%;
  47. height: 100%;
  48. }
  49. .seckill-box-title {
  50. background: linear-gradient(90deg, #ef4e51 0%, #f4713b 100%) !important;
  51. }
  52. .seckill-box-title .price,
  53. .seckill-box-title .price-tip,
  54. .seckill-box-title .timeStop,
  55. .seckill-box-title .m-price {
  56. color: #ffffff !important;
  57. }
  58. .seckill-box-title .price-tip {
  59. font-size: 28rpx;
  60. }
  61. .seckill-box-title .price {
  62. font-size: 45rpx !important;
  63. font-weight: bold;
  64. }
  65. .goods-pay-box {
  66. position: fixed;
  67. left: 0;
  68. bottom: 0;
  69. z-index: 95;
  70. width: 750rpx;
  71. height: 100rpx;
  72. line-height: 1;
  73. color: #ffffff;
  74. text-align: center;
  75. font-size: 32rpx;
  76. }
  77. .goods-pay-box .bgLine {
  78. background: linear-gradient(90deg, #ef4e51 0%, #f4713b 100%);
  79. }
  80. .goods-pay-box .goods-pay {
  81. display: flex;
  82. align-content: center;
  83. flex-wrap: wrap;
  84. justify-content: center;
  85. }
  86. .goods-pay-box .goods-pay .goods-buttom,
  87. .goods-pay-box .goods-pay .goods-buttom-money {
  88. width: 100%;
  89. }
  90. .goods-pay-box .goods-pay .goods-buttom-money {
  91. font-size: 28rpx;
  92. }
  93. .goods-pay-box .goods-pay-stop,
  94. .goods-pay-box .goods-pay {
  95. padding: 15rpx 0;
  96. height: 100%;
  97. width: 100%;
  98. }
  99. .goods-pay-box .goods-pay-stop {
  100. background: #999999;
  101. line-height: 70rpx;
  102. }
  103. /* 标题简介 */
  104. .introduce-section {
  105. background: #fff;
  106. padding: 20rpx 30rpx;
  107. }
  108. .introduce-section .title {
  109. font-size: 32rpx;
  110. color: #303133;
  111. height: 50rpx;
  112. line-height: 50rpx;
  113. }
  114. .introduce-section .price-box {
  115. display: flex;
  116. align-items: baseline;
  117. height: 64rpx;
  118. padding: 10rpx 0;
  119. font-size: 26rpx;
  120. color: #FD3B39;
  121. }
  122. .introduce-section .price {
  123. font-size: 34rpx;
  124. }
  125. .introduce-section .m-price {
  126. margin: 0 12rpx;
  127. color: #909399;
  128. text-decoration: line-through;
  129. }
  130. .introduce-section .pt {
  131. text-decoration: none;
  132. }
  133. .introduce-section .coupon-tip {
  134. align-items: center;
  135. padding: 4rpx 10rpx;
  136. background: #5dbc7c;
  137. font-size: 24rpx;
  138. color: #fff;
  139. border-radius: 6rpx;
  140. line-height: 1;
  141. -webkit-transform: translateY(-4rpx);
  142. transform: translateY(-4rpx);
  143. }
  144. .introduce-section .bot-row {
  145. display: flex;
  146. align-items: center;
  147. height: 50rpx;
  148. font-size: 24rpx;
  149. color: #909399;
  150. }
  151. .introduce-section .bot-row text {
  152. flex: 1;
  153. }
  154. /* 分享 */
  155. .share-section {
  156. display: flex;
  157. align-items: center;
  158. color: #606266;
  159. background: linear-gradient(left, #fdf5f6, #fbebf6);
  160. padding: 12rpx 30rpx;
  161. }
  162. .share-section .share-icon {
  163. display: flex;
  164. align-items: center;
  165. width: 70rpx;
  166. height: 30rpx;
  167. line-height: 1;
  168. border: 1px solid #5dbc7c;
  169. border-radius: 4rpx;
  170. position: relative;
  171. overflow: hidden;
  172. font-size: 22rpx;
  173. color: #5dbc7c;
  174. }
  175. .share-section .share-icon:after {
  176. content: '';
  177. width: 50rpx;
  178. height: 50rpx;
  179. border-radius: 50%;
  180. left: -20rpx;
  181. top: -12rpx;
  182. position: absolute;
  183. background: #5dbc7c;
  184. }
  185. .share-section .iconfavorfill {
  186. position: relative;
  187. z-index: 1;
  188. font-size: 24rpx;
  189. margin-left: 2rpx;
  190. margin-right: 10rpx;
  191. color: #fff;
  192. line-height: 1;
  193. }
  194. .share-section .tit {
  195. font-size: 28rpx;
  196. margin-left: 10rpx;
  197. }
  198. .share-section .iconprompt {
  199. padding: 10rpx;
  200. font-size: 30rpx;
  201. line-height: 1;
  202. }
  203. .share-section .share-btn {
  204. flex: 1;
  205. text-align: right;
  206. font-size: 24rpx;
  207. color: #5dbc7c;
  208. }
  209. .share-section .iconenter {
  210. font-size: 24rpx;
  211. margin-left: 4rpx;
  212. color: #5dbc7c;
  213. }
  214. .c-list {
  215. margin-top: 20rpx;
  216. font-size: 26rpx;
  217. color: #606266;
  218. background: #fff;
  219. }
  220. .c-list .c-row {
  221. display: flex;
  222. align-items: center;
  223. padding: 20rpx 30rpx;
  224. position: relative;
  225. }
  226. .c-list .tit {
  227. width: 140rpx;
  228. }
  229. .c-list .con {
  230. flex: 1;
  231. color: #303133;
  232. }
  233. .c-list .con .selected-text {
  234. margin-right: 10rpx;
  235. }
  236. .c-list .con .selected-text .num {
  237. color: #FD3B39;
  238. }
  239. .c-list .bz-list {
  240. height: 40rpx;
  241. font-size: 26rpx;
  242. color: #303133;
  243. }
  244. .c-list .bz-list text {
  245. display: inline-block;
  246. margin-right: 30rpx;
  247. }
  248. .c-list .con-list {
  249. flex: 1;
  250. display: flex;
  251. flex-direction: column;
  252. color: #303133;
  253. line-height: 40rpx;
  254. }
  255. .c-list .red {
  256. color: #5dbc7c;
  257. }
  258. /* 评价 */
  259. .eva-section {
  260. display: flex;
  261. flex-direction: column;
  262. padding: 20rpx 30rpx;
  263. background: #fff;
  264. margin-top: 16rpx;
  265. }
  266. .eva-section .e-header {
  267. display: flex;
  268. align-items: center;
  269. height: 70rpx;
  270. font-size: 26rpx;
  271. color: #909399;
  272. }
  273. .eva-section .e-header .tit {
  274. font-size: 30rpx;
  275. color: #303133;
  276. margin-right: 4rpx;
  277. }
  278. .eva-section .e-header .tip {
  279. flex: 1;
  280. text-align: right;
  281. }
  282. .eva-section .e-header .iconenter {
  283. margin-left: 10rpx;
  284. }
  285. .eva-box {
  286. display: flex;
  287. padding: 20rpx 0;
  288. }
  289. .eva-box .portrait {
  290. flex-shrink: 0;
  291. width: 80rpx;
  292. height: 80rpx;
  293. border-radius: 100px;
  294. }
  295. .eva-box .right {
  296. flex: 1;
  297. display: flex;
  298. flex-direction: column;
  299. font-size: 28rpx;
  300. color: #606266;
  301. padding-left: 26rpx;
  302. }
  303. .eva-box .right .con {
  304. font-size: 28rpx;
  305. color: #303133;
  306. padding: 20rpx 0;
  307. }
  308. .eva-box .right .bot {
  309. display: flex;
  310. justify-content: space-between;
  311. font-size: 24rpx;
  312. color: #909399;
  313. }
  314. .eva-boxs {
  315. width: 100%;
  316. overflow: hidden;
  317. padding: 10px 28rpx;
  318. background: #f4f4f4;
  319. border-radius: 12rpx;
  320. font-size: 26rpx;
  321. color: #333;
  322. }
  323. .eva-boxs .portrait {
  324. flex-shrink: 0;
  325. width: 80rpx;
  326. height: 80rpx;
  327. border-radius: 100px;
  328. }
  329. .eva-boxs .right {
  330. flex: 1;
  331. display: flex;
  332. flex-direction: column;
  333. font-size: 28rpx;
  334. color: #606266;
  335. }
  336. .eva-boxs .right .con {
  337. font-size: 28rpx;
  338. color: #303133;
  339. }
  340. .eva-boxs .right .bot {
  341. display: flex;
  342. justify-content: space-between;
  343. font-size: 24rpx;
  344. color: #909399;
  345. }
  346. /* 详情 */
  347. .detail-desc {
  348. background: #fff;
  349. margin-top: 16rpx;
  350. }
  351. .detail-desc ._img {
  352. max-width: 100% !important;
  353. display: inline !important;
  354. }
  355. .detail-desc ._div {
  356. max-width: 100% !important;
  357. }
  358. .detail-desc .d-header {
  359. display: flex;
  360. justify-content: center;
  361. align-items: center;
  362. height: 80rpx;
  363. font-size: 30rpx;
  364. color: #303133;
  365. position: relative;
  366. }
  367. .detail-desc .d-header text {
  368. padding: 0 20rpx;
  369. background: #fff;
  370. position: relative;
  371. z-index: 1;
  372. }
  373. .detail-desc .d-header:after {
  374. position: absolute;
  375. left: 50%;
  376. top: 50%;
  377. -webkit-transform: translateX(-50%);
  378. transform: translateX(-50%);
  379. width: 300rpx;
  380. height: 0;
  381. content: '';
  382. border-bottom: 1px solid #ccc;
  383. }
  384. /* 规格选择弹窗 */
  385. .attr-content {
  386. padding: 10rpx 0 0;
  387. }
  388. .attr-content .a-t {
  389. padding: 0 30rpx;
  390. display: flex;
  391. }
  392. .attr-content .a-t image {
  393. width: 170rpx;
  394. height: 170rpx;
  395. flex-shrink: 0;
  396. border-radius: 8rpx;
  397. }
  398. .attr-content .a-t .right {
  399. display: flex;
  400. flex-direction: column;
  401. padding-left: 24rpx;
  402. font-size: 26rpx;
  403. color: #606266;
  404. line-height: 42rpx;
  405. }
  406. .attr-content .a-t .right .good-name {
  407. padding-top: 20rpx;
  408. max-width: 320rpx;
  409. font-size: 30rpx;
  410. font-family: PingFang SC;
  411. font-weight: bold;
  412. color: #1d2023;
  413. line-height: 42rpx;
  414. margin-bottom: 15rpx;
  415. }
  416. .attr-content .a-t .right .price {
  417. font-size: 60rpx;
  418. font-family: PingFang SC;
  419. font-weight: bold;
  420. color: #ff6f0f;
  421. }
  422. .attr-content .a-t .right .selected-text {
  423. margin-right: 10rpx;
  424. }
  425. .attr-content .attr-list {
  426. display: flex;
  427. flex-direction: column;
  428. font-size: 30rpx;
  429. color: #606266;
  430. padding-top: 30rpx;
  431. padding-left: 40rpx;
  432. padding-right: 30rpx;
  433. }
  434. .attr-content .item-list {
  435. padding: 20rpx 0 0;
  436. display: flex;
  437. flex-wrap: wrap;
  438. }
  439. .attr-content .item-list .tit {
  440. display: flex;
  441. align-items: center;
  442. justify-content: center;
  443. background: #eee;
  444. margin-right: 20rpx;
  445. margin-bottom: 20rpx;
  446. border-radius: 100rpx;
  447. min-width: 60rpx;
  448. height: 60rpx;
  449. padding: 0 20rpx;
  450. font-size: 28rpx;
  451. color: #303133;
  452. }
  453. .attr-content .item-list .selected {
  454. background: #fbebee;
  455. color: #5dbc7c;
  456. }
  457. /* 弹出层 */
  458. .popup {
  459. position: fixed;
  460. left: 0;
  461. top: 0;
  462. right: 0;
  463. bottom: 0;
  464. z-index: 99;
  465. }
  466. .popup.show {
  467. display: block;
  468. }
  469. .popup.show .mask {
  470. -webkit-animation: showPopup 0.2s linear both;
  471. animation: showPopup 0.2s linear both;
  472. }
  473. .popup.show .layer {
  474. -webkit-animation: showLayer 0.2s linear both;
  475. animation: showLayer 0.2s linear both;
  476. }
  477. .popup.hide .mask {
  478. -webkit-animation: hidePopup 0.2s linear both;
  479. animation: hidePopup 0.2s linear both;
  480. }
  481. .popup.hide .layer {
  482. -webkit-animation: hideLayer 0.2s linear both;
  483. animation: hideLayer 0.2s linear both;
  484. }
  485. .popup.none {
  486. display: none;
  487. }
  488. .popup .mask {
  489. position: fixed;
  490. top: 0;
  491. width: 100%;
  492. height: 100%;
  493. z-index: 1;
  494. background-color: rgba(0, 0, 0, 0.4);
  495. }
  496. .popup .layer {
  497. position: fixed;
  498. z-index: 99;
  499. bottom: 0;
  500. width: 100%;
  501. min-height: 30vh;
  502. border-radius: 10rpx 10rpx 0 0;
  503. background-color: #fff;
  504. }
  505. .popup .layer .btn {
  506. position: absolute;
  507. bottom: 0;
  508. width: 750rpx;
  509. height: 98rpx;
  510. background: #FE5B38;
  511. line-height: 98rpx;
  512. font-size: 30rpx;
  513. color: #fff;
  514. }
  515. @-webkit-keyframes showPopup {
  516. 0% {
  517. opacity: 0;
  518. }
  519. 100% {
  520. opacity: 1;
  521. }
  522. }
  523. @keyframes showPopup {
  524. 0% {
  525. opacity: 0;
  526. }
  527. 100% {
  528. opacity: 1;
  529. }
  530. }
  531. @-webkit-keyframes hidePopup {
  532. 0% {
  533. opacity: 1;
  534. }
  535. 100% {
  536. opacity: 0;
  537. }
  538. }
  539. @keyframes hidePopup {
  540. 0% {
  541. opacity: 1;
  542. }
  543. 100% {
  544. opacity: 0;
  545. }
  546. }
  547. @-webkit-keyframes showLayer {
  548. 0% {
  549. -webkit-transform: translateY(120%);
  550. transform: translateY(120%);
  551. }
  552. 100% {
  553. -webkit-transform: translateY(0%);
  554. transform: translateY(0%);
  555. }
  556. }
  557. @keyframes showLayer {
  558. 0% {
  559. -webkit-transform: translateY(120%);
  560. transform: translateY(120%);
  561. }
  562. 100% {
  563. -webkit-transform: translateY(0%);
  564. transform: translateY(0%);
  565. }
  566. }
  567. @-webkit-keyframes hideLayer {
  568. 0% {
  569. -webkit-transform: translateY(0);
  570. transform: translateY(0);
  571. }
  572. 100% {
  573. -webkit-transform: translateY(120%);
  574. transform: translateY(120%);
  575. }
  576. }
  577. @keyframes hideLayer {
  578. 0% {
  579. -webkit-transform: translateY(0);
  580. transform: translateY(0);
  581. }
  582. 100% {
  583. -webkit-transform: translateY(120%);
  584. transform: translateY(120%);
  585. }
  586. }
  587. /* 底部操作菜单 */
  588. .page-bottom {
  589. position: fixed;
  590. left: 0rpx;
  591. bottom: 0rpx;
  592. z-index: 95;
  593. display: flex;
  594. justify-content: center;
  595. align-items: center;
  596. width: 750rpx;
  597. height: 98rpx;
  598. background: rgba(255, 255, 255, 0.9);
  599. box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
  600. }
  601. .page-bottom .p-b-btn {
  602. display: flex;
  603. flex-direction: column;
  604. align-items: center;
  605. justify-content: center;
  606. font-size: 24rpx;
  607. color: #606266;
  608. width: 100rpx;
  609. height: 98rpx;
  610. }
  611. .page-bottom .p-b-btn .iconfont {
  612. font-size: 40rpx;
  613. line-height: 48rpx;
  614. color: #909399;
  615. }
  616. .page-bottom .p-b-btn.active,
  617. .page-bottom .p-b-btn.active .iconfont {
  618. color: #5dbc7c;
  619. }
  620. .page-bottom .p-b-btn .icon-fenxiang2 {
  621. font-size: 42rpx;
  622. -webkit-transform: translateY(-2rpx);
  623. transform: translateY(-2rpx);
  624. }
  625. .page-bottom .p-b-btn .iconlikefill {
  626. font-size: 46rpx;
  627. }
  628. .page-bottom .action-btn-group {
  629. display: flex;
  630. height: 98rpx;
  631. overflow: hidden;
  632. position: relative;
  633. }
  634. .page-bottom .action-btn-group .shoucang {
  635. width: 170rpx;
  636. height: 100rpx;
  637. background: #FFFFFF;
  638. flex-direction: column;
  639. justify-content: center;
  640. }
  641. .page-bottom .action-btn-group .shoucang image {
  642. width: 36rpx;
  643. height: 35rpx;
  644. }
  645. .page-bottom .action-btn-group .buy-now {
  646. flex-grow: 1;
  647. width: 580rpx;
  648. display: flex;
  649. }
  650. .page-bottom .action-btn-group .action-btn {
  651. flex-shrink: 0;
  652. flex-grow: 1;
  653. display: flex;
  654. align-items: center;
  655. justify-content: center;
  656. flex-grow: 1;
  657. height: 100%;
  658. font-size: 34rpx;
  659. padding: 0;
  660. border-radius: 0;
  661. background: #ffb238;
  662. }
  663. .page-bottom .action-btn-group .action-btn.buy-now-btn {
  664. background-color: #ffb238;
  665. }
  666. .page-bottom .action-btn-group .action-btn.add-cart-btn {
  667. background: #FD3B39;
  668. }
  669. .shop-box {
  670. background-color: #ffffff;
  671. margin-top: 20rpx;
  672. margin-bottom: 10rpx;
  673. padding: 20rpx;
  674. }
  675. .shop-box .shop-img {
  676. border-radius: 300rpx;
  677. height: 80rpx;
  678. width: 80rpx;
  679. margin-right: 20rpx;
  680. }
  681. .shop-box .shop-button {
  682. border-radius: 100rpx;
  683. padding: 10rpx 20rpx;
  684. color: #dd524d;
  685. border: 1px solid #dd524d;
  686. font-size: 32rpx;
  687. line-height: 1;
  688. }
  689. .detail-centent ._img {
  690. vertical-align: top;
  691. }