<template>
  <div class="search-wrap">
    <img class="icon" src="@/assets/img/service/search.png" alt="" draggable="false">
    <input
      v-model.trim="keyword"
      maxlength="30"
      type="text"
      placeholder="输入您感兴趣的内容"
      @keydown.enter="onClickSearch"
    >
    <button
      class="search"
      @click="onClickSearch"
    >
      搜索
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
    }
  },
  methods: {
    onClickSearch() {
      this.$emit('search', this.keyword)
    },
  }
}
</script>

<style lang="less" scoped>
.search-wrap {
  background: #F4F4F4;
  height: 6.9vw;
  min-height: 30px;
  border-radius: 1.1vw;
  display: flex;
  align-items: center;
  font-size: 2.7vw;
  > img.icon {
    flex: 0 0 auto;
    width: 2.8vw;
    height: 2.8vw;
    margin-left: 2.1vw;
  }
  > input {
    flex: 1 0 1px;
    height: 100%;
    margin-left: 2.1vw;
  }
  > button.search {
    height: 100%;
    background: linear-gradient(0deg, #FE6E69 0%, #FF7C6E 100%);
    border-radius: 1.1vw;
    padding-left: 1.9vw;
    padding-right: 1.9vw;
    color: #fff;
  }
}
</style>