index.wxss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. .title {
  2. font-weight: Medium;
  3. font-size: 36rpx;
  4. color: #222222;
  5. }
  6. .text-large {
  7. font-size: 36rpx;
  8. }
  9. .text {
  10. font-size: 30rpx;
  11. word-break: keep-all;
  12. }
  13. .text-small {
  14. font-size: 24rpx;
  15. word-break: keep-all;
  16. }
  17. .grey {
  18. color: #666666;
  19. }
  20. .horizontal {
  21. padding: 20rpx;
  22. font-size: 24rpx;
  23. }
  24. .horizontal .goods {
  25. display: flex;
  26. align-items: end;
  27. width: 100%;
  28. padding: 10rpx;
  29. margin-top: 20rpx;
  30. background: #ffffff;
  31. border-radius: 20rpx;
  32. }
  33. .horizontal .goods .goods-image-wrapper {
  34. width: 180rpx;
  35. height: 180rpx;
  36. }
  37. .horizontal .goods .goods-image-wrapper .goods-image {
  38. width: 100%;
  39. height: 100%;
  40. text-align: center;
  41. border-radius: 20rpx;
  42. }
  43. .horizontal .goods .goods-detail {
  44. flex: 1;
  45. padding: 0 20rpx;
  46. }
  47. .horizontal .goods .goods-detail .goods-name {
  48. width: 100%;
  49. margin: 10rpx 0;
  50. font-size: 30rpx;
  51. color: #222222;
  52. overflow: hidden;
  53. text-overflow: ellipsis;
  54. display: -webkit-box;
  55. -webkit-line-clamp: 1;
  56. -webkit-box-orient: vertical;
  57. }
  58. .horizontal .goods .goods-detail .goods-describe {
  59. width: 100%;
  60. margin: 10rpx 0;
  61. min-height: 80rpx;
  62. overflow: hidden;
  63. text-overflow: ellipsis;
  64. display: -webkit-box;
  65. -webkit-line-clamp: 2;
  66. -webkit-box-orient: vertical;
  67. }
  68. .horizontal .goods .goods-detail .goods-tags {
  69. width: 100%;
  70. margin: 8rpx 0;
  71. min-height: 60rpx;
  72. overflow: hidden;
  73. text-overflow: ellipsis;
  74. display: -webkit-box;
  75. -webkit-line-clamp: 2;
  76. -webkit-box-orient: vertical;
  77. }
  78. .horizontal .goods .goods-detail .goods-detail-bottom {
  79. display: flex;
  80. align-items: center;
  81. justify-content: space-between;
  82. }
  83. .horizontal .goods .goods-detail .goods-detail-bottom .goods-price-wrapper {
  84. display: flex;
  85. color: #F01740;
  86. margin-top: 10rpx;
  87. }
  88. .horizontal .goods .goods-detail .goods-detail-bottom .goods-price-wrapper .goods-price-text {
  89. margin: 0 10rpx 0 0;
  90. }
  91. .horizontal .goods .goods-detail .goods-detail-bottom .goods-price-wrapper .goods-price-num {
  92. font-size: 28rpx;
  93. font-weight: 600;
  94. }
  95. .horizontal .goods .goods-detail .goods-detail-bottom .bottom-btns {
  96. width: 180rpx;
  97. }
  98. .horizontal .goods .goods-detail .goods-detail-bottom .bottom-btns .btn-text {
  99. letter-spacing: 6rpx;
  100. }
  101. .vertical {
  102. display: flex;
  103. justify-content: space-between;
  104. flex-wrap: wrap;
  105. padding: 20rpx;
  106. font-size: 24rpx;
  107. }
  108. .vertical .goods {
  109. width: 48%;
  110. margin-top: 20rpx;
  111. background: #ffffff;
  112. border-radius: 20rpx;
  113. }
  114. .vertical .goods .goods-image-wrapper {
  115. width: 100%;
  116. height: 240rpx;
  117. }
  118. .vertical .goods .goods-image-wrapper .goods-image {
  119. width: 100%;
  120. height: 100%;
  121. text-align: center;
  122. border-radius: 20rpx;
  123. }
  124. .vertical .goods .goods-detail {
  125. flex: 1;
  126. padding: 10rpx 20rpx;
  127. }
  128. .vertical .goods .goods-detail .goods-name {
  129. margin-top: 10rpx;
  130. min-height: 80rpx;
  131. font-size: 30rpx;
  132. color: #222222;
  133. overflow: hidden;
  134. text-overflow: ellipsis;
  135. display: -webkit-box;
  136. -webkit-line-clamp: 2;
  137. -webkit-box-orient: vertical;
  138. }
  139. .vertical .goods .goods-detail .goods-describe {
  140. width: 100%;
  141. margin: 10rpx 0;
  142. min-height: 80rpx;
  143. overflow: hidden;
  144. text-overflow: ellipsis;
  145. display: -webkit-box;
  146. -webkit-line-clamp: 2;
  147. -webkit-box-orient: vertical;
  148. }
  149. .vertical .goods .goods-detail .goods-tags {
  150. width: 100%;
  151. margin: 8rpx 0;
  152. overflow: hidden;
  153. text-overflow: ellipsis;
  154. display: -webkit-box;
  155. -webkit-line-clamp: 2;
  156. -webkit-box-orient: vertical;
  157. }
  158. .vertical .goods .goods-detail .goods-price-wrapper {
  159. display: flex;
  160. color: #F01740;
  161. margin-top: 10rpx;
  162. }
  163. .vertical .goods .goods-detail .goods-price-wrapper .goods-price-text {
  164. margin: 0 10rpx 0 0;
  165. }
  166. .vertical .goods .goods-detail .goods-price-wrapper .goods-price-num {
  167. font-size: 28rpx;
  168. font-weight: 600;
  169. }
  170. .vertical .goods .goods-detail .address {
  171. margin-top: 10rpx;
  172. display: flex;
  173. }
  174. .vertical .goods .goods-detail .address .hotel-address {
  175. color: #666666;
  176. }