|
|
|
@ -1,20 +1,35 @@ |
|
|
|
<template> |
|
|
|
<el-container class="home-container" > |
|
|
|
<el-header class="navigation"> |
|
|
|
<div> |
|
|
|
<!-- <img src="../assets/images/logo.png" /> --> |
|
|
|
<span>贷后监管系统</span> |
|
|
|
<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-button type="info" @click="logout" class="butt">退出</el-button> |
|
|
|
</el-header> |
|
|
|
<el-container > |
|
|
|
<el-container> |
|
|
|
<!-- 当打开左侧菜单时 宽度为200, 当不打开时为默认值--> |
|
|
|
<el-aside :width="isCollapse ? '64px' : '200px' " class="sidemenu"> |
|
|
|
<el-aside width="212px" class="sidemenu"> |
|
|
|
<!-- 这是左侧菜单--> |
|
|
|
|
|
|
|
<!--定义折叠项--> |
|
|
|
<div class="leftCollapse" @click="collspseClick" style="background-color: #55557f ;color: #000000;">|||</div> |
|
|
|
|
|
|
|
<!-- |
|
|
|
1.background-color="#2C3E50" |
|
|
|
2.text-color="#fff" 文本颜色 |
|
|
|
@ -25,185 +40,332 @@ |
|
|
|
7.default-active 默认选中的菜单 |
|
|
|
8.router 启动以path路径当做请求地址 |
|
|
|
--> |
|
|
|
|
|
|
|
<el-menu background-color="#55557f" text-color="#ffffff" |
|
|
|
active-text-color="#ffff00" |
|
|
|
unique-opened |
|
|
|
:collapse="isCollapse" :collapse-transition="isCollapseTransition" router :default-active="defaultActive"> |
|
|
|
|
|
|
|
<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" |
|
|
|
> |
|
|
|
<!-- 定义一级菜单 --> |
|
|
|
<el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id"> |
|
|
|
<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-star-on"></i> |
|
|
|
<i class="el-icon-menu"></i> |
|
|
|
<!-- 定义菜单名称--> |
|
|
|
<span>{{menu.name}}</span> |
|
|
|
<span>{{ menu.name }}</span> |
|
|
|
</template> |
|
|
|
<!-- 定义二级菜单 --> |
|
|
|
<el-menu-item :index="childrenMenu.path" v-for="childrenMenu in menu.children" :key="childrenMenu.id" |
|
|
|
@click="defaultActiveMenu(childrenMenu.path)"> |
|
|
|
<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-menu"></i> |
|
|
|
<span>{{childrenMenu.name}}</span> |
|
|
|
<i class="el-icon-help "></i> |
|
|
|
<span>{{ childrenMenu.name }}</span> |
|
|
|
</template> |
|
|
|
</el-menu-item> |
|
|
|
</el-submenu> |
|
|
|
</div> |
|
|
|
|
|
|
|
</el-menu> |
|
|
|
</el-aside> |
|
|
|
|
|
|
|
<!-- 定义主页面结构--> |
|
|
|
<el-main> |
|
|
|
<!-- <el-container class="home-container"> |
|
|
|
<el-container> |
|
|
|
<!-- 定义主页面结构--> |
|
|
|
<el-main style="margin-top: -10px"> |
|
|
|
<!-- <el-container class="home-container"> |
|
|
|
|
|
|
|
</el-container> --> |
|
|
|
<!-- 定义路由展现页面--> |
|
|
|
<router-view></router-view> |
|
|
|
</el-main> |
|
|
|
<!-- 定义路由展现页面--> |
|
|
|
<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() |
|
|
|
created() { |
|
|
|
this.getMenuList(); |
|
|
|
// 设定模式选中按钮 |
|
|
|
this.defaultActive = window.sessionStorage.getItem('activeMenu') |
|
|
|
this.defaultActive = window.sessionStorage.getItem("activeMenu"); |
|
|
|
}, |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
menuList: [], |
|
|
|
menuIcon: { |
|
|
|
1: 'iconfont iconuser', |
|
|
|
3: 'iconfont iconshangpin', |
|
|
|
5: 'iconfont iconicon--copy', |
|
|
|
7: 'iconfont iconquanxian', |
|
|
|
8: 'iconfont iconziyuan' |
|
|
|
1: "iconfont iconuser", |
|
|
|
3: "iconfont iconshangpin", |
|
|
|
5: "iconfont iconicon--copy", |
|
|
|
7: "iconfont iconquanxian", |
|
|
|
8: "iconfont iconziyuan", |
|
|
|
}, |
|
|
|
// 定义是否折叠 |
|
|
|
isCollapse: false, |
|
|
|
// 是否展现折叠动态效果 |
|
|
|
isCollapseTransition: false, |
|
|
|
// 定义默认高亮 |
|
|
|
defaultActive: '', |
|
|
|
user: '' |
|
|
|
|
|
|
|
} |
|
|
|
defaultActive: "", |
|
|
|
user: "", |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
logout () { |
|
|
|
logout() { |
|
|
|
// 1.删除session中的记录 |
|
|
|
window.sessionStorage.clear() |
|
|
|
window.sessionStorage.clear(); |
|
|
|
// 2.要求跳转到用户登录页面 |
|
|
|
this.$router.push('/login') |
|
|
|
this.$router.push("/login"); |
|
|
|
}, |
|
|
|
async getMenuList () { |
|
|
|
async getMenuList() { |
|
|
|
// 1.查询左侧菜单 |
|
|
|
const { data: result } = |
|
|
|
await this.$http.get('/rights/getRightsList') |
|
|
|
if (result.status !== 200) return this.$message.error('获取权限列表失败') |
|
|
|
this.menuList = result.data |
|
|
|
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 |
|
|
|
collspseClick() { |
|
|
|
this.isCollapse = !this.isCollapse; |
|
|
|
}, |
|
|
|
defaultActiveMenu (activeMenu) { |
|
|
|
defaultActiveMenu(activeMenu) { |
|
|
|
// 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory |
|
|
|
window.sessionStorage.setItem('activeMenu', activeMenu) |
|
|
|
this.defaultActive = activeMenu |
|
|
|
} |
|
|
|
window.sessionStorage.setItem("activeMenu", activeMenu); |
|
|
|
this.defaultActive = activeMenu; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
mounted () { |
|
|
|
mounted() { |
|
|
|
// this.user = window.sessionStorage.getItem('token').substr(32) |
|
|
|
this.user = "9a3860f0f2af471982e919657099913dddd" |
|
|
|
} |
|
|
|
} |
|
|
|
this.user = "9a3860f0f2af471982e919657099913dddd"; |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<!-- 防止样式重叠 --> |
|
|
|
<style lang="less" scoped> |
|
|
|
.el-header { |
|
|
|
background-color: #55ffff; |
|
|
|
display: flex; //灵活的盒子容器 |
|
|
|
justify-content: space-between; //左右对齐 |
|
|
|
align-items: center; //文本元素居中对齐 |
|
|
|
color: #232323; //设定字体颜色 |
|
|
|
padding-left: 1px; |
|
|
|
|
|
|
|
>div { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
span { |
|
|
|
margin-left: 15px; |
|
|
|
font-size: 25px; //设定字体高度 |
|
|
|
} |
|
|
|
} |
|
|
|
/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; |
|
|
|
} |
|
|
|
.el-aside { |
|
|
|
background-color: #55007f; |
|
|
|
|
|
|
|
.el-menu { |
|
|
|
border-right: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-aside { |
|
|
|
background-color: #55007f; |
|
|
|
.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; |
|
|
|
|
|
|
|
.el-menu { |
|
|
|
border-right: none; |
|
|
|
&:hover { |
|
|
|
background: rgba(0, 0, 0, 0.025); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-main { |
|
|
|
background-color: #EEEEEE; |
|
|
|
.breadcrumb-container { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
color: #fff; |
|
|
|
font-size: 26px; |
|
|
|
line-height: 58px; |
|
|
|
margin: 0; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
.home-container { |
|
|
|
.right-menu { |
|
|
|
float: right; |
|
|
|
height: 100%; |
|
|
|
width: 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; |
|
|
|
} |
|
|
|
|
|
|
|
.iconfont { |
|
|
|
margin-right: 8px; |
|
|
|
.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); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// 导航栏渐变 |
|
|
|
.navigation{ |
|
|
|
background:linear-gradient(45deg,#55557f,#ffffff); |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
// 按钮 |
|
|
|
.butt{ |
|
|
|
.butt { |
|
|
|
background-color: #cecece; |
|
|
|
border-color: #cecece; |
|
|
|
|
|
|
|
border-color: #cecece; |
|
|
|
} |
|
|
|
.sidemenu{ |
|
|
|
.sidemenu { |
|
|
|
background-color: #55557f; |
|
|
|
} |
|
|
|
//定义折叠项 |
|
|
|
.leftCollapse { |
|
|
|
//设定背景色 |
|
|
|
background-color: #708090; |
|
|
|
//定义字体大小 |
|
|
|
font-size: 10px; |
|
|
|
//定义行高 |
|
|
|
line-height: 30px; |
|
|
|
//定义颜色 |
|
|
|
color: #FFFFFF; |
|
|
|
//设置居中 |
|
|
|
//定义折叠项 |
|
|
|
.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; |
|
|
|
//设定字符间距 |
|
|
|
letter-spacing: 4px; |
|
|
|
//鼠标放上之后设置为小手 |
|
|
|
cursor: pointer; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
color: #ffffff; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
.el-icon-star-on{ |
|
|
|
color: white; |
|
|
|
} |
|
|
|
.el-icon-menu{ |
|
|
|
color: white; |
|
|
|
} |
|
|
|
a:last-child { |
|
|
|
border: 0; |
|
|
|
background-color: #087dba; |
|
|
|
} |
|
|
|
} |
|
|
|
.home-left{ |
|
|
|
height: 100%; |
|
|
|
.one-title{ |
|
|
|
margin-top: 40px; |
|
|
|
.el-menu-item i { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
fengdong777
2 years ago
