el-date-picker 两个日期范围选择样式

一、html

<el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="126px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动时间" required class="default">
        <el-form-item prop="date1">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.date1"
            clearable
          ></el-date-picker>
        </el-form-item>
        <div class="line" :span="4">-</div>
        <el-form-item prop="date2">
          <el-date-picker
            placeholder="选择时间"
            v-model="ruleForm.date2"
            clearable
          ></el-date-picker>
        </el-form-item>
      </el-form-item>
    </el-form>

二、样式

.demo-ruleForm {
    .default {
      & /deep/ .el-form-item {
        margin-right: 0 !important;
        .el-input {
          width: 130px;
        }
      }
    }
    .default /deep/ .el-form-item__content {
      display: flex;
      .line {
        padding: 0 5px;
      }
    }
  }