simulation-front/src/views/systemManagement/sceneLibraryManagement/sceneLibraryManagement.vue

<template>
    <div>
        <toolbarTab
            :isConnect="true"
            position="top"
            :subPageActiveName="subPageActiveName"
            :toolbarItem="subPageList"
            @toolbarClick="toolsControl"
        >
        </toolbarTab>
        <naturalDrivingScene
            v-show="subPageActiveName == 1"
        >
        </naturalDrivingScene>
        <standardRegulationSimulationScene
            v-show="subPageActiveName == 2"
        >
        </standardRegulationSimulationScene>
        <trafficAccidentSimulationScene
            v-show="subPageActiveName == 3"
        >
        </trafficAccidentSimulationScene>
        <generalizationScene
            v-show="subPageActiveName == 4"
        ></generalizationScene>
    </div>
</template>

<script>
import toolbarTab from "@/components/toolbar/toolbarTab";
import naturalDrivingScene from "./naturalDrivingScene"
import standardRegulationSimulationScene from "./standardRegulationSimulationScene"
import trafficAccidentSimulationScene from "./trafficAccidentSimulationScene"
import generalizationScene from "./generalizationScene"

export default{
    name: "sceneLibraryManagement",
    components: { toolbarTab, naturalDrivingScene, standardRegulationSimulationScene, trafficAccidentSimulationScene, generalizationScene},
    data() {
        return {
            subPageActiveName:1,
            
        };
    },
    computed: {
        subPageList(){
            return [
                {
                    type: "primary",
                    plain: true,
                    title: "自然驾驶场景",
                    disabled: false,
                    api: "",
                    fromId: 1,
                },
                {
                    type: "primary",
                    plain: true,
                    title: "标准法规仿真场景",
                    disabled: false,
                    api: "",
                    fromId: 2,
                },
                {
                    type: "primary",
                    plain: true,
                    title: "交通事故仿真场景",
                    disabled: false,
                    api: "",
                    fromId: 3,
                },
                {
                    type: "primary",
                    plain: true,
                    title: "泛化场景",
                    disabled: false,
                    api: "",
                    fromId: 4,
                },
            ]
        }
    },
    methods: {
        toolsControl(item){
            this.subPageActiveName = item.fromId;
        }
    },
}
</script>

<style scoped lang="less">
.tabsBox {
    position: relative;
    overflow: hidden;

    .el-button {
        position: absolute;
        right: 40px;
        top: 45px;
    }
}
.myTabsBox{
    min-height:99px;
}
/deep/ .el-tabs__nav .el-tabs__item{
    width:auto;
    padding:0 10px;
}
</style>