50 lines
835 B
Vue
50 lines
835 B
Vue
<template>
|
|
<div class="permission-legend">
|
|
<div class="legend">
|
|
<span class="block direct"></span>
|
|
<span>上级角色直接授权</span>
|
|
</div>
|
|
<div class="legend">
|
|
<span class="block inherited"></span>
|
|
<span>子角色继承授权</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.permission-legend {
|
|
--source-direct-color: #2563EB;
|
|
--source-inherited-color: #14B8A6;
|
|
--source-unknown-color: #94A3B8;
|
|
|
|
gap: 1.5rem;
|
|
display: flex;
|
|
margin-top: .5rem;
|
|
|
|
.legend {
|
|
gap: .25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.block {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
display: block;
|
|
border-radius: .25rem;
|
|
|
|
&.direct {
|
|
background: var(--source-direct-color);
|
|
}
|
|
|
|
&.inherited {
|
|
background: var(--source-inherited-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|