Recommend.less 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .search{
  2. padding: 10px 30px 0 30px;
  3. position: relative;
  4. .searchInput{
  5. height: 68px;
  6. background: #F8F8F8;
  7. border-radius: 34px;
  8. padding-left: 30px;
  9. box-sizing: border-box;
  10. }
  11. .searchicon{
  12. width: 25px;
  13. height: 25px;
  14. position: absolute;
  15. bottom: 24px;
  16. left: 50%;
  17. margin-left: -40px;
  18. }
  19. .searchword{
  20. height: 23px;
  21. font-size: 24px;
  22. position: absolute;
  23. bottom: 34px;
  24. left: 50%;
  25. margin-left: -5px;
  26. color: #C0C8D3;
  27. letter-spacing: 0.2em;
  28. }
  29. }
  30. .waterfall{
  31. column-count: 2; //分两列
  32. column-gap: 30px; //列间距
  33. background-color: #F8F8F8;
  34. padding:30px 30px 0 30px;
  35. }
  36. .botton{
  37. font-size: 28px;
  38. color: #C0C8D3;
  39. text-align: center;
  40. padding:40px 0 50px 0;
  41. background-color: #F8F8F8;
  42. }
  43. .index-tabs {
  44. padding-left: 95px;
  45. position: relative;
  46. .position{
  47. position: absolute;
  48. left: 36px;
  49. top: 4px;
  50. .location{
  51. width: 35px;
  52. height: 42px;
  53. }
  54. .city{
  55. font-size: 20px;
  56. font-weight: bold;
  57. color: #4C4C4C;
  58. position: relative;
  59. left: -2px;
  60. bottom: 11px;
  61. }
  62. .line{
  63. width: 1px;
  64. height: 68px;
  65. background: #4C4C4C;
  66. opacity: 0.1;
  67. position: relative;
  68. left: 57px;
  69. bottom: 82px;
  70. }
  71. }
  72. .tabs-Unselected {
  73. width: 25vw;
  74. color: #C0C8D3;
  75. text-align: center;
  76. font-size: 28px;
  77. line-height: 91px;
  78. }
  79. .tabs-swiper {
  80. max-height: 0;
  81. }
  82. .tabs-Selected {
  83. font-size: 32px;
  84. color: #4C4C4C;
  85. width: 25vw;
  86. font-weight: bold;
  87. text-align: center;
  88. border-bottom: 6px solid #4C4C4C;
  89. }
  90. }