goodsList.css 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /* components/topicList/topicList.wxss */
  2. /* 分块一 */
  3. .list1 {
  4. /* padding: 0 20rpx 20rpx; */
  5. }
  6. .list1 .li {background: #fff;border-radius: 12rpx;padding: 20rpx;overflow: hidden;align-items: center;margin-top: 20rpx;}
  7. .list1 .li:nth-child(1) {margin-top: 0rpx;}
  8. .list1 .li .title {font-size: 28rpx;color: #333;text-overflow: ellipsis;white-space: nowrap;overflow: hidden}
  9. .liimg {width: 100%;height: 100%;border-radius: 12rpx;}
  10. .list1 .li .info {overflow: hidden;
  11. /* height: 200rpx; */
  12. }
  13. .list1 .li .proname {font-size: 28rpx;color: #333;}
  14. .yushou{display: inline-block;border: 2rpx solid #FE0419;border-radius: 6rpx;font-size: 22rpx;color: #FE0419;height: 28rpx;line-height: 29rpx;padding: 0 10rpx;vertical-align: top;margin-right: 15rpx;}
  15. .list1 .li .infos {font-size: 24rpx;color: #999;margin: 0 0 10rpx;
  16. /* height: 20rpx; */
  17. text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
  18. /* .Ninfos {padding: 16rpx 0;} */
  19. .operate {justify-content: space-between;align-items: center;clear: both;overflow: hidden;margin-top: 15rpx;}
  20. .price {font-size: 25rpx;color: #FE0419;align-items: center;flex-wrap: nowrap;}
  21. .price text {font-size: 36rpx;font-weight: bold;}
  22. .price text.del {font-size: 24rpx !important;color: #999;text-decoration: line-through;margin-left: 15rpx;font-weight: normal !important;}
  23. .show-vip{margin-bottom: 10rpx;}
  24. .price .vip,.show-vip .vip {font-size: 24rpx;margin-left: 12rpx;color: var(--vip);border: 1rpx solid;padding: 0 8rpx 2rpx 8rpx;border-radius: 5px;font-weight: normal;}
  25. .btn {width: 150rpx;height: 50rpx;background: linear-gradient(90deg, rgba(254, 147, 76, 1) 0%, rgba(253, 58, 49, 1) 100%);font-size: 24rpx;color: #fff;text-align: center;line-height: 50rpx;border-radius: 25rpx;}
  26. /* yml */
  27. .jsdimgs1 {position: relative;width: 200rpx;height: 200rpx;border-radius: 12rpx;margin-right: 20rpx;overflow: hidden;}
  28. .jsdimg1 {position: absolute;top: 5rpx;left: 0rpx;width: 82rpx;height: 36rpx;}
  29. /* 分块二 */
  30. .list2 {flex-wrap: wrap;
  31. /* padding: 0 20rpx 20rpx; */
  32. }
  33. .list2 .li {background: #fff;border-radius: 10rpx;width: 345rpx;margin: 20rpx 20rpx 0 0;overflow: hidden;}
  34. .list2 .li:nth-child(2n) {margin-right: 0;}
  35. .jsdimgs {width: 345rpx;height: 345rpx;position: relative;overflow: hidden;}
  36. .jsdpro {width: 100%;height: 100%;border-radius: 10rpx 10rpx 0 0;}
  37. .proname {font-size: 28rpx;color: #333;}
  38. .jsdimg {width: 82rpx;height: 36rpx;position: absolute;top: 20rpx;left: 20rpx;z-index: 1;}
  39. .shouqing{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;}
  40. .jsdinfo {padding: 15rpx 20rpx 30rpx;}
  41. .add-cart image {width: 42rpx;height: 42rpx;}
  42. .list2 .li .price {display: flex;font-size: 24rpx;}
  43. .list2 .li .price text {font-size: 36rpx;font-weight: bold;}
  44. .list2 .li .price .vip,.list2 .li .show-vip .vip {font-size: 24rpx;margin-left: 12rpx;color: var(--vip);border: 1rpx solid;padding: 0 8rpx 2rpx 8rpx;border-radius: 5px;font-weight: normal;}
  45. .list2 .li .show-vip .vip{margin-left: 0;}
  46. .price .vip .members,.show-vip .vip {font-size: 24rpx !important;font-weight: normal !important;margin-left: 2rpx;}
  47. .price .vip .sale,.show-vip .vip {font-size: 24rpx !important;font-weight: normal !important;}
  48. /* 分块三 */
  49. .list3 {flex-wrap: wrap;
  50. /* padding: 0 20rpx 20rpx; */
  51. }
  52. .list3 .li {background: #fff;border-radius: 10rpx;width: 220rpx;margin: 20rpx 25rpx 0 0;}
  53. .list3 .li:nth-child(3n) {margin-right: 0;}
  54. .list3 .jsdimgs {width: 100%;height: 220rpx;}
  55. .list3 .li .jsdinfo {padding: 10px 14px 15rpx;}
  56. .list3 .li .proname {margin-bottom: 10rpx;}
  57. .list3 .li .price {font-size: 20rpx;}
  58. .list3 .li .price text {font-size: 28rpx;}
  59. .list3 .li .jsdimg {top: 0;left: 0;}
  60. /* 分隔线一 */
  61. .list4 {padding: 0 20rpx;background: #fff;}
  62. .list4 .li {border-radius: 0;background-color: none;border-bottom: 2rpx solid #f4f1f4;padding: 20rpx 0;margin-top: 0;}
  63. .list4 .li:first-child {padding: 0 0 20rpx 0;}
  64. .list4 .li:last-child {border-bottom: none;}
  65. /* 分隔线二 */
  66. .list5 {
  67. /* padding: 20rpx; */
  68. background: #fff;}
  69. .list5 .li {width: 355rpx;border-radius: 0;background-color: none;border-top: 2rpx solid #f4f1f4;border-right: 2rpx solid #f4f1f4;margin: 0;box-sizing: border-box;padding-top: 20rpx;}
  70. .list5 .li:nth-child(2n) {padding-left: 10rpx;border-right: none;}
  71. .list5 .li:nth-child(3n) {padding-right: 10rpx;}
  72. .list5 .li:first-child {padding-right: 10rpx;}
  73. .list5 .li:first-child, .list5 .li:nth-child(2) {padding-top: 0;border-top: none;}
  74. /* .list5 .li:nth-last-child(2), */
  75. .list5 .li:last-child {border-bottom: none;}
  76. .list5 .li .jsdinfo {padding-bottom: 20rpx;}
  77. .list5 .li:nth-last-child(2) .jsdinfo, .list5 .li:last-child .jsdinfo {padding-bottom: 10rpx;}
  78. /* 分隔线三 */
  79. .list6 {
  80. /* padding: 20rpx; */
  81. background: #fff;}
  82. .list6 .li {width: 237rpx;border-radius: 0;background-color: none;border-bottom: 2rpx solid #f4f1f4;border-right: 2rpx solid #f4f1f4;margin: 0;box-sizing: border-box;padding: 20rpx 10rpx 0;}
  83. .list6 .li:nth-child(3n) {padding-right: 0;border-right: none;}
  84. .list6 .li:first-child, .list6 .li:nth-child(3n+1) {padding-left: 0;}
  85. .list6 .li:first-child, .list6 .li:nth-child(2), .list6 .li:nth-child(3) {padding-top: 0;}
  86. /* .list6 .li:nth-last-child(3),
  87. .list6 .li:nth-last-child(2), */
  88. .list6 .li:last-child {border-bottom: none;}
  89. .list6 .li .jsdinfo {padding: 10rpx 10rpx 15rpx;}
  90. /* 无分隔线 */
  91. .list7 {background: #fff;margin: 20rpx;border-radius: 12rpx;padding: 0 20rpx 15rpx;}
  92. .list7 .li {width: 210rpx;margin-right: 22rpx;}
  93. .list7 .li:nth-child(3n) {margin-right: 0;}
  94. .list7 .li .jsdinfo {padding: 10rpx 0 15rpx;}
  95. /* yml banner图 */
  96. .banner {margin-bottom: 20rpx;height: 300rpx;overflow: hidden;position: relative;}
  97. .banner2 {padding: 20rpx;height: 300rpx;overflow: hidden;position: relative;}
  98. .banner .swiper, .banner .swiper image {width: 100%;height: 300rpx;}
  99. .banner2 .swiper, .banner2 .swiper image {width: 100%;height: 300rpx;border-radius: 20rpx;}
  100. .dots {position: absolute;left: 0;right: 0;bottom: 20rpx;align-items: center;justify-content: center;}
  101. .dot {background: #fff;width: 10rpx;height: 10rpx;border-radius: 5rpx;margin: 0 3rpx;}
  102. .dot.active {width: 30rpx;}
  103. .endtimes {display: inline-block;height: 32rpx;line-height: 32rpx;border-radius: 6rpx;padding: 0 8rpx;font-size: 24rpx;color: #FE0419;margin: 15rpx 0 65rpx;}
  104. .remind {width: 150rpx;height: 50rpx;border-radius: 25rpx;font-size: 24rpx;color: #fff;text-align: center;justify-content: center;line-height: 50rpx;}
  105. .xiaol {margin-top: 15rpx;line-height: 32rpx;flex-wrap: nowrap;}
  106. .xiaoll{margin-bottom: 0;}
  107. .zhuan {float: left;height: 32rpx;font-size: 20rpx;color: #fff;box-sizing: border-box;align-items: center;margin-right: 15rpx;}
  108. .zhuan text {padding: 0 6rpx;border-radius: 2rpx 0 0 2rpx;background: #C28A4F;height: 32rpx;line-height: 32rpx;}
  109. .zhuan view {font-size: 22rpx;color: #BF7A40;padding: 0 5rpx 0 2rpx;background: #fff;height: 28rpx;border: 2rpx solid #C08046;border-radius: 0 2rpx 2rpx 0;border-left: none;}
  110. .yishou {font-size: 24rpx;color: #999;clear: both;overflow: hidden;white-space: nowrap;}
  111. .list-tag{margin-top: 15rpx;height: 32rpx;}
  112. .list-tag view {height: 30rpx;border: 1px solid var(--main);border-radius: 6rpx;padding: 0 7rpx;font-size: 20rpx;color: var(--main);margin-right: 10rpx;}
  113. .vip-news{height: 36rpx;background: #222222;border-radius: 8rpx;line-height: 36rpx;flex-wrap: nowrap;margin-right: 12rpx;font-weight: bold;}
  114. .vip-sale{background: linear-gradient(to right,#f9e0bc,#d9a168);font-size: 20rpx !important;color: #222;height: 36rpx;border-radius: 8rpx 0 0 8rpx;white-space: nowrap;width: 70rpx;text-align: center;}
  115. .vip-members{padding: 0 8rpx 0 5rpx;font-size: 22rpx !important;color: #fde9cd !important;white-space: nowrap;}
  116. .list1 .vip-news{margin-right: 0;margin-left: 12rpx;}