<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 class="iconBox">
|
<img class="autoImg" :src="item.activeIcon" alt="" v-if="$route.path == item.path">
|
<img class="autoImg" :src="item.icon" alt="" v-else>
|
</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";
|
import nianpu1 from "@/assets/images/menuIcon/nianpu1.png";
|
import nianpu from "@/assets/images/menuIcon/nianpu.png";
|
import mulu from "@/assets/images/menuIcon/mulu.png";
|
import mulu1 from "@/assets/images/menuIcon/mulu1.png";
|
import rongyu from "@/assets/images/menuIcon/rongyu.png";
|
import rongyu1 from "@/assets/images/menuIcon/rongyu1.png";
|
import xueshu from "@/assets/images/menuIcon/xueshu.png";
|
import xueshu1 from "@/assets/images/menuIcon/xueshu1.png";
|
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: nianpu1,
|
activeIcon: nianpu,
|
},
|
{
|
name: "学术成果",
|
path: "/achievements",
|
icon: xueshu,
|
activeIcon: xueshu1,
|
},
|
{
|
name: "荣誉奖项",
|
path: "/honor",
|
icon: rongyu,
|
activeIcon: rongyu1,
|
},
|
{
|
name: "学生名录",
|
path: "/directory",
|
icon: mulu,
|
activeIcon: mulu1,
|
},
|
],
|
};
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
|
.iconBox{
|
width: 70px;
|
height: 70px;
|
position: relative;
|
}
|
.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;
|
cursor: pointer;
|
.menuText {
|
line-height: 50px;
|
}
|
|
i {
|
font-size: 34px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
