<template>
|
<div style="height: 100%;">
|
<!-- 判断是否在空白页打开 -->
|
<template v-if="!isOneself">
|
<div class="app-wrapper">
|
<div class="left" :style="{ width: isFold ? '0px' : '298px' }">
|
<!-- 系统标题 -->
|
<div v-if="!isFold" class="system-title">
|
<div class="image">
|
<img src="../assets/logo.jpg" alt="" srcset="" />
|
</div>
|
<div class="title">实验室流程</div>
|
</div>
|
<!-- 左侧菜单 -->
|
<div v-if="!isFold" class="sidebar-container">
|
<ElMenu />
|
</div>
|
<div v-if="!isFold" class="sidebar-left-bg"></div>
|
<div v-if="!isFold" class="sidebar-bottom-bg"></div>
|
</div>
|
<!-- 右侧展示内容 -->
|
<div class="main-container" :style="{ width: isFold ? '100%' : 'calc(100% - 298px)' }">
|
<HeaderNav class="header-main" />
|
<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'
|
import { mapState } from 'vuex'
|
export default {
|
data() {
|
return {
|
// 默认页面在框架内显示
|
isOneself: false,
|
// 获取当前页面名称
|
nowRouteName: '',
|
}
|
},
|
computed: {
|
...mapState(['isFold'])
|
},
|
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;
|
background-image: url('../assets/public/layoutsBG.png');
|
background-size: cover;
|
background-position: center;
|
|
.left {
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
background-color: white;
|
transition: width 0.3s ease-in-out;
|
|
// 系统标题
|
.system-title {
|
overflow: hidden;
|
white-space: nowrap;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background-color: white;
|
height: 240px;
|
box-sizing: border-box;
|
|
.image {
|
margin-top: 40px;
|
width: 100px;
|
height: 100px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
}
|
}
|
|
.title {
|
margin-top: 7px;
|
font-weight: bold;
|
line-height: 43px;
|
font-size: 25px;
|
}
|
}
|
|
// 左侧菜单
|
.sidebar-container {
|
z-index: 2;
|
padding: 0 19px;
|
overflow-y: auto;
|
flex: 1;
|
|
::v-deep .el-menu {
|
border-right: unset !important;
|
}
|
}
|
|
.sidebar-left-bg {
|
z-index: 1;
|
position: absolute;
|
top: 338px;
|
left: 0;
|
width: 183px;
|
height: 316px;
|
background: #FFFCE5;
|
opacity: 0.56;
|
filter: blur(76.141290103688px);
|
}
|
|
.sidebar-bottom-bg {
|
z-index: 1;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 129px;
|
height: 289px;
|
background: #66FFFF;
|
opacity: 0.4;
|
filter: blur(76.141290103688px);
|
}
|
}
|
|
.main-container {
|
display: flex;
|
flex-direction: column;
|
transition: width 0.3s ease-in-out;
|
|
.header-main {
|
height: 70px;
|
}
|
|
.app-main {
|
flex: 1;
|
overflow: auto;
|
border-radius: 10px;
|
padding: 10px 21px 0 21px;
|
}
|
}
|
|
}
|
|
::v-deep .el-menu {
|
background-color: transparent !important;
|
}
|
</style>
|
