You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
386 lines
8.8 KiB
386 lines
8.8 KiB
<template>
|
|
<el-container class="home-container">
|
|
<el-header>
|
|
<div class="navbar">
|
|
<p class="breadcrumb-container">
|
|
<img
|
|
src="@/assets/logo.png"
|
|
style="
|
|
width: 45px;
|
|
height: 45px;
|
|
margin-right: 10px;
|
|
margin-top: 2px;
|
|
"
|
|
/>汇融云眼贷后监管平台
|
|
</p>
|
|
<!-- <h3 class="breadcrumb-container">汇融供应链贷后监管平台h3> -->
|
|
<div class="right-menu">
|
|
<!-- <p>{{Orgname}} {{departmentName}} 欢迎, {{name}}</p>-->
|
|
<p>欢迎您, 系统管理员</p>
|
|
<img src="@/assets/images/info.png" />
|
|
<!-- <img src="@/assets/images/dy.png" @click="logout"> -->
|
|
<span class="backToHome" @click="logout"
|
|
><i class="el-icon-back"></i>返回首页</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
<el-container>
|
|
<!-- 当打开左侧菜单时 宽度为200, 当不打开时为默认值-->
|
|
<el-aside width="212px" class="sidemenu">
|
|
<!-- 这是左侧菜单-->
|
|
|
|
<!--
|
|
1.background-color="#2C3E50"
|
|
2.text-color="#fff" 文本颜色
|
|
3.active-text-color="#4094ff"
|
|
4.unique-opened=true 是否只打开一个菜单
|
|
5.collapse 是否折叠
|
|
6.collapse-transition 折叠时是否展现动画效果
|
|
7.default-active 默认选中的菜单
|
|
8.router 启动以path路径当做请求地址
|
|
-->
|
|
<div class="home-box">
|
|
<a
|
|
href="javascript:window.opener=null;window.open('','_self');window.close();"
|
|
class="text-center"
|
|
>平台首页</a
|
|
>
|
|
<a href="javascript:void(0);" class="text-center">仓库集控</a>
|
|
</div>
|
|
<el-menu
|
|
background-color="#0294d7"
|
|
text-color="#ffffff"
|
|
active-text-color="#fff"
|
|
unique-opened
|
|
router
|
|
:default-active="defaultActive"
|
|
class="home-left"
|
|
>
|
|
<!-- 定义一级菜单 -->
|
|
<div class="one-title">
|
|
<el-submenu
|
|
:index="menu.id + ''"
|
|
v-for="menu in menuList"
|
|
:key="menu.id"
|
|
>
|
|
<!-- 定义一级菜单模版 -->
|
|
<template slot="title">
|
|
<!-- 定义左侧图标-->
|
|
<!-- <i :class="menuIcon[menu.id]"></i> -->
|
|
<i class="el-icon-menu"></i>
|
|
<!-- 定义菜单名称-->
|
|
<span>{{ menu.name }}</span>
|
|
</template>
|
|
<!-- 定义二级菜单 -->
|
|
<el-menu-item
|
|
:index="childrenMenu.path"
|
|
v-for="childrenMenu in menu.children"
|
|
:key="childrenMenu.id"
|
|
@click="defaultActiveMenu(childrenMenu.path)"
|
|
>
|
|
<template slot="title">
|
|
<i class="el-icon-help "></i>
|
|
<span>{{ childrenMenu.name }}</span>
|
|
</template>
|
|
</el-menu-item>
|
|
</el-submenu>
|
|
</div>
|
|
|
|
</el-menu>
|
|
</el-aside>
|
|
<el-container>
|
|
<!-- 定义主页面结构-->
|
|
<el-main style="margin-top: -10px">
|
|
<!-- <el-container class="home-container">
|
|
|
|
</el-container> -->
|
|
<!-- 定义路由展现页面-->
|
|
<router-view></router-view>
|
|
</el-main>
|
|
<el-footer class="footer" height="40px"
|
|
>Copyright © 技术支持集团 All Rights Reserved</el-footer
|
|
>
|
|
</el-container>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
// 初始化函数
|
|
created () {
|
|
this.getMenuList()
|
|
// 设定模式选中按钮
|
|
this.defaultActive = window.sessionStorage.getItem('activeMenu')
|
|
},
|
|
data () {
|
|
return {
|
|
menuList: [],
|
|
menuIcon: {
|
|
1: 'iconfont iconuser',
|
|
3: 'iconfont iconshangpin',
|
|
5: 'iconfont iconicon--copy',
|
|
7: 'iconfont iconquanxian',
|
|
8: 'iconfont iconziyuan'
|
|
},
|
|
// 定义默认高亮
|
|
defaultActive: '',
|
|
user: ''
|
|
}
|
|
},
|
|
methods: {
|
|
logout () {
|
|
window.opener = null
|
|
window.open('about:blank', '_top').close()
|
|
},
|
|
async getMenuList () {
|
|
// 1.查询左侧菜单
|
|
const { data: result } = await this.$http.get('/rights/getRightsList')
|
|
if (result.status !== 200) return this.$message.error('获取权限列表失败')
|
|
this.menuList = result.data
|
|
},
|
|
// 设定左侧折叠展开效果
|
|
collspseClick () {
|
|
this.isCollapse = !this.isCollapse
|
|
},
|
|
defaultActiveMenu (activeMenu) {
|
|
// 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
|
|
window.sessionStorage.setItem('activeMenu', activeMenu)
|
|
this.defaultActive = activeMenu
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
// this.user = window.sessionStorage.getItem('token').substr(32)
|
|
this.user = '9a3860f0f2af471982e919657099913dddd'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- 防止样式重叠 -->
|
|
<style lang="less" scoped>
|
|
/deep/ [data-v-8dc7cce2] .el-submenu__title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
color: #303133;
|
|
cursor: pointer;
|
|
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
|
|
box-sizing: border-box;
|
|
}
|
|
/deep/ .el-submenu .el-menu-item {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding: 0 45px;
|
|
min-width: 200px;
|
|
}
|
|
/deep/ .el-menu-item.is-active {
|
|
color: #fff;
|
|
background-color: #087dba!important;
|
|
}
|
|
/deep/ .el-submenu__title i {
|
|
color: #fff;
|
|
}
|
|
|
|
/deep/ .el-submenu__title {
|
|
height: 40px !important;
|
|
line-height: 40px !important;
|
|
font-size: 15px!important;
|
|
}
|
|
|
|
/deep/ .el-submenu .el-menu-item {
|
|
height: 40px !important;
|
|
line-height: 40px !important;
|
|
}
|
|
|
|
/deep/ .el-menu-item {
|
|
height: 40px !important;
|
|
line-height: 40px !important;
|
|
font-size: 15px!important;
|
|
}
|
|
.el-aside {
|
|
background-color: #55007f;
|
|
|
|
.el-menu {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
.el-main {
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
.home-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.iconfont {
|
|
margin-right: 8px;
|
|
}
|
|
// 导航栏渐变
|
|
.navbar {
|
|
width: 100%;
|
|
height: 60px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin-left: -20px;
|
|
background-color: #0294d7;
|
|
padding: 0 30px;
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
|
|
.hamburger-container {
|
|
line-height: 46px;
|
|
height: 100%;
|
|
float: left;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.025);
|
|
}
|
|
}
|
|
|
|
.breadcrumb-container {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 26px;
|
|
line-height: 58px;
|
|
margin: 0;
|
|
float: left;
|
|
}
|
|
|
|
.right-menu {
|
|
float: right;
|
|
height: 100%;
|
|
margin-right: 20px;
|
|
line-height: 55px;
|
|
color: #fff;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
p {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
margin: 0 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.backToHome {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
padding: 0 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.backToHome:hover {
|
|
background: #087dba;
|
|
}
|
|
|
|
.right-menu-item {
|
|
display: inline-block;
|
|
padding: 0 8px;
|
|
height: 100%;
|
|
font-size: 18px;
|
|
color: #5a5e66;
|
|
vertical-align: text-bottom;
|
|
|
|
&.hover-effect {
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.025);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 按钮
|
|
.butt {
|
|
background-color: #cecece;
|
|
border-color: #cecece;
|
|
}
|
|
.sidemenu {
|
|
background-color: #55557f;
|
|
}
|
|
//定义折叠项
|
|
.leftCollapse {
|
|
//设定背景色
|
|
background-color: #708090;
|
|
//定义字体大小
|
|
font-size: 10px;
|
|
//定义行高
|
|
line-height: 30px;
|
|
//定义颜色
|
|
color: #ffffff;
|
|
//设置居中
|
|
text-align: center;
|
|
//设定字符间距
|
|
letter-spacing: 4px;
|
|
//鼠标放上之后设置为小手
|
|
cursor: pointer;
|
|
}
|
|
.el-icon-star-on {
|
|
color: white;
|
|
}
|
|
.el-icon-menu {
|
|
color: white;
|
|
}
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
line-height: 40px;
|
|
background: #e9f1f7;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-left: -211px;
|
|
}
|
|
.home-box {
|
|
position: fixed;
|
|
top: 60px;
|
|
left: 0;
|
|
background-color: #0294d7;
|
|
border: 1px solid #087dba;
|
|
line-height: 40px;
|
|
width: 210px;
|
|
z-index: 1000;
|
|
a {
|
|
display: inline-block;
|
|
line-height: 40px;
|
|
box-sizing: border-box;
|
|
width: 50%;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
}
|
|
a:last-child {
|
|
border: 0;
|
|
background-color: #087dba;
|
|
}
|
|
}
|
|
.home-left{
|
|
height: 100%;
|
|
.one-title{
|
|
margin-top: 40px;
|
|
.el-menu-item i {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|