網站首頁菜單兩種布局vue+elementui頂部和左側欄導航

頂部菜單實現

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js + Element UI 路由導航</title><!-- 引入Element UI樣式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;background-color: white;border-radius: 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);overflow: hidden;}header {background: linear-gradient(90deg, #1e5799 0%, #207cca 51%, #2989d8 100%);color: white;padding: 20px;text-align: center;}header h1 {font-size: 2.2rem;margin-bottom: 10px;}header p {font-size: 1.1rem;opacity: 0.9;}.content {padding: 30px;}.dashboard {display: grid;grid-template-columns: 1fr 3fr;gap: 30px;margin-top: 20px;}.card {background: white;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);padding: 25px;margin-bottom: 25px;}.card h2 {color: #2c3e50;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid #eee;}.features {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-top: 20px;}.feature-card {background: #f8f9fa;border-radius: 8px;padding: 20px;transition: all 0.3s ease;border-left: 4px solid #409EFF;}.feature-card:hover {transform: translateY(-5px);box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);}.feature-card h3 {color: #1e5799;margin-bottom: 10px;}.page-content {min-height: 400px;display: flex;flex-direction: column;justify-content: center;align-items: center;background: #f8fafc;border-radius: 8px;padding: 40px;text-align: center;}.page-content h2 {font-size: 2.5rem;color: #2c3e50;margin-bottom: 20px;}.page-content p {font-size: 1.2rem;color: #5a6a7f;max-width: 700px;line-height: 1.8;}.el-menu-demo {box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);}footer {text-align: center;padding: 25px;color: #7f8c8d;border-top: 1px solid #eee;margin-top: 30px;}.router-link-active {text-decoration: none;}a {text-decoration: none;color: inherit;}.el-menu-item [class^=el-icon-] {vertical-align: middle;margin-right: 5px;width: 24px;text-align: center;font-size: 18px;}.el-submenu [class^=el-icon-] {vertical-align: middle;margin-right: 5px;width: 24px;text-align: center;font-size: 18px;}.el-menu-item.is-active {background-color: #1e5799 !important;}</style>
</head>
<body><div id="app"><div class="container"><div class="content"><!-- 導航菜單 --><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/dashboard"><i class="el-icon-s-home"></i><span>控制面板</span></el-menu-item><el-submenu index="workspace"><template slot="title"><i class="el-icon-s-platform"></i><span>工作空間</span></template><el-menu-item index="/projects">項目管理</el-menu-item><el-menu-item index="/tasks">任務管理</el-menu-item><el-menu-item index="/calendar">日歷視圖</el-menu-item><el-submenu index="reports"><template slot="title">報表統計</template><el-menu-item index="/reports/weekly">周報</el-menu-item><el-menu-item index="/reports/monthly">月報</el-menu-item><el-menu-item index="/reports/custom">自定義報表</el-menu-item></el-submenu></el-submenu><el-menu-item index="/messages"><i class="el-icon-message"></i><span>消息中心</span></el-menu-item><el-menu-item index="/settings"><i class="el-icon-setting"></i><span>系統設置</span></el-menu-item><el-menu-item index="https://element.eleme.io" target="_blank"><i class="el-icon-link"></i><span>Element UI 文檔</span></el-menu-item></el-menu><!-- 路由出口 --><router-view></router-view></div><footer><p>? 2023 Vue.js + Element UI 導航系統 | 修復路由配置示例</p></footer></div></div><!-- 引入Vue.js --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入Vue Router --><script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script><!-- 引入Element UI --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>// 定義路由組件const Dashboard = { template: `<div class="page-content"><h2>控制面板</h2><p>歡迎使用系統控制面板。在這里您可以查看系統概覽、管理項目、跟蹤任務和訪問各種工具。</p><p>使用左側菜單導航到不同功能模塊，或使用頂部菜單訪問主要功能區域。</p><el-button type="primary" size="medium" style="margin-top: 20px;">開始使用</el-button></div>`};const Projects = { template: `<div class="page-content"><h2>項目管理</h2><p>在這里您可以創建新項目、管理現有項目、分配任務給團隊成員并跟蹤項目進度。</p><p>使用卡片視圖、列表視圖或甘特圖查看項目狀態。</p></div>`};const Tasks = { template: `<div class="page-content"><h2>任務管理</h2><p>查看和分配任務，設置優先級和截止日期，跟蹤任務完成情況。</p><p>使用看板視圖直觀地管理任務狀態：待處理、進行中、已完成。</p></div>`};const Calendar = { template: `<div class="page-content"><h2>日歷管理</h2><p>查看日歷，設置優先級和截止日期。</p></div>`};const Messages = { template: `<div class="page-content"><h2>消息中心</h2><p>查看系統通知、團隊消息和項目更新。與團隊成員保持溝通。</p><p>您可以在這里發送和接收消息，設置消息提醒和通知偏好。</p></div>`};const Settings = { template: `<div class="page-content"><h2>系統設置</h2><p>配置系統參數、用戶權限、界面主題和其他個性化選項。</p><p>管理團隊成員、設置角色權限和配置系統集成。</p></div>`};const Reports = { template: `<div class="page-content"><h2>報表統計</h2><p>生成和查看各種報表，包括項目進度、團隊績效和資源使用情況。</p><p>自定義報表模板，設置自動生成和發送報表的時間表。</p></div>`};// 定義路由const routes = [{ path: '/', redirect: '/dashboard' },{ path: '/dashboard', component: Dashboard },{ path: '/projects', component: Projects },{ path: '/calendar', component: Calendar },{ path: '/tasks', component: Tasks },{ path: '/messages', component: Messages },{ path: '/settings', component: Settings },{ path: '/reports', component: Reports },{ path: '/reports/weekly', component: Reports },{ path: '/reports/monthly', component: Reports },{ path: '/reports/custom', component: Reports }];// 創建路由實例const router = new VueRouter({routes});// 創建Vue實例new Vue({el: '#app',router,data() {return {activeIndex: '/dashboard'}},mounted() {// 設置當前激活菜單項this.activeIndex = this.$route.path;},watch: {// 當路由變化時更新激活菜單項'$route'(to) {this.activeIndex = to.path;}},methods: {handleSelect(key) {// 處理菜單選擇if (key.startsWith('http')) {// 外部鏈接，在新標簽頁打開window.open(key, '_blank');} else {// 內部路由導航this.$router.push(key);}}}});</script>
</body>
</html>

2 左側邊欄菜單布局

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js + Element UI 側邊欄導航</title><!-- 引入Element UI樣式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1400px;margin: 0 auto;background-color: white;border-radius: 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);overflow: hidden;display: flex;flex-direction: column;min-height: 90vh;}header {background: linear-gradient(90deg, #1e5799 0%, #207cca 51%, #2989d8 100%);color: white;padding: 20px;text-align: center;}header h1 {font-size: 2.2rem;margin-bottom: 10px;}header p {font-size: 1.1rem;opacity: 0.9;}.main-content {display: flex;flex: 1;}/* 側邊欄樣式 */.sidebar {width: 250px;background: #fff;border-right: 1px solid #e6e6e6;box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);transition: all 0.3s ease;overflow: hidden;}.sidebar .el-menu {border-right: none;height: 100%;}.sidebar .el-submenu .el-menu-item {min-width: auto;padding-left: 50px !important;}.sidebar .el-menu-item,.sidebar .el-submenu__title {height: 50px;line-height: 50px;}.sidebar .el-menu-item [class^=el-icon-] {margin-right: 10px;font-size: 18px;}.sidebar .el-submenu [class^=el-icon-] {margin-right: 10px;font-size: 18px;}.sidebar .el-menu-item.is-active {background-color: #ecf5ff !important;color: #1e5799 !important;font-weight: bold;border-left: 4px solid #1e5799;}.sidebar .el-menu-item:hover,.sidebar .el-submenu__title:hover {background-color: #f5f7fa !important;}.sidebar .el-submenu__title i {color: #1e5799;}/* 內容區域樣式 */.content {flex: 1;padding: 30px;background: #f8fafc;overflow-y: auto;}.dashboard {display: grid;grid-template-columns: 1fr 3fr;gap: 30px;margin-top: 20px;}.card {background: white;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);padding: 25px;margin-bottom: 25px;}.card h2 {color: #2c3e50;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid #eee;}.features {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-top: 20px;}.feature-card {background: #f8f9fa;border-radius: 8px;padding: 20px;transition: all 0.3s ease;border-left: 4px solid #409EFF;}.feature-card:hover {transform: translateY(-5px);box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);}.feature-card h3 {color: #1e5799;margin-bottom: 10px;}.page-content {min-height: 400px;display: flex;flex-direction: column;justify-content: center;align-items: center;background: white;border-radius: 8px;padding: 40px;text-align: center;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}.page-content h2 {font-size: 2.5rem;color: #2c3e50;margin-bottom: 20px;}.page-content p {font-size: 1.2rem;color: #5a6a7f;max-width: 700px;line-height: 1.8;}footer {text-align: center;padding: 25px;color: #7f8c8d;border-top: 1px solid #eee;margin-top: auto;}.router-link-active {text-decoration: none;}a {text-decoration: none;color: inherit;}.logo {padding: 20px;text-align: center;border-bottom: 1px solid #eee;}.logo h2 {color: #1e5799;font-size: 1.5rem;}.logo p {color: #7f8c8d;font-size: 0.9rem;}.user-info {padding: 20px;display: flex;align-items: center;border-bottom: 1px solid #eee;}.user-info .avatar {width: 50px;height: 50px;border-radius: 50%;background: #1e5799;color: white;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;margin-right: 15px;}.user-info .details {flex: 1;}.user-info .name {font-weight: bold;color: #2c3e50;}.user-info .role {color: #7f8c8d;font-size: 0.9rem;}.mobile-toggle {display: none;position: absolute;top: 20px;left: 20px;z-index: 1000;background: #1e5799;color: white;border: none;border-radius: 4px;padding: 8px 12px;cursor: pointer;}@media (max-width: 992px) {.sidebar {position: fixed;left: -250px;top: 0;bottom: 0;z-index: 100;transition: all 0.3s ease;}.sidebar.active {left: 0;box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);}.mobile-toggle {display: block;}.content {padding: 20px;}.page-content {padding: 20px;}.page-content h2 {font-size: 1.8rem;}}.stat-cards {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;margin-bottom: 30px;}.stat-card {background: white;border-radius: 8px;padding: 20px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);text-align: center;border-top: 4px solid #1e5799;}.stat-card .value {font-size: 2rem;font-weight: bold;color: #1e5799;margin: 10px 0;}.stat-card .label {color: #7f8c8d;font-size: 0.9rem;}</style>
</head>
<body><div id="app"><div class="container"><header><h1>Vue.js + Element UI 導航系統</h1><p>側邊欄導航布局 - 專業管理系統</p></header><button class="mobile-toggle" @click="toggleSidebar"><i class="el-icon-menu"></i></button><div class="main-content"><!-- 側邊欄導航 --><div class="sidebar" :class="{ active: sidebarActive }"><div class="logo"><h2>管理系統</h2><p>Vue.js + Element UI</p></div><div class="user-info"><div class="avatar"><i class="el-icon-user"></i></div><div class="details"><div class="name">管理員</div><div class="role">系統管理員</div></div></div><el-menu:default-active="activeIndex"class="el-menu-vertical-demo"@select="handleSelect"background-color="#fff"text-color="#2c3e50"active-text-color="#1e5799"><el-menu-item index="/dashboard"><i class="el-icon-s-home"></i><span>控制面板</span></el-menu-item><el-submenu index="workspace"><template slot="title"><i class="el-icon-s-platform"></i><span>工作空間</span></template><el-menu-item index="/projects">項目管理</el-menu-item><el-menu-item index="/tasks">任務管理</el-menu-item><el-menu-item index="/calendar">日歷視圖</el-menu-item><el-submenu index="reports"><template slot="title">報表統計</template><el-menu-item index="/reports/weekly">周報</el-menu-item><el-menu-item index="/reports/monthly">月報</el-menu-item><el-menu-item index="/reports/custom">自定義報表</el-menu-item></el-submenu></el-submenu><el-menu-item index="/messages"><i class="el-icon-message"></i><span>消息中心</span></el-menu-item><el-menu-item index="/settings"><i class="el-icon-setting"></i><span>系統設置</span></el-menu-item><el-menu-item index="https://element.eleme.io" target="_blank"><i class="el-icon-link"></i><span>Element UI 文檔</span></el-menu-item></el-menu></div><!-- 內容區域 --><div class="content"><!-- 路由出口 --><router-view></router-view></div></div><footer><p>? 2023 Vue.js + Element UI 導航系統 | 側邊欄布局示例</p></footer></div></div><!-- 引入Vue.js --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入Vue Router --><script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script><!-- 引入Element UI --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>// 定義路由組件const Dashboard = { template: `<div><div class="stat-cards"><div class="stat-card"><i class="el-icon-s-order" style="font-size: 2rem; color: #1e5799;"></i><div class="value">24</div><div class="label">進行中的項目</div></div><div class="stat-card"><i class="el-icon-s-claim" style="font-size: 2rem; color: #1e5799;"></i><div class="value">128</div><div class="label">待處理任務</div></div><div class="stat-card"><i class="el-icon-s-comment" style="font-size: 2rem; color: #1e5799;"></i><div class="value">12</div><div class="label">未讀消息</div></div><div class="stat-card"><i class="el-icon-user-solid" style="font-size: 2rem; color: #1e5799;"></i><div class="value">8</div><div class="label">在線成員</div></div></div><div class="page-content"><h2>控制面板</h2><p>歡迎使用系統控制面板。在這里您可以查看系統概覽、管理項目、跟蹤任務和訪問各種工具。</p><p>使用左側菜單導航到不同功能模塊，或使用頂部菜單訪問主要功能區域。</p><el-button type="primary" size="medium" style="margin-top: 20px;">開始使用</el-button></div></div>`};const Projects = { template: `<div class="page-content"><h2>項目管理</h2><p>在這里您可以創建新項目、管理現有項目、分配任務給團隊成員并跟蹤項目進度。</p><p>使用卡片視圖、列表視圖或甘特圖查看項目狀態。</p><el-button type="primary" style="margin-top: 20px;">創建新項目</el-button></div>`};const Tasks = { template: `<div class="page-content"><h2>任務管理</h2><p>查看和分配任務，設置優先級和截止日期，跟蹤任務完成情況。</p><p>使用看板視圖直觀地管理任務狀態：待處理、進行中、已完成。</p><el-button type="primary" style="margin-top: 20px;">創建新任務</el-button></div>`};const Calendar = { template: `<div class="page-content"><h2>日歷管理</h2><p>查看日歷，設置優先級和截止日期。</p><el-calendar style="margin-top: 20px; width: 100%;"><templateslot="dateCell"slot-scope="{date, data}"><p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(2).join('-') }}</p></template></el-calendar></div>`};const Messages = { template: `<div class="page-content"><h2>消息中心</h2><p>查看系統通知、團隊消息和項目更新。與團隊成員保持溝通。</p><p>您可以在這里發送和接收消息，設置消息提醒和通知偏好。</p><el-button type="primary" style="margin-top: 20px;">查看消息</el-button></div>`};const Settings = { template: `<div class="page-content"><h2>系統設置</h2><p>配置系統參數、用戶權限、界面主題和其他個性化選項。</p><p>管理團隊成員、設置角色權限和配置系統集成。</p><el-button type="primary" style="margin-top: 20px;">系統配置</el-button></div>`};const Reports = { template: `<div class="page-content"><h2>報表統計</h2><p>生成和查看各種報表，包括項目進度、團隊績效和資源使用情況。</p><p>自定義報表模板，設置自動生成和發送報表的時間表。</p><el-button type="primary" style="margin-top: 20px;">生成報表</el-button></div>`};// 定義路由const routes = [{ path: '/', redirect: '/dashboard' },{ path: '/dashboard', component: Dashboard },{ path: '/projects', component: Projects },{ path: '/calendar', component: Calendar },{ path: '/tasks', component: Tasks },{ path: '/messages', component: Messages },{ path: '/settings', component: Settings },{ path: '/reports', component: Reports },{ path: '/reports/weekly', component: Reports },{ path: '/reports/monthly', component: Reports },{ path: '/reports/custom', component: Reports }];// 創建路由實例const router = new VueRouter({routes});// 創建Vue實例new Vue({el: '#app',router,data() {return {activeIndex: '/dashboard',sidebarActive: false}},mounted() {// 設置當前激活菜單項this.activeIndex = this.$route.path;// 監聽窗口大小變化window.addEventListener('resize', this.handleResize);this.handleResize();},beforeDestroy() {window.removeEventListener('resize', this.handleResize);},watch: {// 當路由變化時更新激活菜單項'$route'(to) {this.activeIndex = to.path;// 在移動設備上導航時關閉側邊欄if (window.innerWidth < 992) {this.sidebarActive = false;}}},methods: {handleSelect(key) {// 處理菜單選擇if (key.startsWith('http')) {// 外部鏈接，在新標簽頁打開window.open(key, '_blank');} else {// 內部路由導航this.$router.push(key);}},toggleSidebar() {this.sidebarActive = !this.sidebarActive;},handleResize() {// 在大屏幕上自動顯示側邊欄if (window.innerWidth >= 992) {this.sidebarActive = true;} else {this.sidebarActive = false;}}}});</script>
</body>
</html>