rax-medical/src/views/permissions-manage/index.vue

<template>
    <div class="permissions-manage-page">
        <div class="menu-box">
            <CommonMenu :menuData="menuData" @selectMenu="selectMenu" />
        </div>
        <div class="content-box">
            <div class="header-box">
                <PageTabs ref="pageTabsRef" />
            </div>
            <div class="main-box">
                <div class="background-block">
                    <RouterView />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import type { MenuItem } from '@/utils/public-interface'
import CommonMenu from '@/components/common-menu.vue'
import PageTabs from '@/components/page-tabs.vue'

const menuData = [
    { name: '医生管理', path: '/permissions-manage/doctor-manage' },
    { name: '角色管理', path: '/permissions-manage/role-manage' },
    { name: '菜单管理', path: '/permissions-manage/menu-manage' }
]

const pageTabsRef = ref()
const selectMenu = (e: MenuItem) => {
    pageTabsRef.value.setTab(e)
}
</script>

<style lang='scss' scoped>
.permissions-manage-page {
    width: 100%;
    height: 100%;
    display: flex;

    .menu-box {
        width: 200px;
        height: 100%;
        background: white;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .content-box {
        width: calc(100% - 200px);
        height: 100%;

        .header-box {
            width: 100%;
            height: 50px;
        }

        .main-box {
            width: 100%;
            height: calc(100% - 50px);
            padding: 10px;
            .background-block {
                width: 100%;
                height: 100%;
                background: white;
                border-radius: 15px;
                padding: 20px;
            }
        }
    }
}</style>