caimei-authentic-www/components/SimpleSearch/index.vue

<template>
  <div class="simple-search"><input type="text" /></div>
</template>

<script>
export default {}
</script>

<style scoped lang="scss">
.simple-search {
  width: 92vw;
  height: 9.6vw;
  box-shadow: 0px 0.4vw 1vw rgba(51, 51, 51, 0.08);
  padding-left: 9.6vw;
  padding-right: 1.6vw;
  left: 50%;
  top: 0;
  background-color: #fff;
  border-radius: 0.4vw;
  &::before {
    content: '';
    display: block;
    background: url(https://static.caimei365.com/www/authentic/h5/icon-search.png)
      no-repeat;
    width: 6.4vw;
    height: 6.4vw;
    position: absolute;
    background-size: 6.4vw;
    left: 1.6vw;
    top: 1.6vw;
  }

  input {
    display: block;
    width: 100%;
    height: 9.6vw;
    line-height: 9.6vw;
    outline: none;
  }
}
</style>