|
|
|
@ -1,19 +1,47 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="navbar"> |
|
|
|
<p class="breadcrumb-container"><img src="@/assets/loginImg/logo.png" style="width: 45px;height: 45px;margin-right: 10px;"/>汇融云眼贷后监管平台</p> |
|
|
|
<p class="breadcrumb-container"><img src="@/assets/loginImg/logo.png" |
|
|
|
style="width: 45px;height: 45px;margin-right: 10px;" />汇融云眼贷后监管平台</p> |
|
|
|
<!-- <h3 class="breadcrumb-container">汇融银行供应链贷后监管平台</h3> --> |
|
|
|
<div class="right-menu"> |
|
|
|
<!-- <p>{{Orgname}} {{departmentName}} 欢迎, {{name}}</p>--> |
|
|
|
<p>欢迎您，{{name}}</p> |
|
|
|
<el-badge :value="6" class="item"> |
|
|
|
<img src="@/assets/images/info.png"> |
|
|
|
<img src="@/assets/images/info.png" @click="getMessageInfoList"> |
|
|
|
</el-badge> |
|
|
|
<!-- <img src="@/assets/images/dy.png" @click="logout"> --> |
|
|
|
<span class="backToHome" @click="logout"><i class="el-icon-back"></i>返回首页</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-footer class="footer" height="40px">Copyright © {{ year }} 技术支持集团 All Rights Reserved</el-footer> |
|
|
|
|
|
|
|
<div v-show="visible"> |
|
|
|
<div class="webswrap" @click="handleReturn()"></div> |
|
|
|
<div class="webs"> |
|
|
|
<div class="closes" @click="handleReturn()"> |
|
|
|
<span class="el-icon-circle-close close"></span> |
|
|
|
</div> |
|
|
|
<div class="web tabgongzuo-form"> |
|
|
|
<el-tabs v-model="activeTypeName" @tab-click="xiaoxiTypeClick"> |
|
|
|
<el-tab-pane v-for="(ite, index) in xiaoxiType" :key="index" :label="ite.label" :name="ite.value"> |
|
|
|
<div class="lanmus"> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, indedx) in list" :key="indedx"> |
|
|
|
<div style="border:1px red solid;width:23px;height:23px"> |
|
|
|
<image src="/image/yujing.jpg" width="100%" /> |
|
|
|
</div> |
|
|
|
<div class="btnbox" @click.stop.prevent="LookDetils(item)"> |
|
|
|
{{ item.messageContent }}--{{item.createTime}} |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -21,6 +49,20 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeTypeName: 0, |
|
|
|
xiaoxiType: [ |
|
|
|
{ label: '已读', value: '1' }, |
|
|
|
{ label: '未读', value: '2' } |
|
|
|
], |
|
|
|
list: [ |
|
|
|
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, |
|
|
|
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, |
|
|
|
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, |
|
|
|
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, |
|
|
|
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, |
|
|
|
{ messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, |
|
|
|
], |
|
|
|
visible: false, |
|
|
|
Orgname: '', |
|
|
|
departmentName: '', |
|
|
|
name: '', |
|
|
|
@ -37,6 +79,17 @@ |
|
|
|
this.year = nowDate.getFullYear() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
xiaoxiTypeClick(tab, event) { |
|
|
|
console.log('77777777777777', tab, event) |
|
|
|
this.$set(this, 'activeTypeName', tab.name) |
|
|
|
// this.getList(tab.name) |
|
|
|
}, |
|
|
|
handleReturn() { |
|
|
|
this.visible = false; |
|
|
|
}, |
|
|
|
getMessageInfoList() { |
|
|
|
this.visible = true |
|
|
|
}, |
|
|
|
logout() { |
|
|
|
// this.$router.push({ path: '/home' }) |
|
|
|
window.opener = null |
|
|
|
@ -168,15 +221,172 @@ |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
::v-deep .el-badge__content{position: relative; |
|
|
|
|
|
|
|
::v-deep .el-badge__content { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
height: 20px; |
|
|
|
line-height: 20px; |
|
|
|
padding: 0 6px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-badge__content.is-fixed { |
|
|
|
position: absolute; |
|
|
|
top: 17px; |
|
|
|
right: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.app-web { |
|
|
|
z-index: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.webswrap { |
|
|
|
background-color: rgba(51, 51, 48, 0.6); |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.webs { |
|
|
|
z-index: 1000; |
|
|
|
/* background: url('/dapingmu/dapingmu_box.png') center top no-repeat; |
|
|
|
background-size: 100% 100%; */ |
|
|
|
background-image: linear-gradient(#7c070a, #7b060a, #7c070a) !important; |
|
|
|
/* background-image: linear-gradient( |
|
|
|
to right, |
|
|
|
rgba(105,3,6,0.9) 0%, |
|
|
|
rgba(123,6,10,0.9) 25%, |
|
|
|
rgba(123,6,10,0.9) 75%, |
|
|
|
rgba(105,3,6,0.9) 100%); */ |
|
|
|
// border: 1px solid #9c070c; |
|
|
|
border: 1px solid #9c4f07; |
|
|
|
position: fixed; |
|
|
|
top: 50px; |
|
|
|
right: 10px; |
|
|
|
bottom: 10px; |
|
|
|
/* bottom: 10px; */ |
|
|
|
overflow-y: auto !important; |
|
|
|
overflow-x: hidden; |
|
|
|
width: 300px; |
|
|
|
min-height: 400px; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.top { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
border-bottom: 1px solid #9c070c; |
|
|
|
} |
|
|
|
|
|
|
|
.top .title { |
|
|
|
color: #f7ee02; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.closes { |
|
|
|
text-align: right; |
|
|
|
padding: 10px; |
|
|
|
position: absolute; |
|
|
|
right: 10px; |
|
|
|
top: 10px; |
|
|
|
z-index: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.close { |
|
|
|
font-size: 18px; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.web { |
|
|
|
padding: 10px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* .lanmus{border-bottom: 1px solid #9c070c;} */ |
|
|
|
ul, |
|
|
|
li { |
|
|
|
list-style: none; |
|
|
|
} |
|
|
|
|
|
|
|
.lanmus ul { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
/* display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start; */ |
|
|
|
} |
|
|
|
|
|
|
|
.lanmus li { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: nowrap; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
color: #fae1e1; |
|
|
|
text-align: left; |
|
|
|
border-bottom: 1px solid #9f0608 !important; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.lanmus li .iconfont {} |
|
|
|
|
|
|
|
.lanmus li .btnbox { |
|
|
|
flex: 1; |
|
|
|
/* background-image: linear-gradient(#7c070a, #7b060a, #7c070a) !important; border-radius: 10px;*/ |
|
|
|
/* border-bottom: 1px solid #9f0608 !important; */ |
|
|
|
font-size: 12px; |
|
|
|
color: #fae1e1; |
|
|
|
margin: 5px; |
|
|
|
text-align: left; |
|
|
|
padding: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.lanmus li .btnbox:hover { |
|
|
|
background-image: linear-gradient(#7b060a, #9c070c, #7b060a) !important; |
|
|
|
|
|
|
|
color: #f7ebc3; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* el-tabs样式 */ |
|
|
|
.tabgongzuo-form { |
|
|
|
/* padding: 0; */ |
|
|
|
color: #4cc6f4; |
|
|
|
|
|
|
|
>>>.el-tabs__nav-wrap::after { |
|
|
|
background-color: #aa1e0a !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* 设置滑块颜色 */ |
|
|
|
>>>.el-tabs__active-bar { |
|
|
|
background-color: #13fbfe !important; |
|
|
|
color: #13fbfe !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* 设置滑块停止位置 */ |
|
|
|
>>>.el-tabs__active-bar.is-top { |
|
|
|
position: absolute !important; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
/* 设置当前选中样式 */ |
|
|
|
>>>.el-tabs__item.is-active { |
|
|
|
color: #13fbfe !important; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
|
|
|
|
/* 设置未被选中样式 */ |
|
|
|
>>>.el-tabs__item { |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative !important; |
|
|
|
color: #fff !important; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
1181364@qq.com
2 years ago
