search.wxss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /*
  2. ========
  3. 搜索部分css
  4. ========
  5. */
  6. .search{
  7. width: 90%;
  8. height: auto;
  9. display: flex;
  10. align-items: center;
  11. margin: 0rpx auto;
  12. }
  13. .search-left{
  14. flex: 4;
  15. background-color: rgb(240, 240, 240);
  16. display: flex;
  17. justify-content: flex-start;
  18. align-items: center;
  19. padding: 10rpx 20rpx;
  20. border-radius: 15rpx;
  21. }
  22. .search input{
  23. width: 90%;
  24. height: 100%;
  25. font-size: 29rpx;
  26. margin-left: 20rpx;
  27. }
  28. .search-right{
  29. flex: 0.5;
  30. font-size:30rpx;
  31. color: #aaa;
  32. text-align: center;
  33. margin-left: 30rpx;
  34. }
  35. /*
  36. ========
  37. 搜索历史和热门搜索部分css
  38. ========
  39. */
  40. .history{
  41. width: 90%;
  42. height: auto;
  43. margin: 0rpx auto;
  44. margin-top: 80rpx;
  45. }
  46. .history-content{
  47. width: 100%;
  48. height: auto;
  49. margin-top: 30rpx;
  50. }
  51. .content-item{
  52. width: 150rpx;
  53. font-size: 33rpx;
  54. text-align: center;
  55. padding: 10rpx 20rpx;
  56. border-radius: 25rpx;
  57. color: #333;
  58. background-color: rgb(240, 240, 240);
  59. }
  60. .hot{
  61. width: 90%;
  62. height: auto;
  63. margin: 0rpx auto;
  64. margin-top: 80rpx;
  65. }
  66. .hot-content{
  67. width: 100%;
  68. height: auto;
  69. margin-top: 30rpx;
  70. }
  71. .hot-items{
  72. width: 100%;
  73. height: 50rpx;
  74. display: flex;
  75. justify-content: space-between;
  76. align-items: center;
  77. margin-bottom: 20rpx;
  78. }
  79. .item-left{
  80. display: flex;
  81. justify-content: flex-start;
  82. font-size: 32rpx;
  83. }
  84. .itemTitle{
  85. margin-left: 40rpx;
  86. }
  87. /* 公共样式 */
  88. .title{
  89. width: 100%;
  90. height: 50rpx;
  91. /* padding-right: 20rpx; */
  92. display: flex;
  93. justify-content: space-between;
  94. align-items: center;
  95. box-sizing: border-box;
  96. }
  97. .title-text{
  98. color: #000;
  99. font-weight: 700;
  100. }
  101. .text-red{
  102. color: #f00;
  103. }
  104. .text-orange{
  105. color: orange;
  106. }