zoukankan      html  css  js  c++  java
  • 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
        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
  • 相关阅读:
    Django model中的内嵌类(Class Meta)
    drf框架(二)
    drf框架(一)
    html、CSS 简单回顾
    前端vue框架(五)
    前端vue框架(四)
    前端Vue框架(三)
    前端vue框架(二)
    前端开发Vue框架(二)
    mysql 比较两个日期的时间差
  • 原文地址:https://www.cnblogs.com/joe235/p/12469455.html
Copyright © 2011-2022 走看看