<template>
|
<div class="homeLayoutBox">
|
<div class="leftMenu">
|
<div class="leftMenuTitle" @click="$router.push('/home')">王永炎院士</div>
|
<div class="leftMenuContent">
|
<p>学术思想传承</p>
|
<p>多维度数据库</p>
|
</div>
|
<div class="leftMenuList">
|
<div class="menuItem" :class="{ active: $route.path == item.path }" v-for="(item, index) in menuList"
|
:key="index" @click="$router.push(item.path)">
|
<div>
|
<i :class="item.icon"></i>
|
</div>
|
<div class="menuText">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="pageContentBox">
|
<keep-alive v-if="keepAliveList.length > 0" :include="keepAliveList">
|
<router-view />
|
</keep-alive>
|
<router-view v-else />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
computed: {
|
...mapState(["userInfo", "keepAliveList"]),
|
},
|
watch: {
|
$route(to, from) {
|
if (to.meta.keepAlive && this.keepAliveList.indexOf(to.name) == -1) {
|
this.$store.commit("addKeepAlive", to.name);
|
}
|
},
|
},
|
data() {
|
return {
|
menuList: [
|
{
|
name: "年谱",
|
path: "/chronology",
|
icon: "el-icon-s-home",
|
},
|
{
|
name: "学术成果",
|
path: "/achievements",
|
icon: "el-icon-s-home",
|
},
|
{
|
name: "荣誉奖项",
|
path: "/honor",
|
icon: "el-icon-s-home",
|
},
|
{
|
name: "学生名录",
|
path: "/directory",
|
icon: "el-icon-s-home",
|
},
|
],
|
};
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.homeLayoutBox {
|
height: 100%;
|
display: flex;
|
// background-image: url("@/assets/images/homeBg.png");
|
// background-repeat: no-repeat;
|
// background-size: 100% 95%;
|
.pageContentBox {
|
width: 100%;
|
min-height: calc(100% - 525px);
|
}
|
|
.active {
|
background: #6F5A3A;
|
color: #fff;
|
}
|
|
.leftMenu {
|
width: 200px;
|
height: 100%;
|
background: #937950;
|
display: flex;
|
flex-direction: column;
|
font-family: Alimama DongFangDaKai;
|
|
.leftMenuTitle {
|
width: 100%;
|
height: 50px;
|
line-height: 50px;
|
text-align: center;
|
color: #fff;
|
font-size: 24px;
|
}
|
|
.leftMenuContent {
|
font-size: 20px;
|
line-height: 30px;
|
color: #fff;
|
margin: 10px 20px;
|
padding: 10px 0;
|
text-align: center;
|
border-top: 1px solid #fff;
|
border-bottom: 1px solid #fff;
|
}
|
|
.leftMenuList>menuItem:first-child {
|
border-top: 1px solid #fff;
|
}
|
|
.leftMenuList {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
border-top: 1px solid #b9a587;
|
margin-top: 20px;
|
|
.menuItem {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
color: #decaac;
|
font-size: 24px;
|
border-bottom: 1px solid #b9a587;
|
height: 18vh;
|
.menuText {
|
line-height: 50px;
|
}
|
|
i {
|
font-size: 34px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
