product.wxss 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. /* 弹出层 */
  12. .popup {
  13. position: fixed;
  14. left: 0;
  15. top: 0;
  16. right: 0;
  17. bottom: 0;
  18. z-index: 99;
  19. }
  20. .popup.show {
  21. display: block;
  22. }
  23. .popup.show .mask {
  24. -webkit-animation: showPopup 0.2s linear both;
  25. animation: showPopup 0.2s linear both;
  26. }
  27. .popup.show .layer {
  28. -webkit-animation: showLayer 0.2s linear both;
  29. animation: showLayer 0.2s linear both;
  30. }
  31. .popup.hide .mask {
  32. -webkit-animation: hidePopup 0.2s linear both;
  33. animation: hidePopup 0.2s linear both;
  34. }
  35. .popup.hide .layer {
  36. -webkit-animation: hideLayer 0.2s linear both;
  37. animation: hideLayer 0.2s linear both;
  38. }
  39. .popup.none {
  40. display: none;
  41. }
  42. .popup .mask {
  43. position: fixed;
  44. top: 0;
  45. width: 100%;
  46. height: 100%;
  47. z-index: 1;
  48. background-color: rgba(0, 0, 0, 0.4);
  49. }
  50. .popup .layer {
  51. position: fixed;
  52. z-index: 99;
  53. bottom: 0;
  54. width: 100%;
  55. min-height: 35vh;
  56. -webkit-border-radius: 10rpx 10rpx 0 0;
  57. border-radius: 10rpx 10rpx 0 0;
  58. background-color: #fff;
  59. }
  60. .popup .layer .btn {
  61. height: 66rpx;
  62. line-height: 66rpx;
  63. -webkit-border-radius: 100rpx;
  64. border-radius: 100rpx;
  65. background: #5dbc7c;
  66. font-size: 30rpx;
  67. color: #fff;
  68. margin: 30rpx auto 20rpx;
  69. }
  70. @-webkit-keyframes showPopup {
  71. 0% {
  72. opacity: 0;
  73. }
  74. 100% {
  75. opacity: 1;
  76. }
  77. }
  78. @keyframes showPopup {
  79. 0% {
  80. opacity: 0;
  81. }
  82. 100% {
  83. opacity: 1;
  84. }
  85. }
  86. @-webkit-keyframes hidePopup {
  87. 0% {
  88. opacity: 1;
  89. }
  90. 100% {
  91. opacity: 0;
  92. }
  93. }
  94. @keyframes hidePopup {
  95. 0% {
  96. opacity: 1;
  97. }
  98. 100% {
  99. opacity: 0;
  100. }
  101. }
  102. @-webkit-keyframes showLayer {
  103. 0% {
  104. -webkit-transform: translateY(120%);
  105. transform: translateY(120%);
  106. }
  107. 100% {
  108. -webkit-transform: translateY(0%);
  109. transform: translateY(0%);
  110. }
  111. }
  112. @keyframes showLayer {
  113. 0% {
  114. -webkit-transform: translateY(120%);
  115. transform: translateY(120%);
  116. }
  117. 100% {
  118. -webkit-transform: translateY(0%);
  119. transform: translateY(0%);
  120. }
  121. }
  122. @-webkit-keyframes hideLayer {
  123. 0% {
  124. -webkit-transform: translateY(0);
  125. transform: translateY(0);
  126. }
  127. 100% {
  128. -webkit-transform: translateY(120%);
  129. transform: translateY(120%);
  130. }
  131. }
  132. @keyframes hideLayer {
  133. 0% {
  134. -webkit-transform: translateY(0);
  135. transform: translateY(0);
  136. }
  137. 100% {
  138. -webkit-transform: translateY(120%);
  139. transform: translateY(120%);
  140. }
  141. }
  142. /* 规格选择弹窗 */
  143. .attr-content {
  144. padding: 25rpx 30rpx;
  145. }
  146. .attr-content .a-t {
  147. display: -webkit-box;
  148. display: -webkit-flex;
  149. display: flex;
  150. }
  151. .attr-content .a-t image {
  152. width: 170rpx;
  153. height: 170rpx;
  154. -webkit-flex-shrink: 0;
  155. flex-shrink: 0;
  156. -webkit-border-radius: 8rpx;
  157. border-radius: 8rpx;
  158. }
  159. .attr-content .a-t .right {
  160. display: -webkit-box;
  161. display: -webkit-flex;
  162. display: flex;
  163. -webkit-box-orient: vertical;
  164. -webkit-box-direction: normal;
  165. -webkit-flex-direction: column;
  166. flex-direction: column;
  167. padding-left: 24rpx;
  168. font-size: 26rpx;
  169. color: #606266;
  170. line-height: 42rpx;
  171. width: 75%;
  172. }
  173. .attr-content .a-t .right .price {
  174. font-size: 32rpx;
  175. color: #5dbc7c;
  176. margin: 10rpx 0rpx;
  177. }
  178. .attr-content .a-t .right .name {
  179. font-size: 32rpx;
  180. color: #303133;
  181. height: 50rpx;
  182. overflow: hidden;
  183. text-overflow: ellipsis;
  184. white-space: nowrap;
  185. display: block;
  186. }
  187. .attr-content .a-t .right .selected-text {
  188. margin-right: 10rpx;
  189. }
  190. .attr-content .attr-list {
  191. display: -webkit-box;
  192. display: -webkit-flex;
  193. display: flex;
  194. -webkit-box-orient: vertical;
  195. -webkit-box-direction: normal;
  196. -webkit-flex-direction: column;
  197. flex-direction: column;
  198. font-size: 30rpx;
  199. color: #606266;
  200. padding-top: 30rpx;
  201. padding-left: 10rpx;
  202. }
  203. .attr-content .item-list {
  204. padding: 20rpx 0 0;
  205. display: -webkit-box;
  206. display: -webkit-flex;
  207. display: flex;
  208. -webkit-flex-wrap: wrap;
  209. flex-wrap: wrap;
  210. }
  211. .attr-content .item-list text {
  212. display: -webkit-box;
  213. display: -webkit-flex;
  214. display: flex;
  215. -webkit-box-align: center;
  216. -webkit-align-items: center;
  217. align-items: center;
  218. -webkit-box-pack: center;
  219. -webkit-justify-content: center;
  220. justify-content: center;
  221. background: #eee;
  222. margin-right: 20rpx;
  223. margin-bottom: 20rpx;
  224. -webkit-border-radius: 100rpx;
  225. border-radius: 100rpx;
  226. min-width: 60rpx;
  227. height: 60rpx;
  228. padding: 0 20rpx;
  229. font-size: 28rpx;
  230. color: #303133;
  231. }
  232. .attr-content .item-list .selected {
  233. background: #ddffdf;
  234. color: #5dbc7c;
  235. }
  236. .goodsBottom {
  237. height: 160rpx;
  238. }
  239. page {
  240. background: #f0f0f0;
  241. }
  242. .contentBottomHeight {
  243. height: 110rpx;
  244. }
  245. .goodsBottom {
  246. height: 160rpx;
  247. }
  248. .iconenter {
  249. font-size: 30rpx;
  250. color: #888;
  251. }
  252. .con_image {
  253. width: 130rpx;
  254. height: 130rpx;
  255. display: inline-block;
  256. padding: 15rpx;
  257. }
  258. .con_image image {
  259. width: 100%;
  260. height: 100%;
  261. }
  262. /* 商品详情中限制图片大小 */
  263. .rich-img {
  264. width: 100% !important;
  265. height: auto;
  266. }