效果:
源码:
<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>