index.wxss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. /* 新人专享 */
  2. .new-comers {
  3. position: relative;
  4. margin: 20rpx;
  5. background: #fff;
  6. border-radius: 10rpx;
  7. overflow: hidden;
  8. z-index: 0;
  9. }
  10. .new-comers-title {
  11. position: relative;
  12. margin-bottom: 20rpx;
  13. font-size: 30rpx;
  14. font-weight: bold;
  15. color: #333;
  16. padding-left: 20rpx;
  17. }
  18. .leftBorder {
  19. position: absolute;
  20. left: 0;
  21. top: 0;
  22. bottom: 0;
  23. border-left: 8rpx solid #f75451;
  24. }
  25. .new-comers-scroll {
  26. max-height: 380rpx;
  27. }
  28. .new-comers-wrap {
  29. position: relative;
  30. display: flex;
  31. flex-direction: row;
  32. flex-wrap: nowrap;
  33. }
  34. .new-comers-item {
  35. width: 260rpx;
  36. box-sizing: border-box;
  37. padding: 20rpx;
  38. font-size: 28rpx;
  39. }
  40. .new-comers-item .new-img {
  41. width: 220rpx;
  42. height: 220rpx;
  43. margin-bottom: 20rpx;
  44. }
  45. .new-comers-item .title {
  46. overflow: hidden;
  47. text-overflow: ellipsis;
  48. white-space: nowrap;
  49. }
  50. .new-comers-item .new-bot {
  51. display: flex;
  52. justify-content: space-between;
  53. align-items: center;
  54. margin-top: 10rpx;
  55. }
  56. .new-comers-item .add-cart {
  57. width: 44rpx;
  58. height: 44rpx;
  59. padding: 0;
  60. margin: 0;
  61. }
  62. .new-comers-item .add-cart .img {
  63. width: 44rpx;
  64. height: 44rpx;
  65. display: block;
  66. }
  67. .new-comers-item .price {
  68. color: #ff5041;
  69. }
  70. .new-comers-item {
  71. position: relative;
  72. }
  73. .new-comers-item .act-end {
  74. position: absolute;
  75. height: 60rpx;
  76. border-radius: 10rpx;
  77. background: rgba(0, 0, 0, 0.5);
  78. color: #fff;
  79. font-size: 28rpx;
  80. text-align: center;
  81. line-height: 60rpx;
  82. left: 50%;
  83. top: 80rpx;
  84. padding: 0 12rpx;
  85. transform: translateX(-50%);
  86. }
  87. /* 标签 */
  88. .new-comers-item .item-tag {
  89. position: absolute;
  90. left: 20rpx;
  91. top: 20rpx;
  92. width: 54rpx;
  93. height: 62rpx;
  94. z-index: 1;
  95. color: #fff;
  96. text-align: center;
  97. }
  98. .item-tag-bg {
  99. position: absolute;
  100. left: 0;
  101. top: 0;
  102. width: 54rpx;
  103. height: 62rpx;
  104. z-index: 0;
  105. }
  106. .new-comers-item .item-tag .tag-name {
  107. position: relative;
  108. padding-top: 6rpx;
  109. font-size: 20rpx;
  110. line-height: 1;
  111. font-weight: 600;
  112. z-index: 1;
  113. }
  114. .new-comers-item .item-tag .tag-name.two-word {
  115. font-size: 22rpx;
  116. padding-top: 14rpx;
  117. }
  118. .onlyThree .new-comers-item {
  119. width: 236rpx!important;
  120. }
  121. .onlyThree .new-comers-item .new-img {
  122. width: 196rpx!important;
  123. height: 196rpx!important;
  124. }
  125. /* diy */
  126. .diylist-theme-bg {
  127. position: absolute;
  128. left: 0;
  129. right: 0;
  130. top: 0;
  131. height: 160rpx;
  132. }
  133. .diylist-theme-red {
  134. background: linear-gradient(180deg, #FFD8D8, transparent);
  135. }
  136. .diylist-theme-blue {
  137. background: linear-gradient(180deg, #D7FAFF, transparent);
  138. }
  139. .diylist-theme-yellow {
  140. background: linear-gradient(180deg, #FFF4E0, transparent);
  141. }
  142. .diylist-theme-violet {
  143. background: linear-gradient(180deg, #F9E5FF, transparent);
  144. }
  145. .diylist-head {
  146. position: relative;
  147. line-height: 30rpx;
  148. height: 30rpx;
  149. padding: 30rpx 20rpx 10rpx;
  150. display: flex;
  151. align-items: center;
  152. justify-content: space-between;
  153. }
  154. .diylist-s1-lefticon {
  155. width: 125rpx;
  156. height: 30rpx;
  157. flex-shrink: 0;
  158. margin-right: 20rpx;
  159. }
  160. .diylist-s1-name {
  161. color: #909399;
  162. overflow: hidden;
  163. text-overflow: ellipsis;
  164. white-space: nowrap;
  165. flex: 1;
  166. }