修改

src/components/sale/sale-form.vue

-<style>
+<style lang="scss">
   .deleteCusBtn {
     position: absolute;
     right: 10px;
@@ -38,6 +38,16 @@
     line-height: 120px;
     text-align: center;
   }
+
+  .Details_List {
+    border: 1px solid #d1d1d1;
+    padding: 10px;
+    margin-bottom: 20px;
+    position: relative;
+  }
+  .el-select-dropdown{
+    z-index:9999!important;
+  }
 </style>
 <template>
   <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
@@ -56,7 +66,7 @@
               ref="TaskSubTitle" class="col-6 q-pb-lg" label="任务子标题" />
           </div>
         </div>
-        <div class="row wrap">
+        <div class="row wrap q-pb-lg">
           <div class="col-6">
             <q-input filled v-model="objOption.TaskStartTime" class="q-pr-lg" mask="date" label="开始时间">
               <template v-slot:append>
@@ -90,7 +100,7 @@
         </div>
         <div class="row wrap">
           <div class="col-6">
-            <q-input filled v-model="objOption.ExchangeEndTime" mask="date" label="兑换截止日期">
+            <q-input filled v-model="objOption.ExchangeEndTime" class="q-pr-lg" mask="date" label="兑换截止日期">
               <template v-slot:append>
                 <q-icon name="event" class="cursor-pointer">
                   <q-popup-proxy ref="ExchangeEndTime" cover transition-show="scale" transition-hide="scale">
@@ -125,35 +135,43 @@
         </div>
 
         <div class="q-pt-none scroll" style="max-height:60hv;margin-bottom:20px;">
-          <q-btn color="accent" size="sm" icon="add" label="新增子任务" @click="addSubTask()" />
+          <q-btn color="accent" size="sm" icon="add" style="margin-bottom:20px;" label="新增子任务" @click="addSubTask()" />
           <template v-for="(sItem, sIndex) in objOption.DetailsList">
-            <div :key="sIndex">
-              <q-input filled stack-label maxlength="20" dense v-model="sItem.DetailsName" ref="DetailsName"
-                class="q-pr-none" label="条件名称" />
-              <br />
-              <q-select filled stack-label option-value="Id" @input="clearTarget(sItem)" option-label="Name"
-                v-model="sItem.TaskType" ref="PriceDiscountType_Id" :options="taskTypeData" label="任务类型"
-                style="width:160px" dense emit-value map-options />
-              <q-select v-if="sItem.TaskType==2" filled stack-label option-value="Id" option-label="SubjectName"
-                v-model="sItem.TargetIdList" :options="CourseSubjectList" multiple use-chips label="所属科目"
-                style="width:160px" dense emit-value map-options />
-
-              <q-select v-if="sItem.TaskType==3" multiple filled use-chips stack-label v-model="sItem.TargetIdList"
-                option-value="CateId" option-label="CateName" :options="TreeCategoryList" label="课程系列"
-                style="width:160px" dense emit-value map-options />
-
-              <q-select v-if="sItem.TaskType==4" multiple filled use-chips stack-label v-model="sItem.TargetIdList"
-                option-value="CourseId" option-label="CourseName" :options="CourseList" label="课程" style="width:160px"
-                dense emit-value map-options />
-              <br />
-              <q-select filled stack-label option-value="Id" option-label="Name" v-model="sItem.TaskFinishType"
-                :options="finishTypeObj" label="请选择" style="width:160px" dense emit-value map-options />
-              <br />
-              <q-input filled stack-label maxlength="20" @keyup.native="checkInteger(sItem,'TaskFinishValue')" dense
-                v-model="sItem.TaskFinishValue" ref="TaskFinishValue" class="q-pr-none" label="任务完成值" />
+            <div :key="sIndex" class="Details_List">
+              <q-input filled stack-label maxlength="20" style="width:523px;" dense v-model="sItem.DetailsName"
+                ref="DetailsName" class="q-pr-none q-pb-lg" label="条件名称" />
+              <div class="row wrap">
+                <div class="col-3 q-pr-lg">
+                  <q-select filled stack-label option-value="Id" @input="clearTarget(sItem)" option-label="Name"
+                    v-model="sItem.TaskType" ref="PriceDiscountType_Id" :options="taskTypeData" label="任务类型" dense
+                    emit-value map-options />
+                </div>
+                <div class="col-5 q-pr-lg">
+                  <el-select v-if="sItem.TaskType==2" style="width:100%;" v-model="sItem.TargetIdList" multiple collapse-tags placeholder="请选择">
+                    <el-option v-for="mItem in CourseSubjectList" :key="mItem.Id" :label="mItem.SubjectName" :value="mItem.Id">
+                    </el-option>
+                  </el-select>
+                  <el-select v-if="sItem.TaskType==3" style="width:100%;" v-model="sItem.TargetIdList" multiple collapse-tags placeholder="请选择">
+                    <el-option v-for="mItem in TreeCategoryList" :key="mItem.CateId" :label="mItem.CateName" :value="mItem.CateId">
+                    </el-option>
+                  </el-select>
+                  <el-select v-if="sItem.TaskType==4" style="width:100%;" v-model="sItem.TargetIdList" multiple collapse-tags placeholder="请选择">
+                    <el-option v-for="mItem in CourseList" :key="mItem.CourseId" :label="mItem.CourseName" :value="mItem.CourseId">
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="col-2 q-pr-lg" style="width:19%">
+                  <q-select filled stack-label option-value="Id" option-label="Name" v-model="sItem.TaskFinishType"
+                    :options="finishTypeObj" label="请选择" dense emit-value map-options />
+                </div>
+                <div class="col-2" style="width:14%">
+                  <q-input filled stack-label maxlength="20" @keyup.native="checkInteger(sItem,'TaskFinishValue')" dense
+                    v-model="sItem.TaskFinishValue" ref="TaskFinishValue" class="q-pr-none" label="任务完成值" />
+                </div>
+              </div>
               <br />
-              <q-input filled stack-label maxlength="20" dense v-model="sItem.TaskKudo" ref="TaskKudo" class="q-pr-none"
-                label="奖品名称" />
+              <q-input filled stack-label maxlength="20" style="width:523px;" dense v-model="sItem.TaskKudo"
+                ref="TaskKudo" class="q-pr-none" label="奖品名称" />
               <br />
               <div class="row col-12">
                 <div class="sale_ImgDiv" v-for="(kItem,kIndex) in sItem.TaskKudoImgList" :key="kIndex">
@@ -168,9 +186,9 @@
                   <i class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
               </div>
-              <br />
-              <q-btn flat size="xs" icon="iconfont icon-shanchu" title="删除" color="negative" style="font-weight:400"
-                class="q-mr-xs" label="" @click="deleSubTask(index)" />
+              <q-btn flat size="xs" icon="iconfont icon-shanchu" title="删除" color="negative"
+                style="font-weight:400;position:absolute;right:0;top:10px;" class="q-mr-xs" label=""
+                @click="deleSubTask(index)" />
             </div>
           </template>
 
@@ -415,4 +433,5 @@
       }
     },
   }
-</script>
+
\ No newline at end of file
+</script>