Ei kuvausta

shareProduct.css 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. * {
  2. font-family: 'PingFang SC','Microsoft YaHei',SourceHanSansCN-Normal,HiraginoSansGB,HiraginoSans-W3,"Helvetica Neue",Helvetica,STHeiTi,sans-serif;
  3. box-sizing: border-box;
  4. }
  5. .picture {
  6. width: 3.75rem;
  7. height: 3.75rem;
  8. }
  9. .swiper-pagination-bullet {
  10. width: 0.1rem;
  11. height: 0.03rem;
  12. display: inline-block;
  13. margin-left: 10px;
  14. border-radius: 0;
  15. background: rgba(0,0,0,0.8);
  16. }
  17. .swiper-pagination-bullet.swiper-pagination-bullet-active {
  18. width: 0.1rem;
  19. height: 0.03rem;
  20. background: #fff;
  21. border-radius: 0;
  22. }
  23. .main {
  24. margin: 0 .11rem;
  25. margin-bottom: .6rem;
  26. }
  27. .info {
  28. margin: .06rem 0;
  29. display: flex;
  30. justify-content: space-between;
  31. align-items: center;
  32. }
  33. .newPrice {
  34. font-size: .25rem;
  35. line-height: .36rem;
  36. color: #F5112A;
  37. }
  38. .oldPrice {
  39. margin-left: .1rem;
  40. margin-right: .36rem;
  41. font-size: .1rem;
  42. color: #A9A9A9;
  43. text-decoration: line-through;
  44. }
  45. .volume {
  46. font-size: .1rem;
  47. color: #A9A9A9;
  48. }
  49. .collect {
  50. font-size: .12rem;
  51. color: #9B9B9B;
  52. }
  53. .smallIcon {
  54. display: inline-block;
  55. vertical-align: text-bottom;
  56. width: .16rem;
  57. height: .16rem;
  58. }
  59. .title {
  60. height: .44rem;
  61. line-height: .22rem;
  62. font-size: .15rem;
  63. color: #000;
  64. display: -webkit-box;
  65. -webkit-box-orient: vertical;
  66. -webkit-line-clamp: 2;
  67. overflow: hidden;
  68. }
  69. .source {
  70. display: inline-block;
  71. width: .2rem;
  72. height: .2rem;
  73. vertical-align: text-bottom;
  74. }
  75. .cheap {
  76. display: flex;
  77. align-items: center;
  78. justify-content: space-between;
  79. margin-top: .12rem;
  80. margin-bottom: .14rem;
  81. }
  82. .cheap .left,.cheap .right {
  83. width: 1.72rem;
  84. height: .53rem;
  85. background-size: 100% 100%;
  86. }
  87. .left {
  88. padding-left: .05rem;
  89. padding-top: .08rem;
  90. background-image: url("../img/feedback.png");
  91. }
  92. .left div {
  93. color: #99520F;
  94. }
  95. .right div {
  96. color: #FA2D36;
  97. }
  98. .left .number,.right .number {
  99. font-size: .16rem;
  100. line-height: .22rem;
  101. }
  102. .left .word,.right .word {
  103. font-size: .1rem;
  104. line-height: .14rem;
  105. margin-top: .02rem;
  106. }
  107. .right {
  108. padding-left: .12rem;
  109. padding-top: .06rem;
  110. background-image: url("../img/cheap.png");
  111. }
  112. .shop {
  113. overflow: hidden;
  114. margin-top: .24rem;
  115. }
  116. .other {
  117. float: left;
  118. margin-left: .1rem;
  119. }
  120. .shopPicture {
  121. width: .53rem;
  122. height: .53rem;
  123. float: left;
  124. margin-left: .1rem;
  125. border: .01rem solid #000;
  126. }
  127. .shopName {
  128. margin-top: .02rem;
  129. font-size: .15rem;
  130. line-height: .21rem;
  131. }
  132. .grade {
  133. margin-top: .09rem;
  134. }
  135. .grade span {
  136. font-size: .12rem;
  137. line-height: .17rem;
  138. }
  139. .button {
  140. width: 100%;
  141. height: .39rem;
  142. line-height: .39rem;
  143. position: fixed;
  144. bottom: .05rem;
  145. left: 0;
  146. padding: 0 .1rem;
  147. }
  148. .share,.buy {
  149. float: left;
  150. display: inline-block;
  151. width: 50%;
  152. height: 100%;
  153. text-align: center;
  154. color: #fff;
  155. font-size: .15rem;
  156. }
  157. .share {
  158. background: #FCB502;
  159. border-top-left-radius: .25rem;
  160. border-bottom-left-radius: .25rem;
  161. }
  162. .buy {
  163. background: #FA2C36;
  164. border-top-right-radius: .25rem;
  165. border-bottom-right-radius: .25rem;
  166. }
  167. .fenxiang {
  168. display: inline-block;
  169. width: .21rem;
  170. height: .19rem;
  171. }
  172. .quan {
  173. display: inline-block;
  174. width: .24rem;
  175. height: .2rem;
  176. }