parent
f715901fbe
commit
6eee07b078
4 changed files with 232 additions and 0 deletions
@ -0,0 +1,58 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="nav"> |
||||
<h6>商业银行系统</h6> |
||||
<navbar></navbar> |
||||
</div> |
||||
<div class="manage-layout"> |
||||
<div class="manage-content"> |
||||
<router-view class="manage-view"></router-view> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import navbar from '../navbar' |
||||
import { mapState } from 'vuex' |
||||
export default { |
||||
name: 'index', |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
components: { |
||||
navbar, |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap{ |
||||
display: flex; |
||||
min-width: 1300px; |
||||
min-height: 100%; |
||||
// overflow: hidden; |
||||
.nav{ |
||||
width: 270px; |
||||
} |
||||
.manage-layout{ |
||||
width: calc(100% - 270px); |
||||
.manage-content{ |
||||
height: calc(100vh - 80px); |
||||
padding: 24px 24px 0; |
||||
overflow: auto; |
||||
.view{ |
||||
min-height: calc(100% - 60px); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,27 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapState } from 'vuex' |
||||
export default { |
||||
name: 'index', |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,144 @@ |
||||
<template> |
||||
<div> |
||||
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#141414" text-color="#fff" active-text-color="#fff" unique-opened> |
||||
<template v-for="item in menus"> |
||||
<template v-if="item.children"> |
||||
<el-submenu :index="item.index" :key="item.index"> |
||||
<template slot="title"> |
||||
<i :class="item.icon"></i> |
||||
<span slot="title">{{ item.title }}</span> |
||||
</template> |
||||
<template v-for="subItem in item.children"> |
||||
<el-submenu |
||||
v-if="subItem.children" |
||||
:index="subItem.index" |
||||
:key="subItem.index" |
||||
> |
||||
<template slot="title">{{ subItem.title }}</template> |
||||
<el-menu-item |
||||
v-for="(threeItem,i) in subItem.children" |
||||
:key="i" |
||||
:index="threeItem.index" |
||||
>{{ threeItem.title }}</el-menu-item> |
||||
</el-submenu> |
||||
<el-menu-item |
||||
v-else |
||||
:index="subItem.index" |
||||
:key="subItem.index" |
||||
>{{ subItem.title }}</el-menu-item> |
||||
</template> |
||||
</el-submenu> |
||||
</template> |
||||
<template v-else> |
||||
<el-menu-item :index="item.index" :key="item.index"> |
||||
<i :class="item.icon"></i> |
||||
<span slot="title">{{ item.title }}</span> |
||||
</el-menu-item> |
||||
</template> |
||||
</template> |
||||
</el-menu> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapState } from 'vuex' |
||||
import bus from '@/libs/bus'; |
||||
import Setting from '@/setting'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
menus: [ |
||||
{ |
||||
icon: 'menu-icon icon-index', |
||||
index: '/index/list', |
||||
title: '客户信息', |
||||
children: [ |
||||
{ |
||||
index: '/index/list1', |
||||
title: '个人客户信息建立', |
||||
},{ |
||||
index: '/index/list2', |
||||
title: '公司客户信息建立', |
||||
}, |
||||
] |
||||
},{ |
||||
icon: 'menu-icon icon-index', |
||||
index: '/index/list3', |
||||
title: '个人业务', |
||||
}, |
||||
], |
||||
} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.nav{ |
||||
height: 100%; |
||||
background-color: #141414; |
||||
overflow: auto; |
||||
.logo{ |
||||
padding: 20px 0; |
||||
text-align: center; |
||||
} |
||||
/deep/.el-menu{ |
||||
border-right: 0 !important; |
||||
.el-menu-item{ |
||||
display: flex; |
||||
align-items: center; |
||||
&.is-active{ |
||||
background-color: #CC221C !important; |
||||
} |
||||
// .menu-icon{ |
||||
// width: 24px; |
||||
// height: 24px; |
||||
// margin-right: 12px; |
||||
// background: url(../../assets/img/home.png) no-repeat; |
||||
// &.icon-ques{ |
||||
// background-image: url(../../assets/img/ques.png); |
||||
// } |
||||
// &.icon-testpaper{ |
||||
// background-image: url(../../assets/img/paper.png); |
||||
// } |
||||
// &.icon-practise{ |
||||
// background-image: url(../../assets/img/practise.png); |
||||
// } |
||||
// &.icon-exam{ |
||||
// background-image: url(../../assets/img/exam.png); |
||||
// } |
||||
// &.icon-ache{ |
||||
// background-image: url(../../assets/img/ache.png); |
||||
// } |
||||
// &.icon-msg{ |
||||
// background-image: url(../../assets/img/msg.png); |
||||
// } |
||||
// &.icon-student{ |
||||
// background-image: url(../../assets/img/student.png); |
||||
// } |
||||
// &.icon-system{ |
||||
// background-image: url(../../assets/img/system.png); |
||||
// } |
||||
// } |
||||
// span{ |
||||
// font-size: 15px; |
||||
// } |
||||
// } |
||||
} |
||||
} |
||||
|
||||
.sidebar::-webkit-scrollbar { |
||||
width: 0; |
||||
} |
||||
.sidebar-el-menu:not(.el-menu--collapse) { |
||||
width: 100%; |
||||
} |
||||
.sidebar > ul { |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue