121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<template>
|
|
<div class="brand-layout">
|
|
<el-container class="brand-layout-container">
|
|
<el-aside class="brand-aside-menu">
|
|
<!-- 菜单部分 -->
|
|
<el-menu v-model:open="openMenus" :default-active="activeMenu" class="brand-aside-menu" @select="handleSelect">
|
|
<el-menu-item index="apply">
|
|
<img :src="getAssetsFile('images/brand/Apply.png')" class="menu-icon" alt="申请图标" />
|
|
<span>使用申请</span>
|
|
</el-menu-item>
|
|
|
|
<el-sub-menu index="auth">
|
|
<template #title>
|
|
<img :src="getAssetsFile('images/brand/autho.png')" class="menu-icon" />
|
|
<span>授权管理</span>
|
|
</template>
|
|
<el-menu-item index="auth/record"> 授权记录 </el-menu-item>
|
|
<el-menu-item index="auth/system"> 品牌制度 </el-menu-item>
|
|
</el-sub-menu>
|
|
|
|
<el-menu-item index="monitor">
|
|
<img :src="getAssetsFile('images/brand/supervision.png')" class="menu-icon" alt="" />
|
|
<span>使用监管</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-aside>
|
|
|
|
<el-main class="brand-main">
|
|
<router-view />
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { getAssetsFile } from '@/utils/index.js';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const openMenus = ref(['auth']);
|
|
|
|
const menuMap = {
|
|
apply: ['brandApplyList'],
|
|
'auth/record': ['brandAuth'],
|
|
'auth/system': ['brandSystem'],
|
|
monitor: ['brandMonitor'],
|
|
};
|
|
|
|
// 获取当前菜单激活项
|
|
const activeMenu = computed(() => {
|
|
const matched = Object.entries(menuMap).find(([key, names]) => names.includes(route.name));
|
|
// console.log(matched[0]);
|
|
return matched ? matched[0] : '';
|
|
});
|
|
// 菜单切换处理
|
|
function handleSelect(index) {
|
|
router.push(`/sub-operation-service/brand/${index}`);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.brand-layout {
|
|
width: 100%;
|
|
height: calc(100vh - 230px);
|
|
|
|
.brand-layout-container {
|
|
height: 100%;
|
|
width: $width-main;
|
|
margin: auto;
|
|
.brand-aside-menu {
|
|
background-color: #fff;
|
|
border-radius: 16px;
|
|
border-right: 0;
|
|
:deep(.el-menu-item),
|
|
:deep(.el-sub-menu__title) {
|
|
font-size: 18px !important;
|
|
margin: 8px 12px;
|
|
span {
|
|
margin-left: 8px;
|
|
}
|
|
.menu-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
:deep(.el-sub-menu) {
|
|
.el-menu-item {
|
|
font-size: 16px !important;
|
|
margin: 4px 12px;
|
|
line-height: 40px;
|
|
span {
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.is-active) {
|
|
> .el-sub-menu__title,
|
|
&.el-menu-item {
|
|
color: #409eff !important;
|
|
background-color: #f5f7fa;
|
|
}
|
|
}
|
|
}
|
|
.brand-main {
|
|
width: calc(100% - 240px - 16px);
|
|
margin-left: 16px;
|
|
// background-color: #f0f0f0;
|
|
padding: 0;
|
|
}
|
|
.brand-main::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|