学术成果详情

zhongshujie

1 天以前 ce7cf2f67ec29aef55a889574942c58c8d7737bd

 src/layout/index.vue

@@ -1,5 +1,27 @@
<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 />
@@ -11,27 +33,141 @@

<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); 
        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 {
  width: 100%;
  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>