<template>
|
<div style="height: 100%;">
|
<!-- 判断是否在空白页打开 -->
|
<template v-if="!isOneself">
|
<div class="app-wrapper">
|
<div class="left">
|
<!-- 系统标题 -->
|
<div class="system-title">
|
<div class="image">
|
<img src="../assets/logo.jpg" alt="" srcset="" />
|
</div>
|
<div class="title">职评网管理系统</div>
|
</div>
|
<!-- 左侧菜单 -->
|
<div class="sidebar-container">
|
<ElMenu />
|
</div>
|
</div>
|
<!-- 右侧展示内容 -->
|
<div class="main-container">
|
<HeaderNav class="header-main" />
|
<div v-if="nowRouteName" class="router_name">{{ nowRouteName }}</div>
|
<AppContent class="app-main" />
|
</div>
|
</div>
|
</template>
|
<!-- 如果在空白页打开则不显示框架 -->
|
<template v-else>
|
<AppContent />
|
</template>
|
</div>
|
</template>
|
|
<script>
|
import ElMenu from './components/ElMenu/index.vue'
|
import HeaderNav from './components/HeaderNav.vue'
|
import AppContent from './components/AppContent.vue'
|
export default {
|
data() {
|
return {
|
// 默认页面在框架内显示
|
isOneself: false,
|
// 获取当前页面名称
|
nowRouteName: '',
|
}
|
},
|
components: {
|
ElMenu,
|
HeaderNav,
|
AppContent,
|
},
|
mounted() {
|
// 设置标题
|
this.setNowRouteName(this.$route)
|
// 初始化加载一次判断是否在空白页打开
|
this.isOneself = this.$route.meta.oneself
|
},
|
methods: {
|
// 获取当前页面标题
|
setNowRouteName(route) {
|
this.nowRouteName = route.meta.title
|
},
|
},
|
watch: {
|
// 监听route变化
|
$route: function (newVal) {
|
this.setNowRouteName(newVal)
|
// 判断页面是否在空白页打开
|
this.isOneself = newVal.meta.oneself
|
},
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.app-wrapper {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
|
.left {
|
width: 200px;
|
display: flex;
|
flex-direction: column;
|
|
// 系统标题
|
.system-title {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
background-color: white;
|
height: 50px;
|
padding: 0px 10px;
|
box-sizing: border-box;
|
|
.image {
|
width: 40px;
|
height: 40px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.title {
|
font-weight: 700;
|
}
|
}
|
|
// 左侧菜单
|
.sidebar-container {
|
overflow-y: auto;
|
flex: 1;
|
background-color: white;
|
box-shadow: 0px 3px 13px 0px rgba(94, 131, 245, 0.1);
|
}
|
}
|
|
.main-container {
|
flex: 1;
|
|
.header-main {
|
background-color: white;
|
height: 50px;
|
}
|
|
.router_name {
|
padding-top: 8px;
|
padding-left: 23px;
|
font-size: 24px;
|
font-weight: bold;
|
}
|
|
.app-main {
|
height: calc(100% - 120px);
|
overflow: auto;
|
border-radius: 10px;
|
margin: 16px 23px;
|
}
|
}
|
|
}
|
</style>
|
