使用flex查询条件布局

查询条件

    <div class="sup-search ">
      <div class="sup-solo">
        <span>客户名称：</span>
        <div class="sup-con">
          <el-input  placeholder="请输入关键字搜索" />
        </div>
      </div>
      <div class="sup-solo">
        <span>商机标题：</span>
        <div class="sup-con">
          <el-input placeholder="请输入关键字搜索" />
        </div>
      </div>
      <div class="sup-solo">
        <span>销售金额：</span>
        <div class="sup-con">
          <el-input  placeholder="请输入关键字搜索" />
        </div>
        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
        <div class="sup-con">
          <el-input placeholder="请输入关键字搜索" />
        </div>
      </div>
      <div class="sear-btn">
        <el-button type="primary" @click="exportBO()" >导出</el-button>
      </div>
    </div>

<style rel="stylesheet/scss" lang="scss" scoped>
 
  .sup-search {
  display: flex;
  padding: 20px 0 0 20px;
}
.sup-solo {
  display: flex;
  margin-right: 35px;
  span {
    line-height: 30px;
  }
}
.sup-con {
  width: 150px;
}
</style>