search.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /* 搜索框 */
  2. .search {
  3. position: fixed;
  4. z-index: 2;
  5. height: 110upx;
  6. width: 100%;
  7. padding: 0 30upx 20upx;
  8. top: 0;
  9. left: 0;
  10. background-color: #fff;
  11. display: flex;
  12. align-items: center;
  13. justify-content: space-between;
  14. }
  15. .search_box {
  16. width: 100%;
  17. margin-top: 10upx;
  18. display: flex;
  19. flex-direction: row;
  20. justify-content: flex-start;
  21. align-items: center;
  22. position: relative;
  23. z-index: 10;
  24. }
  25. .search_input_none {
  26. width: 690upx;
  27. height: 74upx;
  28. border-radius: 50px;
  29. font-size: 28upx;
  30. color: #333 !important;
  31. background: #f2f2f2;
  32. padding-left: 65upx;
  33. text-align: center;
  34. }
  35. .search_input {
  36. width: 570upx;
  37. height: 80upx;
  38. border-radius: 50px;
  39. font-size: 28upx;
  40. color: #333 !important;
  41. background: #F1F1F6;
  42. margin-right: 24upx;
  43. padding-left: 65upx;
  44. padding-right: 85upx;
  45. }
  46. .search_icon {
  47. width: 26upx;
  48. height: 26upx;
  49. position: absolute;
  50. top: 33%;
  51. left: 36%;
  52. }
  53. .search_icon_none {
  54. left: 20upx;
  55. }
  56. .remove_icon {
  57. width: 36upx;
  58. height: 36upx;
  59. position: absolute;
  60. top: 28%;
  61. right: 158upx;
  62. z-index: 50;
  63. }
  64. .search_btn {
  65. display: inline-block;
  66. width: 100upx;
  67. line-height: 56upx;
  68. text-align: center;
  69. font-size: 30upx;
  70. font-family: PingFang SC;
  71. margin-bottom: 28upx;
  72. }
  73. .search_confirm {
  74. width: 0;
  75. height: 68upx;
  76. border-radius: 50px;
  77. line-height: 68upx;
  78. text-align: center;
  79. transition: all 0.3s;
  80. font-size: 0;
  81. }
  82. .search_confirm_active {
  83. width: 128upx;
  84. font-size: 28upx;
  85. }