item.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. .zyw-header h1 a{
  2. font-size: 1.3rem;
  3. padding: 0 18px;
  4. color: #f5f5f5;
  5. }
  6. .zyw-header h1 a.active{
  7. font-weight: bold;
  8. color: #fff;
  9. }
  10. .zyw-footer .col-sm-2, .zyw-footer .col-sm-3, .zyw-footer .col-xs-2, .zyw-footer .col-xs-3{
  11. padding: 0;
  12. border-top: 1px solid #f6f6f6;
  13. }
  14. .zyw-footer .footer-btn{
  15. line-height: 56px;
  16. display: inline-block;
  17. width: 100%;
  18. text-align: center;
  19. color: #fff;
  20. font-size: 1.25rem;
  21. }
  22. .zyw-footer .footer-warning{
  23. background: orange;
  24. }
  25. .zyw-footer .footer-danger{
  26. background: red;
  27. }
  28. .item-img{
  29. width: 100%;
  30. overflow: hidden;
  31. position: relative;
  32. }
  33. .item-img .swiper-slide>img{
  34. width: 100%;
  35. }
  36. .item-img .swiper-pagination-fraction{
  37. width: 60px;
  38. right: 10px;
  39. left: auto;
  40. background: #a6a6a6;
  41. background: rgba(0, 0, 0, 0.35);
  42. border-radius: 50px;
  43. color: #fff;
  44. font-size: 1.2rem;
  45. text-align: center;
  46. }
  47. .item-details{
  48. padding: 1rem 0.625rem;
  49. }
  50. .item-details .details-title{
  51. font-size: 1.28rem;
  52. font-weight: bold;
  53. line-height: 2rem;
  54. overflow: hidden;
  55. text-overflow: ellipsis;
  56. display: -webkit-box;
  57. -webkit-box-orient: vertical;
  58. -webkit-line-clamp: 2;
  59. }
  60. .item-details .details-prince{
  61. font-size: 1.5rem;
  62. }
  63. .item-details .details-volume{
  64. font-size: 1.22rem;
  65. color: #999;
  66. }
  67. .item-serve {
  68. line-height: 3rem;
  69. padding: 0 0.625rem;
  70. }
  71. .item-serve span{
  72. margin-right: 2rem;
  73. font-size: 1rem;
  74. color: #777;
  75. }
  76. .item-assess .choose-text{color: #444;}
  77. .item-assess .choose-text em{font-style: normal;}
  78. /*商品规格弹窗*/
  79. .item-spec-layer{
  80. position: relative;
  81. width: 100%;
  82. }
  83. .item-spec-layer .spec-head{
  84. position: relative;
  85. padding: 0.625rem;
  86. border-bottom: 1px solid #f6f6f6;
  87. }
  88. .item-spec-layer .spec-head .spec-head-img{
  89. float: left;
  90. width: 76px;
  91. height: 76px;
  92. overflow: hidden;
  93. margin-left: 0.625rem;
  94. }
  95. .item-spec-layer .spec-head .spec-head-img img{
  96. width: 100%;
  97. }
  98. .item-spec-layer .spec-head .spec-head-prince{
  99. margin-left: 100px;
  100. display: block;
  101. margin-top: 1rem;
  102. }
  103. .item-spec-layer .spec-head .spec-head-intro{
  104. margin-left: 100px;
  105. color: #999;
  106. font-size: 1.2rem;
  107. line-height: 2rem;
  108. margin-bottom: 0;
  109. }
  110. .item-spec-layer .spec-info{
  111. border-bottom: 1px solid #f6f6f6;
  112. padding: 1rem 0.625rem;
  113. }
  114. .item-spec-layer .spec-info .spec-info-hd{
  115. color: #999;
  116. font-size: 1.2rem;
  117. }
  118. .item-spec-layer .spec-info .spec-info-bd{}
  119. .item-spec-layer .spec-info .spec-info-bd ul{}
  120. .item-spec-layer .spec-info .spec-info-bd ul li{
  121. float: left;
  122. border: 1px solid #e5e5e5;
  123. border-radius: 4px;
  124. color: #777;
  125. list-style-type: none;
  126. font-size: 1rem;
  127. margin-right: 10px;
  128. margin-bottom: 10px;
  129. padding: 4px 8px;
  130. }
  131. .item-spec-layer .spec-length{
  132. border-bottom: 1px solid #f6f6f6;
  133. padding-left: 0.625rem;
  134. }
  135. .item-spec-layer .spec-length .length-hd{
  136. margin: 0;
  137. color: #999;
  138. font-size: 1.2rem;
  139. }
  140. .item-layer-button{
  141. border: none;
  142. display: block;
  143. width: 100%;
  144. line-height: 56px;
  145. position: fixed;
  146. bottom: 0;
  147. }
  148. .item-spec-layer .spec-close{
  149. position: absolute;
  150. top: 2px;
  151. right: 5px;
  152. font-size: 1.5rem;
  153. color: #777;
  154. }
  155. .item-parameter-layer{
  156. height: 400px;
  157. overflow-y: auto;
  158. }
  159. .item-parameter-layer .parameter-title{
  160. margin: 0;
  161. font-size: 1.2rem;
  162. line-height: 3rem;
  163. text-align: center;
  164. }
  165. .item-parameter-layer .parameter-table{
  166. margin-bottom: 56px;
  167. }
  168. .item-parameter-layer .table>tbody>tr>td, .item-parameter-layer .table>tbody>tr>th{
  169. border-top: 1px solid #f6f6f6;
  170. }
  171. .item-parameter-layer .table>tbody>tr:first-child>td, .item-parameter-layer .table>tbody>tr:first-child>th{
  172. border-top: none;
  173. }
  174. .item-parameter-layer .parameter-table th{
  175. width: 20%;
  176. font-size: 1rem;
  177. font-weight: 100;
  178. line-height: 2rem;
  179. color: #777;
  180. }
  181. .item-parameter-layer .parameter-table td{
  182. font-size: 1rem;
  183. line-height: 2rem;
  184. padding-left: 10px;
  185. }
  186. .item-precent{
  187. padding: 5px 0;
  188. }
  189. .item-precent h4{
  190. text-align: center;
  191. font-size: 1.2rem;
  192. }
  193. .item-precent img{
  194. width: 100%;
  195. }