<template>
  <div class="search-container">
    <div class="search-input">
      <span class="icon">🔍</span>
      <input
        v-model="searchValue"
        type="text"
        class="input"
        placeholder="搜一搜"
        @keyup.enter="onSearch"
      />
    </div>
    <button class="search-btn" @click="onSearch">
      <img src="~/assets/images/info.png" alt="info" />
    </button>
  </div>
  
</template>

<script setup lang="ts">
import { ref } from 'vue'

const searchValue = ref('')
function onSearch() {
  console.log('Search for:', searchValue.value)
}
</script>

<style scoped lang="scss">
.search-container {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-input {
  display: flex;
  align-items: center;
  background: #efeff1;
  border-radius: 32rpx;
  padding: 0 22.11rpx;
  flex: 1;
}
.search-input .icon { margin-right: 8px; }
.search-input .input {
  flex: 1;
  height: 64rpx;
  border: none;
  outline: none;
  background: transparent;
}
.search-btn {
  margin-left: 19.44rpx;
  width: 43.75rpx;
  height: 43.75rpx;
  background-color: #fff;
  border: none;
  padding: 0;
}
.search-btn img {
  width: 100%;
  height: 100%;
}
</style>
