productGroup.wxss 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  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. }
  267. .pinklistbox {
  268. background: #ffffff;
  269. margin-top: 25rpx;
  270. overflow: hidden;
  271. }
  272. .pink_num {
  273. background: -webkit-linear-gradient(left, #fdf5f6, #fbebf6);
  274. padding: 15rpx 25rpx;
  275. font-size: 26rpx;
  276. color: #dd524d;
  277. }
  278. .pint {
  279. background: -webkit-linear-gradient(left, #ff1f4f, #ff0409);
  280. padding: 10rpx 25rpx;
  281. color: #ffffff;
  282. font-size: 24rpx;
  283. -webkit-border-radius: 25rpx;
  284. border-radius: 25rpx;
  285. }
  286. .pint .iconenter {
  287. font-size: 15px;
  288. color: #ffffff;
  289. }
  290. .pinklist {
  291. padding: 0rpx 25rpx;
  292. padding-top: 45rpx !important;
  293. }
  294. .pinklist_list {
  295. margin-bottom: 10rpx;
  296. }
  297. .pink_img {
  298. width: 100rpx;
  299. height: 100rpx;
  300. }
  301. .pink_img image {
  302. width: 100%;
  303. height: 100%;
  304. -webkit-border-radius: 100%;
  305. border-radius: 100%;
  306. }
  307. .pink_people {
  308. font-size: 28rpx;
  309. }
  310. .pink_people text {
  311. color: #dd524d;
  312. }
  313. .pink_time {
  314. font-size: 26rpx;
  315. color: #909399;
  316. }
  317. .pink_name {
  318. width: 200rpx;
  319. overflow: hidden;
  320. white-space: nowrap;
  321. text-overflow: ellipsis;
  322. padding-left: 10rpx;
  323. }
  324. .More {
  325. width: 100%;
  326. line-height: 2;
  327. background-color: #fc2a3f;
  328. font-size: 32rpx;
  329. margin: 0 auto;
  330. text-align: center;
  331. color: #ffffff;
  332. }
  333. .ping-plan {
  334. background-color: #FFFFFF;
  335. padding: 25rpx 35rpx;
  336. border-top: 15rpx solid #F3F3F4;
  337. border-bottom: 15rpx solid #F3F3F4;
  338. }
  339. .participate-7 {
  340. color: #000000;
  341. font-size: 29rpx;
  342. font-weight: 500;
  343. padding-bottom: 25rpx;
  344. }
  345. .participate-7 .participate-7-1 .word {
  346. color: #ff0a1a;
  347. }
  348. .participate-7 .participate-7-1 .word1 {
  349. font-size: 25rpx;
  350. color: #989aa0;
  351. }
  352. .participate-7 .participate-7-1 image {
  353. width: 10rpx;
  354. height: 20rpx;
  355. margin-left: 15rpx;
  356. }
  357. .flex-between-center {
  358. display: -webkit-box;
  359. display: -webkit-flex;
  360. display: flex;
  361. -webkit-box-pack: justify;
  362. -webkit-justify-content: space-between;
  363. justify-content: space-between;
  364. -webkit-box-align: center;
  365. -webkit-align-items: center;
  366. align-items: center;
  367. }
  368. .participate-8 image {
  369. width: 26rpx;
  370. height: 12rpx;
  371. }
  372. .participate-8 .participate-8-1 {
  373. text-align: center;
  374. }
  375. .participate-8 .participate-8-1 .img1 {
  376. width: 43rpx;
  377. height: 50rpx;
  378. }
  379. .participate-8 .participate-8-1 .img2 {
  380. width: 43rpx;
  381. height: 42rpx;
  382. }
  383. .participate-8 .participate-8-1 .img3 {
  384. width: 60rpx;
  385. height: 46rpx;
  386. }
  387. .participate-8 .participate-8-1 .word-1 {
  388. font-size: 23rpx;
  389. color: #000000;
  390. line-height: 34rpx;
  391. }
  392. .participate-8 .participate-8-1 .word-2 {
  393. font-size: 21rpx;
  394. color: #91949B;
  395. line-height: 34rpx;
  396. }