创建任务 页面优化

src/views/task/create copy.vue

@@ -1,9 +1,11 @@
 <template>
-  <ContentWrap title="基本信息">
+  <ContentWrap>
     <section class="taskForm">
-      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto">
+      <div class="title">基本信息</div>
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto" class="formClass">
+       
         <el-form-item label="标题" prop="title">
-          <el-input v-model="formData.title" placeholder="请输入任务标题" />
+          <el-input v-model="formData.title" placeholder="请输入任务标题" size="large" />
         </el-form-item>
         <el-form-item label="时间周期" prop="planTime">
           <el-date-picker
@@ -11,11 +13,22 @@
             type="daterange"
             format="YYYY年MM月DD日"
             range-separator="至"
+            size="large"
             start-placeholder="选择任务计划开始时间"
             end-placeholder="选择任务计划结束时间"
             value-format="YYYY-MM-DD"
           />
         </el-form-item>
+        <el-form-item label="描述" prop="description" style="width: 100%; padding: 0; margin-top: 0px;" class="descClass">
+          <el-input
+            type="textarea"
+            v-model="formData.description"
+            :autosize="{
+              minRows: 4
+            }"
+            placeholder="请输入描述"
+          />
+        </el-form-item>
         <el-form-item label="类型" prop="taskType">
           <el-tree-select
             v-model="formData.taskType"
@@ -23,6 +36,7 @@
             :props="defaultProps"
             check-strictly
             node-key="id"
+            size="large"
             placeholder="请选择任务类型"
           />
         </el-form-item>
@@ -37,7 +51,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="优先级" prop="priority">
-          <el-select v-model="formData.priority" placeholder="请选择任务优先级">
+          <el-select v-model="formData.priority" placeholder="请选择任务优先级" size="large">
             <el-option
               v-for="dict in getIntDictOptions(DICT_TYPE.TASK_PRIORITY)"
               :key="dict.value"
@@ -46,36 +60,11 @@
             />
           </el-select>
         </el-form-item>
-        <!--        <el-form-item label="标签" prop="tags" style="width: 100%">-->
-        <!--          <el-tree-select-->
-        <!--            v-model="formData.tags"-->
-        <!--            :data="tagList"-->
-        <!--            check-strictly-->
-        <!--            :render-after-expand="false"-->
-        <!--            placeholder="请选择标签"-->
-        <!--            node-key="id"-->
-        <!--            show-checkbox-->
-        <!--            multiple-->
-        <!--            :props="{-->
-        <!--              label: 'tagName'-->
-        <!--            }"-->
-        <!--          />-->
-        <!--        </el-form-item>-->
-        <el-form-item label="描述" prop="description" style="width: 100%">
-          <el-input
-            type="textarea"
-            v-model="formData.description"
-            :autosize="{
-              minRows: 3
-            }"
-            placeholder="请输入描述"
-          />
-        </el-form-item>
       </el-form>
     </section>
   </ContentWrap>
-  <ContentWrap title="执行范围">
+  <ContentWrap>
-    <!-- <template #header> </template> -->
+    <div class="title">执行范围</div>
     <section class="select-area" v-loading="loading">
       <section>
         <el-form
@@ -83,6 +72,7 @@
           ref="queryFormRef"
           :inline="true"
           label-width="0"
+          size="large"
           class="search-form"
         >
           <div class="form-container">
@@ -572,27 +562,46 @@ onMounted(() => {
 })
 </script>
 <style scoped lang="scss">
-::v-deep(.el-card__header) {
-  border-bottom: 0;
-}
 
-::v-deep(.taskForm .el-form) {
+.title {
-  display: flex;
+    font-size: 16px;
-  flex-flow: row wrap;
+    font-weight: bold;
-  justify-content: space-around;
+    margin: 20px;
-  gap: 10px;
+    font-size: 17px;
-  .el-form-item {
-    width: calc(50% - 10px);
-    display: flex;
-    align-items: flex-start;
   }
-}
+
+ .taskForm{
+  padding-right: 20px;
+
+  .formClass {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    align-items: center;
+    gap: 20px;
+    width: 100%;
+
+
+    .descClass {
+      grid-row: span 2;
+
+    }
+
+    ::v-deep(.el-form-item) {
+      width: 100%;
+      align-items: flex-start;
+    }
+  }
+ }
+
+
+
 .enterprise-area {
   flex: 1;
   gap: 10px;
   margin: 0 20px; // 添加与搜索框相同的边距
   overflow-x: hidden; // 添加这行
-  width: calc(100% - 40px); // 添加这行
+  width: calc(100% - 40px); // 添加这行q
   ::v-deep(.el-table) {
     width: 100% !important; // 添加这行
     .el-table__cell {
@@ -669,7 +678,7 @@ onMounted(() => {
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: minmax(0, 1fr);
-  grid-gap: 20px;
+  align-items: center;
   ::v-deep(.select-area .el-form) {
     margin-bottom: 15px;
     .el-form-item {
@@ -686,9 +695,7 @@ onMounted(() => {
   }
   .search-form {
     background-color: #fff;
-    padding: 20px 20px 0px 20px;
     border-radius: 4px;
-    position: relative;
     margin: 0 20px; // 改用 margin 控制间距
     .form-container {
       display: grid;
@@ -707,9 +714,15 @@ onMounted(() => {
       }
     }
     .action-buttons {
-      position: absolute;
+      display: flex;
-      right: 10px;
+      justify-content: flex-end;  /* 水平右对齐 */
-      bottom: 0px;
+      align-items: center; 
+      width: 100%;
+      button{
+        margin-left: auto;
+        margin-top: auto;
+
+      }
     }
 
     .button-container {

src/views/task/createEnterprise.vue

@@ -9,7 +9,7 @@
     <div class="enterprise-container">      
       <!-- 搜索区域 -->
       <div class="search-area">
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="0"  class="search-form">
+        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="0"  size="large" class="search-form">
           <div class="form-container">
             
             <el-form-item label="" prop="region" class="form-item">