<template>
  <div class="search flex items-center shadow-shadow1">
    <input
      type="text"
      :value="value"
      @input="(e) => setValue(e.target.value)"
      class="flex-grow outline-none"
      :placeholder="placeholder"
    />
    <div
      class="btn flex items-center justify-center cursor-pointer"
      @click="clickSearch(value)"
    >
      搜索
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  props: {
    placeholder: String,
    value: String,
    setValue: Function,
    clickSearch: Function,
  },
})
</script>

<style scoped>
.search {
  width: 600px;
  height: 50px;
  background: #ffffff;
  border-radius: 39px;
}

input {
  padding: 0 22px;
}

input::placeholder {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #7c88ad;
}

.btn {
  width: 132px;
  height: 44px;
  background: linear-gradient(90deg, #3892f4 0%, #2545cb 100%);
  border-radius: 39px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
</style>
