shop-list.less 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. @red:#F01740;
  2. @grey: #666666;
  3. .box {
  4. display: flex;
  5. flex-wrap: wrap;
  6. justify-content: space-between;
  7. padding: 20rpx;
  8. font-size: 24rpx;
  9. .hotel {
  10. width: 48%;
  11. padding: 10rpx;
  12. margin-top: 20rpx;
  13. background: #ffffff;
  14. border-radius: 20rpx;
  15. .hotel-image {
  16. width: 100%;
  17. height: 240rpx;
  18. text-align: center;
  19. border-radius: 20rpx;
  20. }
  21. .hotel-name {
  22. margin-top: 10rpx;
  23. min-height: 80rpx;
  24. font-size: 30rpx;
  25. color:#222222;
  26. overflow: hidden; //一定要写
  27. text-overflow: ellipsis; //超出省略号
  28. display: -webkit-box; //一定要写
  29. -webkit-line-clamp: 2; //控制行数
  30. -webkit-box-orient: vertical; //一定要写
  31. }
  32. .hotel-describe {
  33. margin-top: 10rpx;
  34. height: 80rpx;
  35. overflow: hidden; //一定要写
  36. text-overflow: ellipsis; //超出省略号
  37. display: -webkit-box; //一定要写
  38. -webkit-line-clamp: 2; //控制行数
  39. -webkit-box-orient: vertical; //一定要写
  40. }
  41. .price {
  42. display: flex;
  43. color: @red;
  44. margin-top: 10rpx;
  45. .hotel-price {
  46. margin: 0 10rpx 0 0;
  47. }
  48. .hotel-price-num{
  49. font-size: 28rpx;
  50. font-weight: 600;
  51. }
  52. }
  53. .performance {
  54. display: flex;
  55. color: @red;
  56. margin-top: 10rpx;
  57. .hotel-performance {
  58. margin: 0 0rpx 0 10rpx;
  59. }
  60. }
  61. .address {
  62. margin-top: 10rpx;
  63. display: flex;
  64. .hotel-address {
  65. color:@grey;
  66. }
  67. }
  68. }
  69. }