账单日样式

src/views/dispatch/salary_advance_interval.vue

@@ -17,16 +17,20 @@
         class="ruleFormRef"
     >
 
-      <div class="box">
+      <div class="box w100">
         <el-form-item label="账单日" prop="bill_day" >
-          <el-input v-model="formLabelAlign.bill_day" type="number" />
+          <div class="f_c">
+            <el-input v-model="formLabelAlign.bill_day" type="number" />
+            <div class="tips">当到达所设定的特定日期，系统将通知财务对上月预支工资账单进行结算</div>
+          </div>
         </el-form-item>
-        <el-form-item>当到达所设定的特定日期，系统将通知财务对上月预支工资账单进行结算</el-form-item>
-        <el-form-item></el-form-item>
         <el-form-item label="结算日" prop="settle_day">
-          <el-input v-model="formLabelAlign.settle_day" type="number" />
+          <div class="f_c">
+            <el-input v-model="formLabelAlign.settle_day" type="number" />
+            <div class="tips">到达账单日时，如果财务没有主动结算上月预支工资账单，系统将依据设定的结算日自动予以结算</div>
+          </div>
         </el-form-item>
-        <el-form-item>到达账单日时，如果财务没有主动结算上月预支工资账单，系统将依据设定的结算日自动予以结算</el-form-item>
+        <div style="height: 10px;"></div>
       </div>
 
       <div class="box">
@@ -451,7 +455,24 @@ function getSalaryAdvanceInterval(){
   margin: 0% -4% 1% -4%;
   padding-top:2%;
   background-color: white;
-  width: 950%;
+  width: 100cm;
+}
+.w100{
+  .el-form-item{
+    width: 100% !important;
+    .f_c{
+      display: flex;
+      justify-content: flex-start;
+      width: 100%;
+      .el-input{
+        width: 300px !important;
+      }
+      .tips{
+        width: calc(100% - 300px);
+        background: rgba($color: #000000, $alpha: 0);
+      }
+    }
+  }
 }
 .boxTitle{
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;