layout -f

src/main.js

@@ -19,6 +19,7 @@ import "./plugins/helpers";
 // bootstrap 133KB non-zip
 import "./styles/bootstrap.scss";
 import "./styles/global.css";
+import "./styles/icons.scss";
 // styles end
 
 // 可以回退到上次route的状态，不重新执行生命周期函数

src/styles/icons.scss

@@ -0,0 +1,48 @@
+// icon
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  &-base {
+    background-image: url(../assets/icon-base.png);
+  }
+  &-base-act {
+    background-image: url(../assets/icon-base-act.png);
+  }
+  &-user {
+    background-image: url(../assets/icon-user.png);
+  }
+  &-user-act {
+    background-image: url(../assets/icon-user-act.png);
+  }
+  &-business {
+    background-image: url(../assets/icon-business.png);
+  }
+  &-business-act {
+    background-image: url(../assets/icon-business-act.png);
+  }
+  &-invigilation {
+    background-image: url(../assets/icon-invigilation.png);
+  }
+  &-invigilation-act {
+    background-image: url(../assets/icon-invigilation-act.png);
+  }
+
+  &-logout {
+    background-image: url(../assets/icon-logout.png);
+  }
+
+  &-reexam {
+    background-image: url(../assets/icon-reexam.png);
+  }
+  &-analysis {
+    background-image: url(../assets/icon-analysis.png);
+  }
+  &-exam-detail {
+    background-image: url(../assets/icon-exam-detail.png);
+  }
+}

src/views/Layout/Layout.vue

@@ -1,17 +1,25 @@
 <template>
   <div class="app-wrapper">
-    <side-bar class="sidebar-container" />
+    <nav-bar @on-nav-change="navChange" />
+    <side-bar class="sidebar-container" :menus="curMenus" />
     <div class="main-container">
-      <nav-bar />
       <app-main />
+      <app-footer />
     </div>
   </div>
 </template>
 
 <script>
 import AppMain from "./components/AppMain.vue";
+import AppFooter from "./components/AppFooter.vue";
 import SideBar from "./components/SideBar.vue";
 import NavBar from "./components/NavBar.vue";
+import {
+  baseMenuConfig,
+  userMenuConfig,
+  businessMenuConfig,
+  invigilationMenuConfig,
+} from "./components/menu";
 
 export default {
   name: "Layout",
@@ -19,6 +27,23 @@ export default {
     NavBar,
     SideBar,
     AppMain,
+    AppFooter,
+  },
+  data() {
+    return {
+      curMenus: [],
+      navs: {
+        baseMenuConfig,
+        userMenuConfig,
+        businessMenuConfig,
+        invigilationMenuConfig,
+      },
+    };
+  },
+  methods: {
+    navChange(name) {
+      this.curMenus = this.navs[`${name}MenuConfig`];
+    },
   },
 };
 </script>
@@ -37,7 +62,21 @@ export default {
 .main-container {
   min-height: 100vh;
   transition: margin-left 0.28s;
-  margin-left: 256px;
-  background-color: #f0f2f5;
+  margin-left: 220px;
+  padding-top: 60px;
+  padding-bottom: 34px;
+  background-color: #f0f4f9;
+  position: relative;
+}
+.sidebar-container {
+  background: #fff;
+  transition: width 0.28s;
+  width: 220px !important;
+  top: 60px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  overflow: hidden;
 }
 </style>

src/views/Layout/components/AppFooter.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="app-footer">
+    <p>
+      Copyright ©
+      <a href="http:\\www.qmth.com.cn" target="_blank">www.qmth.com.cn</a> , All
+      Rights Reserved.
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "app-footer",
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.app-footer {
+  position: absolute;
+  width: 100%;
+  height: 34px;
+  bottom: 0;
+  left: 0;
+  z-index: auto;
+  line-height: 34px;
+  color: #8c94ac;
+  text-align: center;
+  font-size: 13px;
+  background: #fff;
+  p {
+    margin: 0;
+  }
+  a {
+    color: #8c94ac;
+  }
+  a:hover {
+    color: #202b4b;
+  }
+}
+</style>

src/views/Layout/components/AppMain.vue

@@ -12,3 +12,9 @@ export default {
   name: "AppMain",
 };
 </script>
+
+<style scoped>
+.app-main {
+  padding: 30px;
+}
+</style>

src/views/Layout/components/NavBar.vue

@@ -1,55 +1,73 @@
 <template>
-  <el-menu class="navbar" mode="horizontal">
-    <div class="user-profile-container" trigger="click">
-      <div class="user-profile-content">
-        <div class="menu-icons">
-          <span class="menu-icon">
-            <i class="el-icon-search icon" />
-          </span>
-          <span class="menu-icon">
-            <i class="el-icon-message icon" />
-          </span>
-          <span class="menu-icon">
-            <el-badge is-dot class="item">
-              <i class="el-icon-bell icon" />
-            </el-badge>
-          </span>
-        </div>
-        <el-dropdown>
-          <div class="user-profile-body">
-            <img
-              class="user-avatar"
-              src="https://img.alicdn.com/tfs/TB1ONhloamWBuNjy1XaXXXCbXXa-200-200.png"
-            />
-            <span class="user-name">{{ name }}</span>
+  <div class="nav-bar">
+    <div class="nav-bar-logo">
+      <img
+        src="https://img.alicdn.com/tfs/TB13UQpnYGYBuNjy0FoXXciBFXa-242-134.png"
+        width="40"
+      />
+      <!-- <span class="site-name">ADMIN LITE</span> -->
+    </div>
+    <div class="nav-bar-menu menu-list">
+      <ul>
+        <li
+          v-for="(nav, index) in navs"
+          :key="index"
+          @click="toPage(nav)"
+          :class="{ 'menu-item-act': curNav === nav.name }"
+        >
+          <div class="menu-item">
+            <i
+              :class="[
+                'icon',
+                curNav === nav.name ? `${nav.icon}-act` : `${nav.icon}`,
+              ]"
+            ></i>
+            <span>{{ nav.title }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="nav-bar-user menu-list">
+      <ul>
+        <li>
+          <div class="menu-item">
+            <i class="icon icon-user"></i>
+            <span v-if="username">{{ username }}，欢迎你</span>
           </div>
-          <el-dropdown-menu slot="dropdown" class="user-dropdown">
-            <router-link to="/">
-              <el-dropdown-item>我的主页</el-dropdown-item>
-            </router-link>
-            <router-link to="/">
-              <el-dropdown-item>个人设置</el-dropdown-item>
-            </router-link>
-            <el-dropdown-item>
-              <span style="display: block;" @click="logout">退出</span>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </div>
+        </li>
+        <li @click="toLogout">
+          <div class="menu-item">
+            <i class="icon icon-logout"></i>
+            <span>退出登录</span>
+          </div>
+        </li>
+      </ul>
     </div>
-  </el-menu>
+  </div>
 </template>
 
 <script>
+import { headerMenuConfig } from "./menu";
+
 export default {
   name: "NavBar",
   computed: {
-    name() {
+    username() {
       return this.$store.state.user.name;
     },
   },
+  data() {
+    return {
+      navs: headerMenuConfig,
+      curNav: "",
+    };
+  },
   methods: {
-    logout() {
+    toPage(nav) {
+      this.curNav = nav.name;
+      this.$emit("on-nav-change", nav.name);
+    },
+    toLogout() {
       // console.log('Logout');
       this.$router.push("/login");
     },
@@ -58,56 +76,70 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.navbar {
-  height: 64px;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  .user-profile-container {
+.nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  z-index: 1001;
+  overflow: hidden;
+  background: #fff;
+
+  &::after {
+    content: "";
     position: absolute;
-    right: 20px;
-    cursor: pointer;
-    .user-profile-content {
-      display: flex;
-      padding: 20px 0;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    z-index: auto;
+    border-bottom: 1px solid #eee;
+  }
+
+  &-logo {
+    width: 220px;
+    float: left;
+    padding: 14px 30px;
+    font-size: 20px;
+    line-height: 32px;
+    > img {
+      display: block;
+      max-width: 160px;
+      height: 32px;
     }
-    .menu-icons {
-      display: flex;
-      align-items: center;
-      .menu-icon {
-        padding: 0 12px;
-        .icon {
-          display: inline-block;
-          font-size: 18px;
-          text-align: center;
-        }
-      }
+  }
+  &-menu {
+    float: left;
+  }
+  &-user {
+    float: right;
+  }
+  .menu-list {
+    ul {
+      padding: 0;
     }
-    .user-profile-body {
+    li {
+      display: inline-block;
+      vertical-align: top;
+      padding: 20px 15px;
+      line-height: 20px;
+      font-size: 14px;
       position: relative;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
       text-align: center;
-      padding-right: 14px;
-    }
-    .user-avatar {
-      width: 24px;
-      height: 24px;
-      margin: 0 8px 0 12px;
-      border-radius: 4px;
-    }
-    .user-name {
-      color: rgba(0, 0, 0, 0.65);
-    }
-    .user-department {
-      font-size: 12px;
-      color: rgba(102, 102, 102, 0.65);
-    }
-    .el-icon-caret-bottom {
-      position: absolute;
-      right: 0;
-      top: 13px;
-      font-size: 12px;
+      font-weight: 600;
+      color: #626a82;
+      cursor: pointer;
+
+      &:hover,
+      &.menu-item-act {
+        color: #1886fe;
+      }
+
+      span {
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 8px;
+      }
     }
   }
 }

src/views/Layout/components/SideBar.vue

@@ -1,117 +1,109 @@
 <template>
-  <scroll-bar>
-    <div class="logo">
-      <img
-        src="https://img.alicdn.com/tfs/TB13UQpnYGYBuNjy0FoXXciBFXa-242-134.png"
-        width="40"
-      />
-      <span class="site-name">ADMIN LITE</span>
-    </div>
-    <el-menu
-      :show-timeout="200"
-      mode="vertical"
-      background-color="#00142a"
-      text-color="hsla(0, 0%, 100%, .65)"
-      active-text-color="#409EFF"
-    >
-      <template v-for="item in asideMenuConfig">
-        <router-link v-if="!item.children" :to="item.path" :key="item.name">
-          <el-menu-item :index="item.path">
-            <i v-if="item.icon" :class="item.icon" />
-            <span v-if="item.name" slot="title">{{ item.name }}</span>
-          </el-menu-item>
-        </router-link>
-
-        <el-submenu v-else :index="item.name || item.path" :key="item.name">
-          <template slot="title">
-            <i v-if="item && item.icon" :class="item.icon" />
-            <span v-if="item && item.name" slot="title">{{ item.name }}</span>
-          </template>
-          <template v-for="child in item.children.filter((v) => !v.hidden)">
-            <router-link :to="item.path + child.path" :key="child.name">
-              <el-menu-item :index="item.path + child.path">
-                <span v-if="child && child.name" slot="title">{{
-                  child.name
-                }}</span>
-              </el-menu-item>
-            </router-link>
-          </template>
-        </el-submenu>
-      </template>
-    </el-menu>
+  <scroll-bar class="side-bar">
+    <ul class="nav-list">
+      <li class="nav-item" v-for="(nav, navNo) in menus" :key="navNo">
+        <p class="nav-item-content">
+          <i :class="['icon', `${nav.icon}`]"></i>
+          <span>{{ nav.title }}</span>
+          <span></span>
+        </p>
+        <ul class="nav-sublist">
+          <li
+            v-for="(subnav, subNo) in nav.children"
+            :key="subNo"
+            :class="[
+              'nav-sub-item',
+              { 'nav-item-act': subnav.name === curRouterName },
+            ]"
+          >
+            <p @click="toRouter(subnav)">
+              <span>{{ subnav.title }}</span>
+              <span></span>
+            </p>
+          </li>
+        </ul>
+      </li>
+    </ul>
   </scroll-bar>
 </template>
 
 <script>
-import { asideMenuConfig } from "./menu";
 import ScrollBar from "./ScrollBar";
+
 export default {
   name: "SideBar",
   components: { ScrollBar },
-  props: {},
+  props: {
+    menus: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
   data() {
     return {
-      asideMenuConfig,
+      curRouterName: this.$router.name,
     };
   },
+  methods: {
+    toRouter(nav) {
+      this.$router.push({ name: nav.name });
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 64px;
-  line-height: 64px;
-  background: #002140;
-  color: #fff;
-  text-align: center;
-  font-size: 20px;
-  font-weight: 600;
-  overflow: hidden;
-}
-.site-name {
-  margin-left: 10px;
-}
-.sidebar-container {
-  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-  transition: width 0.28s;
-  width: 256px !important;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1001;
-  overflow: hidden;
-  a {
-    display: inline-block;
-    width: 100%;
+.side-bar {
+  line-height: 20px;
+  font-size: 14px;
+  p {
+    margin: 0;
   }
-  .el-menu {
-    padding-top: 16px;
-    width: 100% !important;
-    border: none;
+  li {
+    list-style: none;
   }
-  .el-submenu .el-menu-item {
-    min-width: 256px !important;
-    padding-left: 48px !important;
-    background-color: #000c17 !important;
-    &:hover {
-      color: #fff !important;
+}
+.nav-list {
+  padding: 30px;
+  margin: 0;
+}
+.nav-item {
+  margin-bottom: 24px;
+  font-weight: 400;
+
+  &-content {
+    padding: 6px 0;
+    margin: 0;
+    color: #202b4b;
+    font-weight: 600;
+
+    > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    > i {
+      margin-right: 10px;
     }
   }
-  .el-menu-item,
-  .el-submenu .el-menu-item {
-    &.is-active {
-      background-color: #188fff !important;
-      color: #fff !important;
+}
+.nav-sublist {
+  padding-left: 26px;
+  color: #626a82;
+  .nav-sub-item {
+    padding: 6px 0;
+    font-weight: 400;
+    cursor: pointer;
+
+    &:hover {
+      color: #1886fe;
     }
   }
-  .el-submenu__title i {
-    font-size: 16px;
-    color: rgba(255, 255, 255, 0.65);
+
+  .nav-item-act {
+    color: #1886fe;
+    font-weight: 600;
   }
 }
 </style>

src/views/Layout/components/menu.js

@@ -2,107 +2,201 @@
 // headerMenuConfig：头部导航配置
 // asideMenuConfig：侧边导航配置
 
-const headerMenuConfig = [];
+const headerMenuConfig = [
+  {
+    title: "基础管理",
+    name: "base",
+    icon: "icon-base",
+  },
+  {
+    title: "用户管理",
+    name: "user",
+    icon: "icon-user",
+  },
+  {
+    title: "考务管理",
+    name: "business",
+    icon: "icon-business",
+  },
+  {
+    title: "监考管理",
+    name: "invigilation",
+    icon: "icon-invigilation",
+  },
+];
 
-const asideMenuConfig = [
+const baseMenuConfig = [
   {
-    path: "/dashboard",
-    name: "Dashboard",
+    title: "基础管理",
+    name: "Base",
     icon: "el-icon-menu",
     children: [
       {
-        path: "/analysis",
-        name: "分析页",
+        title: "基础管理",
+        name: "Base",
+      },
+      {
+        title: "监控页",
+        name: "Base",
+      },
+      {
+        title: "工作台",
+        name: "Base",
+      },
+    ],
+  },
+];
+
+const userMenuConfig = [
+  {
+    title: "用户管理",
+    name: "User",
+    icon: "el-icon-menu",
+    children: [
+      {
+        title: "基础管理",
+        name: "Base",
+      },
+      {
+        title: "监控页",
+        name: "Base",
+      },
+      {
+        title: "工作台",
+        name: "Base",
+      },
+    ],
+  },
+];
+
+const businessMenuConfig = [
+  {
+    title: "考务管理",
+    name: "Basiness",
+    icon: "icon-business",
+    children: [
+      {
+        title: "批次管理",
+        name: "Base",
       },
       {
-        path: "/monitor",
-        name: "监控页",
+        title: "考生管理",
+        name: "Base",
       },
       {
-        path: "/workplace",
-        name: "工作台",
+        title: "调卷规则",
+        name: "Base",
+      },
+      {
+        title: "学生档案设置",
+        name: "Base",
+      },
+      {
+        title: "考场监考设置",
+        name: "Base",
       },
     ],
   },
   {
-    path: "/table",
-    name: "表格页",
-    icon: "el-icon-date",
+    title: "系统设置",
+    name: "System",
+    icon: "icon-business",
     children: [
       {
-        path: "/basic",
-        name: "基础表格",
+        title: "用户管理",
+        name: "Base",
       },
       {
-        path: "/fixed",
-        name: "固定表格",
+        title: "角色权限",
+        name: "Base",
+      },
+      {
+        title: "机构管理",
+        name: "Base",
       },
     ],
   },
+];
+
+const invigilationMenuConfig = [
   {
-    path: "/form",
-    name: "表单页",
-    icon: "el-icon-edit-outline",
+    title: "考情监控",
+    name: "Base",
+    icon: "icon-exam-detail",
     children: [
       {
-        path: "/basic",
-        name: "典型表单",
+        title: "考情监控",
+        name: "Base",
       },
       {
-        path: "/signup",
-        name: "注册表单",
+        title: "在线巡考",
+        name: "Base",
       },
     ],
   },
   {
-    path: "/charts",
-    name: "图表页",
-    icon: "el-icon-picture-outline",
+    title: "监考管理",
+    name: "Base",
+    icon: "icon-invigilation",
     children: [
       {
-        path: "/line",
-        name: "折线图",
+        title: "实时监控台",
+        name: "Base",
+      },
+      {
+        title: "监考明细管理",
+        name: "Base",
+      },
+      {
+        title: "预警提醒",
+        name: "Base",
       },
       {
-        path: "/histogram",
-        name: "柱状图",
+        title: "重考申请",
+        name: "Base",
       },
       {
-        path: "/bar",
-        name: "条形图",
+        title: "进度查询",
+        name: "Base",
       },
     ],
   },
   {
-    path: "/profile",
-    name: "详情页",
-    icon: "el-icon-tickets",
+    title: "重考审批",
+    name: "Base",
+    icon: "icon-reexam",
     children: [
       {
-        path: "/success",
-        name: "基础详情页",
+        title: "重考待审",
+        name: "Base",
       },
       {
-        path: "/fail",
-        name: "失败",
+        title: "重考已审",
+        name: "Base",
       },
     ],
   },
   {
-    path: "/result",
-    name: "结果页",
-    icon: "el-icon-circle-check-outline",
+    title: "查询统计",
+    name: "Base",
+    icon: "icon-invigilation",
     children: [
       {
-        path: "/success",
-        name: "成功",
+        title: "考情综合报表分析",
+        name: "Base",
       },
       {
-        path: "/fail",
-        name: "失败",
+        title: "考生端日志管理",
+        name: "Base",
       },
     ],
   },
 ];
 
-export { headerMenuConfig, asideMenuConfig };
+export {
+  headerMenuConfig,
+  baseMenuConfig,
+  userMenuConfig,
+  businessMenuConfig,
+  invigilationMenuConfig,
+};