vue 一个简单的项目 之二 城市选择页面 step2

上篇我们完成了城市选择页面的头部，与主页面之间的跳转。本篇，我们将实现城市选择页面的搜索框布局。

首先，创建新分支 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>

提交合并即可。