diypage.less 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. .page-view {
  2. width: 100%;
  3. height: 100%;
  4. // background-color: #fff;
  5. font-size: 12px;
  6. overflow-y: scroll;
  7. margin: none;
  8. overflow-x: hidden;
  9. .diy-phone {
  10. width: 100%;
  11. height: 100%;
  12. .phone-body {
  13. width: 100%;
  14. height: 100%;
  15. .phone-main {
  16. width: 100%;
  17. height: 100%;
  18. }
  19. }
  20. }
  21. .fui-goods-group{
  22. height: auto;
  23. overflow: hidden;
  24. background: #f9f9f9;
  25. display: flex;
  26. flex-wrap: wrap;
  27. &.block{
  28. padding: 4px;
  29. .fui-goods-item{
  30. width: 48%;
  31. border-bottom: 0;
  32. background: none;
  33. padding: 5px 3px;
  34. overflow: hidden;
  35. position: relative;
  36. // display: block;
  37. display: flex;
  38. flex-direction: column;
  39. justify-content: space-between;
  40. margin-top: 5px;
  41. background-color: #fff;
  42. &:nth-child(odd){
  43. margin-right: 10px;
  44. }
  45. .tag{
  46. position: absolute;
  47. color: #fff;
  48. width: 150rpx;
  49. height: 80rpx;
  50. display: flex;
  51. align-items: flex-end;
  52. justify-content: center;
  53. text-align: center;
  54. top: -30rpx;
  55. left: -70rpx;
  56. // line-height: 60rpx;
  57. margin: 0;
  58. padding: 0;
  59. background-color: red;
  60. transform: rotate(-45deg);
  61. }
  62. .image{
  63. width: 100%;
  64. height: 284rpx;
  65. overflow: hidden;
  66. margin: 0;
  67. background-position: center;
  68. background-repeat: no-repeat;
  69. background-size: cover;
  70. }
  71. .detail{
  72. padding: 10rpx;
  73. .name{
  74. height: 30px;
  75. overflow: hidden;
  76. // padding-top:5px;
  77. // padding-left: 5px;
  78. }
  79. .noheight{
  80. display: none;
  81. }
  82. .price{
  83. position: relative;
  84. display: -webkit-box;
  85. display: -webkit-flex;
  86. display: -ms-flexbox;
  87. display: flex;
  88. -webkit-box-align: center;
  89. -webkit-align-items: center;
  90. -ms-flex-align: center;
  91. align-items: center;
  92. font-size: 14px;
  93. .text{
  94. -webkit-box-flex: 1;
  95. -webkit-flex: 1;
  96. -ms-flex: 1;
  97. flex: 1;
  98. color: #ed2822;
  99. padding-left: 0;
  100. .minprice{
  101. font-size: 15px;
  102. }
  103. .buy{
  104. display: inline-block;
  105. height: 22px;
  106. color: #ff5555;
  107. // line-height: 1rem;
  108. border-radius: 10;
  109. background: #fff;
  110. padding: 0rem 5px;
  111. // width: 150px;
  112. // border-radius: 0.1rem;
  113. border: 1px solid transparent;
  114. }
  115. }
  116. }
  117. }
  118. }
  119. .fui-goods-item-one {
  120. // height: 100px;
  121. height: 288rpx;
  122. width: 100%;
  123. display: flex;
  124. align-items: center;
  125. background-color: #ffffff;
  126. box-sizing: border-box;
  127. padding: 5px 0;
  128. position: relative;
  129. overflow: hidden;
  130. .tag{
  131. position: absolute;
  132. color: #fff;
  133. width: 150rpx;
  134. height: 80rpx;
  135. display: flex;
  136. align-items: flex-end;
  137. justify-content: center;
  138. text-align: center;
  139. top: -30rpx;
  140. left: -70rpx;
  141. // line-height: 60rpx;
  142. margin: 0;
  143. padding: 0;
  144. background-color: red;
  145. transform: rotate(-45deg);
  146. }
  147. .image {
  148. width: 45%;
  149. height: 288rpx;
  150. overflow: hidden;
  151. margin: 0;
  152. background-position: center;
  153. background-size: 100% 100%;
  154. -webkit-background-size:100% 100%;
  155. }
  156. .detail {
  157. .name {
  158. height: 30px;
  159. overflow: hidden;
  160. // padding-top: 5px;
  161. // padding-left: 5px;
  162. }
  163. .noheight {
  164. display: none;
  165. }
  166. .price {
  167. position: relative;
  168. display: -webkit-box;
  169. display: -webkit-flex;
  170. display: -ms-flexbox;
  171. display: flex;
  172. -webkit-box-align: center;
  173. -webkit-align-items: center;
  174. -ms-flex-align: center;
  175. align-items: center;
  176. font-size: 14px;
  177. margin-right: 10px;
  178. .text {
  179. -webkit-box-flex: 1;
  180. -webkit-flex: 1;
  181. -ms-flex: 1;
  182. flex: 1;
  183. color: #ed2822;
  184. padding-left: 0;
  185. .minprice {
  186. font-size: 15px;
  187. margin-right: 10px;
  188. }
  189. .buy {
  190. display: inline-block;
  191. height: 1.1rem;
  192. color: #ff5555;
  193. line-height: 1rem;
  194. border-radius: 10;
  195. background: #fff;
  196. padding: 0rem 5px;
  197. width: 150px;
  198. border-radius: 0.1rem;
  199. border: 1px solid transparent;
  200. }
  201. }
  202. }
  203. }
  204. }
  205. }
  206. }
  207. .icongroup{
  208. display: flex;
  209. justify-content: space-between;
  210. flex-wrap: wrap;
  211. .icongroup-item{
  212. display: flex;
  213. flex-direction: column;
  214. justify-items: center;
  215. align-items: center;
  216. .title{
  217. margin-top: 10px;
  218. }
  219. }
  220. }
  221. .banner{
  222. height: 400rpx;
  223. swiper{
  224. height: 100%;
  225. }
  226. }
  227. }