角色的静态页面 编辑

src/views/SystemManage/RoleManage.vue

@@ -44,7 +44,9 @@
           >
             {{ item.name }}
             <!--            <div class="diy-edit-title">{{ item.name }}</div>-->
-            <!--            <div class="diy-edit-btn"></div>-->
+            <div class="diy-edit-btn">
+              <img class="img" :src="editurl" @click="editDiyRoleItem(index)" />
+            </div>
           </div>
         </div>
       </div>
@@ -60,10 +62,10 @@
           </div>
           <div class="save">
             <div class="btn" @click="save">保存</div>
-            <el-button @click="add">add</el-button>
-            <el-button @click="edit">edit</el-button>
-            <el-button @click="del">del</el-button>
-            <el-button @click="search">search</el-button>
+            <!--            <el-button @click="add">add</el-button>-->
+            <!--            <el-button @click="edit">edit</el-button>-->
+            <!--            <el-button @click="del">del</el-button>-->
+            <!--            <el-button @click="search">search</el-button>-->
           </div>
         </div>
         <div class="role-info">
@@ -207,6 +209,7 @@ export default {
   data() {
     return {
       // 功能权限标志 数据权限标志
+      editurl: require("@/assets/img/edit.png"),
       funFlag: false,
       dataFlag: false,
       // 角色按钮
@@ -428,6 +431,10 @@ export default {
       });
       // this.diyRoleList[index].flag = true;
     },
+    // 编辑
+    editDiyRoleItem(id) {
+      console.info("编辑方法");
+    },
     funAuth() {
       this.funFlag = true;
       this.dataFlag = false;

src/views/SystemManage/scss/role.scss

@@ -95,28 +95,34 @@
         line-height: 40px;
         margin-bottom: 10px;
         cursor: pointer;
-
+        overflow: hidden;
         &.active{
           border: 1px solid #055FE7;
           color: #055FE7;
         }
-        //.diy-edit-title{
-        //  //border: saddlebrown 1px solid;
-        //  height: 19px;
-        //  font-size: 14px;
-        //  color: #333333;
-        //  line-height: 19px;
-        //}
-        //.diy-edit-btn{
-        //  width: 28px;
-        //  height: 20px;
-        //  background: #DDEBFF;
-        //  box-shadow: 0px 0px 4px 0px rgba(5, 95, 231, 0.3);
-        //  border-bottom-left-radius:250px;
-        //  position: relative;
-        //  right: -55px;
-        //  top: -3px;
-        //}
+        .diy-edit-title{
+          //border: saddlebrown 1px solid;
+          height: 19px;
+          font-size: 14px;
+          color: #333333;
+          line-height: 19px;
+        }
+        .diy-edit-btn{
+          width: 40px;
+          height: 30px;
+          background: #DDEBFF;
+          box-shadow: 0px 0px 4px 0px rgba(5, 95, 231, 0.3);
+          border-bottom-left-radius:250px;
+          position: relative;
+          right: -55px;
+          top: -3px;
+          .img{
+            width: 13px;
+            height: 14px;
+            margin-bottom:13px;
+            cursor: pointer;
+          }
+        }
       }
     }
   }