<template>
  <div>
    <Breadcrumb :items="['账号及权限', '角色权限']" :title="'角色权限'" />
    <div class="container">
      <a-layout>
        <a-layout-sider :resize-directions="['right']" :width="490">
          <RoleList />
        </a-layout-sider>
        <a-layout-content>
          <RoleContent />
        </a-layout-content>
      </a-layout>
    </div>
  </div>
</template>

<script lang="ts" setup>
import RoleList from './components/List.vue'
import RoleContent from './components/Content.vue'
</script>

<script lang="ts">
export default {
  name: 'Role'
}
</script>

<style scoped lang="less">
.container {
  padding: 20px 20px 20px 20px;
}
:deep(.arco-resizebox-trigger-icon-wrapper) {
  width: 3px;
  border: 1px dashed rgba(0, 0, 0, 0.06);
  background: transparent;
}
</style>
