首页

杨磊

2025-04-07 cd9bda0a934867ad2c587046c13090709861323f

 src/layout/index.vue

@@ -1,5 +1,21 @@
<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 />
@@ -12,26 +28,122 @@
<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); 
        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 {
  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: 180px;

        .menuText {
          line-height: 50px;
        }

        i {
          font-size: 34px;
        }
      }
    }
  }
}
</style>