|  | @@ -7,13 +7,64 @@
 | 
	
		
			
				|  |  |      >
 | 
	
		
			
				|  |  |      </el-page-header>
 | 
	
		
			
				|  |  |      <div class="m-core">
 | 
	
		
			
				|  |  | -      <el-form >
 | 
	
		
			
				|  |  | -        <el-alert
 | 
	
		
			
				|  |  | -          style="margin: 20px 0"
 | 
	
		
			
				|  |  | -          title="缴费基本信息"
 | 
	
		
			
				|  |  | -          :closable="false"
 | 
	
		
			
				|  |  | -          type="info"
 | 
	
		
			
				|  |  | -        ></el-alert>
 | 
	
		
			
				|  |  | +      <el-form :inline="true" :model="form">
 | 
	
		
			
				|  |  | +        <div class="payTitle">
 | 
	
		
			
				|  |  | +          <div class="squrt"></div>
 | 
	
		
			
				|  |  | +          <p>基础信息设置</p>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <el-form-item   :rules="[{ required: false, message: '请选择缴费时间', trigger: 'blur' }]">
 | 
	
		
			
				|  |  | +          <template slot="label">
 | 
	
		
			
				|  |  | +            <p style="position: relative">
 | 
	
		
			
				|  |  | +              缴费时间
 | 
	
		
			
				|  |  | +              <el-tooltip placement="top" popper-class="mTooltip">
 | 
	
		
			
				|  |  | +                <div slot="content">在改时间段内学员才可缴费</div>
 | 
	
		
			
				|  |  | +                <i
 | 
	
		
			
				|  |  | +                  class="el-icon-question"
 | 
	
		
			
				|  |  | +                  style="
 | 
	
		
			
				|  |  | +                    font-size: 18px;
 | 
	
		
			
				|  |  | +                    color: #f56c6c;
 | 
	
		
			
				|  |  | +                    position: relative;
 | 
	
		
			
				|  |  | +                    top: 2px;
 | 
	
		
			
				|  |  | +                  "
 | 
	
		
			
				|  |  | +                ></i>
 | 
	
		
			
				|  |  | +              </el-tooltip>
 | 
	
		
			
				|  |  | +            </p>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +          <el-date-picker
 | 
	
		
			
				|  |  | +            v-model="form.paymentDate"
 | 
	
		
			
				|  |  | +            type="daterange"
 | 
	
		
			
				|  |  | +            style="width: 400px"
 | 
	
		
			
				|  |  | +            :picker-options="pickerOptions"
 | 
	
		
			
				|  |  | +            range-separator="至"
 | 
	
		
			
				|  |  | +            start-placeholder="开始日期"
 | 
	
		
			
				|  |  | +            end-placeholder="结束日期"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +          </el-date-picker>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  | +        <el-form-item
 | 
	
		
			
				|  |  | +          label="备注"
 | 
	
		
			
				|  |  | +          prop="memo"
 | 
	
		
			
				|  |  | +          :rules="[{ required: false, message: '请输入备注', trigger: 'blur' }]"
 | 
	
		
			
				|  |  | +        >
 | 
	
		
			
				|  |  | +          <template slot="label">
 | 
	
		
			
				|  |  | +            <p style="position: relative">
 | 
	
		
			
				|  |  | +              备注
 | 
	
		
			
				|  |  | +              <el-tooltip placement="top" popper-class="mTooltip">
 | 
	
		
			
				|  |  | +                <div slot="content">本次缴费的内容描述</div>
 | 
	
		
			
				|  |  | +                <i
 | 
	
		
			
				|  |  | +                  class="el-icon-question"
 | 
	
		
			
				|  |  | +                  style="
 | 
	
		
			
				|  |  | +                    font-size: 18px;
 | 
	
		
			
				|  |  | +                    color: #f56c6c;
 | 
	
		
			
				|  |  | +                    position: relative;
 | 
	
		
			
				|  |  | +                    top: 2px;
 | 
	
		
			
				|  |  | +                  "
 | 
	
		
			
				|  |  | +                ></i>
 | 
	
		
			
				|  |  | +              </el-tooltip>
 | 
	
		
			
				|  |  | +            </p>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +          <el-input type="textarea" v-model="form.memo"></el-input>
 | 
	
		
			
				|  |  | +        </el-form-item>
 | 
	
		
			
				|  |  |        </el-form>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |    </div>
 | 
	
	
		
			
				|  | @@ -21,7 +72,11 @@
 | 
	
		
			
				|  |  |  <script>
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  |    data() {
 | 
	
		
			
				|  |  | -    return {};
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      form: {
 | 
	
		
			
				|  |  | +        memo: "",
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    mounted() {},
 | 
	
		
			
				|  |  |    methods: {
 | 
	
	
		
			
				|  | @@ -50,3 +105,26 @@ export default {
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  </script>
 | 
	
		
			
				|  |  | +<style lang="scss" scoped>
 | 
	
		
			
				|  |  | +.payTitle {
 | 
	
		
			
				|  |  | +  display: flex;
 | 
	
		
			
				|  |  | +  flex-direction: row;
 | 
	
		
			
				|  |  | +  align-items: center;
 | 
	
		
			
				|  |  | +  font-size: 18px;
 | 
	
		
			
				|  |  | +  font-weight: 600;
 | 
	
		
			
				|  |  | +  color: #1a1a1a;
 | 
	
		
			
				|  |  | +  height: 25px;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  p {
 | 
	
		
			
				|  |  | +    line-height: 25px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  .squrt {
 | 
	
		
			
				|  |  | +    width: 4px;
 | 
	
		
			
				|  |  | +    height: 16px;
 | 
	
		
			
				|  |  | +    background: #14928a;
 | 
	
		
			
				|  |  | +    margin-right: 5px;
 | 
	
		
			
				|  |  | +    position: relative;
 | 
	
		
			
				|  |  | +    top: -1px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |