Vue2.5 旅游项目实例11 城市选择页-搜索框布局

创建分支：city-search

拉取到本地并切换分支：

git pull
git checkout city-search

新建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/varibles.styl'
.search
  padding:0 .1rem
  height: .72rem
  background : $bgColor
  .search-input
    box-sizing:border-box
    padding:0 .1rem
    width:100%
    height:.62rem
    line-height:.62rem
    text-align:center
    border-radius:.06rem
    color: #666
</style>

在返回City.vue添加组件：

<template>
<div>
  <city-header></city-header>
  <city-search></city-search>
</div>
</template>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch
  }
}
</script>

此时效果图：

上传代码，并合并到master：

git add .
git commit -m "city-search"
git push

git checkout master
git merge city-search
git push