| | |
| | | <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 |
| | | 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> |
| | |
| | | |
| | | <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"]), |
| | |
| | | { |
| | | name: "年谱", |
| | | path: "/chronology", |
| | | icon: "el-icon-s-home", |
| | | icon: nianpu1, |
| | | activeIcon: nianpu, |
| | | }, |
| | | { |
| | | name: "学术成果", |
| | | path: "/achievements", |
| | | icon: "el-icon-s-home", |
| | | icon: xueshu, |
| | | activeIcon: xueshu1, |
| | | }, |
| | | { |
| | | name: "荣誉奖项", |
| | | path: "/honor", |
| | | icon: "el-icon-s-home", |
| | | icon: rongyu, |
| | | activeIcon: rongyu1, |
| | | }, |
| | | { |
| | | name: "学生名录", |
| | | path: "/directory", |
| | | icon: "el-icon-s-home", |
| | | icon: mulu, |
| | | activeIcon: mulu1, |
| | | }, |
| | | ], |
| | | }; |
| | |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | |
| | | .iconBox{ |
| | | width: 70px; |
| | | height: 70px; |
| | | position: relative; |
| | | } |
| | | .homeLayoutBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | |
| | | // background-image: url("@/assets/images/homeBg.png"); |
| | | // background-repeat: no-repeat; |
| | | // background-size: 100% 95%; |
| | |
| | | } |
| | | |
| | | .active { |
| | | background: #6F5A3A; |
| | | background: #6f5a3a; |
| | | color: #fff; |
| | | } |
| | | |
| | |
| | | background: #937950; |
| | | display: flex; |
| | | flex-direction: column; |
| | | font-family: Alimama DongFangDaKai; |
| | | |
| | | .leftMenuTitle { |
| | | width: 100%; |
| | |
| | | border-bottom: 1px solid #fff; |
| | | } |
| | | |
| | | .leftMenuList>menuItem:first-child { |
| | | .leftMenuList > menuItem:first-child { |
| | | border-top: 1px solid #fff; |
| | | } |
| | | |
| | |
| | | color: #decaac; |
| | | font-size: 24px; |
| | | border-bottom: 1px solid #b9a587; |
| | | height: 180px; |
| | | |
| | | height: 18vh; |
| | | cursor: pointer; |
| | | .menuText { |
| | | line-height: 50px; |
| | | } |