houseDetail.wxss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. @charset "UTF-8";
  2. /* 需要放到文件最上面 */
  3. /* 水平间距 */
  4. /* 水平间距 */
  5. /*
  6. 以下变量是默认值,如不需要修改可以不用给下面的变量重新赋值
  7. */
  8. /* 水平间距 */
  9. .house-detail {
  10. background: #fff;
  11. padding-bottom: 140rpx;
  12. }
  13. .house-detail .banner {
  14. position: relative;
  15. width: 100%;
  16. }
  17. .house-detail .banner .banner-swiper {
  18. height: 600rpx;
  19. }
  20. .house-detail .banner .banner-swiper-img {
  21. height: 600rpx !important;
  22. }
  23. .house-detail .banner .swiper-item image {
  24. width: 100%;
  25. }
  26. .house-detail .banner .indicator-dots {
  27. position: absolute;
  28. bottom: 30rpx;
  29. left: 0;
  30. right: 0;
  31. display: flex;
  32. justify-content: center;
  33. align-items: center;
  34. }
  35. .house-detail .banner .indicator-dots text {
  36. font-size: 24rpx;
  37. color: #ffffff;
  38. background: rgba(0, 0, 0, 0.5);
  39. border-radius: 50rpx;
  40. width: 64rpx;
  41. text-align: center;
  42. }
  43. .house-detail .banner .uni-swiper-dot {
  44. width: 40rpx;
  45. height: 4rpx;
  46. border-radius: 20rpx;
  47. }
  48. .house-detail .house-info {
  49. position: relative;
  50. padding: 30rpx;
  51. border-top-left-radius: 30rpx;
  52. border-top-right-radius: 30rpx;
  53. background: #ffffff;
  54. margin-top: -30rpx;
  55. }
  56. .house-detail .house-info .title {
  57. font-size: 38rpx;
  58. font-weight: bold;
  59. }
  60. .house-detail .house-info .price {
  61. padding-top: 20rpx;
  62. color: #e43d33;
  63. }
  64. .house-detail .house-info .price .price-number {
  65. font-size: 44rpx;
  66. font-weight: bold;
  67. }
  68. .house-detail .house-info .price .price-text {
  69. display: inline-block;
  70. font-size: 26rpx;
  71. scale: 0.8;
  72. }
  73. .house-detail .information {
  74. padding-top: 30rpx;
  75. }
  76. .house-detail .information .tag {
  77. margin-top: 10rpx;
  78. margin-bottom: 20rpx;
  79. padding: 0 20rpx;
  80. }
  81. .house-detail .information .tag .house-tag {
  82. background-color: #d4d1d7;
  83. border-color: #d4d1d7;
  84. padding: 0 10px;
  85. border-radius: 10rpx;
  86. margin-right: 20rpx;
  87. }
  88. .house-detail .information .tag .house-tag text {
  89. background: transparent;
  90. border: none;
  91. }
  92. .house-detail .information .head-tilte {
  93. font-size: 30rpx;
  94. font-weight: bold;
  95. }
  96. .house-detail .information .information-list {
  97. display: flex;
  98. flex-wrap: wrap;
  99. padding: 20rpx 20rpx 0;
  100. }
  101. .house-detail .information .information-list .information-box {
  102. width: 50%;
  103. display: flex;
  104. padding: 20rpx 0;
  105. }
  106. .house-detail .information .information-list .information-title {
  107. font-size: 26rpx;
  108. color: #c7c7c7;
  109. }
  110. .house-detail .information .information-list .information-text {
  111. font-size: 26rpx;
  112. color: #6a6a6a;
  113. flex: 1;
  114. width: 0;
  115. overflow: hidden;
  116. white-space: nowrap;
  117. }
  118. .house-detail .information .desc {
  119. padding-top: 20rpx;
  120. }
  121. .house-detail .information .desc .desc-text {
  122. padding: 20rpx;
  123. color: #6a6a6a;
  124. font-size: 26rpx;
  125. }
  126. .house-detail .btn-box {
  127. position: fixed;
  128. bottom: 0;
  129. left: 0;
  130. right: 0;
  131. display: flex;
  132. justify-content: center;
  133. align-items: center;
  134. padding: 20rpx 1%;
  135. background: #fff;
  136. box-shadow: 0 0 5px rgba(216, 216, 216, 0.5);
  137. }
  138. .house-detail .btn-box .share {
  139. flex: 1;
  140. text-align: center;
  141. background: #4a55fd;
  142. border-radius: 8rpx;
  143. height: 60rpx;
  144. text-align: center;
  145. margin: 0 1%;
  146. display: flex;
  147. justify-content: center;
  148. align-items: center;
  149. font-size: 26rpx;
  150. color: #fff;
  151. }
  152. .house-detail .btn-box .color01 {
  153. background: linear-gradient(to right, #fea733, #feb34d, #fdc46b);
  154. }
  155. .house-detail .btn-box .color02 {
  156. background: linear-gradient(to right, #ff4761, #fe606e, #fc706f);
  157. }