<template>
  <view class="search-com" >
     <van-field
        :value="keyword"
        placeholder="搜索选手姓名"
        :border="false"
        @change="onChange"
        input-class='input-class'
        :custom-style='customField'
        @focus="focus"
      />
  </view>
</template>

<script>
export default {
  name: 'search-com',
  computed: {
    customField () {
      return `padding: 0;  background-color: #f7f7f7`
    }
  },
  data () {
    return {
      keyword: ''
    }
  },
  methods: {
    focus () {
      this.$emit('focus', true)
    },
    onChange (e) {
      console.log(e.detail);
      this.keyword = e.detail
      this.$emit('search', e.detail)
    }
  }
}
</script>

<style lang="less" scoped>
.search-com {
  width: 670rpx;
  height: 70rpx;
  background: #f7f7f7;
  border-radius: 35rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 36rpx;
  box-sizing: border-box;
  margin: 0 auto;
}

 /deep/ .van-field__control {
     padding: 0rpx !important;
   background-color: #F7F7F7 !important;
 }

 /deep/ .van-field {
     padding: 0rpx !important;
  background-color: red !important;
}

/deep/ .van-cell--borderless {
  background-color: red !important;
}

/deep/ .van-cell {
  width: 200rpx !important;
  height: 100rpx !important;
  color: red;
  display: block !important;
  padding: 0rpx !important;
  background-color: green !important;
}

// /deep / .van-field__control--custom {
//   background-color: green;
// }

.input-class {
  background-color: green !important;
  color: red !important;
}
</style>