feat：融合通信管理平台 bug
This commit is contained in:
parent
fd1f3470e9
commit
8b0ad42e49
BIN
god-ui/src/views/monitoringwarning/lookVideo/assets/jk.png
Normal file
BIN
god-ui/src/views/monitoringwarning/lookVideo/assets/jk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
god-ui/src/views/monitoringwarning/lookVideo/assets/warn.png
Normal file
BIN
god-ui/src/views/monitoringwarning/lookVideo/assets/warn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
188
god-ui/src/views/monitoringwarning/lookVideo/index.vue
Normal file
188
god-ui/src/views/monitoringwarning/lookVideo/index.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div id="middleMap"></div>
|
||||
<div class="sl">
|
||||
<div class="left">
|
||||
<div class="sxt"></div>
|
||||
<div>监控</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||
};
|
||||
import sp2 from './assets/20240325144727.mp4'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
sp2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initMap()
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
// plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("middleMap", {
|
||||
zoom: 13, //级别
|
||||
center: [106.45773,29.54098], //中心点坐标
|
||||
mapStyle: "",
|
||||
});
|
||||
this.map.on("click", (e) => {
|
||||
navigator.clipboard.writeText(
|
||||
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
|
||||
);
|
||||
});
|
||||
const marks = [
|
||||
{
|
||||
locaton: [106.46174288158418,29.53138123556404],
|
||||
name: "重庆亿利宝汽车配件有限公司",
|
||||
device: "AI摄像头-CAM90802",
|
||||
},
|
||||
{
|
||||
locaton: [106.45773188158418,29.54092123556404],
|
||||
name: "重庆市沙坪坝区人民政府",
|
||||
device: "AI摄像头-CAM90804",
|
||||
},
|
||||
];
|
||||
const marks2 = [
|
||||
{
|
||||
locaton: [106.45413980158418,29.55100123556404],
|
||||
name: "沙坪公园",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "游客溺水",
|
||||
},
|
||||
{
|
||||
locaton: [106.48074381158418,29.54188923556404],
|
||||
name: "森林实验小学",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "校门口出现车不礼让行人现象",
|
||||
src:this.sp2
|
||||
},
|
||||
];
|
||||
marks.forEach((item, index) => {
|
||||
this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
|
||||
});
|
||||
marks2.forEach((item, index) => {
|
||||
this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 添加图形点标记
|
||||
addMapMarker(sourceData = [], type = "sxt", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: "",
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on("click", (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], {
|
||||
type: "#304156",
|
||||
...info,
|
||||
});
|
||||
});
|
||||
},
|
||||
addMapMarker2(sourceData = [], type = "jb", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: "",
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on("click", (e) => {
|
||||
this.showInfoWindow2(sourceData[0], sourceData[1], {
|
||||
type: "#304156",
|
||||
...info,
|
||||
});
|
||||
});
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow(lng, lat, sourceInfo) {
|
||||
let content = `
|
||||
<div style="padding: 6px;background-color: #32b9ef;">
|
||||
<div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||
<div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
|
||||
<div style="padding: 4px;">正常运行</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: "middle-left",
|
||||
isCustom: true,
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat]);
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow2(lng, lat, sourceInfo) {
|
||||
let content = `
|
||||
<div style="padding: 6px;background-color: #cce0f1;">
|
||||
<div>
|
||||
<div style="padding: 4px;margin:5px 0;color:red;"><b>${sourceInfo.address}</b></div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||
<div style="padding: 4px;"><b>${sourceInfo.name}</b></div>
|
||||
<video src="./assets/20240325144727.mp4" style="width:100%;height:100px;"></video>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: "middle-left",
|
||||
isCustom: true,
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#middleMap {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
.box{
|
||||
position: relative;
|
||||
.sl{
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
bottom: 3%;
|
||||
right:3%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.sxt{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(./assets/jk.png);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
god-ui/src/views/monitoringwarning/screenVideo/assets/jk.png
Normal file
BIN
god-ui/src/views/monitoringwarning/screenVideo/assets/jk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
god-ui/src/views/monitoringwarning/screenVideo/assets/warn.png
Normal file
BIN
god-ui/src/views/monitoringwarning/screenVideo/assets/warn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
205
god-ui/src/views/monitoringwarning/screenVideo/index.vue
Normal file
205
god-ui/src/views/monitoringwarning/screenVideo/index.vue
Normal file
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div id="middleMap"></div>
|
||||
<div class="sl">
|
||||
<div class="left">
|
||||
<div class="sxt"></div>
|
||||
<div>监控</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="warn"></div>
|
||||
<div>预警</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||
};
|
||||
import sp2 from './assets/20240325144727.mp4'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
sp2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initMap()
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
// plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("middleMap", {
|
||||
zoom: 13, //级别
|
||||
center: [106.45773,29.54098], //中心点坐标
|
||||
mapStyle: "",
|
||||
});
|
||||
this.map.on("click", (e) => {
|
||||
navigator.clipboard.writeText(
|
||||
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
|
||||
);
|
||||
});
|
||||
const marks = [
|
||||
{
|
||||
locaton: [106.46174288158418,29.53138123556404],
|
||||
name: "重庆亿利宝汽车配件有限公司",
|
||||
device: "AI摄像头-CAM90802",
|
||||
},
|
||||
{
|
||||
locaton: [106.45773188158418,29.54092123556404],
|
||||
name: "重庆市沙坪坝区人民政府",
|
||||
device: "AI摄像头-CAM90804",
|
||||
},
|
||||
];
|
||||
const marks2 = [
|
||||
{
|
||||
locaton: [106.45413980158418,29.55100123556404],
|
||||
name: "沙坪公园",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "游客溺水",
|
||||
},
|
||||
{
|
||||
locaton: [106.48074381158418,29.54188923556404],
|
||||
name: "森林实验小学",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "校门口出现车不礼让行人现象",
|
||||
src:this.sp2
|
||||
},
|
||||
];
|
||||
marks.forEach((item, index) => {
|
||||
this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
|
||||
});
|
||||
marks2.forEach((item, index) => {
|
||||
this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 添加图形点标记
|
||||
addMapMarker(sourceData = [], type = "sxt", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: "",
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on("click", (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], {
|
||||
type: "#304156",
|
||||
...info,
|
||||
});
|
||||
});
|
||||
},
|
||||
addMapMarker2(sourceData = [], type = "jb", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: "",
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on("click", (e) => {
|
||||
this.showInfoWindow2(sourceData[0], sourceData[1], {
|
||||
type: "#304156",
|
||||
...info,
|
||||
});
|
||||
});
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow(lng, lat, sourceInfo) {
|
||||
let content = `
|
||||
<div style="padding: 6px;background-color: #32b9ef;">
|
||||
<div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||
<div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
|
||||
<div style="padding: 4px;">正常运行</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: "middle-left",
|
||||
isCustom: true,
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat]);
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow2(lng, lat, sourceInfo) {
|
||||
let content = `
|
||||
<div style="padding: 6px;background-color: #cce0f1;">
|
||||
<div>
|
||||
<div style="padding: 4px;margin:5px 0;color:red;"><b>${sourceInfo.address}</b></div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||
<div style="padding: 4px;"><b>${sourceInfo.name}</b></div>
|
||||
<video src="./assets/20240325144727.mp4" style="width:100%;height:100px;"></video>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: "middle-left",
|
||||
isCustom: true,
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#middleMap {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
.box{
|
||||
position: relative;
|
||||
.sl{
|
||||
width: 250px;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
bottom: 3%;
|
||||
right:3%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.sxt{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(./assets/jk.png);
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.warn{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(./assets/warn.png);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
god-ui/src/views/rescue/fixedVideo/assets/img1.png
Normal file
BIN
god-ui/src/views/rescue/fixedVideo/assets/img1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
BIN
god-ui/src/views/rescue/fixedVideo/assets/img2.jpeg
Normal file
BIN
god-ui/src/views/rescue/fixedVideo/assets/img2.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
god-ui/src/views/rescue/fixedVideo/assets/jk.png
Normal file
BIN
god-ui/src/views/rescue/fixedVideo/assets/jk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
god-ui/src/views/rescue/fixedVideo/assets/warn.png
Normal file
BIN
god-ui/src/views/rescue/fixedVideo/assets/warn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
208
god-ui/src/views/rescue/fixedVideo/index.vue
Normal file
208
god-ui/src/views/rescue/fixedVideo/index.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div id="middleMap"></div>
|
||||
<div class="sl">
|
||||
<div class="left">
|
||||
<div class="sxt"></div>
|
||||
<div>监控</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="warn"></div>
|
||||
<div>预警</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||
};
|
||||
import img1 from './assets/img1.png'
|
||||
import img2 from './assets/img2.jpeg'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
img1,img2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initMap()
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
// plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("middleMap", {
|
||||
zoom: 13, //级别
|
||||
center: [106.45773,29.54098], //中心点坐标
|
||||
mapStyle: "",
|
||||
});
|
||||
this.map.on("click", (e) => {
|
||||
navigator.clipboard.writeText(
|
||||
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
|
||||
);
|
||||
});
|
||||
const marks = [
|
||||
{
|
||||
locaton: [106.46174288158418,29.53138123556404],
|
||||
name: "重庆亿利宝汽车配件有限公司",
|
||||
device: "AI摄像头-CAM90802",
|
||||
},
|
||||
{
|
||||
locaton: [106.45773188158418,29.54092123556404],
|
||||
name: "重庆市沙坪坝区人民政府",
|
||||
device: "AI摄像头-CAM90804",
|
||||
src:this.sp2
|
||||
},
|
||||
];
|
||||
const marks2 = [
|
||||
{
|
||||
locaton: [106.45413980158418,29.55100123556404],
|
||||
name: "沙坪公园",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "游客溺水",
|
||||
src:'./assets/img1.png'
|
||||
},
|
||||
{
|
||||
locaton: [106.48074381158418,29.54188923556404],
|
||||
name: "森林实验小学",
|
||||
device: "AI摄像头-CAM90801",
|
||||
address: "校门口出现车不礼让行人现象",
|
||||
src:'./assets/img2.jpeg'
|
||||
},
|
||||
];
|
||||
marks.forEach((item, index) => {
|
||||
this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
|
||||
});
|
||||
marks2.forEach((item, index) => {
|
||||
this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 添加图形点标记
|
||||
addMapMarker(sourceData = [], type = "sxt", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-50, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: "",
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on("click", (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], {
|
||||
type: "#304156",
|
||||
...info,
|
||||
});
|
||||
});
|
||||
},
|
||||
addMapMarker2(sourceData = [], type = "jb", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-40, -62),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: "",
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on("click", (e) => {
|
||||
this.showInfoWindow2(sourceData[0], sourceData[1], {
|
||||
type: "#304156",
|
||||
...info,
|
||||
});
|
||||
});
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow(lng, lat, sourceInfo) {
|
||||
let content = `
|
||||
<div style="padding: 6px;background-color: #32b9ef;">
|
||||
<div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||
<div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
|
||||
<div style="padding: 4px;">正常运行</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: "middle-left",
|
||||
isCustom: true,
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat]);
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow2(lng, lat, sourceInfo) {
|
||||
let content = `
|
||||
<div style="padding: 6px;background-color: #cce0f1;">
|
||||
<div>
|
||||
<div style="padding: 4px;margin:5px 0;color:red;"><b>${sourceInfo.address}</b></div>
|
||||
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||
<div style="padding: 4px;"><b>${sourceInfo.name}</b></div>
|
||||
<img src="${sourceInfo.src}" style="width:100%;height:100px;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: "middle-left",
|
||||
isCustom: true,
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat]);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#middleMap {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
.box{
|
||||
position: relative;
|
||||
.sl{
|
||||
width: 250px;
|
||||
height: 70px;
|
||||
position: absolute;
|
||||
bottom: 3%;
|
||||
right:3%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.sxt{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(./assets/jk.png);
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.warn{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(./assets/warn.png);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user