样式最好使用tailwindcss

src/views/system/role/components/deptTree.vue

@@ -102,7 +102,7 @@ const setCheckedKeys = (keys: number[], leafOnly: boolean) => {
     </el-row>
     <el-tree
       ref="menuRef"
-      class="dark:tree-border"
+      class="border-1 rounded-[4px] border-[#e5e6e7] dark:border-[#4C4D4F]"
       :data="deptList"
       show-checkbox
       node-key="id"
@@ -112,13 +112,3 @@ const setCheckedKeys = (keys: number[], leafOnly: boolean) => {
     />
   </div>
 </template>
-
-<style scoped lang="scss">
-/* tree border */
-.tree-border {
-  width: 100%;
-  margin-top: 5px;
-  border: 1px solid #4c4d4f;
-  border-radius: 4px;
-}
-</style>

src/views/system/role/components/menuTree.vue

@@ -122,7 +122,7 @@ watch(menuCheckStrictly, () => {
     </el-row>
     <el-tree
       ref="menuRef"
-      class="tree-border"
+      class="border-1 rounded-[4px] border-[#e5e6e7] dark:border-[#4C4D4F]"
       :data="menuList"
       show-checkbox
       node-key="id"
@@ -132,13 +132,3 @@ watch(menuCheckStrictly, () => {
     />
   </div>
 </template>
-
-<style scoped lang="scss">
-/* tree border */
-.tree-border {
-  width: 100%;
-  margin-top: 5px;
-  border: 1px solid #4c4d4f;
-  border-radius: 4px;
-}
-</style>