YFYC-H5/yfyc/src/components/SearchTransparent.vue

<template>
  <div class="search-wrap">
    <button
      @click="onClickSearch"
      class="search"
    >
      <img class="icon" src="@/assets/img/service/search-white.png" alt="" draggable="false">
    </button>
    <input
      v-model.trim="keyword"
      maxlength="30"
      type="text"
      :placeholder="placeholder"
      @keydown.enter="onClickSearch"
    >
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: '请输入酒店名称',
    }
  },
  data() {
    return {
      keyword: '',
    }
  },
  methods: {
    onClickSearch() {
      this.$emit('search', this.keyword)
    },
  }
}
</script>

<style lang="less" scoped>
.search-wrap {
  height: 10.7vw;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid #FFFFFF;
  border-radius: 2.7vw;
  display: flex;
  align-items: center;
  font-size: 4.3vw;
  padding: 0 3.5vw;
  > button.search {
    flex: 0 0 auto;
    width: 4vw;
    height: 4vw;
    position: relative;
    margin-right: 2.1vw;
    > img.icon {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  > input {
    flex: 1 0 1px;
    height: 100%;
    color: #fff;
  }
}
</style>