juwei001
2 years ago
21 changed files with 34800 additions and 1506 deletions
File diff suppressed because it is too large
@ -0,0 +1,879 @@ |
|||
|
|||
.darkDialog { |
|||
/deep/ .el-dialog { |
|||
width: 987px; |
|||
// height: 775px; |
|||
background: transparent; |
|||
border: none; |
|||
box-shadow: none; |
|||
.el-dialog__header { |
|||
border: none !important; |
|||
padding: 0px !important; |
|||
.el-dialog__headerbtn { |
|||
width: 36px; |
|||
height: 36px; |
|||
background-image: url(../images/guanbi.png); |
|||
|
|||
top: -10px; |
|||
right: -15px; |
|||
.el-dialog__close { |
|||
display: none; |
|||
} |
|||
} |
|||
.dialogTitle { |
|||
@include toe; |
|||
position: relative; |
|||
font-size: 20px; |
|||
line-height: 20px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
padding: 26px 20px 10px 54px; |
|||
background-image: url(../images/ding.png); |
|||
background-size: 100% 100%; |
|||
|
|||
.title_img { |
|||
position: absolute; |
|||
left: 29px; |
|||
width: 22px; |
|||
height: 22px; |
|||
background-image: url(../images/xiaobiaoti.png); |
|||
float: left; |
|||
} |
|||
} |
|||
} |
|||
.el-dialog__body { |
|||
border: none !important; |
|||
padding: 0px; |
|||
width: 100%; |
|||
background-image: url(../images/zhong.png); |
|||
background-size: 100%; |
|||
max-height: 630px; |
|||
overflow-y: auto; |
|||
@include scrollBar; |
|||
.dialogBody { |
|||
padding: 20px 50px 10px 53px; |
|||
|
|||
.bigTitle { |
|||
font-size: 30px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
|
|||
background: linear-gradient(0deg, #009dff 0%, #ffffff 100%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
text-align: center; |
|||
margin-bottom: 48px; |
|||
} |
|||
.view { |
|||
color: #ffc821; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
.el-dialog__footer { |
|||
padding: 0px !important; |
|||
|
|||
.dialogFooter { |
|||
height: 40px; |
|||
background-position: bottom; |
|||
width: 100%; |
|||
background-image: url(../images/dibu.png); |
|||
background-size: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.darkDialog-tvwall { |
|||
/deep/ .el-dialog { |
|||
width: 987px; |
|||
// height: 775px; |
|||
background: transparent; |
|||
border: none; |
|||
box-shadow: none; |
|||
.el-dialog__header { |
|||
border: none !important; |
|||
padding: 0px !important; |
|||
.el-dialog__headerbtn { |
|||
width: 36px; |
|||
height: 36px; |
|||
background-image: url(../images/guanbi.png); |
|||
|
|||
top: -10px; |
|||
right: -15px; |
|||
.el-dialog__close { |
|||
display: none; |
|||
} |
|||
} |
|||
.dialogTitle { |
|||
@include toe; |
|||
position: relative; |
|||
font-size: 20px; |
|||
line-height: 20px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
padding: 16px 20px 0px 54px; |
|||
background-image: url(../images/ding.png); |
|||
background-size: 100% 100%; |
|||
|
|||
.title_img { |
|||
position: absolute; |
|||
left: 29px; |
|||
width: 22px; |
|||
height: 22px; |
|||
background-image: url(../images/xiaobiaoti.png); |
|||
float: left; |
|||
} |
|||
} |
|||
} |
|||
.el-dialog__body { |
|||
border: none !important; |
|||
padding: 0px; |
|||
width: 100%; |
|||
background-image: url(../images/zhong.png); |
|||
background-size: 100%; |
|||
max-height: 690px; |
|||
overflow-y: auto; |
|||
@include scrollBar; |
|||
.dialogBody { |
|||
padding: 20px 50px 0px 53px; |
|||
|
|||
.bigTitle { |
|||
font-size: 30px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
|
|||
background: linear-gradient(0deg, #009dff 0%, #ffffff 100%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
text-align: center; |
|||
margin-bottom: 48px; |
|||
} |
|||
.view { |
|||
color: #ffc821; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
.el-dialog__footer { |
|||
padding: 0px !important; |
|||
|
|||
.dialogFooter { |
|||
height: 30px; |
|||
background-position: bottom; |
|||
width: 100%; |
|||
background-image: url(../images/dibu.png); |
|||
background-size: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.m-info { |
|||
padding: 20px 0px 10px; |
|||
.userImg { |
|||
width: 130px; |
|||
height: 130px; |
|||
background: #020202; |
|||
border: 1px solid #007ae7; |
|||
border-radius: 10px; |
|||
object-fit: cover; |
|||
} |
|||
.info2 { |
|||
margin-top: 30px; |
|||
.item { |
|||
background-color: rgb(21, 57, 148); |
|||
margin: 10px 10px 10px 0px; |
|||
padding: 2px 0px; |
|||
} |
|||
.noMarginRight { |
|||
.item { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
} |
|||
.info_m_box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.center_box { |
|||
position: relative; |
|||
width: 192px; |
|||
height: 192px; |
|||
background: url(../images/renCen.png) no-repeat center; |
|||
color: #fff; |
|||
background-size: 100%; |
|||
section { |
|||
position: relative; |
|||
top: 113px; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
.line1 { |
|||
width: 150px; |
|||
height: 2px; |
|||
background: linear-gradient(to right, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 33px; |
|||
left: -154px; |
|||
transform: rotate3d(1, 1, 1, 21deg); |
|||
} |
|||
.line1_dot1 { |
|||
width: 74px; |
|||
height: 74px; |
|||
background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: -25px; |
|||
left: -222px; |
|||
} |
|||
.line1_dot2 { |
|||
width: 74px; |
|||
height: 74px; |
|||
background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 67px; |
|||
left: -318px; |
|||
} |
|||
.line1_dot3 { |
|||
width: 74px; |
|||
height: 74px; |
|||
background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 141px; |
|||
left: -103px; |
|||
} |
|||
.line2 { |
|||
width: 240px; |
|||
height: 2px; |
|||
background: linear-gradient(to right, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 106px; |
|||
left: -250px; |
|||
transform: rotate3d(1, 1, 1, 360deg); |
|||
} |
|||
.line3 { |
|||
width: 69px; |
|||
height: 2px; |
|||
background: linear-gradient(to right, #1f7eff, #080e58); |
|||
background: linear-gradient(to right, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 172px; |
|||
left: -47px; |
|||
transform: rotate3d(1, 1, 1, 296deg); |
|||
top: 150px; |
|||
left: -46px; |
|||
} |
|||
|
|||
.line1_r { |
|||
width: 150px; |
|||
height: 2px; |
|||
background: linear-gradient(to left, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 149px; |
|||
left: 182px; |
|||
transform: rotate3d(1, 1, 1, 21deg); |
|||
} |
|||
.line1_dot1_r { |
|||
width: 74px; |
|||
height: 74px; |
|||
background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 141px; |
|||
left: 330px; |
|||
} |
|||
.line1_dot2_r { |
|||
width: 74px; |
|||
height: 74px; |
|||
background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 6px; |
|||
left: 433px; |
|||
} |
|||
.line1_dot3_r { |
|||
width: 74px; |
|||
height: 74px; |
|||
background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: -28px; |
|||
left: 236px; |
|||
} |
|||
.line2_r { |
|||
width: 240px; |
|||
height: 2px; |
|||
background: linear-gradient(to left, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 73px; |
|||
left: 199px; |
|||
-webkit-transform: rotate3d(1, 1, 1, 360deg); |
|||
transform: rotate3d(1, 1, 1, 341deg); |
|||
} |
|||
.line3_r { |
|||
width: 69px; |
|||
height: 2px; |
|||
background: linear-gradient(to left, #1f7eff, #080e58); |
|||
background: linear-gradient(to left, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 172px; |
|||
left: -47px; |
|||
transform: rotate3d(1, 1, 1, 296deg); |
|||
top: 40px; |
|||
left: 187px; |
|||
} |
|||
/deep/ .item { |
|||
display: flex; |
|||
padding: 0px 0; |
|||
min-width: 50%; |
|||
line-height: 24px; |
|||
|
|||
.field { |
|||
min-width: 100px; |
|||
text-align: right; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #b5d9ff; |
|||
line-height: 32px; |
|||
opacity: 0.76; |
|||
} |
|||
.eventImg { |
|||
margin-top: 10px; |
|||
max-width: 80%; |
|||
max-height: 300px; |
|||
} |
|||
.tel { |
|||
width: 76px; |
|||
height: 24px; |
|||
display: inline-block; |
|||
margin-left: 10px; |
|||
cursor: pointer; |
|||
// background: rgba(2, 2, 2, 0.36); |
|||
// border: 1px solid #02afff; |
|||
// border-radius: 4px; |
|||
} |
|||
.icon { |
|||
width: 18px; |
|||
margin-right: 16px; |
|||
} |
|||
.value { |
|||
flex: 1; |
|||
width: 100%; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 32px; |
|||
} |
|||
.workIng { |
|||
color: #19ffe1; |
|||
} |
|||
.workEnd { |
|||
color: #ccc; |
|||
} |
|||
} |
|||
/deep/.fenge { |
|||
border-left: 1px dashed #007eff; |
|||
margin: 15px 0px; |
|||
height: 100%; |
|||
} |
|||
/deep/.timeline { |
|||
margin-top: 15px; |
|||
.sucess { |
|||
.el-timeline-item__node { |
|||
width: 16px; |
|||
height: 16px; |
|||
background-color: #0c81fe; |
|||
border: solid 3px #fff; |
|||
box-shadow: 0px 0px 10px 5px #0c81fe; |
|||
} |
|||
} |
|||
.el-timeline-item__node { |
|||
width: 16px; |
|||
height: 16px; |
|||
background: #09176c; |
|||
border: 1px solid #007ae7; |
|||
border-radius: 50%; |
|||
} |
|||
.el-timeline-item__tail { |
|||
left: 6px; |
|||
border-left: 1px solid #6398d1; |
|||
} |
|||
.status-box { |
|||
display: flex; |
|||
|
|||
.status2 { |
|||
width: 76px; |
|||
height: 24px; |
|||
background: #0c81fe; |
|||
border-radius: 10px 0px 10px 0px; |
|||
color: #fefefe; |
|||
text-align: center; |
|||
line-height: 24px; |
|||
} |
|||
.status1 { |
|||
width: 76px; |
|||
height: 24px; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #3d86ff; |
|||
line-height: 24px; |
|||
} |
|||
.timestamp { |
|||
width: 121px; |
|||
font-size: 12px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 300; |
|||
color: #b5d9ff; |
|||
line-height: 24px; |
|||
opacity: 0.46; |
|||
margin-left: 11px; |
|||
} |
|||
} |
|||
.content { |
|||
display: flex; |
|||
margin-top: 4px; |
|||
.field { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #b5d9ff; |
|||
line-height: 24px; |
|||
opacity: 0.76; |
|||
} |
|||
.value { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.borbto { |
|||
border-bottom: dashed 1px #ffffff; |
|||
} |
|||
|
|||
.m-info2 { |
|||
/deep/.item { |
|||
.field { |
|||
width: 80px; |
|||
} |
|||
} |
|||
} |
|||
.detail { |
|||
margin: 20px 30px 20px 35px; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 32px; |
|||
/deep/ img { |
|||
max-width: 100%; |
|||
} |
|||
} |
|||
.link { |
|||
color: rgba(#fff, 0.7); |
|||
margin: 10px 30px 10px 35px; |
|||
font-size: 16px; |
|||
line-height: 36px; |
|||
a { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.m-dangwu { |
|||
/deep/.dangwubox { |
|||
padding: 8px 0; |
|||
color: #fff; |
|||
border-bottom: dashed 1px #fff; |
|||
overflow: hidden; |
|||
|
|||
.dagnwuImg { |
|||
margin-right: 20px; |
|||
float: left; |
|||
width: 120px; |
|||
height: 90px; |
|||
background-color: #00023a; |
|||
border-radius: 8px; |
|||
img { |
|||
width: 120px; |
|||
height: 90px; |
|||
margin: 0 auto; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
.dagnwucontent { |
|||
width: calc(100% - 150px); |
|||
float: left; |
|||
line-height: 24px; |
|||
|
|||
h1 { |
|||
font-weight: normal; |
|||
font-size: 18px; |
|||
margin: 0px; |
|||
margin-bottom: 10px; |
|||
} |
|||
h2 { |
|||
font-weight: normal; |
|||
font-size: 16px; |
|||
color: #888; |
|||
margin: 0px; |
|||
} |
|||
h3 { |
|||
font-weight: normal; |
|||
font-size: 16px; |
|||
color: #888; |
|||
margin: 0px; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.m-table { |
|||
/deep/.el-table::before { |
|||
height: 0px; |
|||
} |
|||
/deep/.el-table__fixed-right::before { |
|||
height: 0px; |
|||
} |
|||
/deep/.el-table { |
|||
background-color: transparent; |
|||
.el-table__header { |
|||
thead tr { |
|||
background-color: transparent; |
|||
} |
|||
thead th { |
|||
background-color: transparent; |
|||
border-bottom: none !important; |
|||
text-align: center; |
|||
color: #b5d9ff; |
|||
font-weight: normal; |
|||
opacity: 0.76; |
|||
} |
|||
} |
|||
.el-table th.is-leaf { |
|||
} |
|||
.el-table__row { |
|||
background: transparent; |
|||
} |
|||
.el-table__row td { |
|||
background: rgb(13, 48, 148); |
|||
color: #fff; |
|||
padding: 10px !important; |
|||
border-bottom: none !important; |
|||
text-align: center; |
|||
} |
|||
.el-table__row.hover-row td, |
|||
.el-table__row.el-table__row--striped.hover-row td { |
|||
background: rgb(80, 112, 187); |
|||
} |
|||
.el-table__row.el-table__row--striped, |
|||
.el-table__row.el-table__row--striped td { |
|||
background-color: rgb(6, 10, 79); |
|||
} |
|||
} |
|||
/deep/.m-pagination { |
|||
flex-direction: row-reverse; |
|||
box-sizing: border-box; |
|||
margin-top: 24px; |
|||
width: 100%; |
|||
height: 40px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #1a95ff; |
|||
} |
|||
|
|||
.el-pagination .el-pager li { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
|
|||
.el-pagination .btn-prev { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
|
|||
.el-pagination .btn-next { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
.el-pagination__editor.el-input .el-input__inner { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
|
|||
.el-pagination .el-select .el-input .el-input__inner { |
|||
margin-left: 14px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
border-radius: 2px; |
|||
border: 1px solid rgba(26, 149, 255, 0.45); |
|||
background: #00023a; |
|||
} |
|||
} |
|||
} |
|||
.m-empty { |
|||
line-height: 300px; |
|||
font-size: 24px; |
|||
color: rgba(#fff, 0.5); |
|||
text-align: center; |
|||
} |
|||
.success { |
|||
color: #00c790; |
|||
} |
|||
.ing { |
|||
color: #ffaa00; |
|||
} |
|||
.no-data-img { |
|||
width: 100px; |
|||
margin: 100px; |
|||
} |
|||
.org1 { |
|||
background-image: url(../images/org1.png); |
|||
background-size: 100% 100%; |
|||
max-width: 200px; |
|||
height: 90px; |
|||
text-align: center; |
|||
color: rgb(219, 196, 97); |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
padding: 20px 10px 10px; |
|||
margin: 0 auto; |
|||
margin-bottom: 10px; |
|||
} |
|||
.org2 { |
|||
background-image: url(../images/org2.png); |
|||
background-size: 100% 100%; |
|||
max-width: 200px; |
|||
height: 90px; |
|||
color: #fff; |
|||
font-size: 16px; |
|||
padding: 10px 10px 10px 25px; |
|||
margin: 0 auto; |
|||
margin-bottom: 10px; |
|||
position: relative; |
|||
} |
|||
.org2::before { |
|||
display: inline-block; |
|||
position: absolute; |
|||
margin-left: -15px; |
|||
margin-top: 5px; |
|||
content: ""; |
|||
width: 10px; |
|||
height: 10px; |
|||
background-size: 100% 100%; |
|||
background-image: url(../images/point.png); |
|||
} |
|||
.line1 { |
|||
background-image: url(../images/orgA1.png); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
height: 100px; |
|||
} |
|||
.line2 { |
|||
background-image: url(../images/orgA2.png); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
height: 100px; |
|||
} |
|||
.line3 { |
|||
background-image: url(../images/orgA3.png); |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
height: 100px; |
|||
} |
|||
.orgTable * { |
|||
vertical-align: top; |
|||
} |
|||
.smallText { |
|||
font-size: 14px; |
|||
margin-top: 4px; |
|||
} |
|||
.titleBox { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 30px; |
|||
div { |
|||
font-size: 18px; |
|||
color: #fff !important; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
|
|||
.m-fm { |
|||
display: flex; |
|||
margin-bottom: 20px; |
|||
.btn { |
|||
width: 90px; |
|||
height: 36px; |
|||
background: linear-gradient(270deg, #0dccff 0%, #4760ff 100%); |
|||
border-radius: 2px; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 36px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.second-select { |
|||
margin: 0 10px 0 0px; |
|||
|
|||
::v-deep .el-input { |
|||
width: 180px; |
|||
height: 36px; |
|||
.el-input__inner { |
|||
height: 100%; |
|||
padding: 0 10px; |
|||
color: #fff; |
|||
line-height: 36px; |
|||
background: #06186d; |
|||
border: 1px solid #1a64cc; |
|||
} |
|||
|
|||
.el-icon-arrow-up:before { |
|||
content: "\e78f"; |
|||
} |
|||
// .el-select__caret:before { |
|||
// content: '\E790' |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-empty { |
|||
img.no-data-img { |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
} |
|||
|
|||
.m-list { |
|||
.item { |
|||
display: flex; |
|||
padding: 16px 20px; |
|||
margin-bottom: 16px; |
|||
background: rgba(#6da6ff, 0.2); |
|||
border-radius: 2px; |
|||
|
|||
.photo { |
|||
display: block; |
|||
margin-right: 12px; |
|||
width: 160px; |
|||
height: 90px; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.col { |
|||
&:last-child { |
|||
width: 260px; |
|||
margin-left: auto; |
|||
} |
|||
max-width: 600px; |
|||
|
|||
.btn-more { |
|||
margin-top: 8px; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #ffde00; |
|||
line-height: 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.item-dict { |
|||
display: flex; |
|||
line-height: 28px; |
|||
|
|||
.item-field { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: rgba(#b5d9ff, 0.76); |
|||
} |
|||
.item-value { |
|||
@include toe; |
|||
max-width: 450px; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
img { |
|||
height: 28px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,614 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
top="50px" |
|||
v-if="dialogVisible" |
|||
:visible.sync="dialogVisible" |
|||
width="829px" |
|||
:before-close="handleClose" |
|||
class="darkDialog" |
|||
:modal="false" |
|||
:append-to-body="true" |
|||
> |
|||
<div slot="title" class="dialogTitle"> |
|||
<div alt="" class="title_img"></div> |
|||
事件详情 |
|||
</div> |
|||
<div class="dialogBody"> |
|||
<div class="m-info"> |
|||
<el-row type="flex" style="flex-flow: row wrap"> |
|||
<el-col :span="12"> |
|||
<div class="item"> |
|||
<div class="field">事项：</div> |
|||
<div class="value">{{ info.eventContent }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">事件位置：</div> |
|||
<div class="value">{{ info.address }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">所属网格：</div> |
|||
<div class="value">{{ info.gridName }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">上报人：</div> |
|||
<div class="value">{{ info.name }}</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="field">联系电话：</div> |
|||
<div class="value">{{ info.mobile }}</div> |
|||
</div> |
|||
|
|||
<!-- <div class="item"> |
|||
<div class="field">登记时间：</div> |
|||
<div class="value">{{ info.createdTime }}</div> |
|||
</div> --> |
|||
<div |
|||
class="item" |
|||
v-if="info.imageList && info.imageList.length > 0" |
|||
> |
|||
<div class="field"></div> |
|||
<div class="value"> |
|||
<img |
|||
v-for="src in info.imageList" |
|||
:key="src" |
|||
:src="src" |
|||
class="eventImg" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<!-- <el-col :span="1"><div class="fenge"></div></el-col> --> |
|||
<el-col :span="12"> |
|||
<el-timeline class="timeline"> |
|||
<el-timeline-item |
|||
v-for="(activity, index) in processList" |
|||
:key="index" |
|||
:class="index == 0 ? 'sucess' : ''" |
|||
> |
|||
<div class="status-box"> |
|||
<div |
|||
:class="{ |
|||
status2: index == 0, |
|||
status1: index != 0, |
|||
}" |
|||
> |
|||
{{ activity.manageStatusName || activity.processName }} |
|||
</div> |
|||
<div class="timestamp"> |
|||
{{ activity.manageTime || activity.processTime }} |
|||
</div> |
|||
</div> |
|||
<div class="content" v-if="activity.departmentName"> |
|||
<div |
|||
class="field" |
|||
v-if="activity.processName == '上报事件'" |
|||
> |
|||
上报人： |
|||
</div> |
|||
<div class="field" v-else>办理部门：</div> |
|||
<div class="value" style="width: 150px"> |
|||
{{ activity.manageResi || activity.departmentName }} |
|||
</div> |
|||
</div> |
|||
<div class="content" v-if="activity.manageResiTel"> |
|||
<div class="field">办理人电话：</div> |
|||
<div class="value" style="width: 150px"> |
|||
{{ activity.manageResiTel || "--" }} |
|||
<!-- <a @click="call(activity.manageResiTel)" class="tel"> |
|||
<img src="~@/assets/images/tel.png" width="76px" /> |
|||
</a> --> |
|||
</div> |
|||
</div> |
|||
<div class="content" v-if="activity.publicReply"> |
|||
<div class="field">办理意见：</div> |
|||
<div class="value" style="width: 240px"> |
|||
{{ activity.publicReply || "--" }} |
|||
</div> |
|||
</div> |
|||
</el-timeline-item> |
|||
</el-timeline> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
<div slot="footer" class="dialogFooter"></div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import replyOptions from './replyOptions' |
|||
// import { callPhone } from '@/utils/tccc' |
|||
import { getProcess, getDictlist } from '@/api/szyf' |
|||
export default { |
|||
data () { |
|||
return { dialogVisible: true, info: {}, processList: [] } |
|||
}, |
|||
props: { |
|||
data: Object |
|||
}, |
|||
created () { |
|||
// 重置掉，不报错 |
|||
// this.$message = { |
|||
// error() {}, |
|||
// success() {}, |
|||
// warning() {}, |
|||
// }; |
|||
this.info = { ...this.data } |
|||
this.getProcessInfo() |
|||
getDictlist({ dictType: 'ic_event_source_type' }) |
|||
}, |
|||
watch: { |
|||
data (val) { |
|||
this.info = { ...val } |
|||
this.getProcessInfo() |
|||
} |
|||
}, |
|||
methods: { |
|||
handleClose (done) { |
|||
done() |
|||
this.$emit('close') |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
// async getData () { |
|||
// const url = '/gov/project/icEvent/detail' |
|||
|
|||
// const params = { |
|||
// icEventId: this.info.icEventId || this.info.eventId |
|||
// } |
|||
|
|||
// const { data, code, msg } = await this.$requestPost(url, params) |
|||
|
|||
// if (code === 0) { |
|||
// this.info = { |
|||
// ...this.info, |
|||
// ...data |
|||
// } |
|||
// } else { |
|||
// // this.$message.error(msg); |
|||
// } |
|||
// }, |
|||
|
|||
async getProcessInfo () { |
|||
const params = { |
|||
icEventId: this.info.icEventId || this.info.eventId |
|||
} |
|||
getProcess(params).then((res) => { |
|||
const { code, data } = res |
|||
if (code === 0) { |
|||
this.processList = (data || []).map((item) => { |
|||
if ( |
|||
typeof item.manageStatus === 'number' && |
|||
item.processName == '回复' |
|||
) { |
|||
item.manageStatusName = replyOptions[item.manageStatus].label |
|||
} |
|||
return item |
|||
}) |
|||
} else { |
|||
// this.$message.error(msg); |
|||
} |
|||
}) |
|||
} |
|||
// call (phone) { |
|||
// callPhone(phone) |
|||
// this.$emit('call', phone) |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
<style lang="scss" scoped> |
|||
// 不换行显示省略号 |
|||
@mixin toe { |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
word-wrap: normal; |
|||
} |
|||
.darkDialog { |
|||
.el-dialog { |
|||
width: 987px; |
|||
background: transparent; |
|||
border: none; |
|||
box-shadow: none; |
|||
.el-dialog__header { |
|||
border: none !important; |
|||
padding: 0px !important; |
|||
.el-dialog__headerbtn { |
|||
width: 36px; |
|||
height: 36px; |
|||
background-image: url(./images/guanbi.png); |
|||
|
|||
top: -10px; |
|||
right: -15px; |
|||
.el-dialog__close { |
|||
display: none; |
|||
} |
|||
} |
|||
.dialogTitle { |
|||
@include toe; |
|||
position: relative; |
|||
font-size: 20px; |
|||
line-height: 20px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
padding: 12px 20px 10px 12px; |
|||
// background-image: url(./images/ding.png); |
|||
background-size: 100% 100%; |
|||
|
|||
.title_img { |
|||
position: absolute; |
|||
left: 29px; |
|||
width: 22px; |
|||
height: 22px; |
|||
// background-image: url(./images/xiaobiaoti.png); |
|||
float: left; |
|||
} |
|||
} |
|||
} |
|||
.el-dialog__body { |
|||
border: none !important; |
|||
padding: 0px; |
|||
width: 100%; |
|||
background-size: 100%; |
|||
max-height: 630px; |
|||
overflow-y: auto; |
|||
@include scrollBar; |
|||
.dialogBody { |
|||
padding: 0px 24px 10px 24px; |
|||
|
|||
.bigTitle { |
|||
font-size: 30px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
|
|||
background: linear-gradient(0deg, #009dff 0%, #ffffff 100%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
text-align: center; |
|||
margin-bottom: 48px; |
|||
} |
|||
.view { |
|||
color: #ffc821; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
// .el-dialog__footer { |
|||
// padding: 0px !important; |
|||
|
|||
// .dialogFooter { |
|||
// height: 40px; |
|||
// background-position: bottom; |
|||
// width: 100%; |
|||
// // background-image: url(./images/dibu.png); |
|||
// background-size: 100%; |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding: 20px 0px 10px; |
|||
.userImg { |
|||
width: 130px; |
|||
height: 130px; |
|||
background: #020202; |
|||
border: 1px solid #007ae7; |
|||
border-radius: 10px; |
|||
object-fit: cover; |
|||
} |
|||
.info2 { |
|||
margin-top: 30px; |
|||
.item { |
|||
background-color: rgb(21, 57, 148); |
|||
margin: 10px 10px 10px 0px; |
|||
padding: 2px 0px; |
|||
} |
|||
.noMarginRight { |
|||
.item { |
|||
margin-right: 0px; |
|||
} |
|||
} |
|||
} |
|||
.info_m_box { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.center_box { |
|||
position: relative; |
|||
width: 192px; |
|||
height: 192px; |
|||
// background: url(../images/renCen.png) no-repeat center; |
|||
color: #fff; |
|||
background-size: 100%; |
|||
section { |
|||
position: relative; |
|||
top: 113px; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
.line1 { |
|||
width: 150px; |
|||
height: 2px; |
|||
background: linear-gradient(to right, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 33px; |
|||
left: -154px; |
|||
transform: rotate3d(1, 1, 1, 21deg); |
|||
} |
|||
.line1_dot1 { |
|||
width: 74px; |
|||
height: 74px; |
|||
// background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: -25px; |
|||
left: -222px; |
|||
} |
|||
.line1_dot2 { |
|||
width: 74px; |
|||
height: 74px; |
|||
// background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 67px; |
|||
left: -318px; |
|||
} |
|||
.line1_dot3 { |
|||
width: 74px; |
|||
height: 74px; |
|||
// background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 141px; |
|||
left: -103px; |
|||
} |
|||
.line2 { |
|||
width: 240px; |
|||
height: 2px; |
|||
background: linear-gradient(to right, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 106px; |
|||
left: -250px; |
|||
transform: rotate3d(1, 1, 1, 360deg); |
|||
} |
|||
.line3 { |
|||
width: 69px; |
|||
height: 2px; |
|||
background: linear-gradient(to right, #1f7eff, #080e58); |
|||
background: linear-gradient(to right, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 172px; |
|||
left: -47px; |
|||
transform: rotate3d(1, 1, 1, 296deg); |
|||
top: 150px; |
|||
left: -46px; |
|||
} |
|||
|
|||
.line1_r { |
|||
width: 150px; |
|||
height: 2px; |
|||
background: linear-gradient(to left, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 149px; |
|||
left: 182px; |
|||
transform: rotate3d(1, 1, 1, 21deg); |
|||
} |
|||
.line1_dot1_r { |
|||
width: 74px; |
|||
height: 74px; |
|||
// background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 141px; |
|||
left: 330px; |
|||
} |
|||
.line1_dot2_r { |
|||
width: 74px; |
|||
height: 74px; |
|||
// background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 6px; |
|||
left: 433px; |
|||
} |
|||
.line1_dot3_r { |
|||
width: 74px; |
|||
height: 74px; |
|||
// background: url(../images/ren.png) no-repeat center; |
|||
background-size: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: -28px; |
|||
left: 236px; |
|||
} |
|||
.line2_r { |
|||
width: 240px; |
|||
height: 2px; |
|||
background: linear-gradient(to left, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 73px; |
|||
left: 199px; |
|||
-webkit-transform: rotate3d(1, 1, 1, 360deg); |
|||
transform: rotate3d(1, 1, 1, 341deg); |
|||
} |
|||
.line3_r { |
|||
width: 69px; |
|||
height: 2px; |
|||
background: linear-gradient(to left, #1f7eff, #080e58); |
|||
background: linear-gradient(to left, #1f7eff, #080e58); |
|||
position: absolute; |
|||
top: 172px; |
|||
left: -47px; |
|||
transform: rotate3d(1, 1, 1, 296deg); |
|||
top: 40px; |
|||
left: 187px; |
|||
} |
|||
.item { |
|||
display: flex; |
|||
padding: 0px 0; |
|||
min-width: 50%; |
|||
line-height: 24px; |
|||
|
|||
.field { |
|||
min-width: 100px; |
|||
text-align: right; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #b5d9ff; |
|||
line-height: 32px; |
|||
opacity: 0.76; |
|||
} |
|||
.eventImg { |
|||
margin-top: 10px; |
|||
max-width: 80%; |
|||
max-height: 300px; |
|||
} |
|||
.tel { |
|||
width: 76px; |
|||
height: 24px; |
|||
display: inline-block; |
|||
margin-left: 10px; |
|||
cursor: pointer; |
|||
// background: rgba(2, 2, 2, 0.36); |
|||
// border: 1px solid #02afff; |
|||
// border-radius: 4px; |
|||
} |
|||
.icon { |
|||
width: 18px; |
|||
margin-right: 16px; |
|||
} |
|||
.value { |
|||
flex: 1; |
|||
width: 100%; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 32px; |
|||
} |
|||
.workIng { |
|||
color: #19ffe1; |
|||
} |
|||
.workEnd { |
|||
color: #ccc; |
|||
} |
|||
} |
|||
.fenge { |
|||
border-left: 1px dashed #007eff; |
|||
margin: 15px 0px; |
|||
height: 100%; |
|||
} |
|||
.timeline { |
|||
margin-top: 15px; |
|||
.sucess { |
|||
.el-timeline-item__node { |
|||
width: 16px; |
|||
height: 16px; |
|||
background-color: #0c81fe; |
|||
border: solid 3px #fff; |
|||
box-shadow: 0px 0px 10px 5px #0c81fe; |
|||
} |
|||
} |
|||
.el-timeline-item__node { |
|||
width: 16px; |
|||
height: 16px; |
|||
background: #09176c; |
|||
border: 1px solid #007ae7; |
|||
border-radius: 50%; |
|||
} |
|||
.el-timeline-item__tail { |
|||
left: 6px; |
|||
border-left: 1px solid #6398d1; |
|||
} |
|||
.status-box { |
|||
display: flex; |
|||
|
|||
.status2 { |
|||
width: 76px; |
|||
height: 24px; |
|||
background: #0c81fe; |
|||
border-radius: 10px 0px 10px 0px; |
|||
color: #fefefe; |
|||
text-align: center; |
|||
line-height: 24px; |
|||
} |
|||
.status1 { |
|||
width: 76px; |
|||
height: 24px; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #3d86ff; |
|||
line-height: 24px; |
|||
} |
|||
.timestamp { |
|||
width: 121px; |
|||
font-size: 12px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 300; |
|||
color: #b5d9ff; |
|||
line-height: 24px; |
|||
opacity: 0.46; |
|||
margin-left: 11px; |
|||
} |
|||
} |
|||
.content { |
|||
display: flex; |
|||
margin-top: 4px; |
|||
.field { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #b5d9ff; |
|||
line-height: 24px; |
|||
opacity: 0.76; |
|||
} |
|||
.value { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 755 B |
|
After Width: | Height: | Size: 3.5 KiB |
@ -0,0 +1,8 @@ |
|||
export default [ |
|||
{ label: '上报', value: 0 }, |
|||
{ label: '阅收', value: 1 }, |
|||
{ label: '完结', value: 2 }, |
|||
{ label: '审核', value: 3 }, |
|||
{ label: '事件评价', value: 4 }, |
|||
{ label: '结案归档', value: 5 } |
|||
] |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue