Vue2.5 tourism projects in 11 cities instance selection page - the search box layout

Creating a branch: city-search

And pulling the local branch switching:

git pull
git checkout city-search

New Search.vue file:

<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>

Add components in return 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>

At this time renderings:

Upload code and incorporated into the master:

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

git checkout master
git merge city-search
git push