|
@@ -1,10 +1,13 @@
|
|
|
<template>
|
|
|
<div class="layout">
|
|
|
<!-- 头部菜单栏 -->
|
|
|
- <Header :class="isCollapsed ?'collapsed-header-width header':'header'">
|
|
|
- <Icon :class="rotateIcon"
|
|
|
- type="md-menu"
|
|
|
- @click="changeMenuStatus" />
|
|
|
+ <Header :class="isCollapsed ?'header':'header'">
|
|
|
+ <div class="logo-wrap">
|
|
|
+ <img src="../assets/tmd_logo.png"
|
|
|
+ :class="isCollapsed ? 'collapsed-logo-width unit-logo':'collapsed-logo-width unit-logo'" />
|
|
|
+ <span class="unit-name">醍摩豆云平台</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
<slot name="header-content"></slot>
|
|
|
</Header>
|
|
|
<!-- 侧边菜单栏 -->
|
|
@@ -15,43 +18,41 @@
|
|
|
width="248"
|
|
|
:collapsed-width="78"
|
|
|
v-model="isCollapsed">
|
|
|
- <Menu width="auto" accordion :class="menuitemClasses">
|
|
|
- <Submenu name="unit-logo-box" class="unit-logo-box">
|
|
|
- <template slot="title">
|
|
|
- <div class="logo-wrap">
|
|
|
- <img src="../assets/tmd_logo.png"
|
|
|
- :class="isCollapsed ? 'collapsed-logo-width unit-logo':'unit-logo'" />
|
|
|
- <span class="unit-name">醍摩豆云平台</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </Submenu>
|
|
|
- <Submenu :name="index" v-for="(item,index) in menuTree">
|
|
|
- <template slot="title">
|
|
|
- <Poptip trigger="hover"
|
|
|
- placement="right-start"
|
|
|
- width="160"
|
|
|
- transfer
|
|
|
- popper-class="poptip-style"
|
|
|
- padding="0px 0px">
|
|
|
- <Icon :type="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="20" />
|
|
|
- <span>{{item.name}}</span>
|
|
|
- <div slot="content" v-if="isCollapsed" class="poptop-content-radius">
|
|
|
- <Menu theme="dark" width="120" v-for="(menuItem,i) in item.child">
|
|
|
- <MenuItem :name="menuItem.router" :to="menuItem.router">{{menuItem.name}}</MenuItem>
|
|
|
- </Menu>
|
|
|
- </div>
|
|
|
- </Poptip>
|
|
|
- </template>
|
|
|
- <MenuItem :name="menuItem.router" :to="menuItem.router" v-for="(menuItem,i) in item.child" @click.native="closeCollapse">
|
|
|
- <span>
|
|
|
- {{menuItem.name}}
|
|
|
- <label style="color:aqua;margin-left:2px;">
|
|
|
- {{menuItem.tag}}
|
|
|
- </label>
|
|
|
- </span>
|
|
|
-
|
|
|
- </MenuItem>
|
|
|
- </Submenu>
|
|
|
+ <div class="collapse-icon-box" @click="changeMenuStatus">
|
|
|
+ <Icon :class="rotateIcon"
|
|
|
+ type="md-arrow-dropleft"
|
|
|
+ @click.stop="changeMenuStatus" />
|
|
|
+ </div>
|
|
|
+ <Menu width="auto" :class="menuitemClasses">
|
|
|
+ <vuescroll>
|
|
|
+ <Submenu :name="index" v-for="(item,index) in menuTree">
|
|
|
+ <template slot="title">
|
|
|
+ <Poptip trigger="hover"
|
|
|
+ placement="right-start"
|
|
|
+ width="160"
|
|
|
+ transfer
|
|
|
+ popper-class="poptip-style"
|
|
|
+ padding="0px 0px">
|
|
|
+ <Icon :type="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="20" />
|
|
|
+ <span>{{item.name}}</span>
|
|
|
+ <div slot="content" v-if="isCollapsed" class="poptop-content-radius">
|
|
|
+ <Menu theme="dark" width="120" v-for="(menuItem,i) in item.child">
|
|
|
+ <MenuItem :name="menuItem.router" :to="menuItem.router">{{menuItem.name}}</MenuItem>
|
|
|
+ </Menu>
|
|
|
+ </div>
|
|
|
+ </Poptip>
|
|
|
+ </template>
|
|
|
+ <MenuItem :name="menuItem.router" :to="menuItem.router" v-for="(menuItem,i) in item.child" @click.native="closeCollapse">
|
|
|
+ <span>
|
|
|
+ {{menuItem.name}}
|
|
|
+ <label style="color:aqua;margin-left:2px;">
|
|
|
+ {{menuItem.tag}}
|
|
|
+ </label>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </MenuItem>
|
|
|
+ </Submenu>
|
|
|
+ </vuescroll>
|
|
|
</Menu>
|
|
|
</Sider>
|
|
|
<!-- Body内容部分 -->
|
|
@@ -150,7 +151,7 @@
|
|
|
{
|
|
|
icon: '',
|
|
|
name: '题目/库管理',
|
|
|
- router: '/home/testPaperList',
|
|
|
+ router: '/home/evaluation/testPaperList',
|
|
|
tag:'T'
|
|
|
},
|
|
|
{
|
|
@@ -158,25 +159,49 @@
|
|
|
name: '知识点管理',
|
|
|
router: '/home/knowledge',
|
|
|
tag:'T'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ name: '自学单元',
|
|
|
+ router: '/home/manageUnit',
|
|
|
+ tag:'T'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ name: '编序式教材',
|
|
|
+ router: '/home/manageOrderLearn',
|
|
|
+ tag:'T'
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
icon: 'ios-star',
|
|
|
- name: '活动管理',
|
|
|
+ name: '学生活动管理',
|
|
|
router: '',
|
|
|
child: [
|
|
|
{
|
|
|
icon: '',
|
|
|
- name: '评测活动',
|
|
|
+ name: '评量测验',
|
|
|
router: '/home/manageEvaluation',
|
|
|
tag:'T'
|
|
|
},
|
|
|
{
|
|
|
icon: '',
|
|
|
- name: '自主学习活动',
|
|
|
- router: '/home/manageOrderLearn',
|
|
|
+ name: '自主学习',
|
|
|
+ router: '/home/manageSelfLearn',
|
|
|
tag:'T'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ name: '作业活动',
|
|
|
+ router: '/home/404',
|
|
|
+ tag:'×'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ name: '投票活动',
|
|
|
+ router: '/home/404',
|
|
|
+ tag:'×'
|
|
|
}
|
|
|
]
|
|
|
}
|
|
@@ -193,7 +218,7 @@
|
|
|
},
|
|
|
computed: {
|
|
|
rotateIcon() {
|
|
|
- return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""]
|
|
|
+ return ["collapse-icon", this.isCollapsed ? "rotate-icon" : ""]
|
|
|
},
|
|
|
menuitemClasses() {
|
|
|
return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""]
|
|
@@ -211,7 +236,7 @@
|
|
|
}
|
|
|
|
|
|
.biz-menu .ivu-menu-light {
|
|
|
- background: #000;
|
|
|
+ background: #101010;
|
|
|
color: #CCCCCC;
|
|
|
}
|
|
|
|
|
@@ -226,9 +251,7 @@
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
- .menu-item {
|
|
|
- color:red;
|
|
|
- }
|
|
|
+
|
|
|
.menu-item span {
|
|
|
display: inline-block;
|
|
|
overflow: hidden;
|
|
@@ -244,7 +267,7 @@
|
|
|
|
|
|
.menu-item i {
|
|
|
transform: translateX(0px);
|
|
|
- transition: font-size 0.2s ease, transform 0.2s ease;
|
|
|
+ transition: font-size 0.5s ease, transform 0.5s ease;
|
|
|
vertical-align: middle;
|
|
|
font-size: 16px;
|
|
|
}
|