product.wxss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  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: 30vh;
  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: #FF4C4C;
  64. font-size: 30rpx;
  65. color: #fff;
  66. margin: 30rpx auto 20rpx;
  67. }
  68. @-webkit-keyframes showPopup {
  69. 0% {
  70. opacity: 0;
  71. }
  72. 100% {
  73. opacity: 1;
  74. }
  75. }
  76. @keyframes showPopup {
  77. 0% {
  78. opacity: 0;
  79. }
  80. 100% {
  81. opacity: 1;
  82. }
  83. }
  84. @-webkit-keyframes hidePopup {
  85. 0% {
  86. opacity: 1;
  87. }
  88. 100% {
  89. opacity: 0;
  90. }
  91. }
  92. @keyframes hidePopup {
  93. 0% {
  94. opacity: 1;
  95. }
  96. 100% {
  97. opacity: 0;
  98. }
  99. }
  100. @-webkit-keyframes showLayer {
  101. 0% {
  102. -webkit-transform: translateY(120%);
  103. transform: translateY(120%);
  104. }
  105. 100% {
  106. -webkit-transform: translateY(0%);
  107. transform: translateY(0%);
  108. }
  109. }
  110. @keyframes showLayer {
  111. 0% {
  112. -webkit-transform: translateY(120%);
  113. transform: translateY(120%);
  114. }
  115. 100% {
  116. -webkit-transform: translateY(0%);
  117. transform: translateY(0%);
  118. }
  119. }
  120. @-webkit-keyframes hideLayer {
  121. 0% {
  122. -webkit-transform: translateY(0);
  123. transform: translateY(0);
  124. }
  125. 100% {
  126. -webkit-transform: translateY(120%);
  127. transform: translateY(120%);
  128. }
  129. }
  130. @keyframes hideLayer {
  131. 0% {
  132. -webkit-transform: translateY(0);
  133. transform: translateY(0);
  134. }
  135. 100% {
  136. -webkit-transform: translateY(120%);
  137. transform: translateY(120%);
  138. }
  139. }
  140. /* 规格选择弹窗 */
  141. .attr-content {
  142. padding: 10rpx 30rpx;
  143. }
  144. .attr-content .a-t {
  145. display: flex;
  146. }
  147. .attr-content .a-t image {
  148. width: 170rpx;
  149. height: 170rpx;
  150. flex-shrink: 0;
  151. border-radius: 8rpx;
  152. }
  153. .attr-content .a-t .right {
  154. display: flex;
  155. flex-direction: column;
  156. padding-left: 24rpx;
  157. font-size: 26rpx;
  158. color: #606266;
  159. line-height: 42rpx;
  160. }
  161. .attr-content .a-t .right .good-name {
  162. padding-top: 20rpx;
  163. max-width: 320rpx;
  164. font-size: 30rpx;
  165. font-family: PingFang SC;
  166. font-weight: bold;
  167. color: #1d2023;
  168. line-height: 42rpx;
  169. margin-bottom: 15rpx;
  170. }
  171. .attr-content .a-t .right .price {
  172. font-size: 60rpx;
  173. font-family: PingFang SC;
  174. font-weight: bold;
  175. color: #ff6f0f;
  176. }
  177. .attr-content .a-t .right .selected-text {
  178. margin-right: 10rpx;
  179. }
  180. .attr-content .attr-list {
  181. display: flex;
  182. flex-direction: column;
  183. font-size: 30rpx;
  184. color: #606266;
  185. padding-top: 30rpx;
  186. padding-left: 10rpx;
  187. }
  188. .attr-content .item-list {
  189. padding: 20rpx 0 0;
  190. display: flex;
  191. flex-wrap: wrap;
  192. }
  193. .attr-content .item-list .tit {
  194. display: flex;
  195. align-items: center;
  196. justify-content: center;
  197. background: #eee;
  198. margin-right: 20rpx;
  199. margin-bottom: 20rpx;
  200. border-radius: 100rpx;
  201. min-width: 60rpx;
  202. height: 60rpx;
  203. padding: 0 20rpx;
  204. font-size: 28rpx;
  205. color: #303133;
  206. }
  207. .attr-content .item-list .selected {
  208. background: #FCEFF1;
  209. border: 1px solid #EF041F;
  210. color: #EF041F;
  211. }
  212. .goodsBottom {
  213. height: 160rpx;
  214. }
  215. page {
  216. background: #f0f0f0;
  217. }
  218. .contentBottomHeight {
  219. height: 110rpx;
  220. }
  221. .goodsBottom {
  222. height: 160rpx;
  223. }
  224. .iconenter {
  225. font-size: 30rpx;
  226. color: #888;
  227. }
  228. .con_image {
  229. width: 130rpx;
  230. height: 130rpx;
  231. display: inline-block;
  232. padding: 15rpx;
  233. }
  234. .con_image image {
  235. width: 100%;
  236. height: 100%;
  237. }
  238. /* 商品详情中限制图片大小 */
  239. .rich-img {
  240. width: 100% !important;
  241. height: auto;
  242. }
  243. .c-list {
  244. margin-top: 20rpx;
  245. font-size: 26rpx;
  246. color: #606266;
  247. background: #fff;
  248. }
  249. .c-list .c-row {
  250. display: flex;
  251. align-items: center;
  252. padding: 20rpx 30rpx;
  253. position: relative;
  254. }
  255. .c-list .tit {
  256. width: 140rpx;
  257. }
  258. .c-list .con {
  259. flex: 1;
  260. color: #303133;
  261. }
  262. .c-list .con .selected-text {
  263. margin-right: 10rpx;
  264. }
  265. .c-list .bz-list {
  266. height: 40rpx;
  267. font-size: 26rpx;
  268. color: #303133;
  269. }
  270. .c-list .bz-list text {
  271. display: inline-block;
  272. margin-right: 30rpx;
  273. }
  274. .c-list .con-list {
  275. flex: 1;
  276. display: flex;
  277. flex-direction: column;
  278. color: #303133;
  279. line-height: 40rpx;
  280. }
  281. .c-list .red {
  282. color: #5dbc7c;
  283. }