ELEMENT-PLUES如何设计二级高亮样式，文字如何呈现高亮效果，如果字体出现不对齐的情况，侧边栏icon如何调位置，目录如何折叠，如何延迟动画播放，如何添加阴影，如何添加logo，在行内样式写宽

<template>
    <div>
        <el-container>
            <el-aside style="width: 200px;min-height: 100vh;background-color:#001529">
                <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center;">
                    logo
                </div>
                <el-menu style="border:none" background-color="#001529" text-color="rgba(255,255,255,0.65)"
                    default-active="$router.path">
                    <el-menu-item index="/">
                        <template #title>
                            <el-icon>
                                <House />
                            </el-icon>
                            <span>系统首页</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item>系统首页</el-menu-item>
                    <el-menu-item>系统首页</el-menu-item>
                    <el-sub-menu index="1-4">
                        <template #title>
                            <el-icon>
                                <Menu />
                            </el-icon>
                            <span>信息管理</span>
                        </template>
                        <el-menu-item index="1-4-1">用户信息</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
 
        </el-container>
    </div>
</template>
<style scoped>
.el-menu--inline .el-menu-item {
    background-color: #000c17 !important;
}
</style>

.el-menu-item:hover {
    color: #fff;
}

.el-menu-item:hover,
.el-sub-menu__title:hover span {
    color: #fff !important;
}
 
.el-sub-menu__title:hover i {
    color: #fff !important;
}

.el-menu-item.is-active {
    background-color: #40a9ff !important;
    color: #fff;
    border-radius: 5px !important;
}

.el-menu-item {
    height: 40px !important;
    line-height: 40px !important;
}
 
.el-submenu__title {
    height: 40px !important;
    line-height: 40px !important;
}

<el-menu :collapse="isCollapse" style="border:none" background-color="#001529"
                    text-color="rgba(255,255,255,0.65)" default-active="$router.path">
 </el-menu>
<script lang="ts">
export default {
    name: 'HomeView',
    data() {
        return {
            isCollapse: true
        }
    }
}
</script>

<el-aside :width="asideWidth" style="min-height: 100vh;background-color:#001529">

<script lang="ts">
export default {
    name: 'HomeView',
    data() {
        return {
            isCollapse: true,
            asideWidth: '200px'
        }
    }
}
</script>

.el-aside {
    transition: width .30s;
}

        <el-menu-item index="/">
                        <el-icon>
                            <House />
                        </el-icon>
                        <span>系统首页</span>
                    </el-menu-item>

 <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center;">
    <img src="@/assets/logo.png" style="width: 40px;height: 40px;">
</div>