feat(修改): 发起评审页面

src/views/review/createReview/index.vue

@@ -10,7 +10,7 @@
         :inline="true"
       >
         <el-form-item label="对应标准">
-          <el-select v-model="formModel.ask" clearable style="width: 100%">
+          <el-select v-model="formModel.ask" style="width: 100%">
             <el-option
               key="1"
               value="1"
@@ -20,8 +20,8 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div v-if="pageIndex === 1" style="display: flex">
-        <div style="flex-shrink: 0">
+      <div v-if="pageIndex === 1">
+        <div class="review-data-title">
           发起评审（{{
             selectDictLabel(
               dict.type.create_review_type,
@@ -33,24 +33,18 @@
               formModel.reviewSubtype
             )
           }}）
+          <div class="review-data-return" @click="handleGoBack">
+            <span class="el-icon-back" />返回
           </div>
-        <div
-          style="
-            flex-grow: 1;
-            text-align: right;
-            color: #1890ff;
-            text-decoration: underline;
-            cursor: pointer;
-          "
-          @click="handleGoBack"
-        >
-          返回
         </div>
       </div>
     </div>
     <div v-if="pageIndex === 0" class="create-review-content">
       <div class="center-tip">
-        <div class="el-icon-time icon-custon-style" />
+        <el-image
+          :src="require('@/assets/images/createReview/xuanzepinshen.png')"
+          class="icon-custon-style"
+        ></el-image>
         <div class="center-tip-text">请选择要发起的评审类型</div>
         <div class="center-top-text-small">只能选择一种类型</div>
       </div>
@@ -75,7 +69,10 @@
       </div>
       <div class="create-review-footer">
         <el-button type="primary" class="next-button" @click="pageIndex = 1"
-          >下一步</el-button
+          ><span
+            class="el-icon-check"
+            style="margin-right: 6px"
+          />下一步</el-button
         >
       </div>
     </div>
@@ -122,6 +119,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.create-review {
+  .review-data-title {
+    text-align: center;
+    position: relative;
+    font-size: 20px;
+    font-family: Microsoft YaHei, Microsoft YaHei-700;
+    font-weight: 700;
+    color: #303133;
+    line-height: 18px;
+    .review-data-return {
+      position: absolute;
+      top: 0;
+      right: 0;
+      text-align: right;
+      cursor: pointer;
+      font-size: 14px;
+      font-family: Microsoft YaHei, Microsoft YaHei-400;
+      font-weight: 400;
+      color: #1a6fd7;
+    }
+  }
+}
 .create-review-content {
   width: 100%;
   margin-top: 50px;
@@ -130,9 +149,9 @@ export default {
   flex-direction: column;
   align-items: center;
   .center-tip {
-    width: 400px;
-    height: 200px;
-    border: 1px solid #bbbbbb;
+    width: 574px;
+    height: 252px;
+    border: 1px solid #ebebeb;
     margin-bottom: 50px;
     display: flex;
     flex-direction: column;
@@ -140,17 +159,22 @@ export default {
     align-items: center;
     text-align: center;
     .icon-custon-style {
-      font-size: 90px;
-      color: #00afff;
+      width: 139px;
+      height: 124px;
+      border: 1px dashed #ebebeb;
     }
     .center-tip-text {
-      font-size: 18px;
-      font-weight: bold;
+      color: #303133;
+      font-size: 16px;
+      font-family: Microsoft YaHei, Microsoft YaHei-400;
+      font-weight: 400;
       margin: 10px 0;
     }
     .center-top-text-small {
-      font-size: 12px;
-      color: #bbbbbb;
+      font-size: 14px;
+      font-family: Microsoft YaHei, Microsoft YaHei-400;
+      font-weight: 400;
+      color: #f9a221;
     }
   }
   .review-type-content {
@@ -168,7 +192,7 @@ export default {
     display: flex;
     justify-content: center;
     .next-button {
-      width: 150px;
+      width: 130px;
     }
   }
 }

src/views/review/createReview/reviewData/index.vue

@@ -3,15 +3,17 @@
     <el-form
       :model="formModel"
       :rules="formRules"
-      label-suffix=":"
       label-width="200px"
+      label-position="top"
     >
-      <el-form-item label="对应标准" label-width="72px">
-        汽车整车信息安全技术要求
-      </el-form-item>
+      <div class="standard-text">对应标准：汽车整车信息安全技术要求</div>
       <div class="subtitle">评审对象</div>
       <el-form-item label="条款分类" prop="tiaokuanfenlei">
-        <el-select v-model="formModel.tiaokuanfenlei" clearable>
+        <el-select
+          v-model="formModel.tiaokuanfenlei"
+          style="width: 421px"
+          clearable
+        >
           <el-option
             v-for="dict in dict.type.sys_scene_type"
             :key="dict.value"
@@ -20,7 +22,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="条款分类" prop="biaozhuntiuaokuan">
+      <el-form-item label="标准条款" prop="biaozhuntiuaokuan">
         <el-button type="primary" plain @click="handleReSelect"
           >重新选择标准条款</el-button
         >
@@ -55,6 +57,8 @@
           </div>
         </div>
       </el-form-item>
+      <el-row :gutter="41">
+        <el-col span="12">
           <el-form-item label="审查要点" prop="shenchayaodian">
             <el-input
               v-model="formModel.shenchayaodian"
@@ -62,11 +66,13 @@
               placeholder="请输入审查要点"
               maxlength="100"
               show-word-limit
-          :autosize="{ minRows: 6, maxRows: 6 }"
-          style="width: 350px"
+              :autosize="{ minRows: 4, maxRows: 6 }"
+              resize="none"
             >
             </el-input>
           </el-form-item>
+        </el-col>
+        <el-col span="12">
           <el-form-item label="审查细则" prop="shenchaxize">
             <el-input
               v-model="formModel.shenchaxize"
@@ -74,16 +80,20 @@
               placeholder="请输入审查细则"
               maxlength="100"
               show-word-limit
-          :autosize="{ minRows: 6, maxRows: 6 }"
-          style="width: 350px"
+              :autosize="{ minRows: 4, maxRows: 6 }"
+              resize="none"
             >
             </el-input>
           </el-form-item>
+        </el-col>
+      </el-row>
 
       <div class="subtitle">评审成员</div>
       <el-form-item label="评审人员">
-        <div>组长-xxx</div>
+        <div class="assessor-text">
+          <div style="margin-bottom: 10px">组长-xxx</div>
           <div>组员-xxx、xxx、xxx</div>
+        </div>
       </el-form-item>
       <div class="subtitle">附加信息</div>
       <el-form-item label="备注信息">
@@ -93,15 +103,18 @@
           placeholder="请输入备注信息"
           maxlength="100"
           show-word-limit
-          :autosize="{ minRows: 6, maxRows: 6 }"
-          style="width: 350px"
+          :autosize="{ minRows: 3, maxRows: 6 }"
+          resize="none"
         >
         </el-input>
       </el-form-item>
     </el-form>
     <div class="create-review-footer">
       <el-button type="primary" class="next-button" @click="handleConfirm"
-        >确认发起</el-button
+        ><span
+          class="el-icon-check"
+          style="margin-right: 6px"
+        />确认发起</el-button
       >
     </div>
   </div>
@@ -151,6 +164,15 @@ export default {
 
 <style lang="scss" scoped>
 .review-data {
+  .standard-text {
+    width: 100%;
+    text-align: center;
+    font-size: 14px;
+    font-family: Microsoft YaHei, Microsoft YaHei-400;
+    font-weight: 400;
+    color: #606266;
+    line-height: 18px;
+  }
   .create-review-footer {
     margin-top: 50px;
     text-align: center;
@@ -160,5 +182,25 @@ export default {
       width: 150px;
     }
   }
+  .assessor-text {
+    background: #f5f5f5;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    padding: 7px 10px;
+    font-family: Microsoft YaHei, Microsoft YaHei-400;
+    font-weight: 400;
+    text-align: left;
+    color: #606266;
+    line-height: 16px;
+  }
+  ::v-deep.el-form-item.is-required:not(.is-no-asterisk)
+    > .el-form-item__label:before,
+  .el-form-item.is-required:not(.is-no-asterisk)
+    .el-form-item__label-wrap
+    > .el-form-item__label:before {
+    float: right;
+    margin-left: 4px;
+    margin-right: 0;
+  }
 }
 </style>