公共组件

杨磊

2025-03-31 8209ece89c9ee3ba78969433b60b4d20af6b9421

公共组件

 src/layout/index.vue

@@ -1,5 +1,26 @@
<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,7 +33,6 @@
<script>
import { mapState } from "vuex";
export default {

  computed: {
    ...mapState(["userInfo", "keepAliveList"]),
  },
@@ -23,6 +43,32 @@
      }
    },
  },
  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>

@@ -30,8 +76,70 @@
.homeLayoutBox {
  width: 100%;
  height: 100%;
  display: flex;
  // background-image: url("@/assets/images/homeBg.png");
  // background-repeat: no-repeat;
  // background-size: 100% 95%;
  .pageContentBox {
    min-height: calc(100% - 525px);
  }
  .active{
    background: #6F5A3A;
    color: #fff;
  }
  .leftMenu {
    width: 200px;
    height: 100%;
    background: #937950;
    display: flex;
    flex-direction: column;
    .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>

 src/router/index.js

@@ -24,13 +24,12 @@
        path: "/chronology",
        name: "chronology",
        meta: {
          name: "首页",
          name: "年谱",
          authentication: false, // 是否需要登录验证
          keepAlive: false, // 是否需要缓存
        },
        component: () => import("@/views/chronology/index.vue")
      },

      {
        path: "/honor",
        name: "honor",
@@ -39,7 +38,22 @@
        },
        component: Honor,
      },

      {
        path: "/achievements",
        name: "achievements",
        meta: {
          name: "学术成果",
        },
        component: () => import("@/views/achievements/index.vue"),
      },
      {
        path: "/directory",
        name: "directory",
        meta: {
          name: "学生名录",
        },
        component: () => import("@/views/directory/index.vue"),
      },
      // {
      //   path: "/login",
      //   name: "login",

 src/views/achievements/index.vue

New file
@@ -0,0 +1,14 @@

<template>
  <div>学术成果</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 src/views/directory/index.vue

New file
@@ -0,0 +1,9 @@
<template>
  <div>学生名录</div>
</template>

<script>
export default {};
</script>

<style></style>

 src/views/honors/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="honors">
        <div></div>
        <div>荣誉</div>
        <div></div>
    </div>
</template>