house.wxss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. @charset "UTF-8";
  2. /* 需要放到文件最上面 */
  3. /* 水平间距 */
  4. /* 水平间距 */
  5. /*
  6. 以下变量是默认值,如不需要修改可以不用给下面的变量重新赋值
  7. */
  8. /* 水平间距 */
  9. .product {
  10. display: flex;
  11. flex-wrap: wrap;
  12. margin-top: 30rpx;
  13. padding-bottom: 60rpx;
  14. }
  15. .product .product-item {
  16. width: 50%;
  17. box-sizing: border-box;
  18. margin-bottom: 30rpx;
  19. }
  20. .product .product-item:nth-child(2n-1) {
  21. padding-right: 16rpx;
  22. }
  23. .product .product-item:nth-child(2n) {
  24. padding-left: 16rpx;
  25. }
  26. .product .product-box {
  27. background: #FFFFFF;
  28. border-radius: 16rpx;
  29. overflow: hidden;
  30. }
  31. .product .product-img {
  32. position: relative;
  33. }
  34. .product .product-img image {
  35. width: 100%;
  36. height: 260rpx !important;
  37. }
  38. .product .floor {
  39. position: absolute;
  40. left: 0;
  41. bottom: 20rpx;
  42. width: 100%;
  43. color: #FFFFFF;
  44. font-size: 24rpx;
  45. }
  46. .product .floor-box {
  47. display: block;
  48. overflow: hidden;
  49. word-break: keep-all;
  50. white-space: nowrap;
  51. text-overflow: ellipsis;
  52. padding: 0 10rpx;
  53. display: flex;
  54. align-items: center;
  55. }
  56. .product .floor .iconfont {
  57. color: #FFFFFF;
  58. font-size: 24rpx;
  59. display: inline-block;
  60. margin-right: 4rpx;
  61. }
  62. .product .product-info {
  63. padding: 10rpx 0 20rpx 0;
  64. }
  65. .product .product-info .title {
  66. font-size: 28rpx;
  67. padding: 0 20rpx;
  68. }
  69. .product .product-info .other {
  70. display: flex;
  71. padding-top: 10rpx;
  72. padding-left: 20rpx;
  73. color: #aaa;
  74. }
  75. .product .product-info .other text {
  76. font-size: 24rpx;
  77. }
  78. .product .product-info .other .line {
  79. margin: 0 10rpx;
  80. }
  81. .product .product-info .price {
  82. display: flex;
  83. align-items: center;
  84. padding-top: 6rpx;
  85. color: red;
  86. padding-left: 20rpx;
  87. }
  88. .product .product-info .price-box {
  89. flex: 1;
  90. }
  91. .product .product-info .price-box text {
  92. font-weight: bold;
  93. font-size: 30rpx;
  94. }
  95. .product .product-info .price-box .price-text {
  96. display: inline-block;
  97. font-size: 24rpx;
  98. scale: 0.9;
  99. }