项目、需求样式优化 新建、编辑

src/components/handleFile/copyPaste.vue

@@ -1,15 +1,7 @@
 <template>
   <div>
     <el-button id="pasteUpload" type="primary" style="display: none" @click.stop="pasteUpload">upload</el-button>
-    <normal-dialog
-      :show-dialog="showCopyFile"
-      :title="'上传截图'"
-      :width="'40%'"
-      :submit-button="'上传'"
-      :top="'5vh'"
-      @confirm="confirmUpload()"
-      @cancel="showCopyFile=false"
-    >
+    <normal-dialog :show-dialog="showCopyFile" :title="'上传截图'" :width="'40%'" :submit-button="'上传'" :top="'5vh'" @confirm="confirmUpload()" @cancel="showCopyFile=false">
       <div class="file-dialog">
         <el-form ref="imageForm" label-width="20%" :rules="imageRules" :model="imageName">
           <el-form-item label="图片命名" prop="name">
@@ -23,8 +15,8 @@
           <div class="image-center">
             <img :src="imageUrl" class="image-url">
           </div>
+          </div>
         </div>
-      </div>
     </normal-dialog>
   </div>
 </template>
@@ -149,33 +141,38 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.file-dialog {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .el-form {
-    width: 100%;
-  }
-  .image {
-    position: relative;
-    width: 61%;
-    padding-top: 60%;
-    border:1px solid #409EFF;
-    border-radius: 4px;
-    .image-center {
-      padding: 1%;
-      position: absolute;
-      top: 0;
-      left: 0;
+  .file-dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .el-form {
       width: 100%;
-      height: 100%;
-      overflow-x: hidden;
-      display: flex;
-      justify-content: center;
     }
-    .image-url {
-      height: 100%;
+
+    .image {
+      position: relative;
+      width: 61%;
+      padding-top: 60%;
+      border: 1px solid #409EFF;
+      border-radius: 4px;
+
+      .image-center {
+        padding: 1%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+        display: flex;
+        justify-content: center;
+      }
+
+      .image-url {
+        height: 100%;
+      }
     }
   }
-}
+
 </style>

src/views/projectManage/projectList/projectIndex.vue

@@ -6,9 +6,7 @@
         <div class="new-tab-open">
           <!-- 这个可以放按钮 -->
         </div>
-        <div>
-          <el-button type="primary" size="mini" @click="home_created_project">新建项目</el-button>
-        </div>
+        <el-button type="primary" size="mini" @click="home_created_project">新建项目</el-button>
       </div>
       <el-divider style="color: #EEF0F5;" />
       <div class="Layout" style="padding-top: 5px;">
@@ -158,7 +156,7 @@
         />
       </div>
     </div>
-    <el-dialog :title="'新建项目'" class="task" :visible.sync="dialogFormVisible" width="70%" :close-on-click-modal="false">
+    <el-dialog :title="'新建项目'" class="copy-task" :visible.sync="dialogFormVisible" width="70%" :close-on-click-modal="false">
       <div class="blueStripe" />
       <el-form
         ref="form"
@@ -166,7 +164,6 @@
         :rules="rules_form"
         :label-width="formLabelWidth"
         label-position="left"
-        style="margin: 0 3%;"
       >
         <el-form-item label="项目名称" prop="name">
           <el-input v-model="form.name" autocomplete="off" placeholder="请输入项目名称" />
@@ -193,7 +190,7 @@
                 />
               </el-select>
             </el-form-item>
-            <el-form-item label="产品负责人">
+            <el-form-item label="产品负责人" class="form-item-normal-lable">
               <el-select
                 v-model="form.pmOwner"
                 filterable
@@ -219,7 +216,7 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="测试负责人">
+            <el-form-item label="测试负责人" class="form-item-normal-lable">
               <el-select
                 v-model="form.testOwner"
                 filterable
@@ -282,7 +279,7 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="开发负责人">
+            <el-form-item label="开发负责人" class="form-item-normal-lable">
               <el-select
                 v-model="form.rdOwner"
                 filterable
@@ -310,7 +307,7 @@
             </el-form-item>
           </div>
         </div>
-        <el-form-item label="项目描述">
+        <el-form-item label="项目描述" class="form-item-normal-lable">
           <el-input v-model="form.description" type="textarea" placeholder="请输入" show-word-limit />
         </el-form-item>
       </el-form>
@@ -534,6 +531,28 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.copy-task {
+  .el-select {
+    width: 20vw;
+  }
+  .el-dialog__body {
+    padding: 20px 40px;
+  }
+  label {
+    font-weight: 400;
+  }
+  .form-item-normal-lable {
+    .el-form-item__label:before {
+      content: "";
+      color: #333333;
+      margin-right: 12px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 .stylus-head {
   position: relative;
@@ -542,7 +561,7 @@ export default {
   position: absolute;
   left: 120px;
 }
-.task {
+.copy-task {
   /deep/ .el-dialog__title {
     line-height: 24px;
     font-size: 18px;
@@ -624,11 +643,7 @@ export default {
 </style>
 
 <style lang="stylus" scoped>
-  .stylus-head >>> .el-form-item__label
-    color #333333
-    font-weight 400
   .stylus-content >>> .el-table .el-table__body tr:hover td
-    // color #409EFF !important
     background #EDF6FF
   .stylus-head >>> .el-divider--horizontal
     margin 10px 0

src/views/projectManage/requirement/list/create.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dialog :title="title" class="task" :visible.sync="isVisible" width="65%" style="padding: 30px 75px 30px 20px;" :close-on-click-modal="false" :destroy-on-close="true">
+  <el-dialog :title="title" class="copy-task" :visible.sync="isVisible" width="65%" :close-on-click-modal="false" :destroy-on-close="true">
     <div class="blueStripe" />
-    <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px">
+    <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="120px">
       <el-form-item label="需求名称" prop="name">
         <el-input v-model="form.name" size="medium" placeholder="请输入需求名称" />
       </el-form-item>
@@ -26,30 +26,17 @@
               <el-radio :label="1" style="margin-left: 14px;">紧急 <img class="imageWidth" :src="urgentUrl"></el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="需求方向">
+          <el-form-item :label="'需求方向'" class="form-item-normal-lable">
             <el-cascader v-model="form.rqmtOrntIds" size="medium" collapse-tags :props="props" :options="demandDirection" style="width:20vw;" placeholder="请选择" />
           </el-form-item>
           <el-form-item label="优先级" prop="priority">
-            <el-select v-model="form.priority" size="medium" placeholder="请选择" style="width:20vw">
+            <el-select v-model="form.priority" size="medium" placeholder="请选择">
               <el-option v-for="(item,index) in formBackgroungInfo.priority" :key="index" :label="item.msg" :value="item.code" />
             </el-select>
           </el-form-item>
           <el-form-item label="PM" prop="pm">
-            <el-select
-              v-model="form.pm"
-              filterable
-              remote
-              placeholder="请输入需求产出的姓名或邮箱前缀"
-              :remote-method="searchUser"
-              :loading="userLoading"
-              style="width:20vw"
-            >
-              <el-option
-                v-for="(item,index) in options"
-                :key="index"
-                :label="item.name"
-                :value="item.idap"
-              >
+            <el-select v-model="form.pm" filterable remote placeholder="请输入需求产出的姓名或邮箱前缀" :remote-method="searchUser" :loading="userLoading" style="width:20vw">
+              <el-option v-for="(item,index) in options" :key="index" :label="item.name" :value="item.idap">
                 <div style="display: flex;justify-content: start;">
                   <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
                   <div style="min-width:80px">{{ item.name }}</div>
@@ -65,23 +52,9 @@
               <el-option v-for="(item,index) in formBackgroungInfo.sourceType" :key="index" :label="item.msg" :value="item.code" />
             </el-select>
           </el-form-item>
-          <el-form-item label="需求提出人">
-            <el-select
-              v-model="form.rqmtProposer"
-              filterable
-              remote
-              multiple
-              placeholder="请输入需求产出的姓名或邮箱前缀"
-              :remote-method="searchUser"
-              :loading="userLoading"
-              style="width:20vw"
-            >
-              <el-option
-                v-for="(item,index) in options"
-                :key="index"
-                :label="item.name"
-                :value="item.idap"
-              >
+          <el-form-item label="需求提出人" class="form-item-normal-lable">
+            <el-select v-model="form.rqmtProposer" filterable remote multiple placeholder="请输入需求产出的姓名或邮箱前缀" :remote-method="searchUser" :loading="userLoading" style="width:20vw">
+              <el-option v-for="(item,index) in options" :key="index" :label="item.name" :value="item.idap">
                 <div style="display: flex;justify-content: start;">
                   <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
                   <div style="min-width:80px">{{ item.name }}</div>
@@ -95,17 +68,17 @@
               <el-option v-for="(item,index) in all_bizId" :key="index" :label="item.name" :value="item.code" />
             </el-select>
           </el-form-item>
-          <el-form-item label="所属迭代">
+          <el-form-item label="所属迭代" class="form-item-normal-lable">
             <el-select v-model="form.iterationId" size="medium" placeholder="请选择" style="width:20vw">
               <el-option v-for="(item,index) in iterationList" :key="item.name + index" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
         </div>
       </div>
-      <el-form-item label="BRD链接">
+      <el-form-item label="BRD链接" class="form-item-normal-lable">
         <el-input v-model="form.brdUrl" size="medium" placeholder="请粘贴BRD链接" />
       </el-form-item>
-      <el-form-item label="PRD链接">
+      <el-form-item label="PRD链接" class="form-item-normal-lable">
         <el-input v-model="form.mrdUrl" size="medium" placeholder="请粘贴PRD链接" />
       </el-form-item>
       <div style="display: flex;justify-content: space-between; align-items: center;">
@@ -415,35 +388,53 @@ export default {
 }
 </script>
 
-<style scoped>
-.el-select {
-  width: 20vw;
+<style lang="scss">
+.copy-task {
+  .el-select {
+    width: 20vw;
+  }
+  .el-dialog__body {
+    padding: 20px 40px;
+  }
+  label {
+    font-weight: 400;
+  }
+  .form-item-normal-lable {
+    .el-form-item__label:before {
+      content: "";
+      margin-right: 12px;
+      font-weight: 400;
+    }
+  }
 }
 </style>
 <style lang="scss" scoped>
-.task {
-  /deep/ .el-dialog__title {
-    line-height: 24px;
-    font-size: 18px;
-    color: #303133;
-    padding-left: 10px;
-}
+  .copy-task {
+    /deep/ .el-dialog__title {
+      line-height: 24px;
+      font-size: 18px;
+      color: #303133;
+      padding-left: 10px;
+    }
 
-.blueStripe {
-  width:4px;
-  height:17px;
-  background:#409EFF;
-  border-radius:1px;
-  position: absolute;
-  top: 23px;
-  left: 20px;
-}
-}
-.imageWidth {
-  width: 12px;
-  padding-bottom: 4px;
-}
->>>.el-form-item {
+    .blueStripe {
+      width: 4px;
+      height: 17px;
+      background: #409EFF;
+      border-radius: 1px;
+      position: absolute;
+      top: 23px;
+      left: 20px;
+    }
+  }
+
+  .imageWidth {
+    width: 12px;
+    padding-bottom: 4px;
+  }
+
+  >>>.el-form-item {
     margin-bottom: 15px;
-}
+  }
+
 </style>