@ -1,72 +1,113 @@
< template >
< div class = "main" >
< div class = "box" >
< div class = "title" > 实时预警 < / div >
< div class = "title" > 要素资源 < / div >
< div class = "leftBox" >
< zhmap class = "map" :waringList ="waringList" @zhuanchuzhi ="chuzhi" v-if ="waringList && waringList.length" >
< zhmap class = "map" :companyInfoList ="companyInfoList" :deviceVideoInfoList ="deviceVideoInfoList"
@ showCompanyData = "showCompanyData" @ showCameraData = "showCameraData" >
< / zhmap >
< div class = "searchBox" >
< el -select v-model ="Selectvalue" placeholder="请选择" class="topSelect1" >
< el -option label = "企业" value = "企业" >
< / e l - o p t i o n >
< el -option label = "监控" value = "监控" >
< / e l - o p t i o n >
< / e l - s e l e c t >
< el -form :model ="formInline" class = "search" >
< el -form -item class = "formItem" >
< el -input v -model .trim = " formInline.name " placeholder = "请输入名称搜索" clearable
class = "formIpt" > < / e l - i n p u t >
< / e l - f o r m - i t e m >
< el -button type = "primary" @click ="getCompanyList()" > 搜 索 < / el -button >
< el -button @click ="reset()" > 重 置 < / el -button >
< / e l - f o r m >
< / div >
< div class = "rightBox" >
< div class = "totalTitle" >
< div class = "titleText" > 预警列表 < / div > < span > & nbsp ; （ < span class = "redText" > { { total } } < / span > ） < / span >
< div class = "companyCanban" v-if ="showCompany" >
< div class = "close" @ click = "showCompany = false" > < / div >
< el -tooltip :content ="companyData.companyName" placement = "top-start" >
< div class = "companyName" > { { companyData . companyName } } < / div >
< / e l - t o o l t i p >
< div class = "companybiaoqian" > 企业类型 ： < div
: class = "{ 'shewei': a == '剧毒' || a == '易制毒', 'zhongdian': a == '消防重点' || a == '所管消防', 'zhibao': a == '放射源' || a == '易制爆', 'zhian': a == '治安重点' || a == '创安单位' }"
v - for = "a in companyData.companyTypeList" : key = "a" > { { a } }
< / div >
< div class = "bottomBody" >
< div class = "yujingItem" v-for ="(item, index) in waringList" :key ="index" >
< div class = "yujingTop" >
< div class = "companyName" > { { item . companyName } } < / div >
< div class = "impBtnList" >
< div : class = "{ 'shewei': a == '剧毒' || a == '易制毒', 'zhongdian': a == '消防重点' || a == '所管消防', 'zhibao': a == '放射源' || a == '易制爆', 'zhian': a == '治安重点' || a == '创安单位' }"
v - for = "a in item.companyTypeList" : key = "a" > { { a } }
< / div >
< div class = "companyxinxi" > 企业地址 ： < span > { { companyData . companyAddress } } < / span > < / div >
< div class = "companyxinxi" > 企业性质 ： < span > { { companyData . companyNature } } < / span > < / div >
< div class = "companyxinxi" > 成立日期 ： < span > { { companyData . establishDate } } < / span > < / div >
< div class = "companyxinxi" > 营业期限 ： < span > { { companyData . businessTermDate } } < / span > < / div >
< div class = "companyxinxi" > 登记机关 ： < span > { { companyData . registerAuthority } } < / span > < / div >
< div class = "companyxinxi" > 企业法人 ： < span > { { companyData . legalPerson } } < / span > < / div >
< div class = "companyxinxi" > 安全责任人 ： < span > { { companyData . emergencyContact } } < / span > < / div >
< div class = "companyxinxi" > 责任人电话 ： < span > { { companyData . emergencyContactPhone } } < / span > < / div >
< div class = "companyxinxi" > 经营范围 ： < span > { { companyData . businessScope } } < / span > < / div >
< div class = "todangan" @click ="toArchive" > 查 看 企 业 档 案 < img src = "../../../public/pbImg/跳转.png" alt = "" > < / div >
< / div >
< div class = "cameraCanban" v-if ="showCamera" >
< div class = "close" @ click = "showCamera = false" > < / div >
< el -tooltip :content ="cameraData.deviceName" placement = "top-start" >
< div class = "companyName" > { { cameraData . deviceName } } < / div >
< / e l - t o o l t i p >
< div class = "companyxinxi" > 隶属企业 ： < span > { { cameraData . companyName } } < / span > < / div >
< div class = "companyxinxi" > 监控 ： < span > { { cameraData . deviceAddress } } < / span > < / div >
< div class = "companyxinxi" > 监控状态 ： < span class = "online" v-if ="cameraData.isOnline == 1" > 在 线 < / span > < span
class = "outline" v - else > 离线 < / span > < / div >
< div class = "todangan" @click ="showVideo" > 查 看 实 时 监 控 < img src = "../../../public/pbImg/跳转.png" alt = "" > < / div >
< / div >
< div class = "yujingBottom" >
< div class = "bottomTOP" >
一级指标 ： < span class = "numValue" > { { item . levelIndexOne } } < / span > & nbsp ; & nbsp ; 预警指标 ： < span
class = "numValue" > “ { { item . levelIndexThree } } ” 异常 < / span >
< / div >
< div class = "bottomTOP" >
预警时间 ： < span class = "numValue" > { { item . alarmTime } } < / span >
< / div >
< / div >
< div class = "chuzhi" @click ="chuzhi(item)" > 转 处 置 < / div >
< / div >
< / div >
< / div >
< el -dialog title = "选择处置部门" :visible.sync ="diaVisible" class = "picForm" >
< div class = "czTitle" > 可选择多个部门联合处置 ： < / div >
< div class = "czBody" v-if ="deptList && deptList.length" >
< el -checkbox -group v-model ="checkedDepts" >
< el -checkbox v-for ="city in deptList" :label="city.deptId" :key="city.deptId" > {{ city.deptName
} } < / e l - c h e c k b o x >
< div class = "tucengCanban" >
< div class = "topText" > 图层 < / div >
< div class = "tucengBox" >
< el -checkbox :indeterminate ="isIndeterminate" v -model = " checkAll "
@ change = "handleCheckAllChange" > 全选 < / e l - c h e c k b o x >
< div style = "margin: 15px 0;" > < / div >
< el -checkbox -group v-model ="checkedCities" @change="handleCheckedCitiesChange" >
< el -checkbox v-for ="city in cities" :label="city" :key ="city" > {{ city
} } < span v-if ="city == '园区企业'" > （ {{ companyInfoList.length }} ） < / span > < span v-else > （ {{
deviceVideoInfoList . length
} } ） < / span > < / e l - c h e c k b o x >
< / e l - c h e c k b o x - g r o u p >
< / div >
< div slot = "footer" class = "dialog-footer" >
< el -button @ click = "diaVisible = false" > 取 消
< / e l - b u t t o n >
< el -button type = "primary" @click ="addForm()" > 确 定 < / el -button >
< / div >
< el -dialog title = "实时监控" :visible.sync ="diaVisible" class = "picForm" >
< playVideo : video = "{ url: monitorData.wsFlv, index: 1 }" :control ="true" v-if ="diaVisible" > < / playVideo >
< / e l - d i a l o g >
< / div >
< / div >
< / div >
< / template >
< script >
import { mapList , deptList , addCommonApprovalProcess } from '@/api/realtimeWarning'
import { statistic , queryCompany , queryVideo } from '@/api/factorResources'
import { realTimeMonitoring } from '@/api/archives'
import playVideo from '@/components/videoPlayer'
import zhmap from './map.vue'
export default {
components : {
zhmap ,
playVideo
} ,
data ( ) {
return {
total : 0 ,
waringList : [ ] ,
companyInfoList : [ ] ,
deviceVideoInfoList : [ ] ,
diaVisible : false ,
checkedDepts : [ ] ,
deptList : [ ] ,
chuzhiData : { } ,
Selectvalue : '企业' ,
formInline : { } ,
companyData : { } ,
showCompany : false ,
cameraData : { } ,
showCamera : false ,
monitorData : { } ,
checkAll : false ,
cityOptions : [ '视频监控' , '园区企业' ] ,
checkedCities : [ '视频监控' , '园区企业' ] ,
cities : [ '视频监控' , '园区企业' ] ,
isIndeterminate : true
}
} ,
created ( ) {
@ -74,32 +115,88 @@ export default {
} ,
methods : {
getList ( ) {
mapList ( { pageSize : 10 , pageNum : 1 } ) . then ( res => {
this . waringList = res . data
this . total = res . total
statistic ( ) . then ( res => {
this . companyInfoList = res . data . companyInfoList
this . deviceVideoInfoList = res . data . deviceVideoInfoList
} )
} ,
getCompanyList ( ) {
if ( this . Selectvalue == '企业' ) {
queryCompany ( { ... this . formInline } ) . then ( res => {
this . companyInfoList = res . data
this . deviceVideoInfoList = [ ]
} )
} else {
queryVideo ( { ... this . formInline } ) . then ( res => {
this . deviceVideoInfoList = res . data
this . companyInfoList = [ ]
} )
}
} ,
reset ( ) {
this . getList ( )
} ,
showCompanyData ( val ) {
this . companyData = val
this . showCompany = true
} ,
showCameraData ( val ) {
this . cameraData = val
this . showCamera = true
} ,
toArchive ( ) {
sessionStorage . setItem ( 'companyID' , this . companyData . id )
sessionStorage . setItem ( 'companyName' , this . companyData . companyName )
this . $router . push ( {
name : 'archives' ,
} )
} ,
chuzhi ( val ) {
/ / c o n s o l e . l o g ( v a l )
this . chuzhiData = val
deptList ( ) . then ( res => {
console . log ( res , 'res' ) ;
this . deptList = res . data
showVideo ( ) {
realTimeMonitoring ( { pageSize : 10 , pageNum : 1 , deviceName : this . cameraData . deviceName , companyId : this . cameraData . companyId } ) . then ( res => {
this . monitorData = res . data [ 0 ]
this . diaVisible = true
} )
} ,
addForm ( ) {
console . log ( this . checkedDepts , 'this.checkedDepts' ) ;
addCommonApprovalProcess ( { approveDeptCodes : this . checkedDepts , safeCompanyAlarm : { id : this . chuzhiData . id } } ) . then ( res => {
if ( res . code == 200 ) {
this . $message . success ( res . msg )
this . diaVisible = false
handleCheckAllChange( val ) {
console . log ( val , 'val ) ;
this . checkedCities = val ? this . cityOptions : [ ] ;
this . isIndeterminate = false ;
if ( val ) {
this . getList ( )
} else {
this . $message . error ( res . msg )
this . companyInfoList = [ ]
this . deviceVideoInfoList = [ ]
}
} ,
handleCheckedCitiesChange ( value ) {
console . log ( value , 'value' ) ;
if ( value . length ) {
if ( value . length == 2 ) {
this . getList ( )
} else {
if ( value [ 0 ] == "视频监控" ) {
statistic ( ) . then ( res => {
this . companyInfoList = [ ]
this . deviceVideoInfoList = res . data . deviceVideoInfoList
} )
} else {
statistic ( ) . then ( res => {
this . companyInfoList = res . data . companyInfoList
this . deviceVideoInfoList = [ ]
} )
}
}
} else {
this . companyInfoList = [ ]
this . deviceVideoInfoList = [ ]
}
let checkedCount = value . length ;
this . checkAll = checkedCount === this . cities . length ;
this . isIndeterminate = checkedCount > 0 && checkedCount < this . cities . length ;
} ,
}
}
@ -135,59 +232,136 @@ export default {
}
. leftBox {
width : calc ( 100 % - 590 px ) ;
width : calc ( 100 % ) ;
height : 100 % ;
margin - right : 20 px
/ / m a r g i n - r i g h t : 2 0 p x
box - sizing : border - box ;
background : url ( '~@/assets/realtimeWarning/矩形备份 289981.png' ) no - repeat ;
background - size : 100 % 100 % ;
padding : 20 px ;
position : relative ;
. map {
height : 100 % ;
width : 100 % ;
}
. searchBox {
position : absolute ;
height : 40 px ;
width : 500 px ;
top : 40 px ;
right : 20 px ;
display : flex ;
box - sizing : border - box ;
. topSelect1 {
margin - top : 20 px ;
/deep/ . el - input {
width : 100 px ;
height : 35 px ;
. el - select _ _caret {
line - height : 35 px ;
}
. el - input _ _inner {
height : 35 px ;
/ / b a c k g r o u n d : u r l ( ' ~ @ / a s s e t s / s a f e t y I n d e x / 选 择 框 . p n g ' ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
background : # 3 B4450 ;
font - size : 14 px ;
color : # C4E5FF ;
letter - spacing : 1 px ;
text - align : center ;
font - weight : 400 ;
border : 0 ;
}
}
}
. rightBox {
width : 570 px ;
height : 100 % ;
. search {
height : 35 px ;
box - sizing : border - box ;
background : url ( '~@/assets/realtimeWarning/矩形备份 289981.png' ) no - repeat ;
background - size : 100 % 100 % ;
}
. totalTitle {
height : 60 px ;
width : 100 % ;
border - bottom : 1 px solid rgba ( 91 , 116 , 140 , 0.6 ) ;
padding : 0 20 px ;
display : flex ;
align - items : center ;
color : # EBFFF4 ;
/deep/ . el - input _ _inner {
/ / b a c k g r o u n d : u r l ( ' ~ @ / a s s e t s / c o m p a n y F i l e / 2 1 2 1 . p n g ' ) n o - r e p e a t ;
background : # 3 B4450 ;
border : 1 px solid # 5 B748C ;
color : rgba ( 234 , 246 , 255 , 0.7 ) ;
height : 35 px ;
. titleText {
font - size : 16 px ;
color : # EBFFF4 ;
letter - spacing : 2 px ;
. el - range - separator {
color : # ccc ;
}
. el - range - input {
background : rgba ( 0 , 0 , 0 , 0 ) ;
color : # ccc ;
}
}
/deep/ . el - form - item {
text - shadow : 0 0 9 px rgba ( 21 , 255 , 195 , 0.60 ) ;
margin : 0 ;
. el - form - item _ _content {
line - height : 35 px ;
}
. el - form - item _ _label {
color : # EAF6FF ;
letter - spacing : 1 px ;
text - align : center ;
font - weight : 400 ;
}
. redText {
font - size : 16 px ;
color : # FF9191 ;
letter - spacing : 2 px ;
}
/deep/ . el - button -- primary {
width : 60 px ;
height : 35 px ;
line - height : 30 px ;
padding : 0 ;
text - align : center ;
background : rgba ( 0 , 0 , 0 , 0 ) ;
border : 0 ;
background : url ( '~@/assets/companyFile/2121.png' ) no - repeat ;
background - size : 100 % 100 % ;
font - size : 14 px ;
color : # F8FBFF ;
letter - spacing : 0.89 px ;
font - weight : 500 ;
}
font - weight : 400
/deep/ . el - button -- default {
width : 60 px ;
height : 35 px ;
line - height : 30 px ;
padding : 0 ;
text - align : center ;
background : # 3 B4450 ;
border : 0 ;
font - size : 14 px ;
color : # F8FBFF ;
letter - spacing : 0.89 px ;
font - weight : 500 ;
}
}
. bottomBody {
height : calc ( 100 % - 60 px ) ;
width : 100 % ;
. companyCanban {
width : 320 px ;
height : 540 px ;
position : absolute ;
top : 120 px ;
right : 35 px ;
background : # 3 B4450 ;
border : 1 px solid # 5 B748C ;
padding : 14 px ;
box - sizing : border - box ;
overflow : auto ;
& : : - webkit - scrollbar {
@ -207,38 +381,40 @@ export default {
}
. yujingItem {
height : 138 px ;
width : 100 % ;
background : rgba ( 108 , 128 , 151 , 0.20 ) ;
border : 1 px solid rgba ( 73 , 84 , 97 , 1 ) ;
position : relative ;
. yujingTop {
border - bottom : 1 px solid # 495461 ;
height : 54 px ;
width : 100 % ;
display : flex ;
align - items : center ;
padding : 0 14 px ;
. close {
position : absolute ;
top : 14 px ;
right : 14 px ;
width : 18 px ;
height : 18 px ;
background : url ( '../../../public/pbImg/关闭.png' ) no - repeat ;
background - size : 100 % 100 % ;
cursor : pointer ;
}
. companyName {
font - size : 16 px ;
color : # 30 C4FF ;
letter - spacing : 1.14 px ;
width : 100 % ;
height : 20 px ;
font - size : 14 px ;
color : # FFE6D9 ;
letter - spacing : 0 ;
line - height : 16 px ;
text - shadow : 0 0 8 px rgba ( 255 , 119 , 52 , 0.50 ) ;
font - weight : 500 ;
margin - right : 20 px ;
width : 220 px ;
/ / w h i t e - s p a c e : n o w r a p ; / / 禁 止 换 行
padding - right : 20 px ;
overflow : hidden ;
text - overflow : ellipsis ;
white - space : nowrap ; / / 禁 止 换 行
}
. impBtnList {
height : 4 0px ;
. companybiaoqian {
margin - top : 1 px ;
width : 100 % ;
display : flex ;
align - items : center ;
height : 28 px ;
font - size : 14 px ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
overflow : hidden ;
white - space : nowrap ; / / 禁 止 换 行
width : 270 px ;
@ -299,97 +475,91 @@ export default {
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
}
}
. chuzhi {
position : absolute ;
right : 14 px ;
bottom : 14 px ;
cursor : pointer ;
height : 20 px ;
width : 50 px ;
line - height : 20 px ;
font - size : 14 px ;
color : # 30 C4FF ;
letter - spacing : 1 px ;
font - weight : 400 ;
}
. yujingBottom {
. companyxinxi {
margin - top : 10 px ;
width : 100 % ;
height : 84 px ;
padding : 0 14 px ;
. bottomTOP {
width : 100 % ;
height : 50 % ;
display : flex ;
align - items : center ;
font - family : PingFangSC - Regular ;
/ / h e i g h t : 2 8 p x ;
font - size : 14 px ;
color : rgba ( 255 , 255 , 255 , 0.8 ) ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
. numValue {
span {
font - size : 14 px ;
color : # FFFFFF ;
letter - spacing : 0 ;
font - weight : 400 ;
}
}
}
. todangan {
margin - top : 15 px ;
width : 100 % ;
height : 30 px ;
line - height : 30 px ;
cursor : pointer ;
font - size : 14 px ;
color : # 4 BCCFF ;
letter - spacing : 0 ;
display : flex ;
justify - content : center ;
align - items : center ;
img {
width : 20 px ;
height : 20 px ;
}
}
}
. picForm {
/deep/ . el - dialog {
background - color : rgba ( 0 , 0 , 0 , 0 ) ;
background : url ( '~@/assets/realtimeWarning/导入弹窗.png' ) no - repeat ;
background - size : 100 % 100 % ;
width : 461 px ;
height : 412 px ;
position : relative ;
. el - dialog _ _title {
font - size : 16 px ;
color : # EBFFF4 ;
letter - spacing : 2 px ;
. tucengCanban {
width : 180 px ;
height : 113 px ;
position : absolute ;
top : 30 px ;
left : 35 px ;
background : # 3 B4450 ;
border : 1 px solid # 5 B748C ;
padding : 0 14 px ;
text - shadow : 0 0 9 px rgba ( 21 , 255 , 195 , 0.77 ) ;
. topText {
height : 30 px ;
border - bottom : 1 px solid rgba ( 212 , 212 , 212 , 0.25 ) ;
font - size : 14 px ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
display : flex ;
align - items : center ;
justify - content : center ;
}
. el - dialog _ _body {
box - sizing : border - box ;
padding : 14 px 10 px ;
height : 300 px ;
box - sizing : border - box ;
. tucengBox {
height : 150 px ;
height : 100 % ;
. czTitle {
opacity : 0.7 ;
font - family : PingFangSC - Regular ;
font - size : 14 px ;
color : # EAF6FF ;
letter - spacing : 1 px ;
font - weight : 400 ;
margin - bottom : 12 px ;
/deep/ . el - checkbox {
color : # D0DEEE ;
}
}
}
. czBody {
width : 44 0px ;
. cameraCanban {
width : 320 px ;
height : 232 px ;
background : rgba ( 108 , 128 , 151 , 0.20 ) ;
border : 1 px solid # 495461 ;
position : absolute ;
top : 120 px ;
right : 35 px ;
background : # 3 B4450 ;
border : 1 px solid # 5 B748C ;
padding : 14 px ;
overflow : auto ;
& : : - webkit - scrollbar {
width : 6 px ;
}
/ / 滚 动 条 里 面 默 认 的 小 方 块 , 自 定 义 样 式
@ -401,63 +571,222 @@ export default {
/ / 滚 动 条 里 面 的 轨 道
& : : - webkit - scrollbar - track {
background : transparent ;
}
. close {
position : absolute ;
top : 14 px ;
right : 14 px ;
width : 18 px ;
height : 18 px ;
background : url ( '../../../public/pbImg/关闭.png' ) no - repeat ;
background - size : 100 % 100 % ;
cursor : pointer ;
}
. el - checkbox {
width : 80 % ;
height : 34 px ;
opacity : 0.7 ;
background - image : linear - gradient ( 180 deg , rgba ( 234 , 241 , 248 , 0.10 ) 0 % , rgba ( 208 , 222 , 238 , 0.10 ) 100 % ) ;
border : 1 px solid # 5 B748C ;
. companyName {
width : 100 % ;
height : 20 px ;
font - size : 14 px ;
color : # FFE6D9 ;
letter - spacing : 0 ;
line - height : 16 px ;
text - shadow : 0 0 8 px rgba ( 255 , 119 , 52 , 0.50 ) ;
font - weight : 500 ;
}
margin : 16 px 15 px 0 ;
. companybiaoqian {
margin - top : 10 px ;
width : 100 % ;
height : 28 px ;
font - size : 14 px ;
color : # EAF6FF ;
letter - spacing : 1 px ;
padding : 7 px ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
overflow : hidden ;
white - space : nowrap ; / / 禁 止 换 行
width : 270 px ;
text - overflow : ellipsis ; / / . . .
. shewei {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/编组 11991.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # B5EBFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
. is - checked {
color : # 37 FDC7 ;
background : rgba ( 13 , 251 , 246 , 0.10 ) ;
border : 1 px solid # 37 FDC7 ;
box - sizing : border - box ;
. zhongdian {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/编组 11222221.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
. el - checkbox _ _input . is - checked + . el - checkbox _ _label {
color : # 37 FDC7 ;
. zhibao {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/编组 11991备份 10.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
. el - checkbox _ _input . is - checked . el - checkbox _ _inner ,
. el - checkbox _ _input . is - indeterminate . el - checkbox _ _inner {
background - color : rgba ( 13 , 251 , 246 , 0.10 ) ;
border - color : rgba ( 255 , 251 , 246 , 0.6 ) ;
. zhian {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/编组 11991备份 21.png' ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
}
. companyxinxi {
margin - top : 20 px ;
width : 100 % ;
/ / h e i g h t : 2 8 p x ;
font - size : 14 px ;
color : # D0DEEE ;
letter - spacing : 0 ;
font - weight : 400 ;
. online {
font - size : 14 px ;
color : # 4 CF993 ;
letter - spacing : 0 ;
font - weight : 400 ;
}
. outline {
font - size : 14 px ;
color : # FF7171 ;
letter - spacing : 0 ;
font - weight : 400 ;
}
span {
font - size : 14 px ;
color : # FFFFFF ;
letter - spacing : 0 ;
}
}
. el - dialog _ _footer {
padding : 0 px 30 px 20 px ;
. todangan {
margin - top : 15 px ;
width : 100 % ;
height : 30 px ;
line - height : 30 px ;
cursor : pointer ;
font - size : 14 px ;
color : # 4 BCCFF ;
letter - spacing : 0 ;
display : flex ;
justify - content : center ;
align - items : center ;
img {
width : 20 px ;
height : 20 px ;
}
}
}
}
. picForm {
/deep/ . el - dialog {
background - color : rgba ( 0 , 0 , 0 , 0 ) ;
background : url ( '~@/assets/companyFile/背景.png' ) no - repeat ;
background - size : 100 % 100 % ;
width : 811 px ;
height : 534 px ;
. el - dialog _ _title {
font - size : 16 px ;
color : # EBFFF4 ;
letter - spacing : 2 px ;
text - shadow : 0 0 9 px rgba ( 21 , 255 , 195 , 0.77 ) ;
font - weight : 400 ;
}
. el - dialog _ _body {
box - sizing : border - box ;
height : 480 px ;
position : relative ;
img {
width : 100 % ;
height : 100 % ;
background : # f9f5f5 ;
}
. zhezhao {
width : 771 px ;
height : 420 px ;
position : absolute ;
top : 30 px ;
left : 20 px ;
z - index : 1 ;
background : rgba ( 0 , 0 , 0 , 0.4 ) ;
display : flex ;
justify - content : center ;
align - items : center ;
. el - button -- default {
width : 96 px ;
height : 35 px ;
opacity : 0.8 ;
background : rgba ( 0 , 0 , 0 , 0 ) ;
background - image : linear - gradient ( 180 deg , rgba ( 234 , 241 , 248 , 0.10 ) 0 % , rgba ( 208 , 222 , 238 , 0.10 ) 100 % ) ;
border : 1 px solid rgba ( 91 , 116 , 140 , 1 ) ;
border - radius : 4 px ;
color : # E3DEFF
width : 99 px ;
height : 46 px ;
padding : 0 ;
line - height : 46 px ;
text - align : center ;
background : # 163 C53 ;
font - size : 16 px ;
color : # F8FBFF ;
letter - spacing : 0.89 px ;
font - weight : 500 ;
border : 0 ;
}
. el - button -- primary {
width : 96 px ;
height : 35 px ;
width : 99 px ;
height : 46 px ;
line - height : 46 px ;
padding : 0 ;
text - align : center ;
background : rgba ( 0 , 0 , 0 , 0 ) ;
border : 0 ;
background : url ( '~@/assets/realtimeWarning/2121.png' ) no - repeat ;
background : url ( '~@/assets/ companyFile /2121.png') no - repeat ;
background - size : 100 % 100 % ;
font - size : 16 px ;
color : # F8FBFF ;
letter - spacing : 0.89 px ;
font - weight : 500 ;
}
}
}
}
xuhaoyun
1 year ago
