头部搜索栏 我会带着你远行 2022-03-01 03:20 206阅读 0赞 效果: ![2019032116080598.png][] 源码: <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> [2019032116080598.png]: /images/20220301/b10e7492996c48529a69e239e4c88365.png
还没有评论,来说两句吧...