suzhou-jichuang-lanhai
/
network-zz
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

网络管理优化，地图代码初始化

Browse Source
main
项洋 4 weeks ago
parent 7fbf3249eb
commit be72305810
2 changed files with 645 additions and 271 deletions
Show Stats Download Patch File Download Diff File

865
src/views/privateOrder/ecosphere/components/componentmapbox.vue
Unescape View File

@ -1,325 +1,676 @@
<template> <template>
<div class="map-container"> <div class="map-container">
<div id="container"></div> <div id="container"></div>
<el-dialog <!-- 信息弹窗 -->
v-if="isShowDialog" <div class="map-overlay" v-if="showOverlay">
title="" <div class="overlay-content">
class="screen-dialog" <div class="overlay-header">
:visible.sync="isShowDialog" <div class="overlay-title">{{ currentDistrict.name }}</div>
width="650px" <div class="overlay-close" @click="showOverlay = false">×</div>
:modal-append-to-body="false" </div>
center <div class="overlay-body">
:modal="false" <div class="data-stats">
> <div class="stat-item">
<div class="top_title">网络举报事件</div> <div class="stat-value">{{ currentDistrict.issues || 0 }}</div>
<div class="dialog_ctn"> <div class="stat-label">问题数量</div>
<el-row>
<el-col :span="24">
<div class="col_title">被举报对象</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="col_ctn">{{ currentMsg.jbdx }}</div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="col_title">苏州编号</div>
</el-col>
<el-col :span="8">
<div class="col_title">举报时间</div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="col_ctn_little">{{ currentMsg.szbh }}</div>
</el-col>
<el-col :span="8">
<div class="col_ctn_little">{{ currentMsg.jbsj }}</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="col_title">地址</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="col_ctn_little">
{{ currentMsg.dz }}
</div> </div>
</el-col> <div class="stat-item">
</el-row> <div class="stat-value">{{ currentDistrict.reports || 0 }}</div>
<el-row> <div class="stat-label">举报数量</div>
<el-col :span="24"> </div>
<div class="col_title">举报内容</div> <div class="stat-item">
</el-col> <div class="stat-value">{{ currentDistrict.handled || 0 }}</div>
</el-row> <div class="stat-label">处理数量</div>
<el-row> </div>
<el-col :span="24"> </div>
<!-- <div class="col_ctn_little" v-html='currentMsg.jbnr'></div> --> <div class="problem-list" v-if="currentDistrict.problemList && currentDistrict.problemList.length">
<div class="col_ctn_little">{{ currentMsg.jbnr }}</div> <div class="problem-title">主要问题类型</div>
</el-col> <div class="problem-item" v-for="(item, index) in currentDistrict.problemList" :key="index">
</el-row> <span class="problem-dot"></span>
<span class="problem-name">{{ item.name }}</span>
<span class="problem-value">{{ item.value }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 数据卡片 -->
<div class="data-card">
<div class="data-card-title">数据信息</div>
<div class="data-card-content">
<div class="data-row">
<div class="data-label">网络动态:</div>
<div class="data-value highlight">88 条</div>
</div>
<div class="data-row">
<div class="data-label">舆情事件:</div>
<div class="data-value highlight">78 次</div>
</div>
<div class="data-row">
<div class="data-label">举报事件:</div>
<div class="data-value highlight">24 个</div>
</div>
</div> </div>
<div class="dialogClose" @click="isShowDialog = false">关闭</div> </div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import location from "@/assets/ecosphere/point.png";
import { listJbmap, getJbmap } from "@/api/netManage/index.js";
import AMapLoader from "@amap/amap-jsapi-loader"; import AMapLoader from "@amap/amap-jsapi-loader";
import * as echarts from 'echarts';
export default { export default {
data() { data() {
// VueAMap.initAMapApiLoader({
// key: 'b3c7a7ce466721c3be1d4ea539f82421', // 高德key
// securityJsCode: 'ec84db9c5dfc3d304ca9219e764ffeb8', // 安全密钥
// });
return { return {
isShowDialog: false,
center: [121.136909, 31.463778],
zoom: 14.5,
zooms: [14, 18],
// markerOffset: [-35,-123],
// markers: [],
// 展示的内容
currentMsg: {
jbdx: "电子科技有限公司",
szbh: "SZ2023",
jbsj: "2023-07-31",
dz: "太仓人民政府",
jbnr: "偷电",
},
map: null, map: null,
pointList: [ districtLayer: null,
{ id: 1, lng: 121.136909, lat: 31.463778, title: "太仓人民政府" }, showOverlay: false,
currentDistrict: {},
districts: [
{
id: 1,
name: "苏州工业园区金鸡湖商务区",
center: [120.7214, 31.3217],
issues: 24,
reports: 68,
handled: 56,
problemList: [
{ name: "网络违法行为", value: 12 },
{ name: "有害信息传播", value: 8 },
{ name: "信息安全隐患", value: 4 }
]
},
{ {
id: 2, id: 2,
lng: 121.086958, name: "苏州工业园区高新制造与国际贸易区",
lat: 31.460883, center: [120.7531, 31.2945],
title: "苏州吉闽物流有限公司", issues: 32,
reports: 45,
handled: 38,
problemList: [
{ name: "网络违法行为", value: 14 },
{ name: "有害信息传播", value: 10 },
{ name: "信息安全隐患", value: 8 }
]
}, },
{ {
id: 3, id: 3,
lng: 121.05452, name: "苏州阳澄湖半岛旅游度假区",
lat: 31.515175, center: [120.7895, 31.3915],
title: "太仓星兴亮机械设备有限公司", issues: 15,
reports: 29,
handled: 22,
problemList: [
{ name: "网络违法行为", value: 7 },
{ name: "有害信息传播", value: 5 },
{ name: "信息安全隐患", value: 3 }
]
}, },
{ id: 4, lng: 121.127801, lat: 31.472566, title: "兴和电子有限公司" },
{ {
id: 5, id: 4,
lng: 121.142345, name: "苏州独墅湖科教创新区",
lat: 31.477655, center: [120.7364, 31.2650],
title: "太仓裕盛体育用品有限公司", issues: 18,
}, reports: 36,
handled: 30,
problemList: [
{ name: "网络违法行为", value: 8 },
{ name: "有害信息传播", value: 6 },
{ name: "信息安全隐患", value: 4 }
]
}
], ],
layers: { mapStyle: [
layer: null, {
}, "featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#081220",
"visibility": "off" // 隐藏陆地
}
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": {
"color": "#0e253d",
"visibility": "off" // 隐藏水域
}
},
{
"featureType": "green",
"elementType": "geometry",
"stylers": {
"color": "#0c1f34",
"visibility": "off" // 隐藏绿地
}
},
{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"color": "#113549",
"visibility": "off" // 隐藏建筑
}
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": {
"color": "#193e5e",
"visibility": "off" // 隐藏道路
}
},
{
"featureType": "road",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#193e5e",
"visibility": "off" // 隐藏高速公路
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "nationalway",
"elementType": "geometry",
"stylers": {
"color": "#193e5e",
"visibility": "off" // 隐藏国道
}
},
{
"featureType": "nationalway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "provincialway",
"elementType": "geometry",
"stylers": {
"color": "#193e5e",
"visibility": "off" // 隐藏省道
}
},
{
"featureType": "provincialway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "background",
"elementType": "all",
"stylers": {
"visibility": "off" // 隐藏背景
}
}
]
}; };
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initGdMap(); this.initMap();
}); });
}, },
methods: { methods: {
// 初始化高德地图 async initMap() {
initGdMap() { try {
let _this = this; // 加载高德地图API
AMapLoader.load({ const AMap = await AMapLoader.load({
key: "b3c7a7ce466721c3be1d4ea539f82421", // 申请好的Web端开发者Key，首次调用 load 时必填 key: "b3c7a7ce466721c3be1d4ea539f82421",
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version: "2.0",
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 plugins: [
}) 'AMap.DistrictSearch',
.then((AMap) => { 'AMap.DistrictLayer'
_this.map = new AMap.Map("container", { ]
// 设置地图容器id
showLabel: false,
viewMode: "2D", // 是否为3D地图模式
zoom: 15, // 初始化地图级别
center: _this.center, // 初始化地图中心点位置
mapStyle: "amap://styles/darkblue",
});
_this.getMarkerData();
})
.catch((e) => {
console.log(e);
}); });
},
// 获取图标数据 // 初始化地图
async getMarkerData() { this.map = new AMap.Map("container", {
let res = await listJbmap({ isStatus: 1, pageNum: 1, pageSize: 50 }); zoom: 11.5,
res.rows.map((row, index) => { center: [120.7389, 31.2909], // 苏州工业园区中心
if (index == 0) { viewMode: "3D",
//将地图的经纬度设置第一个坐标点 pitch: 35,
this.map.setCenter([row.longitude, row.latitude]); rotation: 0,
} mapStyle: this.generateCustomMapStyle(), // 使用自定义地图样式
var viaMarker = new AMap.Marker({ expandZoomRange: true,
position: new AMap.LngLat(row.longitude, row.latitude), zooms: [8, 20],
// 将一张图片的地址设置为 icon showBuildingBlock: false,
icon: location, showLabel: false,
extData: row, skyColor: 'transparent', // 透明天空
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点 features: [], // 不显示任何默认特性
// offset: new AMap.Pixel(-13, -30), defaultCursor: 'default',
}); isHotspot: false,
viaMarker.on("click", (e) => { defaultLayer: false, // 不显示默认图层
let rowItem = e.target.getExtData(); layers: [], // 不使用默认图层
this.getMarkerInfo(rowItem.id); backgroundColor: 'transparent' // 透明背景
}); });
var text = new AMap.Text({ // 禁用地图旋转和缩放交互
text: row.jbObj, this.map.setStatus({
anchor: "bottom-center", // 设置文本标记锚点 dragEnable: false,
cursor: "pointer", zoomEnable: false,
angle: 0, doubleClickZoom: false,
style: { keyboardEnable: false,
"font-size": "20px", rotateEnable: false
color: "#fff",
},
offset: [30, 0],
position: new AMap.LngLat(row.longitude, row.latitude),
extData: row,
}); });
text.on("click", (e) => {
let rowItem = e.target.getExtData(); // 创建自定义地图
this.getMarkerInfo(rowItem.id); this.createCustomMap();
} catch (error) {
console.error("地图加载失败", error);
}
},
// 生成自定义地图样式
generateCustomMapStyle() {
return {
styleJson: this.mapStyle
};
},
// 创建自定义地图
createCustomMap() {
// 园区轮廓坐标（这是示例坐标，需要替换为实际的苏州工业园区坐标）
const parkBoundary = [
[120.7214, 31.3317], [120.7714, 31.3417], [120.7894, 31.3307],
[120.7994, 31.3107], [120.7894, 31.2907], [120.7714, 31.2707],
[120.7514, 31.2607], [120.7314, 31.2607], [120.7114, 31.2707],
[120.6914, 31.2907], [120.6914, 31.3107], [120.7114, 31.3307]
];
// 定义子区域坐标（仅示例，需要使用实际的坐标）
const subDistricts = [
{
name: "苏州阳澄湖半岛旅游度假区",
coordinates: [
[120.7214, 31.3517], [120.7714, 31.3617], [120.7894, 31.3407],
[120.7614, 31.3307], [120.7414, 31.3407]
],
center: [120.7614, 31.3417],
markerType: "blue"
},
{
name: "苏州工业园区高新制造与国际贸易区",
coordinates: [
[120.7614, 31.3007], [120.7894, 31.3107], [120.7894, 31.2907],
[120.7714, 31.2707], [120.7514, 31.2807], [120.7514, 31.2907]
],
center: [120.7714, 31.2907],
markerType: "blue"
},
{
name: "苏州工业园区金鸡湖商务区",
coordinates: [
[120.7114, 31.3107], [120.7514, 31.3207], [120.7514, 31.2907],
[120.7314, 31.2807], [120.7114, 31.2907]
],
center: [120.7314, 31.3007],
markerType: "red"
},
{
name: "苏州独墅湖科教创新区",
coordinates: [
[120.7214, 31.2707], [120.7414, 31.2607], [120.7614, 31.2507],
[120.7414, 31.2407], [120.7214, 31.2507]
],
center: [120.7414, 31.2607],
markerType: "blue"
}
];
// 创建园区主轮廓
this.createDistrictPolygon(parkBoundary, {
strokeColor: '#00eaff',
strokeWeight: 3,
fillColor: '#3ecbff',
fillOpacity: 0.3,
strokeStyle: 'solid',
zIndex: 2
});
// 为主轮廓添加发光效果
this.createDistrictPolygon(parkBoundary, {
strokeColor: '#00eaff',
strokeWeight: 6,
fillColor: 'transparent',
fillOpacity: 0,
strokeOpacity: 0.4,
zIndex: 1
});
// 创建子区域
subDistricts.forEach(district => {
// 创建子区域多边形
this.createDistrictPolygon(district.coordinates, {
strokeColor: '#00eaff',
strokeWeight: 2,
fillColor: '#3ecbff',
fillOpacity: 0.2,
zIndex: 3
}); });
this.map.add([viaMarker, text]);
// 添加区域名称标签
this.createDistrictLabel(district.center, district.name);
// 添加标记点
this.createMarker(district.center, district.markerType);
}); });
// 添加静态数据卡片
this.addDataCard();
}, },
// 获取点位详情 // 创建区域多边形
async getMarkerInfo(id) { createDistrictPolygon(coordinates, style) {
let res = await getJbmap(id); const AMap = window.AMap;
let { jbObj, number, jbTime, address, content } = res.data; if (!AMap) return;
this.currentMsg.jbdx = jbObj;
this.currentMsg.szbh = number; const polygon = new AMap.Polygon({
this.currentMsg.jbsj = jbTime; path: coordinates,
this.currentMsg.dz = address; ...style
this.currentMsg.jbnr = content; });
this.isShowDialog = true;
this.map.add(polygon);
return polygon;
}, },
// 创建区域标签
createDistrictLabel(position, name) {
const AMap = window.AMap;
if (!AMap) return;
const textMarker = new AMap.Text({
text: name,
position: position,
style: {
'color': '#fff',
'background-color': 'transparent',
'font-size': '14px',
'font-weight': 'bold',
'text-shadow': '0 0 5px rgba(0, 0, 0, 0.8)'
},
zIndex: 10
});
this.map.add(textMarker);
return textMarker;
},
// 创建标记点
createMarker(position, type) {
const AMap = window.AMap;
if (!AMap) return;
// 这里使用一个模拟的图标
const icon = type === 'red' ?
'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png' :
'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
// 创建标记
const marker = new AMap.Marker({
position: position,
icon: new AMap.Icon({
image: icon,
size: new AMap.Size(24, 34),
imageSize: new AMap.Size(24, 34)
}),
offset: new AMap.Pixel(-12, -34),
zIndex: 11
});
// 添加到地图
this.map.add(marker);
// 添加脉冲效果
const pulseMarker = new AMap.Marker({
position: position,
content: '<div class="pulse-marker-container"><div class="pulse-marker"></div></div>',
zIndex: 10,
offset: new AMap.Pixel(-10, -10)
});
this.map.add(pulseMarker);
return marker;
},
// 添加数据卡片
addDataCard() {
// 数据卡片的实现已在模板中完成
}
}, },
beforeDestroy() { beforeDestroy() {
this.map?.destroy(); if (this.map) {
}, this.map.destroy();
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.map-container { .map-container {
width: 100%; width: 100%;
height: $ScreenHeight; height: 100%;
position: relative;
pointer-events: none; /* 允许点击穿透到背景图 */
#container { #container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgb(26, 61, 106, 0.3); background-color: transparent !important;
} }
}
/* 确保高德地图的容器背景透明 */
.screen-dialog { :deep(.amap-maps),
left: 30%; :deep(.amap-drags),
right: 30%; :deep(.amap-layers),
top: 10%; :deep(.amap-overlays) {
bottom: 20%; background-color: transparent !important;
z-index: 9999;
::v-deep .el-dialog__header {
background: rgba(255, 255, 255, 0);
} }
::v-deep .el-dialog {
background: url("~@/assets/dialog/wlglDialog/bg.png") no-repeat 100% 100%; .map-overlay {
//width: 1260px; position: absolute;
height: 590px; top: 50%;
//padding-top:20px; left: 50%;
background-size: cover; transform: translate(-50%, -50%);
z-index: 10;
width: 400px;
background: rgba(4, 32, 66, 0.8);
border: 1px solid #0a5080;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 193, 222, 0.7);
overflow: hidden;
pointer-events: auto; /* 允许点击交互 */
} }
::v-deep .el-dialog__headerbtn {
top: 1; .overlay-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background: rgba(10, 80, 128, 0.8);
border-bottom: 1px solid #0a5080;
} }
::v-deep .el-dialog__footer {
background: rgba(255, 255, 255, 0); .overlay-title {
color: #fff;
font-size: 18px;
font-weight: bold;
} }
.top_title {
font-family: SourceHanSansCN-Bold; .overlay-close {
font-size: 28px; color: #fff;
letter-spacing: 1px; font-size: 24px;
color: #ffffff; cursor: pointer;
margin-top: -35px; width: 24px;
margin-left: 20px; height: 24px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
} }
.dialog_ctn {
padding: 60px 0 0 60px; .overlay-body {
padding: 15px;
} }
.col_title {
font-family: SourceHanSansCN-Regular; .data-stats {
font-size: 28px; display: flex;
color: #1dd1fe; justify-content: space-between;
margin-bottom: 15px;
} }
.col_ctn {
font-family: SourceHanSansCN-Bold; .stat-item {
font-size: 30px; flex: 1;
color: #ffe90c; text-align: center;
margin: 13px 0; padding: 0 10px;
} }
.col_ctn_little {
font-family: DIN-Medium; .stat-value {
font-size: 28px; font-size: 24px;
color: #ffffff; font-weight: bold;
margin: 13px 0; color: #00c1de;
} }
.dialogClose {
text-align: center; .stat-label {
width: 160px; font-size: 14px;
height: 50px; color: #ccc;
margin-top: 5px;
}
.problem-list {
background: rgba(10, 80, 128, 0.3);
border-radius: 5px;
padding: 10px;
}
.problem-title {
font-size: 16px;
color: #fff;
margin-bottom: 10px;
}
.problem-item {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.problem-dot {
width: 8px;
height: 8px;
background-color: #00c1de;
border-radius: 50%;
margin-right: 8px;
}
.problem-name {
flex: 1;
color: #ccc;
}
.problem-value {
color: #00c1de;
font-weight: bold;
}
.data-card {
position: absolute; position: absolute;
bottom: 25px; top: 20px;
left: 261px; right: 20px;
background: url("~@/assets/dialog/btn-bg.png") no-repeat 100% 100%; width: 300px;
font-family: SourceHanSansCN-Regular; background: rgba(4, 32, 66, 0.8);
font-size: 28px; border: 1px solid #0a5080;
font-weight: normal; border-radius: 5px;
font-stretch: normal; box-shadow: 0 0 15px rgba(0, 193, 222, 0.3);
line-height: 50px; z-index: 9;
letter-spacing: 2px; overflow: hidden;
color: #ffffff; pointer-events: auto; /* 允许点击交互 */
cursor: pointer; }
.data-card-title {
padding: 10px 15px;
background: rgba(10, 80, 128, 0.8);
color: #fff;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid rgba(0, 193, 222, 0.3);
}
.data-card-content {
padding: 15px;
}
.data-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
.data-label {
color: #ccc;
font-size: 14px;
}
.data-value {
font-size: 14px;
} }
.dialogClose:hover {
background: url("~@/assets/dialog/btn-bg-act.png") no-repeat 100% 100%; .highlight {
color: #f7d342;
font-weight: bold;
} }
} }
.dialog-title {
text-align: center; /* 脉冲标记的样式 */
width: 756px; :global(.pulse-marker-container) {
margin: 0 auto; position: relative;
font-family: SourceHanSansCN-Bold; width: 20px;
font-size: 36px; height: 20px;
font-weight: normal; pointer-events: auto; /* 允许点击交互 */
font-stretch: normal;
line-height: 38px;
letter-spacing: 0;
color: #ffe850;
} }
.dialog-explain {
margin-top: 39px; :global(.pulse-marker) {
height: 125px; width: 12px;
background: url("~@/assets/dialog/信息-bg.png") no-repeat 100% 100%; height: 12px;
background: rgba(0, 193, 222, 0.7);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px rgba(0, 193, 222, 0.9);
animation: pulse 1.5s ease-in-out infinite;
} }
.dialog-content {
width: 1073px; @keyframes pulse {
max-height: 500px; 0% {
margin: 20px auto; box-shadow: 0 0 0 0 rgba(0, 193, 222, 0.9);
font-family: SourceHanSansCN-Medium; }
font-size: 30px; 70% {
font-weight: normal; box-shadow: 0 0 0 15px rgba(0, 193, 222, 0);
font-stretch: normal; }
line-height: 50px; 100% {
letter-spacing: 2px; box-shadow: 0 0 0 0 rgba(0, 193, 222, 0);
color: #ffffff; }
} }
</style> </style>

51
src/views/privateOrder/ecosphere/index.vue
Unescape View File

@ -1,9 +1,14 @@
<template> <template>
<div class="main"> <div class="main">
<!-- <div class="map" style="z-index:1;"> <!-- 标题 -->
<day-map></day-map> <div class="header">
<div class="header-title">苏州工业园区网络综合治理平台</div>
</div>
<!-- 地图层 -->
<div class="map" style="z-index:1;">
<component-mapbox /> <component-mapbox />
</div> --> </div>
<div class="left-container" style="z-index:3;"> <div class="left-container" style="z-index:3;">
<component-left /> <component-left />
@ -11,14 +16,13 @@
<div class="right-container" style="z-index:2;"> <div class="right-container" style="z-index:2;">
<component-right /> <component-right />
</div> </div>
<div class="center-container" style="z-index:1;"> <!-- <div class="center-container" style="z-index:3;">
<component-center /> <component-center />
</div> </div> -->
</div> </div>
</template> </template>
<script> <script>
// import DayMap from '../common/DayMap.vue'
import ComponentMapbox from './components/componentmapbox.vue' import ComponentMapbox from './components/componentmapbox.vue'
import ComponentLeft from './components/componentLeft.vue' import ComponentLeft from './components/componentLeft.vue'
import ComponentRight from './components/componentRight.vue' import ComponentRight from './components/componentRight.vue'
@ -31,7 +35,6 @@ export default {
ComponentRight, ComponentRight,
ComponentCenter, ComponentCenter,
ComponentMapbox ComponentMapbox
// DayMap
}, },
data() { data() {
return { return {
@ -82,16 +85,40 @@ export default {
-khtml-user-select: none; /*早期浏览器*/ -khtml-user-select: none; /*早期浏览器*/
user-select: none; user-select: none;
position: relative; position: relative;
background: url("~@/assets/sentimeent/背景底图.png") background: url("~@/assets/sentimeent/背景底图.png") no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff;
z-index: 1;
} }
/* 标题样式 */
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
z-index: 10;
padding-top: 20px;
}
.header-title {
font-size: 36px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px rgba(29, 233, 255, 0.8);
letter-spacing: 2px;
display: inline-block;
}
.map { .map {
position: absolute; position: absolute;
z-index: 1; z-index: 2;
width: 100%; width: 100%;
height: $ScreenHeight; height: $ScreenHeight;
background-color: transparent;
} }
.left-container { .left-container {
z-index: 3; z-index: 3;
position: absolute; position: absolute;
@ -99,7 +126,6 @@ export default {
top: 0; top: 0;
width: 1603px; width: 1603px;
height: $ScreenHeight; height: $ScreenHeight;
// background: url("~@/assets/privateOrder/common/bg-left.png") no-repeat;
margin-left: 40px; margin-left: 40px;
} }
@ -111,8 +137,6 @@ export default {
width: 1603px; width: 1603px;
height: $ScreenHeight; height: $ScreenHeight;
margin-right: 65px margin-right: 65px
// background: url("~@/assets/privateOrder/common/bg-right.png") right center
// no-repeat;
} }
.center-container { .center-container {
@ -121,6 +145,5 @@ export default {
left: 1500px; left: 1500px;
margin: 0 auto; margin: 0 auto;
width: 1914px; width: 1914px;
// height: $ScreenHeight;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save