1

src/views/admin/system/role/change-role.vue

@@ -13,16 +13,21 @@
       <el-form-item class="role-form-item">
         <el-radio-group v-model="radio" class="role-radio-group" @change="handleChangeRole">
           <template v-for="(roles, groupName) in allRoleGroups" :key="groupName">
+            <el-card class="role-group-card" shadow="hover">
+              <template #header>
+                <span class="group-name">{{ groupName }}</span>
+              </template>
               <div class="role-group">
-              <el-divider>{{ groupName }}</el-divider>
                 <el-radio-button
                   v-for="item in roles"
                   :key="item.roleCode"
                   :label="item.roleCode"
+                  size="small"
                 >
                   {{ item.roleName }}
                 </el-radio-button>
               </div>
+            </el-card>
           </template>
         </el-radio-group>
       </el-form-item>
@@ -121,31 +126,12 @@ defineExpose({
     flex-wrap: wrap;
   }
 }
-.role-group {
-  width: 100%;
-  flex: 0 0 100%;
-  margin-bottom: 12px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-.group-name {
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
-  margin-bottom: 6px;
-}
 .role-radio-group {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
-  gap: 8px;
+  gap: 6px;
-  align-items: flex-start;
+  width: 100%;
 
-  /* 每个分组内按钮可换行，分组之间不重叠 */
   :deep(.el-radio-button) {
     margin: 0;
   }
@@ -153,9 +139,35 @@ defineExpose({
     border-radius: 6px !important;
     border: 1px solid var(--el-border-color) !important;
     margin-left: 0 !important;
+    line-height: 1.3;
   }
   :deep(.el-radio-button.is-active .el-radio-button__inner) {
     border-color: var(--el-color-primary) !important;
   }
 }
+.role-group-card {
+  width: 100%;
+  flex: 0 0 auto;
+
+  :deep(.el-card__header) {
+    padding: 6px 12px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+  :deep(.el-card__body) {
+    padding: 6px 12px 8px;
+  }
+}
+.role-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+}
+.group-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
 </style>