Skip to content

P
pica-admin-IM
提交 b01fd708 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

左边菜单样式调整

上级 86d55313
隐藏空白字符变更
内嵌 并排
正在显示 包含 260 行增加 和 141 行删除
.vscode/settings.json
浏览文件 @ b01fd708
{ {
"editor.fontSize": 18
} }
\ No newline at end of file
src/App.vue
浏览文件 @ b01fd708
<template> <template>
<div> <div>
<transition name="router-fade" mode="out-in"> <v-header></v-header>
<keep-alive> <v-slidebar></v-slidebar>
<router-view v-if="$route.meta.keepAlive"></router-view> <el-container>
</keep-alive> <div class="content" id="body-content">
</transition> <transition name="router-fade" mode="out-in">
<transition name="router-fade" mode="out-in"> <keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view> <router-view v-if="$route.meta.keepAlive"></router-view>
</transition> </keep-alive>
<!-- <svg-icon></svg-icon> --> </transition>
<transition name="router-fade" mode="out-in">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
</div>
</el-container>
</div> </div>
</template> </template>
<script> <script>
// import svgIcon from './components/common/svg'; import VHeader from './views/layout/header.vue'
import VSlidebar from './views/layout/slidebar.vue'
export default { export default {
components:{ components:{
// svgIcon VHeader,
}, VSlidebar
},
data() {
return {
}
}
} }
</script> </script>
...@@ -32,4 +44,19 @@ ...@@ -32,4 +44,19 @@
.router-fade-enter, .router-fade-leave-active { .router-fade-enter, .router-fade-leave-active {
opacity: 0; opacity: 0;
} }
.el-container {
margin-left: 225px;
overflow: hidden;
.content {
background: none repeat scroll 0 0 #fff;
position: absolute;
left: 225px;
right: 0;
top: 70px;
bottom: 0;
width: auto;
box-sizing: border-box;
overflow-y: scroll;
}
}
</style> </style>
src/components/breadcrumb.vue 0 → 100644
浏览文件 @ b01fd708
<template>
<div class="bread-crumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>{{curmbFirst}}</el-breadcrumb-item>
<el-breadcrumb-item>{{curmbSecond}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
props: {
curmbFirst: {
type: String
},
curmbSecond: {
type: String
}
}
}
</script>
<style lang="scss">
.bread-crumb {
background: #F4F5F6;
height: 50px;
padding: 20px 0 0 25px;
.el-breadcrumb__inner {
font-size: 12px;
}
}
</style>
src/router/router.js
浏览文件 @ b01fd708
import App from '../App' import App from '../App'
const index = r => require.ensure([], () => r(require('../views/index')), 'index') const home = r => require.ensure([], () => r(require('../views/home')), 'home')
const itemManager = r => require.ensure([], () => r(require('../views/education/item-manager.vue')), 'item-manager')
const itemComponent = r => require.ensure([], () => r(require('../views/education/item-component.vue')), 'item-component')
export default [{ export default [{
path: '/', path: '/',
...@@ -8,15 +10,19 @@ export default [{ ...@@ -8,15 +10,19 @@ export default [{
children: [ children: [
{ {
path: '', path: '',
redirect: '/index' redirect: '/home'
}, },{
{
path: '/index', path: '/index',
component: index component: home
}, },{
{
path: '/home', path: '/home',
component: index component: home
},{
path: '/item-manager',
component: itemManager
},{
path: '/item-component',
component: itemComponent
} }
] ]
}] }]
src/utils/mixins.js
浏览文件 @ b01fd708
...@@ -12,9 +12,9 @@ module.exports = { ...@@ -12,9 +12,9 @@ module.exports = {
} }
}, },
created: function () { created: function () {
let query = this.$router.query // let query = this.$router.query
// this.token = this.getUrlSearch(location.href, 'token') || (query && query.token) || null // this.token = this.getUrlSearch(location.href, 'token') || (query && query.token) || null
this.token = this.getUrlKey('token') || (query && query.token) || null // this.token = this.getUrlKey('token') || (query && query.token) || null
}, },
mounted() { mounted() {
......
src/views/education/item-component.vue 0 → 100644
浏览文件 @ b01fd708
<template>
<div class="create-item">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
项目组件
</div>
</template>
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: '教培项目',
curmbSecond: '项目组件'
}
}
}
</script>
<style>
</style>
src/views/education/item-manager.vue 0 → 100644
浏览文件 @ b01fd708
<template>
<div class="create-item">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
项目管理
</div>
</template>
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: '教培项目',
curmbSecond: '项目管理'
}
}
}
</script>
<style>
</style>
src/views/home.vue 0 → 100644
浏览文件 @ b01fd708
<template>
<div class="home-container">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="home-table">
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140"></el-table-column>
<el-table-column prop="name" label="Name" width="120"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import BreadCrumb from '../components/breadcrumb.vue'
export default {
components: {
BreadCrumb
},
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(10).fill(item),
curmbFirst: '首页',
curmbSecond: '首页'
}
}
};
</script>
<style lang="scss">
.home-container {
width: 100%;
.home-table {
padding-left: 20px;
}
}
</style>
src/views/index.vue 已删除 100644 → 0
浏览文件 @ 86d55313
<template>
<el-container style="height: 100%; border: 1px solid #eee">
<v-header></v-header>
<v-slidebar></v-slidebar>
<div class="main-container">
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</div>
</el-container>
</template>
<script>
import VHeader from './layout/header.vue'
import VSlidebar from './layout/slidebar.vue'
export default {
components: {
VHeader,
VSlidebar
},
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
.main-container {
width: 100%;
margin-left: 200px;
margin-top: 80px;
}
</style>
src/views/layout/header.vue
浏览文件 @ b01fd708
<template> <template>
<div class="header-container"> <div class="header-container">
<div class="logo">内容管理系统</div> <div class="logo"><img src="../../assets/image/index_logoicon.png"/>内容管理系统</div>
<div class="user-info"> <div class="user-info">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
...@@ -36,17 +36,10 @@ export default { ...@@ -36,17 +36,10 @@ export default {
systemInfoList: [] systemInfoList: []
} }
}, },
created() {
//获取导航项目
this.getSystemType()
},
computed: {}, computed: {},
methods: { methods: {
handleCommand() { handleCommand() {
},
getSystemType() {
}, },
forward() { forward() {
...@@ -56,7 +49,7 @@ export default { ...@@ -56,7 +49,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.header-container { .header-container {
position: fixed; position: relative;
left: 0; left: 0;
top: 0; top: 0;
box-sizing: border-box; box-sizing: border-box;
...@@ -72,6 +65,12 @@ export default { ...@@ -72,6 +65,12 @@ export default {
width: 250px; width: 250px;
text-align: center; text-align: center;
color: #fff; color: #fff;
img{
width: 30px;
float: left;
margin-left:60px;
margin-top:20px;
}
} }
.user-info { .user-info {
float: right; float: right;
...@@ -94,6 +93,9 @@ export default { ...@@ -94,6 +93,9 @@ export default {
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
} }
.el-icon--right{
color: #fff;
}
} }
} }
......
src/views/layout/slidebar.vue
浏览文件 @ b01fd708
<template> <template>
<div class="slidebar-container"> <div class="slidebar-container">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
<el-menu :default-openeds="['1', '3']"> <template v-for="(item,_index) in items">
<el-submenu index="1"> <template v-if="item.subs">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template> <el-submenu :index=" 'index_' + _index" :key="item.index">
<el-menu-item-group> <template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
<template slot="title">Group 1</template> <el-menu-item-group>
<el-menu-item index="1-1">Option 1</el-menu-item> <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{subItem.title}}</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item> </el-menu-item-group>
</el-menu-item-group> </el-submenu>
<el-menu-item-group title="Group 2"> </template>
<el-menu-item index="1-3">Option 3</el-menu-item> <template v-else>
</el-menu-item-group> <el-menu-item :index="item.index" :key="item.index">
<el-submenu index="1-4"> <i :class="item.icon"></i>{{ item.title }}
<template slot="title">Option4</template> </el-menu-item>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item> </template>
</el-submenu> </template>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu> </el-menu>
</el-aside>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
items: [
{
title: '教培项目',
icon: 'el-icon-message',
index: '1',
subs: [
{
title: '项目组件',
icon: 'el-icon-message',
index: 'item-component',
subs: []
},
{
title: '项目管理',
icon: 'el-icon-message',
index: 'item-manager',
subs: []
}
]
},{
title: '系统管理',
icon: 'el-icon-menu',
index: '2',
subs: [
{
title: '角色管理',
icon: 'el-icon-menu',
index: '2',
icon: 'el-icon-menu'
}
]
}
]
}
},
computed: {
onRoutes() {
return this.$route.path.replace('/', '');
}
}
} }
</script> </script>
<style> <style lang="scss">
.slidebar-container { .slidebar-container {
position: fixed; display: block;
position: absolute;
left: 0; left: 0;
top: 80px; top: 70px;
bottom: 0;
width: 225px;
background: #EAEEF5;
.el-menu {
background: #EAEEF5;
}
} }
</style> </style>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或