SearchIcon.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <HeaderNav headerText="搜索" headerRight="取消"></HeaderNav>
  3. <div class="search-icon">
  4. <div class="search-input">
  5. <input
  6. type="text"
  7. class="input pf400 fs16 fc4B5563"
  8. placeholder="搜索您关心的币种" />
  9. <img src="../../assets/icon/index/search-input.svg" alt="" />
  10. </div>
  11. <div class="icon-list">
  12. <div class="icon-item" v-for="(item, index) in 5" :key="index">
  13. <img src="../../assets/img/index/Frame 7.svg" class="icon-img" alt="" />
  14. <div class="icon-name">
  15. <div class="upper-name pc600 fs16 fc1F2937">Ethereum</div>
  16. <div class="letter-name pc400 fs14 fc4B5563">ETH</div>
  17. </div>
  18. <div class="icon-love">
  19. <img src="../../assets/icon/index/Star.svg" alt="" />
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. </template>
  25. <script setup>
  26. import HeaderNav from "./components/HeaderNav.vue";
  27. </script>
  28. <style lang="less" scoped>
  29. .search-icon {
  30. display: flex;
  31. flex-direction: column;
  32. justify-content: flex-start;
  33. align-items: center;
  34. width: 100%;
  35. .search-input {
  36. position: relative;
  37. margin-top: 72px;
  38. width: 343px;
  39. height: 48px;
  40. .input {
  41. padding-left: 40px;
  42. width: 100%;
  43. height: 100%;
  44. border: 1px solid #cbd5e1;
  45. border-radius: 64px;
  46. box-sizing: border-box;
  47. outline: none;
  48. }
  49. img {
  50. position: absolute;
  51. top: 15px;
  52. left: 14px;
  53. width: 17px;
  54. height: 17px;
  55. }
  56. }
  57. .icon-list {
  58. margin-top: 24px;
  59. width: 343px;
  60. .icon-item {
  61. display: flex;
  62. flex-direction: row;
  63. justify-content: flex-start;
  64. align-items: center;
  65. width: 100%;
  66. height: 78px;
  67. border-bottom: 1px solid #e2e8f0;
  68. box-sizing: border-box;
  69. .icon-img {
  70. width: 40px;
  71. height: 40px;
  72. }
  73. .icon-name {
  74. margin-left: 12px;
  75. width: 255px;
  76. height: 46px;
  77. .upper-name {
  78. height: 22px;
  79. line-height: 22px;
  80. }
  81. .letter-name {
  82. height: 20px;
  83. line-height: 20px;
  84. }
  85. }
  86. .icon-love {
  87. margin-left: 13.5px;
  88. width: 21px;
  89. height: 20px;
  90. img {
  91. width: 100%;
  92. height: 100%;
  93. }
  94. }
  95. }
  96. }
  97. }
  98. </style>