布局总结一：css样式布局总结 页面头部(返回+搜索+城市)

效果显示：

 

 1.html代码

<template>
  <div class="home_main">
    <div class="home_back">
      <div class="iconfont icon-back"></div>
    </div>
    <div class="home_input">
      <span class="iconfont icon-search"></span>
      <input type="text" class="search_input" placeholder="输入城市景点/游玩主题">
    </div>
    <div class="home_city">
      城市
      <span class="iconfont icon-triangledownfill"></span>
    </div>
  </div>
</template>

2.css样式代码：

<style lang="stylus" scoped>
  @import '~@/assets/styles/varibles.styl'

  .home_main
    display: flex
    line-height: 0.86rem
    background: $bgColor
    .home_back
      width: 0.7rem
      float: left
      .icon-back
        text-align: center
        font-size: 0.35rem
        color: #fff
    .home_input
      flex: 1
      height: 0.64rem
      line-height: 0.64rem
      margin-top: 0.11rem
      border-radius: 0.1rem
      background: #fff
      color: #ccc
      .icon-search
        margin-left:0.1rem
      .search_input
        width: 80%
        margin-left: 0.1rem
        margin-top: -0.15rem
        color: #ccc
        // border:1px solid red
      input::-webkit-input-placeholder
        color: #ccc
        font-size: 0.24rem
      input::-moz-placeholder
        color: #ccc
        font-size: 0.24rem
      input:-moz-placeholder
        color: #ccc
        font-size: 0.24rem
      input:-ms-input-placeholder
        color: #ccc
        font-size: 0.24rem
    .home_city
      width: 1.4rem
      float: right
      text-align: center
      color: #fff
      .icon-triangledownfill
        font-size: 0.24rem



</style>