scd_tools_ui/src/pages/home/HomePage.vue

<template>
    <div>
        <div class="bigBox">
            <el-container>
                <el-header class="headMenu">
                    <HeadMenu></HeadMenu>
                </el-header>
                <el-container>
                    <el-aside class="sideMenu">
                        <SideMenu></SideMenu>
                    </el-aside>
                    <el-main class="elMain">
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import SideMenu from "@/pages/components/SideMenu.vue"
import HeadMenu from '@/pages/components/HeadMenu.vue';
export default {
    setup() {


        return {}
    },
    components: {
        SideMenu,
        HeadMenu,
    }
}
</script>

<style scoped>
.bigBox {
    width: 100vw;
    height: 100vh;
    background-color: #1B2446;
}

.sideMenu {
    width: 110px;
    height: 91vh;
    text-align: center;
    line-height: 100px;
    background-image: url('../../assets/image/leftSide.png');
    background-repeat: no-repeat;
    background-position: 13px 0px;
    background-size: 80% 100%;
}

.headMenu {
    width: 99vw;
    height: 8vh;
    /* background-color: red; */
}

.elMain {
    width: 87vw;
    height: 91vh;
    background-image: url('../../assets/image/rightSide.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
    margin: 0;
    padding: 0;
}
</style>