根据设计图，修改现有功能样式

src/components/knowledgeExtra/AddAssess/index.vue

@@ -2,8 +2,13 @@
 <style lang="less" scoped>
 .add_assess {
   h5 {
-    padding: 10px 10px 0 10px;
+    padding: 30px 35px 0 35px;
     margin-bottom: 20px;
+    font-size: 14px;
+    span {
+      color: #ff545b;
+      margin-right: 3px;
+    }
   }
   .table_map {
     border-bottom: 30px solid #dee2ea;
@@ -11,14 +16,36 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 10px;
+      padding: 0 37px;
       .table_top_box_left {
         display: flex;
+        /deep/.el-input--mini .el-input__inner {
+          width: 200px;
+        }
+        .num_box {
+          margin-left: 50px;
+          display: flex;
+          /deep/ .el-input__inner {
+            width: 40px;
+            text-align: center;
+          }
+        }
       }
     }
     .move_btn {
       font-size: 14px;
       margin-left: 10px;
+      display: flex;
+      div {
+        width: 10px;
+        height: 14px;
+        margin-right: 8px;
+        img {
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+        }
+      }
     }
   }
   /deep/ .el-form-item--mini.el-form-item,
@@ -28,15 +55,32 @@
   .hint_msg {
     font-size: 12px;
     color: red;
+    margin-top: 5px;
   }
   .change_table_btns {
     width: 100%;
     margin-top: 20px;
     display: flex;
-    flex-direction: row-reverse;
+    justify-content: center;
     padding: 10px;
     box-sizing: border-box;
     border-top: 10px solid #dee2ea;
+    div {
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 2px;
+      border: 1px solid #21cbc7;
+      color: #21cbc7;
+      font-size: 14px;
+      padding: 0 5px;
+      margin: 0 30px;
+      cursor: pointer;
+      &:nth-child(2) {
+        border-color: #ff5b5b;
+        color: #ff5b5b;
+      }
+    }
   }
   .rich_text {
     padding: 0 10px;
@@ -69,16 +113,21 @@ it .ql-editor,
 </style>  
 <template>
   <div class="add_assess">
-    <el-form size="mini" :model="scaleData" ref="scaleFormRef">
+    <el-form
+      size="mini"
+      :model="scaleData"
+      label-position="left"
+      ref="scaleFormRef"
+    >
       <div
         class="table_map"
         v-for="(table, tableIndex) in scaleData.klScaleParent"
         :key="tableIndex"
       >
-        <h5>*量表内容:</h5>
+        <h5><span>*</span>量表内容:</h5>
         <div class="table_top_box">
           <div class="table_top_box_left">
-            <el-form-item label="标题：" label-width="100px">
+            <el-form-item label="标题：" label-width="70px">
               <el-input v-model.trim="table.content" />
             </el-form-item>
             <div style="margin: 0 20px">
@@ -111,31 +160,56 @@ it .ql-editor,
                 注：结果类型修改后已填的所在标题下的内容将会清空
               </div>
             </div>
-            <div v-if="table.resultType === 2 && table.textType === 11">
-              <el-form-item label="系数：" label-width="100px">
+            <div
+              class="num_box"
+              v-if="table.resultType === 2 && table.textType === 11"
+            >
+              <el-form-item label="系数：" label-width="60px">
                 <el-input v-model.trim="table.factor" />
               </el-form-item>
-            </div>
-            <div v-if="table.resultType === 2 && table.textType === 11">
-              <el-form-item label="常数：" label-width="100px">
+              <el-form-item
+                label="常数："
+                label-width="60px"
+                style="margin-left: 10px"
+              >
                 <el-input v-model.trim="table.constant" />
               </el-form-item>
             </div>
           </div>
 
           <div class="move_btn" v-if="scaleData.klScaleParent.length > 1">
-            <el-button
+            <div
               @click="CHANGE_TABLE({ tableIndex, type: 'up' })"
+              @mouseover="moveTopHover = true"
+              @mouseout="moveTopHover = false"
               type="text"
               v-if="tableIndex"
-              >上移</el-button
             >
-            <el-button
+              <img
+                :src="
+                  moveTopHover
+                    ? require('@/images/icon_hover_top.png')
+                    : require('@/images/icon_default_top.png')
+                "
+                alt=""
+              />
+            </div>
+            <div
               v-if="tableIndex !== scaleData.klScaleParent.length - 1"
               @click="CHANGE_TABLE({ tableIndex, type: 'down' })"
+              @mouseover="moveBottomHover = true"
+              @mouseout="moveBottomHover = false"
               type="text"
-              >下移</el-button
             >
+              <img
+                :src="
+                  moveBottomHover
+                    ? require('@/images/icon_hover_down.png')
+                    : require('@/images/icon_default_down.png')
+                "
+                alt=""
+              />
+            </div>
           </div>
         </div>
         <ScaleTable
@@ -162,23 +236,17 @@ it .ql-editor,
           </el-form-item>
         </div>
         <div class="change_table_btns">
-          <el-button
-            icon="el-icon-minus"
-            style="margin-left: 10px"
-            size="small"
-            type="danger"
-            plain
+          <div @click="CHANGE_TABLE({ tableIndex, type: 1 })">
+            <i class="el-icon-plus"></i>
+            新增标题
+          </div>
+          <div
+            v-if="scaleData.klScaleParent.length > 1"
             @click="CHANGE_TABLE({ tableIndex, type: -1 })"
-            >删除标题</el-button
-          >
-          <el-button
-            @click="CHANGE_TABLE({ tableIndex, type: 1 })"
-            icon="el-icon-plus"
-            size="small"
-            type="success"
-            plain
-            >新增标题</el-button
           >
+            <i class="el-icon-minus"></i>
+            删除标题
+          </div>
         </div>
       </div>
     </el-form>
@@ -233,12 +301,14 @@ const defaultTable = {
   ruleCode: "string",
   score: 0,
   status: 0,
-  textType: 0
+  textType: 11
 };
 export default {
   components: { ScaleTable, quillEditor },
   data() {
     return {
+      moveTopHover: false,
+      moveBottomHover: false,
       scaleData: {
         conceptId: 0,
         klScaleParent: [

src/components/knowledgeExtra/AddAssess/scale-table.vue

@@ -3,7 +3,7 @@
 .scaleTable {
   min-height: 100px;
   .table_box {
-    padding: 0 10px;
+    padding: 0 30px;
   }
   .btn_box {
     width: 100%;
@@ -40,6 +40,20 @@
     padding: 2px 0;
   }
 }
+/deep/.el-table th,
+.el-table tr {
+  height: 50px;
+  background: #e3eaf4;
+}
+.custom_table_header {
+  vertical-align: middle;
+  &::before {
+    content: "*";
+    color: red;
+    font-size: 12px;
+    margin-right: 4px;
+  }
+}
 </style>
 <template>
   <div class="scaleTable" :id="`scaleTableRef[${tableIndex}]`">
@@ -154,6 +168,9 @@
           label="问题内容"
           :width="tableResultType === 1 ? '140px' : ''"
         >
+          <template slot="header">
+            <div class="custom_table_header">问题内容</div>
+          </template>
           <template slot-scope="scope">
             <el-form-item>
               <el-input
@@ -248,6 +265,9 @@
           label="选项内容"
           :width="tableResultType === 1 ? '140px' : ''"
         >
+          <template slot="header">
+            <div class="custom_table_header">选项内容</div>
+          </template>
           <template slot-scope="scope">
             <el-form-item>
               <el-input
@@ -264,6 +284,9 @@
           label="分值"
           v-if="tableResultType === 2"
         >
+          <template slot="header">
+            <div class="custom_table_header">分值</div>
+          </template>
           <template slot-scope="scope">
             <el-form-item>
               <el-input