<template>
|
<div class="all" ref="curPage">
|
<div class="Authorization">
|
<div class="AuthorizationCenter">
|
<div
|
class="menu-item"
|
:class="activePage == i ? 'menu-item-active' : ''"
|
@click="openRight(i)"
|
v-for="(item, i) in menuArr"
|
:key="i"
|
>
|
<span class="iconfont" :style="`font-size:${item.size}px;`">{{
|
item.icon
|
}}</span>
|
<span class="title">{{ item.name }}</span>
|
</div>
|
</div>
|
<div class="AuthorizationRight"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
activePage: 0,
|
menuArr: [
|
{ name: "设备授权配置", icon: "\ue7e7", size: 28 },
|
{ name: "设备授权管理", icon: "\ue7e6", size: 28 },
|
],
|
};
|
},
|
methods: {
|
openRight(i) {
|
this.activePage = i;
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.Authorization {
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
flex: 1;
|
flex-basis: auto;
|
box-sizing: border-box;
|
.el-input__inner {
|
height: 24px !important;
|
}
|
|
.AuthorizationCenter {
|
height: 100%;
|
width: 300px;
|
overflow: auto;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
padding: 10px 10px;
|
padding-top: 6px;
|
border-right: 4px solid #f2f2f7;
|
border-top: 4px solid #f2f2f7;
|
border-left: 4px solid #f2f2f7;
|
background-color: #fbfaff;
|
.menu-item {
|
height: 56px;
|
margin-bottom: 4px;
|
border-radius: 8px;
|
line-height: 56px;
|
box-sizing: border-box;
|
font-size: 16px;
|
padding-left: 15px;
|
cursor: pointer;
|
display: flex;
|
.iconfont {
|
margin: 0 17px;
|
font-size: 24px !important;
|
}
|
.title {
|
font-size: 16px;
|
font-weight: 700;
|
}
|
}
|
.menu-item-active {
|
background-color: var(--colorCard) !important;
|
color: white !important;
|
}
|
.menu-item:hover {
|
background-color: #f2f2f7;
|
}
|
}
|
}
|
</style>
|
