MTP2.0_WEB/src/layout/components/main.vue

<template>
    <div class="exposure">
        <div class="first-menu">
            <a-menu
                class="a-menu_container"
                theme="dark"
                v-model:selectedKeys="selectedKey"
                @click="selectMenu"
                mode="horizontal"
            >
                <a-menu-item :key="String(index)" v-for="(item, index) in list">{{ item.title}}</a-menu-item>
            </a-menu>
            <div class="menu_right">
                <!-- <slot></slot> -->
            </div>
        </div>
        <router-view />
    </div>
</template>

<script lang="ts">
import { defineComponent, inject, Ref } from 'vue';
import { useRouter } from 'vue-router';
import { OperationTabMenu } from '@/services/go/commonService/interface';

export default defineComponent({
    name: 'MAIN',
    components: {},
    setup() {
        const router = useRouter();
        const list = inject('thirdMenuList') as Ref<OperationTabMenu[]>;
        const selectedKey = inject('index');
        // 切换路由
        function selectMenu(value: any) {
            if (((selectedKey as unknown) as any).value[0] !== value.key) {
                const index = +value.key;
                router.push({ name: list.value[index].code });
            }
        }
        return { selectMenu, list, selectedKey };
    },
});
</script>

<style lang="less">
.exposure {
    height: 100%;
    position: relative;
}
.noBorderBottom {
    border-bottom: none;
}
.first-menu {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid @m-blue0 !important;
    background-color: @m-black1;
    .flex;
    justify-content: space-between;
    .a-menu_container {
        padding-top: 5px;
        .flex();
        height: 34px;
        line-height: 34px;
        background: transparent;
        .ant-menu-item {
            min-width: 120px;
            height: 34px;
            line-height: 34px;
            background: linear-gradient(0deg, @m-grey35 0%, @m-grey36 100%);
            margin-left: 3px;
            font-size: 14px;
            color: @m-grey38;
            border-radius: 5px 5px 0px 0px;
            cursor: pointer;
            font-family: Adobe Heiti Std;
            border: 1px solid @m-grey37;
            &:hover {
                .noBorderBottom;
            }
        }
        .ant-menu-item-active {
            .noBorderBottom;
        }
        .ant-menu-item-selected {
            .noBorderBottom;
            color: @m-white0;
            background: linear-gradient(0deg, @m-blue31 0%, @m-blue32 100%);
            &:hover {
                color: @m-white0;
            }
        }
    }
}
</style>;