<template>
|
<div class="dapingzhanshi-wrap">
|
<div class="daping-header">
|
<h1>综合行政执法局智慧执法办案平台</h1>
|
<img @click="backBtn" class="back-box" src="../../assets/images/backImg.png" alt="">
|
</div>
|
<div class="daping-main-box">
|
<div class="daping-top">
|
<div class="daping-top-block">
|
<div class="top-block-inside">
|
<div class="show-top-block-icon icon1">
|
</div>
|
<div class="shichang-content">
|
<h1>{{marketObj.total}}</h1>
|
<h2>市场主体总数</h2>
|
</div>
|
</div>
|
<div class="top-block-inside2">
|
<div class="shichang-block">
|
<h1>个体</h1>
|
<h2>{{marketObj.geti}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>公民</h1>
|
<h2>{{marketObj.gongmin}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>经营者</h1>
|
<h2>{{marketObj.faren}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>其它</h1>
|
<h2>{{marketObj.qita}}</h2>
|
</div>
|
</div>
|
</div>
|
<div class="daping-top-block">
|
<div class="top-block-inside">
|
<div class="show-top-block-icon icon2">
|
</div>
|
<div class="shichang-content">
|
<h1>{{falvObj.total || 0}}</h1>
|
<h2>法律法规</h2>
|
</div>
|
</div>
|
<div class="top-block-inside2">
|
<div class="shichang-block">
|
<h1>法律</h1>
|
<h2>{{falvObj.falv || 0}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>法规</h1>
|
<h2>{{falvObj.fagui || 0}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>规章</h1>
|
<h2>{{falvObj.guizhang || 0}}</h2>
|
</div>
|
</div>
|
</div>
|
<div class="daping-top-block">
|
<div class="top-block-inside">
|
<div class="show-top-block-icon icon3">
|
</div>
|
<div class="shichang-content">
|
<h1>{{CaseNumObj.total}}</h1>
|
<h2>案件数</h2>
|
</div>
|
</div>
|
<div class="top-block-inside2">
|
<div class="shichang-block">
|
<h1>简易程序</h1>
|
<h2>{{CaseNumObj.easyCase}}</h2>
|
|
</div>
|
<div class="shichang-block">
|
<h1>一般程序</h1>
|
<h2>{{CaseNumObj.caseNum}}</h2>
|
</div>
|
</div>
|
</div>
|
<div class="daping-top-block">
|
<div class="top-block-inside">
|
<div class="show-top-block-icon icon4">
|
</div>
|
<div class="shichang-content">
|
<h1>{{getMoneyNumObj.moneyTotal|| 0}}<font style="font-size: 0.046875rem /* 12/256 */">万元</font></h1>
|
<h2>罚没资金</h2>
|
</div>
|
</div>
|
<div class="top-block-inside2">
|
<div class="shichang-block">
|
<h1>笔数</h1>
|
<h2>{{getMoneyNumObj.biTotal || 0}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>案件数</h1>
|
<h2>{{getMoneyNumObj.caseTotal || 0}}</h2>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="daping-middle">
|
<div class="shixiang-box">
|
</div>
|
<div class="shixiang-content">
|
<h1>{{powersTotal}}</h1>
|
<h2>执法事项清单</h2>
|
</div>
|
<div class="shixiang-content2">
|
<div class="shixiang-content2-block" v-for="(item,index) in powersData" :key="index">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>{{item.name}}: {{item.num}}</h1>
|
</div>
|
</div>
|
</div>
|
<div class="daping-bottom">
|
<div class="map-left mapLeft">
|
<div class="map-left-title title1">
|
<h1>执法队员</h1>
|
</div>
|
<div class="map-left-main1">
|
<div class="map-main-line" v-for="(item,index) in this.teamData" :key="index">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>{{item.teamName}}</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>{{item.caseState | caseStateFilter}}</h1>
|
</div>
|
</div>
|
<!--<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>蔺有智</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>执法中</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>高超鑫</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>执法中</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>王春杰</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>执法中</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>马智慧</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>执法中</h1>
|
</div>
|
</div>-->
|
</div>
|
<div class="map-left-title title2">
|
<h1>热点案件</h1>
|
</div>
|
<div class="map-left-main1">
|
<div class="map-main-line" v-for="(item,index) in hotCaseData" :key="index">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<tooltipOver class="tooltip-daping-box" ref="hotCaseRef" :content="item.name">
|
</tooltipOver>
|
</div>
|
<div class="main1-block2">
|
<h1>{{item.isOver | isOverFilter}}</h1>
|
</div>
|
</div>
|
<!--<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="发现邯郸市峰峰新坡镇羊一农资服务站涉嫌采购、销售标签不符合规定的农药案" placement="top-start">
|
<h1>发现邯郸市峰峰新坡镇羊一农资服务站涉嫌采购、销售标签不符合规定的农药案</h1>
|
</el-tooltip>
|
</div>
|
<div class="main1-block2">
|
<h1>进行中</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="常志军涉嫌运输渣土过程中未依法采取有效措施防治扬尘污染案" placement="top-start">
|
<h1>常志军涉嫌运输渣土过程中未依法采取有效措施防治扬尘污染案</h1>
|
</el-tooltip>
|
</div>
|
<div class="main1-block2">
|
<h1>已结案</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="孟文江涉嫌未取得采矿许可证擅自采矿案" placement="top-start">
|
<h1>孟文江涉嫌未取得采矿许可证擅自采矿案</h1>
|
</el-tooltip>
|
</div>
|
<div class="main1-block2">
|
<h1>已结案</h1>
|
</div>
|
</div>-->
|
</div>
|
</div>
|
<div class="map-middle">
|
<baidu-map
|
:center="center"
|
:zoom="zoom"
|
class="bm-view"
|
@ready="handler">
|
</baidu-map>
|
</div>
|
<div class="map-left mapRight">
|
<div class="map-left-title title3">
|
<h1>未办理案件</h1>
|
</div>
|
<div class="map-left-main1">
|
<!--<div class="map-main-line">
|
<div class="main1-block none-case-box">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="蔺密娥涉嫌经营劣质农药案" placement="top-start">
|
<h1>蔺密娥涉嫌经营劣质农药案</h1>
|
</el-tooltip>
|
</div>
|
<div class="main1-block2">
|
<h1>2022-09-16</h1>
|
<h1>{{item.recordTime}}</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block none-case-box">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="邯郸市峰峰新坡镇羊一农资服务站涉嫌采购、销售标签不符合规定的农药案" placement="top-start">
|
<h1>邯郸市峰峰新坡镇羊一农资服务站涉嫌采购、销售标签不符合规定的农药案</h1>
|
</el-tooltip>
|
</div>
|
<div class="main1-block2">
|
<h1>2022-09-20</h1>
|
<!–<h1>{{item.recordTime}}</h1>–>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block none-case-box">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="峰峰矿区和村镇宏祥兽药饲料门市部涉嫌经营无产品批准文号的饲料添加剂案" placement="top-start">
|
<h1>峰峰矿区和村镇宏祥兽药饲料门市部涉嫌经营无产品批准文号的饲料添加剂案</h1>
|
</el-tooltip>
|
</div>
|
<div class="main1-block2">
|
<h1>2022-09-21</h1>
|
<!–<h1>{{item.recordTime}}</h1>–>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block none-case-box">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="李新波涉嫌未按照规定保存行程路线和托运人提供的动物名称、检疫证明编号、数量等信息案" placement="top-start">
|
<h1>李新波涉嫌未按照规定保存行程路线和托运人提供的动物名称、检疫证明编号、数量等信息案</h1>
|
</el-tooltip>
|
</div>
|
<div class="main1-block2">
|
<h1>2022-09-22</h1>
|
<!–<h1>{{item.recordTime}}</h1>–>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block none-case-box">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="河北恒聚智装备科技发展有限公司涉嫌未办理《建设工程规划许可证》擅自建设案" placement="top-start">
|
<h1>河北恒聚智装备科技发展有限公司涉嫌未办理《建设工程规划许可证》擅自建设案</h1>
|
</el-tooltip>
|
</div>
|
<div class="main1-block2">
|
<h1>2022-09-22</h1>
|
<!–<h1>{{item.recordTime}}</h1>–>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block none-case-box">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="邯郸市峰峰矿区轩然兽药经营部涉嫌经营无产品批准文号的饲料添加剂案" placement="top-start">
|
<h1>邯郸市峰峰矿区轩然兽药经营部涉嫌经营无产品批准文号的饲料添加剂案</h1>
|
</el-tooltip>
|
</div>
|
<div class="main1-block2">
|
<h1>2022-09-25</h1>
|
<!–<h1>{{item.recordTime}}</h1>–>
|
</div>
|
</div>-->
|
<div class="map-main-line" v-for="(item,index) in notCaseData" :key="index">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<!--<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
|
<h1>{{item.name}}</h1>
|
</el-tooltip>-->
|
<tooltipOver class="tooltip-daping-box" ref="notCaseRef" :content="item.name">
|
</tooltipOver>
|
</div>
|
<div class="main1-block2">
|
<h1>{{item.recordTime}}</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {getLawNums,getCaseNums,getMoneyNum,getpowers,getNotCase,getTeam,getHotCase} from '@/api/show/index'
|
import {getAllNums} from '@/api/company'
|
import tooltipOver from "../../components/tooltipOver/tooltipOver";
|
export default {
|
name: "index",
|
components: {
|
tooltipOver
|
},
|
filters: {
|
caseStateFilter(val) {
|
if(val) {
|
if(val == 0) {
|
return '执行中'
|
}else if(val == 1) {
|
return '未执行'
|
}
|
}
|
},
|
isOverFilter(val) {
|
if(val) {
|
if(val == 0) {
|
return '进行中'
|
}else if(val == 1) {
|
return '已结案'
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
center: { lng: 116.395645, lat: 39.929986 },
|
zoom: 6,
|
mapObj:{},
|
marketObj:{
|
faren: 0,
|
gongmin: 0,
|
qita: 0,
|
total: 0
|
},
|
falvObj:{ //法律法规
|
falv:0, //法律
|
fagui:0, //法规
|
guizhang:0, //规章
|
total:0, //法律法规总数
|
},
|
CaseNumObj: {
|
caseNum: 0,
|
easyCase: 0,
|
total: 11
|
},
|
getMoneyNumObj: {
|
forfeit:0,
|
caseNumber:0,
|
total:0
|
},
|
powersTotal:0, //执法事项清单
|
powersData: {}, //执法事项清单
|
mapData:[], //地图数据
|
notCaseData:[],
|
teamData:[], //执法队伍data
|
hotCaseData:[]
|
}
|
},
|
created() {
|
this.getNotCase() //未完成案件
|
this.getAllNums() //市场主体接口
|
this.getLawNums() //法律法规接口
|
this.getCaseNums() //案件数接口
|
this.getMoneyNum() //罚没资金
|
this.getpowers() //执法清单
|
this.getTeam() //执法队员
|
this.getHotCase() //市场主体地图
|
// this.getMarket() //市场主体地图
|
},
|
methods: {
|
getBoundary(BMap, map){
|
var bdary = new BMap.Boundary();
|
bdary.get("峰峰矿区", function(rs){ //获取行政区域
|
// map.clearOverlays(); //清除地图覆盖物
|
var count = rs.boundaries.length; //行政区域的点有多少个
|
console.log(count,'count======')
|
if (count === 0) {
|
alert('未能获取当前输入行政区域');
|
return ;
|
}
|
var pointArray = [];
|
for (var i = 0; i < count; i++) {
|
var ply = new BMap.Polygon(rs.boundaries[i], {
|
strokeWeight: 4,
|
fillColor: '#00F5FF',
|
fillOpacity: '0.01',
|
strokeColor: "#ff0000"
|
}); //建立多边形覆盖物
|
map.addOverlay(ply); //添加覆盖物
|
pointArray = pointArray.concat(ply.getPath());
|
}
|
map.setViewport(pointArray); //调整视野
|
// addlabel();
|
});
|
},
|
getNotCase() { //未完成案件
|
getNotCase().then(res => {
|
if(res.data.code == 0) {
|
this.notCaseData = res.data.data
|
}
|
})
|
},
|
getAllNums() {
|
getAllNums().then(res => {
|
if(res.data.data != null) {
|
this.marketObj = res.data.data.total
|
}
|
})
|
},
|
getLawNums() { //展示页面上部法律法规接口
|
getLawNums().then(res => {
|
this.falvObj = res.data.data
|
}).catch(e => {
|
|
})
|
},
|
getCaseNums() { //展示页面上部案件数接口
|
getCaseNums().then(res => {
|
this.CaseNumObj = res.data.data
|
}).catch(e => {
|
|
})
|
},
|
getMoneyNum() { //展示页面上部罚没资金接口
|
getMoneyNum().then(res => {
|
if(res.data.code == 0) {
|
this.getMoneyNumObj = res.data.data
|
}
|
}).catch(e => {
|
|
})
|
},
|
getTeam() { //执法队员
|
getTeam().then(res => {
|
if(res.data.code == 0) {
|
this.teamData = res.data.data
|
}
|
}).catch(e => {
|
|
})
|
},
|
getpowers() { //执法清单
|
getpowers().then(res => {
|
if(res.data.code == 0) {
|
this.powersTotal = res.data.data.total
|
this.powersData = res.data.data.key || []
|
// this.powersData = ['发展改革：166','交通运输：166']
|
// this.powersData = [{
|
// name: '发展改革',
|
// num: 166
|
// },{
|
// name: '发展改革',
|
// num: 166
|
// }]
|
}
|
})
|
},
|
getHotCase() {
|
getHotCase().then(res => {
|
if(res.data.code == 0) {
|
this.hotCaseData = res.data.data
|
}
|
})
|
},
|
// getMarket() {
|
// getMarket().then(res => {
|
// console.log(res.data.code,'res===---')
|
// if(res.data.code == 0) {
|
// this.mapData = res.data.data.data
|
// this.addMarker()
|
// }
|
// }).catch(e => {
|
//
|
// })
|
// },
|
handler({BMap, map}) {
|
this.mapObj = {BMap, map}
|
// map.setMapStyle({style:'bluish'}); //换颜色
|
let goodsData = require('../../assets/js/custom_map_config')
|
let point = new BMap.Point(114.466666666667,36.6)
|
map.centerAndZoom(point, 11) //
|
map.setMapStyleV2({
|
styleJson: goodsData
|
// styleId: '5f9b8a9639cf6e4ae8806379bedba141'
|
// style: 'bluish'
|
})
|
map.setCurrentCity('峰峰矿区') // 设置地图显示的城市 此项是必须设置的
|
map.enableScrollWheelZoom(true) //鼠标滚动缩放
|
|
this.addMarker()
|
this.getBoundary(BMap, map)
|
},
|
addMarker() { //创建点
|
let BMap = this.mapObj.BMap
|
let map = this.mapObj.map
|
/*this.mapData = [{
|
longitude:'114.228178',
|
latitude:'36.479151',
|
subjectName:'孙显',
|
address:'峰峰矿区太安优主宠物诊所',
|
phone:'13932032323'
|
},{
|
longitude:'114.221343',
|
latitude:'36.488299',
|
subjectName:'孙显',
|
address:'河北省邯郸市峰峰矿区鼓山北街160号',
|
phone:'15033002345'
|
},{
|
longitude:'114.534419',
|
latitude:'36.644237',
|
subjectName:'吴虎峰',
|
address:'邯郸市峰峰矿区新峰房地产开发有限公司',
|
phone:'15383209333'
|
},{
|
longitude:'114.478652',
|
latitude:'36.593487',
|
subjectName:'房兆兰',
|
address:'峰峰矿区新市区蓝精灵文具店',
|
phone:'13673102552'
|
},{
|
longitude:'114.601109',
|
latitude:'36.611103',
|
subjectName:'石晓明',
|
address:'邯郸市峰峰矿区巴鼎餐饮服务有限公司',
|
phone:'18513451197'
|
}]*/
|
this.mapData.forEach(item => { //lng 经度 lat 经度
|
if(item.longitude !=null && item.latitude != null) {
|
let point = new BMap.Point(item.longitude,item.latitude)
|
let marker = new BMap.Marker(point,11)
|
map.addOverlay(marker)
|
// 添加鼠标划入坐标点的显示内容
|
// let str = `<div style="padding:4px 10px">
|
// <div>
|
// <h1 style="color: #2DE2FF;font-size: 13px;text-align: center;line-height: 2">{{item.subjectName}}</h1>
|
// <div style="display: flex;flex-direction: column">
|
// <div><h1 style="color: #2DE2FF;font-size: 12px;padding:2px 0"">地址：{{item.address}}</h1></div>
|
// <div><h1 style="color: #2DE2FF;font-size: 12px;padding:2px 0">电话：{{item.phone}}</h1></div>
|
// </div>
|
// </div>
|
// </div>
|
// </div>`
|
let str = '<div style="padding:4px 10px">'
|
str += '<div>'
|
str += '<h1 style="color: #2DE2FF;font-size: 13px;text-align: center;line-height: 2"> ' + item.subjectName + '</h1>'
|
str += '<div style="display: flex;flex-direction: column">'
|
str += '<div><h1 style="color: #2DE2FF;font-size: 12px;padding:2px 0"">地址：'+item.address+'</h1></div>'
|
str += '<div><h1 style="color: #2DE2FF;font-size: 12px;padding:2px 0">电话：'+item.phone+'</h1></div>'
|
str += '</div>'
|
str += '</div>'
|
let opts = {
|
position: point,
|
offset: new BMap.Size(30,-30)
|
}
|
// 创建一个文本标注实例
|
let label = new BMap.Label(str,opts);
|
// 清除百度地图自带样式
|
label.setStyle({
|
border: '1px solid rgba(36,110,221, .5)',
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
padding: '6px'
|
});
|
// 默认不显示文本标注
|
label.hide()
|
// 在全景场景内添加覆盖物
|
map.addOverlay(label);
|
marker.addEventListener('mouseover', function () {
|
label.show()
|
})
|
marker.addEventListener('mouseout', function () {
|
label.hide()
|
})
|
}
|
})
|
|
|
},
|
backBtn() {
|
this.$router.go(-1)
|
}
|
},
|
mounted() {
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
h1,h2,h3{
|
margin:0;
|
}
|
::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
/*滚动区域背景*/
|
::-webkit-scrollbar-track-piece {
|
background-color: silver;
|
-webkit-border-radius: 6px;
|
}
|
/*竖向滚动条*/
|
::-webkit-scrollbar-thumb:vertical {
|
height: 8px;
|
background-color: #20f3fc;
|
-webkit-border-radius: 6px;
|
}
|
/*横向滚动条*/
|
::-webkit-scrollbar-thumb:horizontal {
|
width: 8px;
|
background-color: #20f3fc;
|
-webkit-border-radius: 6px;
|
}
|
.dapingzhanshi-wrap{
|
width: 100%;
|
height: 100%;
|
background: url("../../assets/images/showIndex-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
.daping-header{
|
width: 100%;
|
height: 0.3125rem /* 60/192 */;
|
background: url("../../assets/images/showIndex-header-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
.back-box{
|
position: absolute;
|
left: 0.1302rem /* 25/192 */;
|
top: 0.0625rem /* 12/192 */;
|
cursor: pointer;
|
}
|
h1{
|
font-size: 0.1042rem /* 20/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: center;
|
color: #ffffff;
|
line-height: 0.1146rem /* 22/192 */;
|
text-align: center;
|
}
|
}
|
.daping-main-box{
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: calc(100% - 60px);
|
padding: 0 0.1979rem /* 38/192 */;
|
}
|
.daping-top{
|
display: flex;
|
.daping-top-block{
|
width: 2.3125rem /* 444/192 */;
|
height: 0.7396rem /* 142/192 */;
|
border: 1px solid #55cffc;
|
display: flex;
|
flex-direction: column;
|
margin: 0.1042rem /* 20/192 */ 0.0599rem /* 11.5/192 */;
|
&:first-child{
|
margin-left: 0;
|
}
|
&:last-child{
|
margin-right: 0;
|
}
|
.top-block-inside{
|
position: relative;
|
.show-top-block-icon{
|
width: 0.8333rem /* 160/192 */;
|
height: 0.84375rem /* 162/192 */;
|
position: absolute;
|
top: -0.21875rem /* -42/192 */;
|
left: 0.421875rem /* 81/192 */;
|
}
|
.icon1{
|
background: url("../../assets/images/show-top-block-icon1.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.icon2{
|
background: url("../../assets/images/show-top-block-icon2.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.icon3{
|
background: url("../../assets/images/show-top-block-icon3.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.icon4{
|
background: url("../../assets/images/show-top-block-icon4.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.shichang-content{
|
display: flex;
|
flex-direction: column;
|
margin-left: 1.25rem /* 240/192 */;
|
min-height: 0.5208rem /* 100/192 */;
|
justify-content: center;
|
h1{
|
font-size: 0.1458rem /* 28/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #2de2ff;
|
}
|
h2{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #ffffff;
|
margin-top: 0.026rem /* 5/192 */;
|
}
|
}
|
}
|
.top-block-inside2{
|
display: flex;
|
padding: 0 0.15625rem /* 30/192 */;
|
.shichang-block{
|
display: flex;
|
flex: 1;
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #ffffff;
|
margin-right: 0.03125rem /* 8/256 */;
|
}
|
h2{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #2de2ff;
|
}
|
}
|
}
|
}
|
}
|
.daping-middle{
|
width: 100%;
|
height: 0.6042rem /* 116/192 */;
|
background: url("../../assets/images/show-zhifa-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
position: relative;
|
.shixiang-box{
|
width: 0.8333rem /* 160/192 */;
|
height: 0.84375rem /* 162/192 */;
|
position: absolute;
|
top: -0.21875rem /* -42/192 */;
|
left: 0.3125rem /* 60/192 */;
|
background: url("../../assets/images/show-top-block-icon5.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.shixiang-content {
|
display: flex;
|
flex-direction: column;
|
margin-left: 1.1458rem /* 220/192 */;
|
min-height: 0.5208rem /* 100/192 */;
|
justify-content: center;
|
h1{
|
font-size: 0.1458rem /* 28/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #2de2ff;
|
}
|
h2{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #ffffff;
|
margin-top: 0.026rem /* 5/192 */;
|
width: max-content;
|
}
|
}
|
.shixiang-content2 {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: flex-start;
|
width: calc(100% - 0.3515625rem /* 90/256 */);
|
max-height: 98%;
|
overflow-y: auto;
|
margin-left: 0.4167rem /* 80/192 */;
|
-ms-overflow-style: none;
|
scrollbar-width: none;
|
&::-webkit-scrollbar { width: 0 !important }
|
.shixiang-content2-block{
|
display: flex;
|
width: 1.0417rem /* 200/192 */;
|
margin: 0.0521rem /* 10/192 */;
|
img{
|
width: 0.09375rem /* 18/192 */;
|
height: 0.09375rem /* 18/192 */;
|
margin-right: 0.0521rem /* 10/192 */;
|
}
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #ffffff;
|
line-height: 0.109375rem /* 21/192 */;
|
}
|
}
|
}
|
}
|
.daping-bottom{
|
display: flex;
|
height: calc(100% - 1.6875rem /* 324/192 */);
|
margin-top: 0.1042rem /* 20/192 */;
|
.map-left{
|
width: 2.3021rem /* 442/192 */;
|
height: 100%;
|
.map-left-title{
|
height: 7%;
|
h1{
|
font-size: 0.0885rem /* 17/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #2de2ff;
|
margin-left:0.15625rem /* 30/192 */;
|
line-height: 0.2083rem /* 40/192 */;
|
}
|
}
|
.title1{
|
width: 2.2865rem /* 439/192 */;
|
background: url("../../assets/images/map-left-title.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.title2{
|
width: 2.03125rem /* 390/192 */;
|
background: url("../../assets/images/map-left-title2.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.title3{
|
width: 2.2865rem /* 439/192 */;
|
background: url("../../assets/images/map-right-title.png") no-repeat center;
|
background-size: 100% 100%;
|
h1{
|
text-align: right!important;
|
margin-right: 0.15625rem;
|
}
|
}
|
}
|
.mapLeft{
|
background: url("../../assets/images/map-left-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.mapRight{
|
background: url("../../assets/images/map-right-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
.map-left-main1{
|
margin-left: 0.2396rem /* 46/192 */;
|
}
|
.map-left-main1{
|
height: calc(100% - 7% - 0.15625rem /* 30/192 */);
|
}
|
}
|
.map-left-main1{
|
width: calc(100% - 0.2396rem /* 46/192 */);
|
height: 45%;
|
display: flex;
|
flex-direction: column;
|
padding:0 0.1042rem /* 20/192 */;
|
overflow-y: auto;
|
.map-main-line{
|
width: 100%;
|
display: flex;
|
padding: 0.0521rem /* 10/192 */ 0;
|
cursor: pointer;
|
.main1-block{
|
display: flex;
|
flex:4;
|
img{
|
width: 0.09375rem /* 18/192 */;
|
height: 0.09375rem /* 18/192 */;
|
margin-right: 0.0521rem /* 10/192 */;
|
}
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #ffffff;
|
line-height: 0.109375rem /* 21/192 */;
|
width: 1.171875rem /* 300/256 */;
|
overflow:hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
.none-case-box{
|
flex: 3;
|
h1{
|
width: 1.09375rem /* 280/256 */;
|
}
|
}
|
.main1-block2{
|
flex: 1;
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #2de2ff;
|
line-height: 0.109375rem /* 21/192 */;
|
}
|
}
|
}
|
}
|
.map-middle{
|
width: 5rem /* 960/192 */;
|
height: 100%;
|
mask: url("../../assets/images/map-bj2.png") no-repeat center;
|
mask-size: 100% 100%;
|
background: #fff;
|
.bm-view{
|
width: 100%;
|
height: 100%;
|
/*overflow: hidden;*/
|
}
|
}
|
}
|
}
|
</style>
|
