头部搜索栏

效果：

源码：

<template>
  <div>
    <headers title="学生管理"></headers>
    <div class="search-box">
      <div>
        <img src="../assets/images/magnifyingGlass.png" alt="">
        <input type="text" placeholder="搜索">
      </div>

    </div>

  </div>
</template>

<script>
  import headers from '../components/headers.vue'
  export default{
    data(){
      return {}
    },
    methods: {},
    components: {
      headers
    }
  }
</script>

<style scoped>
  .search-box {
    border: 1rem solid #f2f2f2;
    background-color: #f2f2f2;
  }

  .search-box div{
    display: flex;
    width: 100%;
    border-radius:1rem;
    padding:.4rem;
    background-color:white;
  }

  .search-box div img {
    padding-right: 0.25rem;
  }

  .search-box div input {
    width: 100%;
    border: none;
    outline: none;
  }
</style>