search_box.wxss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. .search_box {
  2. position: fixed;
  3. left: 0;
  4. top: 0;
  5. width: 100%;
  6. height: 86rpx;
  7. background: #ffffff;
  8. box-sizing: border-box;
  9. padding: 18rpx 0 18rpx 18rpx;
  10. z-index: 10;
  11. }
  12. .search_box::after {
  13. content: "";
  14. position: absolute;
  15. bottom: 0;
  16. left: 0;
  17. right: 0;
  18. background: #c7c7c7;
  19. height: 2rpx;
  20. transform: scaleY(0.5);
  21. -webkit-transform: scaleY(0.5);
  22. }
  23. .search_input {
  24. display: inline-block;
  25. width: 600rpx;
  26. height: 55rpx;
  27. line-height: 55rpx;
  28. background: #f9f9f9;
  29. font-size: 24rpx;
  30. border-radius: 5rpx;
  31. padding-left: 20rpx;
  32. vertical-align:middle;
  33. }
  34. .flex_clear {
  35. height: 86rpx;
  36. }
  37. .search_btn {
  38. display:inline-block;
  39. width:106rpx;
  40. height:64rpx;
  41. font-size:28rpx;
  42. text-align:center;
  43. }
  44. .search_list {
  45. width: 100%;
  46. height: 100%;
  47. position: fixed;
  48. top: 86rpx;
  49. left: 0;
  50. z-index: 10;
  51. background: #ffffff;
  52. font-size: 28rpx;
  53. overflow: scroll;
  54. }
  55. .search_item {
  56. position: relative;
  57. width: 715rpx;
  58. height: 78rpx;
  59. line-height: 78rpx;
  60. margin-left: 35rpx;
  61. overflow: hidden;
  62. text-overflow:ellipsis;
  63. white-space: nowrap;
  64. }
  65. .search_item::after {
  66. content: "";
  67. position: absolute;
  68. left: 0;
  69. right: 0;
  70. bottom: 0;
  71. height: 2rpx;
  72. width: 100%;
  73. background:#c7c7c7;
  74. transform: scaleY(0.5);
  75. -webkit-transform: scaleY(0.5);
  76. }