260 lines
7.1 KiB
Vue
260 lines
7.1 KiB
Vue
<template>
|
|
<!-- 外层容器 - 固定定位占满全屏 -->
|
|
<div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;">
|
|
<el-container style="height: 100%; min-height: 100%; overflow: hidden;">
|
|
<!-- 侧边栏区域 -->
|
|
<el-aside
|
|
:width="isCollapse ? '64px' : '200px'"
|
|
style="border-right: 1px solid #eee; transition: width 0.3s ease; background-color: #f5f7fa;"
|
|
>
|
|
<el-menu
|
|
:router="true"
|
|
default-active="/home"
|
|
class="el-menu-vertical-demo"
|
|
:collapse="isCollapse"
|
|
@open="handleOpen"
|
|
@close="handleClose"
|
|
background-color="#f5f7fa"
|
|
text-color="#333"
|
|
active-text-color="#409eff"
|
|
:collapse-transition="false"
|
|
style="border-right: none; margin-top: 20px;"
|
|
>
|
|
<!-- 首页 - 跳转到 /home -->
|
|
<el-menu-item index="/home">
|
|
<el-icon><House /></el-icon>
|
|
<template #title>首页</template>
|
|
</el-menu-item>
|
|
|
|
<!-- 新闻动态 - 跳转到 /news -->
|
|
<el-menu-item index="/news">
|
|
<el-icon><Document /></el-icon>
|
|
<template #title>新闻动态</template>
|
|
</el-menu-item>
|
|
|
|
<!-- 资源案例 - 跳转到 /resource -->
|
|
<el-menu-item index="/resource">
|
|
<el-icon><Folder /></el-icon>
|
|
<template #title>资源案例</template>
|
|
</el-menu-item>
|
|
|
|
<!-- 社区服务 - 跳转到 /community -->
|
|
<el-menu-item index="/community">
|
|
<el-icon><Discount /></el-icon>
|
|
<template #title>社区服务</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/person">
|
|
<el-icon><User /></el-icon>
|
|
<template #title>个人信息</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/publish">
|
|
<el-icon><Memo /></el-icon>
|
|
<template #title>发布文章</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/baseoverview">
|
|
<el-icon><Memo /></el-icon>
|
|
<template #title>编辑基地概况</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/devproject">
|
|
<el-icon><Memo /></el-icon>
|
|
<template #title>编辑科学研究</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="/meeting">
|
|
<el-icon><Memo /></el-icon>
|
|
<template #title>编辑会议</template>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
|
|
</el-aside>
|
|
|
|
<!-- 右侧主内容容器 -->
|
|
<el-container direction="vertical" style="height: 100%; overflow: hidden;">
|
|
<!-- 顶部导航栏 - 固定高度 -->
|
|
<el-header style="height: 60px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
|
|
<div class="header-left">
|
|
<!-- 替换为单个切换按钮 -->
|
|
<el-button
|
|
@click="isCollapse = !isCollapse"
|
|
size="small"
|
|
style="margin-right: 20px;"
|
|
type="primary"
|
|
>
|
|
<!-- 根据折叠状态显示不同箭头 -->
|
|
{{ isCollapse ? '->' : '<-' }}
|
|
</el-button>
|
|
<el-breadcrumb separator="/" style="line-height: 60px;">
|
|
<el-breadcrumb-item
|
|
v-for="(item, index) in breadcrumbItems"
|
|
:key="index"
|
|
:to="item.path"
|
|
>
|
|
{{ item.meta.title }}
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
|
|
<div class="header-user-area">
|
|
<!-- 通知图标按钮 -->
|
|
<el-button
|
|
size="small"
|
|
circle
|
|
style="margin-right: 12px; background: transparent; border: none; width: 36px; height: 36px;"
|
|
>
|
|
<el-icon style="font-size: 18px;"><Bell /></el-icon>
|
|
</el-button>
|
|
|
|
<!-- 消息图标按钮 -->
|
|
<el-button
|
|
size="small"
|
|
circle
|
|
style="margin-right: 12px; background: transparent; border: none; width: 36px; height: 36px;"
|
|
>
|
|
<el-icon style="font-size: 18px;"><Message /></el-icon>
|
|
</el-button>
|
|
|
|
<!-- 用户下拉菜单 -->
|
|
<el-dropdown trigger="click" placement="bottom-end">
|
|
<div class="user-info" style="cursor: pointer; display: flex; align-items: center;">
|
|
<!-- 调整头像尺寸和样式 -->
|
|
<img
|
|
src="https://picsum.photos/id/1005/40/40"
|
|
alt="用户头像"
|
|
class="user-avatar"
|
|
style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover;"
|
|
>
|
|
<span class="user-name" style="margin-left: 8px; font-size: 14px;">用户名</span>
|
|
<el-icon style="margin-left: 6px; font-size: 16px;"><ChevronDown /></el-icon>
|
|
</div>
|
|
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
<el-dropdown-item>设置</el-dropdown-item>
|
|
<el-dropdown-item>退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</el-header>
|
|
|
|
<!-- 主显示区域 -->
|
|
<el-main style="transition: all 0.3s ease; padding: 20px; margin: 0; overflow-y: auto; flex: 1; box-sizing: border-box;">
|
|
<router-view />
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue'
|
|
import {
|
|
Document,
|
|
Menu as IconMenu,
|
|
Location,
|
|
Setting,
|
|
Bell,
|
|
Message
|
|
} from '@element-plus/icons-vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const isCollapse = ref(true)
|
|
|
|
const handleOpen = (key: string, keyPath: string[]) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
|
|
const handleClose = (key: string, keyPath: string[]) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
const route = useRoute()
|
|
const breadcrumbItems = ref(route.matched)
|
|
|
|
// 监听路由变化，更新面包屑
|
|
watch(
|
|
() => route.matched,
|
|
(newMatched) => {
|
|
breadcrumbItems.value = newMatched
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 禁止水平滚动 */
|
|
::v-deep html, ::v-deep body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 清除所有默认边距和滚动 */
|
|
::v-deep * {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 菜单样式 */
|
|
.el-menu-vertical-demo {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 顶部栏样式 */
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 主内容样式 */
|
|
.main-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 组件样式穿透 */
|
|
::v-deep .el-container,
|
|
::v-deep .el-aside,
|
|
::v-deep .el-header,
|
|
::v-deep .el-main {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
::v-deep .el-header {
|
|
background-color: #fff;
|
|
}
|
|
|
|
::v-deep .el-main {
|
|
background-color: #fff;
|
|
}
|
|
|
|
::v-deep .el-menu--horizontal {
|
|
border-bottom: none;
|
|
}
|
|
</style>
|
|
|