|
|
<template>
|
|
|
<div class="main">
|
|
|
<div class="box">
|
|
|
<div class="title">要素资源</div>
|
|
|
<div class="leftBox">
|
|
|
<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="企业">
|
|
|
</el-option>
|
|
|
<el-option label="监控" value="监控">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
<el-form :model="formInline" class="search">
|
|
|
<el-form-item class="formItem">
|
|
|
<el-input v-model.trim="formInline.name" placeholder="请输入名称搜索" clearable
|
|
|
class="formIpt"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-button type="primary" @click="getCompanyList()">搜索</el-button>
|
|
|
<el-button @click="reset()">重置</el-button>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<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>
|
|
|
</el-tooltip>
|
|
|
<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>
|
|
|
<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>
|
|
|
</el-tooltip>
|
|
|
|
|
|
<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="tucengCanban">
|
|
|
<div class="topText">图层</div>
|
|
|
<div class="tucengBox">
|
|
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
|
|
|
@change="handleCheckAllChange">全选</el-checkbox>
|
|
|
<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></el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog title="实时监控" :visible.sync="diaVisible" class="picForm">
|
|
|
<playVideo :video="{ url: monitorData.wsFlv, index: 1 }" :control="true" v-if="diaVisible"></playVideo>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
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,
|
|
|
companyInfoList: [],
|
|
|
deviceVideoInfoList: [],
|
|
|
diaVisible: false,
|
|
|
checkedDepts: [],
|
|
|
deptList: [],
|
|
|
chuzhiData: {},
|
|
|
Selectvalue: '企业',
|
|
|
formInline: {},
|
|
|
companyData: {},
|
|
|
showCompany: false,
|
|
|
cameraData: {},
|
|
|
showCamera: false,
|
|
|
monitorData: {},
|
|
|
checkAll: false,
|
|
|
cityOptions: ['视频监控', '园区企业'],
|
|
|
checkedCities: ['视频监控', '园区企业'],
|
|
|
cities: ['视频监控', '园区企业'],
|
|
|
isIndeterminate: true
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getList()
|
|
|
},
|
|
|
methods: {
|
|
|
getList() {
|
|
|
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.formInline = {}
|
|
|
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',
|
|
|
})
|
|
|
},
|
|
|
showVideo() {
|
|
|
realTimeMonitoring({ pageSize: 10, pageNum: 1, deviceName: this.cameraData.deviceName, companyId: this.cameraData.companyId }).then(res => {
|
|
|
this.monitorData = res.data[0]
|
|
|
this.diaVisible = true
|
|
|
})
|
|
|
},
|
|
|
handleCheckAllChange(val) {
|
|
|
console.log(val, 'val');
|
|
|
|
|
|
this.checkedCities = val ? this.cityOptions : [];
|
|
|
this.isIndeterminate = false;
|
|
|
if (val) {
|
|
|
this.getList()
|
|
|
} else {
|
|
|
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;
|
|
|
},
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.main {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 80px);
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
.box {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
padding: 70px 25px 20px;
|
|
|
background: url('~@/assets/realtimeWarning/231.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
top: 25px;
|
|
|
left: 25px;
|
|
|
font-size: 18px;
|
|
|
color: #FFFFFF;
|
|
|
letter-spacing: 1px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.leftBox {
|
|
|
width: calc(100%);
|
|
|
height: 100%;
|
|
|
//margin-right: 20px;
|
|
|
box-sizing: border-box;
|
|
|
background: url('~@/assets/realtimeWarning/back002.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
padding: 20px;
|
|
|
position: relative;
|
|
|
|
|
|
.map {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.searchBox {
|
|
|
position: absolute;
|
|
|
height: 40px;
|
|
|
width: 500px;
|
|
|
top: 40px;
|
|
|
right: 20px;
|
|
|
display: flex;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.topSelect1 {
|
|
|
margin-top: 20px;
|
|
|
|
|
|
/deep/ .el-input {
|
|
|
width: 100px;
|
|
|
height: 35px;
|
|
|
|
|
|
.el-select__caret {
|
|
|
line-height: 35px;
|
|
|
}
|
|
|
|
|
|
.el-input__inner {
|
|
|
height: 35px;
|
|
|
// background: url('~@/assets/safetyIndex/选择框.png') no-repeat;
|
|
|
// background-size: 100% 100%;
|
|
|
background: #3B4450;
|
|
|
font-size: 14px;
|
|
|
color: #C4E5FF;
|
|
|
letter-spacing: 1px;
|
|
|
text-align: center;
|
|
|
font-weight: 400;
|
|
|
border: 0;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.search {
|
|
|
height: 35px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/deep/.el-input__inner {
|
|
|
// background: url('~@/assets/companyFile/2121.png') no-repeat;
|
|
|
background: #3B4450;
|
|
|
border: 1px solid #5B748C;
|
|
|
color: rgba(234, 246, 255, 0.7);
|
|
|
height: 35px;
|
|
|
|
|
|
.el-range-separator {
|
|
|
color: #ccc;
|
|
|
}
|
|
|
|
|
|
.el-range-input {
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
color: #ccc;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/.el-form-item {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
.el-form-item__content {
|
|
|
line-height: 35px;
|
|
|
}
|
|
|
|
|
|
.el-form-item__label {
|
|
|
color: #EAF6FF;
|
|
|
letter-spacing: 1px;
|
|
|
text-align: center;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/.el-button--primary {
|
|
|
width: 60px;
|
|
|
height: 35px;
|
|
|
line-height: 30px;
|
|
|
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: 14px;
|
|
|
color: #F8FBFF;
|
|
|
letter-spacing: 0.89px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
/deep/.el-button--default {
|
|
|
width: 60px;
|
|
|
height: 35px;
|
|
|
line-height: 30px;
|
|
|
padding: 0;
|
|
|
text-align: center;
|
|
|
background: #3B4450;
|
|
|
border: 0;
|
|
|
|
|
|
font-size: 14px;
|
|
|
color: #F8FBFF;
|
|
|
letter-spacing: 0.89px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.companyCanban {
|
|
|
width: 320px;
|
|
|
height: 540px;
|
|
|
position: absolute;
|
|
|
top: 120px;
|
|
|
right: 35px;
|
|
|
background: #3B4450;
|
|
|
border: 1px solid #5B748C;
|
|
|
padding: 14px;
|
|
|
overflow: auto;
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
|
|
|
}
|
|
|
|
|
|
// 滚动条里面默认的小方块,自定义样式
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: rgba(255, 255, 255, 0.44);
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
// 滚动条里面的轨道
|
|
|
&::-webkit-scrollbar-track {
|
|
|
background: transparent;
|
|
|
|
|
|
}
|
|
|
|
|
|
.close {
|
|
|
position: absolute;
|
|
|
top: 14px;
|
|
|
right: 14px;
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
background: url('../../../public/pbImg/close.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.companyName {
|
|
|
width: 100%;
|
|
|
height: 20px;
|
|
|
font-size: 14px;
|
|
|
color: #FFE6D9;
|
|
|
letter-spacing: 0;
|
|
|
line-height: 16px;
|
|
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
|
|
font-weight: 500;
|
|
|
padding-right: 20px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap; //禁止换行
|
|
|
}
|
|
|
|
|
|
.companybiaoqian {
|
|
|
margin-top: 10px;
|
|
|
width: 100%;
|
|
|
height: 28px;
|
|
|
font-size: 14px;
|
|
|
color: #D0DEEE;
|
|
|
letter-spacing: 0;
|
|
|
font-weight: 400;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap; //禁止换行
|
|
|
width: 270px;
|
|
|
text-overflow: ellipsis; //...
|
|
|
|
|
|
.shewei {
|
|
|
height: 26px;
|
|
|
line-height: 26px;
|
|
|
width: auto;
|
|
|
background: url('~@/assets/companyFile/sheweiback.png') no-repeat;
|
|
|
padding: 0 5px;
|
|
|
font-size: 14px;
|
|
|
color: #B5EBFF;
|
|
|
letter-spacing: 0.44px;
|
|
|
font-weight: 400;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.zhongdian {
|
|
|
height: 26px;
|
|
|
line-height: 26px;
|
|
|
width: auto;
|
|
|
background: url('~@/assets/companyFile/zhongdianback.png') no-repeat;
|
|
|
padding: 0 5px;
|
|
|
font-size: 14px;
|
|
|
color: #E3DEFF;
|
|
|
letter-spacing: 0.44px;
|
|
|
font-weight: 400;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.zhibao {
|
|
|
height: 26px;
|
|
|
line-height: 26px;
|
|
|
width: auto;
|
|
|
background: url('~@/assets/companyFile/zhibaoback.png') no-repeat;
|
|
|
padding: 0 5px;
|
|
|
font-size: 14px;
|
|
|
color: #E3DEFF;
|
|
|
letter-spacing: 0.44px;
|
|
|
font-weight: 400;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.zhian {
|
|
|
height: 26px;
|
|
|
line-height: 26px;
|
|
|
width: auto;
|
|
|
background: url('~@/assets/companyFile/zhianback.png') no-repeat;
|
|
|
padding: 0 5px;
|
|
|
font-size: 14px;
|
|
|
color: #E3DEFF;
|
|
|
letter-spacing: 0.44px;
|
|
|
font-weight: 400;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.companyxinxi {
|
|
|
margin-top: 10px;
|
|
|
width: 100%;
|
|
|
//height: 28px;
|
|
|
font-size: 14px;
|
|
|
color: #D0DEEE;
|
|
|
letter-spacing: 0;
|
|
|
font-weight: 400;
|
|
|
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
color: #FFFFFF;
|
|
|
letter-spacing: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.todangan {
|
|
|
margin-top: 15px;
|
|
|
width: 100%;
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
color: #4BCCFF;
|
|
|
letter-spacing: 0;
|
|
|
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
img {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tucengCanban {
|
|
|
width: 180px;
|
|
|
height: 113px;
|
|
|
position: absolute;
|
|
|
top: 30px;
|
|
|
left: 35px;
|
|
|
background: #3B4450;
|
|
|
border: 1px solid #5B748C;
|
|
|
padding: 0 14px;
|
|
|
|
|
|
.topText {
|
|
|
height: 30px;
|
|
|
border-bottom: 1px solid rgba(212, 212, 212, 0.25);
|
|
|
font-size: 14px;
|
|
|
color: #D0DEEE;
|
|
|
letter-spacing: 0;
|
|
|
font-weight: 400;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.tucengBox {
|
|
|
height: 150px;
|
|
|
height: 100%;
|
|
|
|
|
|
/deep/.el-checkbox {
|
|
|
color: #D0DEEE;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cameraCanban {
|
|
|
width: 320px;
|
|
|
height: 232px;
|
|
|
position: absolute;
|
|
|
top: 120px;
|
|
|
right: 35px;
|
|
|
background: #3B4450;
|
|
|
border: 1px solid #5B748C;
|
|
|
padding: 14px;
|
|
|
overflow: auto;
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
|
|
|
}
|
|
|
|
|
|
// 滚动条里面默认的小方块,自定义样式
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: rgba(255, 255, 255, 0.44);
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
// 滚动条里面的轨道
|
|
|
&::-webkit-scrollbar-track {
|
|
|
background: transparent;
|
|
|
|
|
|
}
|
|
|
|
|
|
.close {
|
|
|
position: absolute;
|
|
|
top: 14px;
|
|
|
right: 14px;
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
background: url('../../../public/pbImg/close.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.companyName {
|
|
|
width: 100%;
|
|
|
height: 20px;
|
|
|
font-size: 14px;
|
|
|
color: #FFE6D9;
|
|
|
letter-spacing: 0;
|
|
|
line-height: 16px;
|
|
|
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.companybiaoqian {
|
|
|
margin-top: 10px;
|
|
|
width: 100%;
|
|
|
height: 28px;
|
|
|
font-size: 14px;
|
|
|
color: #D0DEEE;
|
|
|
letter-spacing: 0;
|
|
|
font-weight: 400;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap; //禁止换行
|
|
|
width: 270px;
|
|
|
text-overflow: ellipsis; //...
|
|
|
|
|
|
.shewei {
|
|
|
height: 26px;
|
|
|
line-height: 26px;
|
|
|
width: auto;
|
|
|
background: url('~@/assets/companyFile/sheweiback.png') no-repeat;
|
|
|
padding: 0 5px;
|
|
|
font-size: 14px;
|
|
|
color: #B5EBFF;
|
|
|
letter-spacing: 0.44px;
|
|
|
font-weight: 400;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.zhongdian {
|
|
|
height: 26px;
|
|
|
line-height: 26px;
|
|
|
width: auto;
|
|
|
background: url('~@/assets/companyFile/zhongdianback.png') no-repeat;
|
|
|
padding: 0 5px;
|
|
|
font-size: 14px;
|
|
|
color: #E3DEFF;
|
|
|
letter-spacing: 0.44px;
|
|
|
font-weight: 400;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.zhibao {
|
|
|
height: 26px;
|
|
|
line-height: 26px;
|
|
|
width: auto;
|
|
|
background: url('~@/assets/companyFile/zhibaoback.png') no-repeat;
|
|
|
padding: 0 5px;
|
|
|
font-size: 14px;
|
|
|
color: #E3DEFF;
|
|
|
letter-spacing: 0.44px;
|
|
|
font-weight: 400;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.zhian {
|
|
|
height: 26px;
|
|
|
line-height: 26px;
|
|
|
width: auto;
|
|
|
background: url('~@/assets/companyFile/zhianback.png') no-repeat;
|
|
|
padding: 0 5px;
|
|
|
font-size: 14px;
|
|
|
color: #E3DEFF;
|
|
|
letter-spacing: 0.44px;
|
|
|
font-weight: 400;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.companyxinxi {
|
|
|
margin-top: 20px;
|
|
|
width: 100%;
|
|
|
//height: 28px;
|
|
|
font-size: 14px;
|
|
|
color: #D0DEEE;
|
|
|
letter-spacing: 0;
|
|
|
font-weight: 400;
|
|
|
|
|
|
.online {
|
|
|
font-size: 14px;
|
|
|
color: #4CF993;
|
|
|
letter-spacing: 0;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.outline {
|
|
|
font-size: 14px;
|
|
|
color: #FF7171;
|
|
|
letter-spacing: 0;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
color: #FFFFFF;
|
|
|
letter-spacing: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.todangan {
|
|
|
margin-top: 15px;
|
|
|
width: 100%;
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
color: #4BCCFF;
|
|
|
letter-spacing: 0;
|
|
|
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
img {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.picForm {
|
|
|
/deep/ .el-dialog {
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
background: url('~@/assets/companyFile/背景.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 811px;
|
|
|
height: 534px;
|
|
|
|
|
|
.el-dialog__title {
|
|
|
font-size: 16px;
|
|
|
color: #EBFFF4;
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.el-dialog__body {
|
|
|
box-sizing: border-box;
|
|
|
height: 480px;
|
|
|
position: relative;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #f9f5f5;
|
|
|
}
|
|
|
|
|
|
.zhezhao {
|
|
|
width: 771px;
|
|
|
height: 420px;
|
|
|
position: absolute;
|
|
|
top: 30px;
|
|
|
left: 20px;
|
|
|
z-index: 1;
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
.el-button--default {
|
|
|
width: 99px;
|
|
|
height: 46px;
|
|
|
padding: 0;
|
|
|
line-height: 46px;
|
|
|
text-align: center;
|
|
|
background: #163C53;
|
|
|
font-size: 16px;
|
|
|
color: #F8FBFF;
|
|
|
letter-spacing: 0.89px;
|
|
|
font-weight: 500;
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
.el-button--primary {
|
|
|
width: 99px;
|
|
|
height: 46px;
|
|
|
line-height: 46px;
|
|
|
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: 16px;
|
|
|
color: #F8FBFF;
|
|
|
letter-spacing: 0.89px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</style> |
