product.wxss 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  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. border-radius: 10rpx 10rpx 0 0;
  57. background-color: #fff;
  58. }
  59. .popup .layer .btn {
  60. height: 66rpx;
  61. line-height: 66rpx;
  62. border-radius: 100rpx;
  63. background: -webkit-linear-gradient(left, #FBEB77, #F8DD4F);
  64. background: linear-gradient(to right, #FBEB77, #F8DD4F);
  65. font-size: 30rpx;
  66. color: #fff;
  67. margin: 30rpx auto 20rpx;
  68. }
  69. @-webkit-keyframes showPopup {
  70. 0% {
  71. opacity: 0;
  72. }
  73. 100% {
  74. opacity: 1;
  75. }
  76. }
  77. @keyframes showPopup {
  78. 0% {
  79. opacity: 0;
  80. }
  81. 100% {
  82. opacity: 1;
  83. }
  84. }
  85. @-webkit-keyframes hidePopup {
  86. 0% {
  87. opacity: 1;
  88. }
  89. 100% {
  90. opacity: 0;
  91. }
  92. }
  93. @keyframes hidePopup {
  94. 0% {
  95. opacity: 1;
  96. }
  97. 100% {
  98. opacity: 0;
  99. }
  100. }
  101. @-webkit-keyframes showLayer {
  102. 0% {
  103. -webkit-transform: translateY(120%);
  104. transform: translateY(120%);
  105. }
  106. 100% {
  107. -webkit-transform: translateY(0%);
  108. transform: translateY(0%);
  109. }
  110. }
  111. @keyframes showLayer {
  112. 0% {
  113. -webkit-transform: translateY(120%);
  114. transform: translateY(120%);
  115. }
  116. 100% {
  117. -webkit-transform: translateY(0%);
  118. transform: translateY(0%);
  119. }
  120. }
  121. @-webkit-keyframes hideLayer {
  122. 0% {
  123. -webkit-transform: translateY(0);
  124. transform: translateY(0);
  125. }
  126. 100% {
  127. -webkit-transform: translateY(120%);
  128. transform: translateY(120%);
  129. }
  130. }
  131. @keyframes hideLayer {
  132. 0% {
  133. -webkit-transform: translateY(0);
  134. transform: translateY(0);
  135. }
  136. 100% {
  137. -webkit-transform: translateY(120%);
  138. transform: translateY(120%);
  139. }
  140. }
  141. /* 规格选择弹窗 */
  142. .attr-content {
  143. padding: 25rpx 30rpx;
  144. }
  145. .attr-content .a-t {
  146. display: -webkit-box;
  147. display: -webkit-flex;
  148. display: flex;
  149. }
  150. .attr-content .a-t image {
  151. width: 170rpx;
  152. height: 170rpx;
  153. -webkit-flex-shrink: 0;
  154. flex-shrink: 0;
  155. border-radius: 8rpx;
  156. }
  157. .attr-content .a-t .right {
  158. display: -webkit-box;
  159. display: -webkit-flex;
  160. display: flex;
  161. -webkit-box-orient: vertical;
  162. -webkit-box-direction: normal;
  163. -webkit-flex-direction: column;
  164. flex-direction: column;
  165. padding-left: 24rpx;
  166. font-size: 26rpx;
  167. color: #606266;
  168. line-height: 42rpx;
  169. width: 75%;
  170. }
  171. .attr-content .a-t .right .price {
  172. font-size: 32rpx;
  173. color: #F8DD4F;
  174. margin: 10rpx 0rpx;
  175. }
  176. .attr-content .a-t .right .name {
  177. font-size: 32rpx;
  178. color: #303133;
  179. height: 50rpx;
  180. overflow: hidden;
  181. text-overflow: ellipsis;
  182. white-space: nowrap;
  183. display: block;
  184. }
  185. .attr-content .a-t .right .selected-text {
  186. margin-right: 10rpx;
  187. }
  188. .attr-content .attr-list {
  189. display: -webkit-box;
  190. display: -webkit-flex;
  191. display: flex;
  192. -webkit-box-orient: vertical;
  193. -webkit-box-direction: normal;
  194. -webkit-flex-direction: column;
  195. flex-direction: column;
  196. font-size: 30rpx;
  197. color: #606266;
  198. padding-top: 30rpx;
  199. padding-left: 10rpx;
  200. }
  201. .attr-content .item-list {
  202. padding: 20rpx 0 0;
  203. display: -webkit-box;
  204. display: -webkit-flex;
  205. display: flex;
  206. -webkit-flex-wrap: wrap;
  207. flex-wrap: wrap;
  208. }
  209. .attr-content .item-list text {
  210. display: -webkit-box;
  211. display: -webkit-flex;
  212. display: flex;
  213. -webkit-box-align: center;
  214. -webkit-align-items: center;
  215. align-items: center;
  216. -webkit-box-pack: center;
  217. -webkit-justify-content: center;
  218. justify-content: center;
  219. background: #eee;
  220. margin-right: 20rpx;
  221. margin-bottom: 20rpx;
  222. border-radius: 100rpx;
  223. min-width: 60rpx;
  224. height: 60rpx;
  225. padding: 0 20rpx;
  226. font-size: 28rpx;
  227. color: #303133;
  228. }
  229. .attr-content .item-list .selected {
  230. background: #ddffdf;
  231. color: #F8DD4F;
  232. }
  233. .goodsBottom {
  234. height: 160rpx;
  235. }
  236. page {
  237. background: #f0f0f0;
  238. }
  239. .contentBottomHeight {
  240. height: 110rpx;
  241. }
  242. .goodsBottom {
  243. height: 160rpx;
  244. }
  245. .iconenter {
  246. font-size: 30rpx;
  247. color: #888;
  248. }
  249. .con_image {
  250. width: 130rpx;
  251. height: 130rpx;
  252. display: inline-block;
  253. padding: 15rpx;
  254. }
  255. .con_image image {
  256. width: 100%;
  257. height: 100%;
  258. }
  259. /* 商品详情中限制图片大小 */
  260. .rich-img {
  261. width: 100% !important;
  262. height: auto;
  263. }