上篇我们完成了城市选择页面的头部,与主页面之间的跳转。本篇,我们将实现城市选择页面的搜索框布局。
首先,创建新分支 city-search ,pull下来,在新分支上写代码。
好啦。
打开编辑器,在pages 目录下 components 目录下,新建一个组件 Search.vue
初始化一下,Search.vue 代码,如下
<template>
<div class="search">
<input class="search-input" type="text" placeholder="输入城市名或拼音" />
</div>
</template>
<script>
export default {
name: 'CitySearch'
}
</script>
<style lang="stylus" scoped>
@import '~styles/variables.styl'
</style>
在 City.vue 中,将搜索组件引入,如下
<template>
<div>
<city-header></city-header>
<city-search></city-search>
</div>
</template>
<script>
import CityHeader from './components/Header.vue'
import CitySearch from './components/Search.vue'
export default {
name: 'City',
components: {
CityHeader,
CitySearch
}
}
</script>
<style lang="stylus" scoped>
</style>
然后再调整一下 搜索框组件的样式即可,如下。
<template>
<div class="search">
<input class="search-input" type="text" placeholder="输入城市名或拼音" />
</div>
</template>
<script>
export default {
name: 'CitySearch'
}
</script>
<style lang="stylus" scoped>
@import '~styles/variables.styl'
.search
height: .72rem
padding: 0 .1rem
background: $bgColor
.search-input
box-sizing: border-box
width: 100%
height: .62rem
padding: 0 .1rem
line-height: .62rem
text-align: center
border-radius: .06rem
color: #666
</style>
提交合并即可。