dd3

src/App.vue

@@ -138,6 +138,10 @@ export default {
     }
   }
 }
+.resi-btns {
+  margin-top: 20px;
+  text-align: center;
+}
 .scroll-h {
   &::-webkit-scrollbar {
     // display: none;

src/views/modules/workPc/guidance/categoryList.vue

@@ -2,13 +2,13 @@
   <div class="role-container">
     <el-card class="flex1">
 
-      <div v-if="isManager">
+      <div v-if="isManager" class="resi-row-btn">
         上下拖动可改变角色顺序
         <el-button style="margin-left:10px"
                    type="primary"
                    size="small"
                    @click="handleSaveSort">保存顺序</el-button>
-        <el-button type="primary"
+        <el-button type="success"
                    size="small"
                    @click="handleAdd">新增</el-button>
       </div>
@@ -17,6 +17,8 @@
                 :data="tableData"
                 row-key="id"
                 border
+                :height="tableHeight"
+                class="resi-table"
                 style="width: 100%;margin-top:20px">
         <el-table-column type="index"
                          header-align="left"
@@ -46,20 +48,22 @@
           <template slot-scope="scope">
 
             <el-button v-if="scope.row.status==='enable'"
-                       type="primary"
+                       type="text"
                        size="mini"
                        @click="confirmChangeState(scope.row,'disable')">禁用</el-button>
             <el-button v-if="scope.row.status==='disable'"
-                       type="primary"
+                       type="text"
                        size="mini"
                        @click="confirmChangeState(scope.row,'enable')">启用</el-button>
 
-            <el-button type="primary"
+            <el-button type="text"
                        size="mini"
+                       class="btn-color-edit"
                        @click="handleEdit(scope.row)">修改</el-button>
 
-            <el-button type="primary"
+            <el-button type="text"
                        size="mini"
+                       class="btn-color-del"
                        @click="confirmDel(scope.row)">删除</el-button>
           </template>
         </el-table-column>
@@ -72,25 +76,42 @@
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :title="diaTitle"
-               width="30%"
+               width="50%"
+               class="dialog-h"
                @closed="diaClose">
-      <div class="div_duty"
+      <div class="div_duty dialog-h-content scroll-h"
            v-if="diaShow">
-        <span> 分类名称 </span>
+           <el-form label-width="100px">
+            <el-form-item label="分类名称">
+              <el-input v-model="categoryName" type="textarea"
+                  maxlength="10"
+                  :rows="2" style="width: 300px"></el-input>
+            </el-form-item>
+          </el-form>
+        <!-- <span> 分类名称 </span>
         <el-input style="margin-top:20px"
                   type="textarea"
                   maxlength="10"
                   :rows="2"
-                  v-model="categoryName"></el-input>
-        <div class="div_btn">
+                  v-model="categoryName"></el-input> -->
+        <!-- <div class="div_btn">
           <el-button type="primary"
                      size="small"
                      @click="saveCategory()">保存</el-button>
           <el-button size="small"
                      @click="diaShow=false">取消</el-button>
-        </div>
+        </div> -->
+        
 
       </div>
+      <div class="resi-btns">
+          <el-button size="small"
+                    @click="diaShow=false">取消</el-button>
+          <el-button
+                    type="primary"
+                    size="small"
+                    @click="saveCategory">提交</el-button>
+        </div>
     </el-dialog>
 
   </div>
@@ -139,7 +160,11 @@ export default {
 
 
   },
-
+  computed: {
+    tableHeight() {
+      return document.documentElement.clientHeight - 220;
+    }
+  },
   methods: {
 
     //获取分类列表
@@ -347,7 +372,19 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.resi-table {
+  ::v-deep .el-button--text {
+    text-decoration: underline;
+  }
+  ::v-deep .btn-color-del {
+    margin-left: 10px;
+    color: rgba(213, 16, 16, 1);
+  }
+  ::v-deep .btn-color-edit {
+    color: rgba(0, 167, 169, 1);
+  }
+}
 .role-container,
 .role-flex {
   display: flex;
@@ -368,8 +405,9 @@ export default {
   padding: 0 20px 20px;
 }
 .div_duty {
-  height: 300px;
-  position: relative;
+  margin-top: 30px;
+  /* height: 300px;
+  position: relative; */
 }
 
 .div_btn {
@@ -377,4 +415,22 @@ export default {
   bottom: 30px;
   right: 15px;
 }
+.resi-row-btn {
+  display: flex;
+  align-items: center;
+  margin-bottom: 13px;
+  .el-button {
+    margin-left: 10px;
+    border: 0;
+  }
+  .el-button--success {
+    background: rgba(34, 193, 195, 1);
+  }
+  .el-button--warning {
+    background: rgba(254, 179, 73, 1);
+  }
+  .el-button--danger {
+    background: rgba(254, 98, 82, 1);
+  }
+}
 </style>