Skip to content

A
admin-base
Commit a39ba6ee authored by wangwei's avatar wangwei
Browse files
Options

页面编写

parent 081199f3
Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 165 deletions
index.html
View file @ a39ba6ee
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_746649_qg8dujb9rl.css"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_746649_38wf4o8u4cv.css">
<title>singsing-new-admin</title> <title>singsing-new-admin</title>
</head> </head>
<body> <body>
......
src/components/framework/headIndex.vue
View file @ a39ba6ee
<template> <template>
<div class="head-index"> <div class="head-index">
{{$store.state.userName}} <img class="logo" :src="iconUrl"/>{{$store.state.userName}}
<div class="fl-r"> <div class="fl-r">
<el-button round size="mini" @click="logOut">退出登录</el-button> <el-button round size="mini" @click="logOut">退出登录</el-button>
</div> </div>
...@@ -8,12 +8,13 @@ ...@@ -8,12 +8,13 @@
</template> </template>
<script> <script>
import {logoutApi} from "../../service/api"; import {logoutApi} from "../../service/api";
import iconUrl from '../../assets/logos.png'
import cookie from '../../util/cookie' import cookie from '../../util/cookie'
export default { export default {
name: "headIndex", name: "headIndex",
data(){ data(){
return { return {
iconUrl:iconUrl
} }
}, },
methods:{ methods:{
...@@ -41,7 +42,14 @@ ...@@ -41,7 +42,14 @@
@import "../../util/public"; @import "../../util/public";
.head-index{ .head-index{
height: 100%; height: 100%;
line-height: 40px; line-height: 60px;
.logo{
height: 50px;
vertical-align: middle;
margin-right: 20px;
position: relative;
top: -5px;
}
} }
.btn-div{ .btn-div{
text-align: center; text-align: center;
......
src/components/framework/index.vue
View file @ a39ba6ee
<template> <template>
<el-container> <el-container class="main-container">
<el-aside width="60px"> <el-header>
<left-menu></left-menu> <head-index/>
</el-aside> </el-header>
<el-container> <el-container>
<el-header height="40px">
<head-index/>
</el-header>
<el-main> <el-main>
<tab/> <transition name="el-fade-in">
<div class="router-block"> <div class="menu-block">
<transition name="el-fade-in-linear"> <left-menu/>
<keep-alive> </div>
<router-view class="child-view" v-loading="$store.state.mainLoad"/> </transition>
</keep-alive> <div class="content">
</transition> <div class="router-block">
<tab/>
<transition name="el-fade-in-linear">
<keep-alive>
<router-view class="child-view" v-loading="$store.state.mainLoad"/>
</keep-alive>
</transition>
</div>
</div> </div>
</el-main> </el-main>
</el-container> </el-container>
...@@ -28,7 +32,6 @@ ...@@ -28,7 +32,6 @@
components: {leftMenu, headIndex,tab}, components: {leftMenu, headIndex,tab},
data(){ data(){
return { return {
asideWidth:'200px',
transitionName: 'slide-left', transitionName: 'slide-left',
menuList:this.$store.state.menuList menuList:this.$store.state.menuList
} }
...@@ -43,45 +46,38 @@ ...@@ -43,45 +46,38 @@
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.el-container{
height: 100%;
overflow: hidden;
}
.el-header{ .el-header{
border-bottom: 1px solid @light-line; background: #333333;
background: @light-line; color: white;
}
.child-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: white;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all .5s;
} }
.el-main{ .el-main{
margin: 0;
padding: 0; padding: 0;
overflow: hidden; background: #f8f8f8;
position: relative; .menu-block{
.tab{ float: left;
position: relative; height: 100%;
z-index: 1;
} }
.router-block{ .content{
position: absolute; display: flex;
top: 40px; height: 100%;
z-index: 0; .router-block{
left: 0; flex: 1;
bottom: 0; height: 100%;
right: 0; position: relative;
.child-view{
position: absolute;
top: 42px;
height: auto;
left: 0;
bottom:0;
right: 0;
}
}
} }
} }
.el-aside{ .main-container{
transition: all .5s; height: 100%;
background-color: @bg-b;
} }
</style> </style>
src/components/framework/leftMenu.vue
View file @ a39ba6ee
<template> <template>
<div class="left-menu"> <el-menu
<img class="logo" :src="iconUrl"/> :default-active="$route.path"
<div class="menu-block"> :router="true"
<div class="menu-content" v-for="data in menuList" @click="toPath(data)"> text-color="#fff"
<i :class="'iconfont '+data.icon"></i> background-color="#333333"
{{data.value}} active-text-color="#ffd04b"
</div> :unique-opened="true"
:collapse="menuType"
class="el-menu-vertical-demo">
<div class="menu-btn" @click="menuType = !menuType">
<i v-if="!menuType" class="iconfont icon-shouqi"></i>
<i v-if="menuType" class="iconfont icon-zhankai"></i>
</div> </div>
</div> <el-submenu v-for="data in menuList" :index="data.value">
<template slot="title">
<i :class="'iconfont menu-icon '+data.icon"></i>
<span>{{data.value}}</span>
</template>
<el-menu-item v-for="item in data.list" :index="item.path" class="item">{{item.value}}</el-menu-item>
</el-submenu>
</el-menu>
</template> </template>
<script> <script>
import iconUrl from '../../assets/logos.png'
export default { export default {
name: "leftMenu", name: "leftMenu",
data(){ data(){
return { return {
iconUrl:iconUrl, menuList:this.$store.state.menuList,
menuList:this.$store.state.menuList menuType:false
} }
}, },
methods:{ methods:{
...@@ -36,34 +48,37 @@ ...@@ -36,34 +48,37 @@
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.left-menu{ .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
}
.el-menu{
background: #333;
color: white;
overflow: auto;
height: 100%; height: 100%;
user-select:none; .menu-btn{
transition: all .5s; height: 40px;
position: relative; background: #444444;
background: @bg-b; line-height: 40px;
font-size: 12px; /*text-align: center;*/
text-align: center; i{
color: @main-font-color; font-size: 30px;
.logo{ float: right;
margin-top: 20px; padding: 0 15px;
width: 80%; }
} }
.menu-block { .el-submenu{
padding-top: 20px; .menu-icon{
.menu-content { color: white;
padding: 15px 0; font-size: 18px;
cursor: pointer; position: relative;
transition: all .3s; right: 5px;
&:hover { }
background-color: @gold-color-light; .el-menu-item{
color: @black-line; background: #222;
} }
i { .template{
font-size: 24px; color: black;
margin-bottom: 10px;
display: block;
}
} }
} }
} }
......
src/components/framework/tab.vue
View file @ a39ba6ee
<template> <template>
<div class="tab"> <div class="tab">
<div :class="{'li-parent':true,light:data.name === $store.state.nowTab}" :key="data.routerName" v-for="data in tabList"> <div :class="{'li-parent':true,light:data.routerName === $store.state.nowTab}" :key="data.path" v-for="data in tabList">
<div class="tab-li" @click="toPath(data.routerName)"> <div class="tab-li" @click="toPath(data.routerName)">
{{data.value}} {{data.value}}
</div> </div>
...@@ -25,8 +25,10 @@ ...@@ -25,8 +25,10 @@
}, },
delPath:function (data) { delPath:function (data) {
let i = this.$store.state.openedTab.indexOf(data); let i = this.$store.state.openedTab.indexOf(data);
this.$store.state.openedTab.splice(i,1) this.$store.state.openedTab.splice(i,1);
if(data.routerName === this.$store.state.nowTab)this.$router.push({name:this.$store.state.openedTab[i-1].routerName}) if(data.routerName === this.$store.state.nowTab){
this.$router.push({name:this.$store.state.openedTab[i-1].routerName})
}
} }
} }
} }
...@@ -35,9 +37,10 @@ ...@@ -35,9 +37,10 @@
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.tab{ .tab{
background: #444;
padding: 0 5px; padding: 0 5px;
position: relative; position: relative;
box-shadow: 1px 0 5px @bg-b; box-shadow: 0 0 5px @bg-b;
.clear-both; .clear-both;
.li-parent{ .li-parent{
float: left; float: left;
...@@ -66,7 +69,7 @@ ...@@ -66,7 +69,7 @@
} }
} }
.tab-li{ .tab-li{
padding: 5px 20px 5px 10px; padding: 5px 10px 5px 10px;
} }
} }
} }
......
src/router/index.js
View file @ a39ba6ee
...@@ -14,7 +14,7 @@ import user from '@/components/user' ...@@ -14,7 +14,7 @@ import user from '@/components/user'
import teacher from '@/components/teacher' import teacher from '@/components/teacher'
import lesson from '@/components/lesson' import lesson from '@/components/lesson'
import entity from '@/components/entity' import entity from '@/components/entity'
Vue.use(Router) Vue.use(Router);
const router =new Router({ const router =new Router({
routes: [ routes: [
...@@ -89,7 +89,7 @@ router.beforeEach((to,from,next)=> { ...@@ -89,7 +89,7 @@ router.beforeEach((to,from,next)=> {
// return; // return;
// } // }
//获取cookie里的token //获取cookie里的token
store.commit('mainUnShow') store.commit('mainCanShow');
if(Cookie.get('cc_token')){ if(Cookie.get('cc_token')){
store.dispatch('setToken',Cookie.get('cc_token')); store.dispatch('setToken',Cookie.get('cc_token'));
if(Cookie.get('cc_user_name') !== null){ if(Cookie.get('cc_user_name') !== null){
...@@ -98,9 +98,18 @@ router.beforeEach((to,from,next)=> { ...@@ -98,9 +98,18 @@ router.beforeEach((to,from,next)=> {
} }
} }
if(to.name !== 'first'){ store.state.nowTab = to.name;
let thisMenu = store.state.menuList.find((i)=>{return i.name === to.matched[1].name}); if(to.matched.length > 1 && to.name !== 'first'){
store.state.nowTab = to.matched[1].name let thisMenu;
for (let i = 0 ; i < store.state.menuList.length ; i ++ ){
let _this = store.state.menuList[i];
for (let j = 0 ; j < _this.list.length ; j++){
let _that = _this.list[j];
if (_that.path === to.path){
thisMenu = _that
}
}
}
if(store.state.openedTab.indexOf(thisMenu) < 0){ if(store.state.openedTab.indexOf(thisMenu) < 0){
store.state.openedTab.push(thisMenu); store.state.openedTab.push(thisMenu);
console.log(store.state.openedTab) console.log(store.state.openedTab)
......
src/store/index.js
View file @ a39ba6ee
...@@ -20,7 +20,7 @@ export default new vuex.Store({ ...@@ -20,7 +20,7 @@ export default new vuex.Store({
routerName:'first', routerName:'first',
name:'first', name:'first',
delNo:true, delNo:true,
routerPath:'/index' path:'/index'
} }
], ],
}, },
......
src/util/menuList.js
View file @ a39ba6ee
export default [ export default [
{ {
name:'resources', name: '',
value:'教材管理', value: '教研管理',
id:1, icon: 'icon-material',
icon:'icon-material', list: [
routerName:'resources', {
}, { value:'教材列表',
name:'lesson', routerName:'resources',
value:'课程管理', path:'/resources'
id:2, }
icon:'icon-kecheng', ]
routerName:'lesson',
},{ },{
name:'class', name: '',
value:'班级管理', value: '课程管理',
id:3, icon: 'icon-kecheng',
icon:'icon-banjiguanli', list: [
routerName:'class', {
value:'课程列表',
routerName:'lesson',
path:'/lesson'
}
]
},{ },{
name:'order', name: '',
value:'订单管理', value: '期数管理',
id:4, icon: 'icon-rili',
icon:'icon-dingdan', list: [
routerName:'order', {
value:'班级列表',
routerName:'resources',
path:'/class'
},
{
value:'期数列表',
routerName:'resources',
path:'/123'
}
]
},{ },{
name:'user', name: '',
value:'用户管理', value: '商品管理',
id:6, icon: 'icon-shangpin1',
icon:'icon-yonghu1', list: [
routerName:'user', {
value:'商品列表',
routerName:'shop',
path:'/shop'
}
]
},{ },{
name:'teacher', name: '',
value:'教师管理', value: '人员管理',
id:6, icon: 'icon-laoshi',
icon:'icon-laoshi', list: [
routerName:'teacher', {
value:'教师列表',
routerName:'teacher',
path:'/teacher'
},
{
value:'用户列表',
routerName:'user',
path:'/user'
}
]
},{ },{
name:'teacher', name: '',
value:'商品', value: '订单管理',
id:6, icon: 'icon-dingdan',
icon:'icon-shangpin1', list: [
routerName:'teacher', {
value:'订单列表',
routerName:'order',
path:'/order'
},
{
value:'发货管理',
routerName:'logistics',
path:'/logistics'
}
]
},{ },{
name:'teacher', name: '',
value:'排期管理', value: '实物管理',
id:6, icon: 'icon-shu',
icon:'icon-rili', list: [
routerName:'teacher', {
value:'单品列表',
routerName:'entity',
path:'/entity'
},
{
value:'盒子列表',
routerName:'box',
path:'/box'
}
]
},{ },{
name:'entity', name: '',
value:'实物管理', value: '公众号',
id:6, icon: 'icon-ai-weixin',
icon:'icon-shu', list: [
routerName:'entity', {
children:[{ value:'通知管理',
name:'single', routerName:'notice',
value:'单品管理', path:'/notice'
id:61, },
{
}] value:'公众号',
routerName:'weChat',
path:'/weChat'
}
]
},{ },{
name:'system', name: '',
value:'系统管理', value: '系统管理',
id:5, icon: 'icon-shezhi',
icon:'icon-shezhi', list: [
routerName:'admin',
children:[
{ {
name:'admin',
value:'账号管理', value:'账号管理',
id:51,
icon:'icon-type',
routerName:'admin', routerName:'admin',
}, path:'/admin'
{ },{
name:'role',
value:'角色管理', value:'角色管理',
id:52,
icon:'icon-jiaoseguanli',
routerName:'role', routerName:'role',
path:'/role'
},{
value:'权限管理',
routerName:'permission',
path:'/permission'
}
]
},{
name: '',
value: '帮助中心',
icon: 'icon-bangzhu',
list: [
{
value:'帮助中心',
routerName:'help',
path:'/help'
} }
] ]
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment