左右布局（备用复制） 搜索( 备用复制 )

<template>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
        <div style="font-size: 12px; color: #666">
            <div class="setBox">
                <div class="setBox_d">粉丝昵称</div>
                <div>春花布艺17526695910</div>
            </div>
            <div class="setBox">
                <div class="setBox_d">粉丝openID</div>
                <div>oCILfwZqB6BtroRM5BLMWbaRLk5I</div>
            </div>
            <div class="setBox">
                <div class="setBox_d">粉丝分组</div>
                <div>未分组</div>
            </div>
            <div class="setBox">
                <div class="setBox_d">关注时间</div>
                <div>2020-04-23 20:41:14</div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false
        };
    },
    methods: {
        show(option) {
            this.dialogVisible = option.dialogVisible;
        },
        handleClose(done) {
            done();
        }
    }
};
</script>

<style scoped>
.setBox {
    display: flex;
    margin-bottom: 40px;
}
.setBox_d {
    width: 120px;
    text-align: right;
    margin-right: 15px;
}
</style>

 

搜索备用复制

    <div class="searchBox">
      <div class="searchBox_L">
        <div class="searchItem">
          <div class="searchItem_text">时间：</div>
          <div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="searchItem">
          <div class="searchItem_text">时间：</div>
          <div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="searchItem">
          <div class="searchItem_text">时间：</div>
          <div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </div>
      <div class="searchBox_R">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>

<style scoped>
.searchBox {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.searchBox_L {
  display: flex;
  flex-wrap: wrap;
}
.searchItem {
  display: flex;
  margin-right: 10px;
  margin-bottom: 10px;
}
.searchItem_text {
  line-height: 32px;
}
</style>