zhongshujie
9 小时以前 5e73d562bae941a7658c3c13fdb585461f1a24e4
src/layout/index.vue
@@ -1,16 +1,22 @@
<template>
  <div class="homeLayoutBox">
    <div class="leftMenu">
      <div class="leftMenuTitle" @click="$router.push('/home')">王永炎院士</div>
      <div style="cursor: pointer;" 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
          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>
@@ -27,6 +33,14 @@
<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"]),
@@ -44,22 +58,26 @@
        {
          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,
        },
      ],
    };
@@ -68,6 +86,12 @@
</script>
<style lang="less" scoped>
.iconBox{
  width: 70px;
  height: 70px;
  position: relative;
}
.homeLayoutBox {
  height: 100%;
  display: flex;
@@ -80,7 +104,7 @@
  }
  .active {
    background: #6F5A3A;
    background: #6f5a3a;
    color: #fff;
  }
@@ -90,13 +114,14 @@
    background: #937950;
    display: flex;
    flex-direction: column;
    font-family: Alimama DongFangDaKai;
    font-family: siyuanBlod;
    .leftMenuTitle {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin-top: 20px;
      color: #fff;
      font-size: 24px;
    }
@@ -105,14 +130,17 @@
      font-size: 20px;
      line-height: 30px;
      color: #fff;
      margin: 10px 20px;
      margin: 10px 14px;
      margin-top: 0px;
      padding: 10px 0;
      text-align: center;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
      letter-spacing: 4px;
      white-space: nowrap;
    }
    .leftMenuList>menuItem:first-child {
    .leftMenuList > menuItem:first-child {
      border-top: 1px solid #fff;
    }
@@ -122,7 +150,7 @@
      justify-content: space-around;
      border-top: 1px solid #b9a587;
      margin-top: 20px;
      font-weight: bold;
      .menuItem {
        width: 100%;
        display: flex;
@@ -134,8 +162,10 @@
        font-size: 24px;
        border-bottom: 1px solid #b9a587;
        height: 18vh;
        cursor: pointer;
        .menuText {
          line-height: 50px;
          font-weight: 700;
        }
        i {