Springboot项目下面使用Vue3 + ElementPlus搭建侧边栏首页

发布于：2025-02-11 ⋅ 阅读:(45) ⋅ 点赞:(0)

Springboot项目下面、在html 页面 Vue3 + ElementPlus 搭建侧边栏首页

1、效果图

image-20241227164910444

2、static 文件下面的项目结构

在这里插入图片描述

3、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <!-- 图标 -->
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 增加 box-sizing 来避免 padding 和 border 影响宽高 */
        }
        .el-header {
            background-color: rgb(204, 212, 255);
            display: flex;
            justify-content: space-between; /* 内容分布到两侧 */
            align-items: center; /* 垂直居中 */
            padding: 10px 20px;
        }
        .el-aside {
            background-color: rgb(217, 236, 255);
            height: 90vh;
        }
        .el-main {
            background-color: rgb(236, 245, 255);
        }
        .header-content {
            display: flex;
            align-items: center;
        }
        .header-content span {
            font-size: 16px; /* 增大欢迎文字的字体 */
            margin-right: 20px; /* 欢迎文字和登出链接之间的间距 */
        }
        .header-content el-link {
            font-size: 16px; /* 增大登出链接的字体 */
        }
    </style>
</head>
<body>
<div id="app" class="common-layout">
    <el-container>
        <el-header>
            <h2 style="text-align: center">未来智慧社区管理系统</h2>
            <div class="header-content">
                <span>欢迎您，admin </span>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <location/>
                            </el-icon>
                            <span>物业系统</span>
                        </template>
                        <el-menu-item>
                            <el-link index="1-1" href="/pages/house.html" target="mainFrame">
                                房屋管理</el-link>
                        </el-menu-item>

                        <el-menu-item>
                            <el-link href="/pages/owner.html" target="mainFrame">业主管理</el-link>
                        </el-menu-item>

                        <el-menu-item>
                            <el-link  index="1-2" href="/pages/building.html" target="mainFrame">
                                楼栋管理</el-link>
                        </el-menu-item>

                        <el-menu-item>
                            <el-link  index="1-3" href="/pages/parking.html" target="mainFrame">
                                车位管理</el-link>
                        </el-menu-item>

                    </el-sub-menu>

                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><Setting /></el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item>
                            <el-link index="2-1" href="/pages/xxx.html" target="mainFrame">
                                用户管理</el-link>
                        </el-menu-item>

                        <el-menu-item>
                            <el-link index="2-2" href="/pages/xxx.html" target="mainFrame">
                                业主管理</el-link>
                        </el-menu-item>

                        <el-menu-item>
                            <el-link index="2-3" href="/pages/xxx.html" target="mainFrame">
                                用户中心</el-link>
                        </el-menu-item>

                    </el-sub-menu>

                </el-menu>

            </el-aside>
            <el-main>
                <!-- 默认显示 owner -->
                <iframe id="mainFrame" name="mainFrame" src="/pages/owner.html"
                        style="width:100%; height:100%; border:none"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>

    const { createApp } = Vue

    const app = createApp({
        setup(){
            return {
            }
        }
    });

    app.use(ElementPlus)
    //添加图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    app.mount('#app')

</script>

</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布