productGroup.wxss 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  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: #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: 25rpx 30rpx;
  143. }
  144. .attr-content .a-t {
  145. display: -webkit-box;
  146. display: -webkit-flex;
  147. display: flex;
  148. }
  149. .attr-content .a-t image {
  150. width: 170rpx;
  151. height: 170rpx;
  152. -webkit-flex-shrink: 0;
  153. flex-shrink: 0;
  154. border-radius: 8rpx;
  155. }
  156. .attr-content .a-t .right {
  157. display: -webkit-box;
  158. display: -webkit-flex;
  159. display: flex;
  160. -webkit-box-orient: vertical;
  161. -webkit-box-direction: normal;
  162. -webkit-flex-direction: column;
  163. flex-direction: column;
  164. padding-left: 24rpx;
  165. font-size: 26rpx;
  166. color: #606266;
  167. line-height: 42rpx;
  168. width: 75%;
  169. }
  170. .attr-content .a-t .right .price {
  171. font-size: 32rpx;
  172. color: #FF4C4C;
  173. margin: 10rpx 0rpx;
  174. }
  175. .attr-content .a-t .right .name {
  176. font-size: 32rpx;
  177. color: #303133;
  178. height: 50rpx;
  179. overflow: hidden;
  180. text-overflow: ellipsis;
  181. white-space: nowrap;
  182. display: block;
  183. }
  184. .attr-content .a-t .right .selected-text {
  185. margin-right: 10rpx;
  186. }
  187. .attr-content .attr-list {
  188. display: -webkit-box;
  189. display: -webkit-flex;
  190. display: flex;
  191. -webkit-box-orient: vertical;
  192. -webkit-box-direction: normal;
  193. -webkit-flex-direction: column;
  194. flex-direction: column;
  195. font-size: 30rpx;
  196. color: #606266;
  197. padding-top: 30rpx;
  198. padding-left: 10rpx;
  199. }
  200. .attr-content .item-list {
  201. padding: 20rpx 0 0;
  202. display: -webkit-box;
  203. display: -webkit-flex;
  204. display: flex;
  205. -webkit-flex-wrap: wrap;
  206. flex-wrap: wrap;
  207. }
  208. .attr-content .item-list text {
  209. display: -webkit-box;
  210. display: -webkit-flex;
  211. display: flex;
  212. -webkit-box-align: center;
  213. -webkit-align-items: center;
  214. align-items: center;
  215. -webkit-box-pack: center;
  216. -webkit-justify-content: center;
  217. justify-content: center;
  218. background: #eee;
  219. margin-right: 20rpx;
  220. margin-bottom: 20rpx;
  221. border-radius: 100rpx;
  222. min-width: 60rpx;
  223. height: 60rpx;
  224. padding: 0 20rpx;
  225. font-size: 28rpx;
  226. color: #303133;
  227. }
  228. .attr-content .item-list .selected {
  229. background: #ddffdf;
  230. color: #FF4C4C;
  231. }
  232. .goodsBottom {
  233. height: 160rpx;
  234. }
  235. page {
  236. background: #f0f0f0;
  237. }
  238. .contentBottomHeight {
  239. height: 110rpx;
  240. }
  241. .goodsBottom {
  242. height: 160rpx;
  243. }
  244. .iconenter {
  245. font-size: 30rpx;
  246. color: #888;
  247. }
  248. .con_image {
  249. width: 130rpx;
  250. height: 130rpx;
  251. display: inline-block;
  252. padding: 15rpx;
  253. }
  254. .con_image image {
  255. width: 100%;
  256. height: 100%;
  257. }
  258. /* 商品详情中限制图片大小 */
  259. .rich-img {
  260. width: 100% !important;
  261. height: auto;
  262. }
  263. .pinklistbox {
  264. background: #ffffff;
  265. margin-top: 25rpx;
  266. overflow: hidden;
  267. }
  268. .pink_num {
  269. background: -webkit-linear-gradient(left, #fdf5f6, #fbebf6);
  270. padding: 15rpx 25rpx;
  271. font-size: 26rpx;
  272. color: #dd524d;
  273. }
  274. .pint {
  275. background: -webkit-linear-gradient(left, #ff1f4f, #ff0409);
  276. padding: 10rpx 25rpx;
  277. color: #ffffff;
  278. font-size: 24rpx;
  279. border-radius: 25rpx;
  280. }
  281. .pint .iconenter {
  282. font-size: 15px;
  283. color: #ffffff;
  284. }
  285. .pinklist {
  286. padding: 0rpx 25rpx;
  287. padding-top: 45rpx !important;
  288. }
  289. .pinklist_list {
  290. margin-bottom: 10rpx;
  291. }
  292. .pink_img {
  293. width: 100rpx;
  294. height: 100rpx;
  295. }
  296. .pink_img image {
  297. width: 100%;
  298. height: 100%;
  299. border-radius: 100%;
  300. }
  301. .pink_people {
  302. font-size: 28rpx;
  303. }
  304. .pink_people text {
  305. color: #dd524d;
  306. }
  307. .pink_time {
  308. font-size: 26rpx;
  309. color: #909399;
  310. }
  311. .pink_name {
  312. width: 200rpx;
  313. overflow: hidden;
  314. white-space: nowrap;
  315. text-overflow: ellipsis;
  316. padding-left: 10rpx;
  317. }
  318. .More {
  319. width: 100%;
  320. line-height: 2;
  321. background-color: #fc2a3f;
  322. font-size: 32rpx;
  323. margin: 0 auto;
  324. text-align: center;
  325. color: #ffffff;
  326. }
  327. .ping-plan {
  328. background-color: #FFFFFF;
  329. padding: 25rpx 35rpx;
  330. border-top: 15rpx solid #F3F3F4;
  331. border-bottom: 15rpx solid #F3F3F4;
  332. }
  333. .participate-7 {
  334. color: #000000;
  335. font-size: 29rpx;
  336. font-weight: 500;
  337. padding-bottom: 25rpx;
  338. }
  339. .participate-7 .participate-7-1 .word {
  340. color: #ff0a1a;
  341. }
  342. .participate-7 .participate-7-1 .word1 {
  343. font-size: 25rpx;
  344. color: #989aa0;
  345. }
  346. .participate-7 .participate-7-1 image {
  347. width: 10rpx;
  348. height: 20rpx;
  349. margin-left: 15rpx;
  350. }
  351. .flex-between-center {
  352. display: -webkit-box;
  353. display: -webkit-flex;
  354. display: flex;
  355. -webkit-box-pack: justify;
  356. -webkit-justify-content: space-between;
  357. justify-content: space-between;
  358. -webkit-box-align: center;
  359. -webkit-align-items: center;
  360. align-items: center;
  361. }
  362. .participate-8 image {
  363. width: 26rpx;
  364. height: 12rpx;
  365. }
  366. .participate-8 .participate-8-1 {
  367. text-align: center;
  368. }
  369. .participate-8 .participate-8-1 .img1 {
  370. width: 43rpx;
  371. height: 50rpx;
  372. }
  373. .participate-8 .participate-8-1 .img2 {
  374. width: 43rpx;
  375. height: 42rpx;
  376. }
  377. .participate-8 .participate-8-1 .img3 {
  378. width: 60rpx;
  379. height: 46rpx;
  380. }
  381. .participate-8 .participate-8-1 .word-1 {
  382. font-size: 23rpx;
  383. color: #000000;
  384. line-height: 34rpx;
  385. }
  386. .participate-8 .participate-8-1 .word-2 {
  387. font-size: 21rpx;
  388. color: #91949B;
  389. line-height: 34rpx;
  390. }