## Head.vue 头部搜索框组件 ``` <template> <div class="head"> <i class="iconfont icon-jiantouarrow487"></i> <div class="search"> <i class="iconfont icon-sousuo"></i> <span>输入游玩的景点和城市</span> </div> <div class="city">城市</div> </div> </template> <script> export default { name: "HomeHead" }; </script> <style lang\="scss" scoped> .head { height: 130px; padding: 0 30px; display: flex; align-items: center; background: rgb(2, 188, 213); i { font-size: 55px; margin-right: 30px; } .search { display: flex; align-items: center; padding: 0 10px; border-radius: 20px; width: 450px; height: 100px; background: #fff; color: #ccc; margin-right: 30px; } .icon-jiantouarrow487 { color: #fff; } .city { color: #fff; position: relative; } .city::before { content: ""; position: absolute; z-index: 100; right: -30px; top: 20px; display: block; width: 0; height: 0; border: 10px solid transparent; border-top-color: #fff; } } </style> ```