diff --git a/src/assets/img/dialog-address.png b/src/assets/img/dialog-address.png new file mode 100644 index 0000000..8668556 --- /dev/null +++ b/src/assets/img/dialog-address.png diff --git a/src/styles/reset.css b/src/styles/reset.css index 3bad701..319c10c 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -130,26 +130,37 @@ table { } .dislog-wrap{ - width:100px; - height: 47px; - border-radius:2px; + width:220px; + height: 181px; + padding:0 15px 15px 15px; + background:rgba(3,38,116,.49) url("../assets/img/sectionsmall.png") no-repeat; + background-size: 100% 100%; } .dialog-header{ - width: 100px; - height:14px; - line-height: 14px; - font-size: 12px; - font-weight:400; - text-align: center; + width: 220px; + height:34px; + line-height: 34px; + font-size: 14px; + font-weight:500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color:rgba(255,255,255,1); - background:rgba(68,182,255,1); + color:rgba(255,255,255,.8); +} +.dialog-address{ + height:22px; + font-size:12px; + padding-left: 20px; + font-family:PingFang-SC-Medium; + font-weight:500; + color:rgba(255,255,255,.4); + background: url("../assets/img/dialog-address.png") no-repeat 0 3px; + background-size: 12px 12px } .dislog-body{ display: flex; - background:rgba(1,172,254,.8); + height: 50px; + background:#2577F5; } .dislog-body li{ text-align: center; @@ -159,16 +170,50 @@ table { flex: 1; } .dislog-body li:nth-of-type(2){ - width: 12px; + width:1px; + height:31px; + margin-top: 9px; + background:rgba(5,41,112,.6); } .dislog-body li:nth-of-type(1) div:nth-of-type(1){ - font-size: 14px; - color: #32F532; + height: 25px; + line-height: 30px; + font-size: 24px; + color: #0ECF0E; +} +.dislog-body li:nth-of-type(1) div:nth-of-type(2),.dislog-body li:nth-of-type(3) div:nth-of-type(2){ + height: 25px; + line-height: 25px; + color:rgba(69,195,243,1) } + .dislog-body li:nth-of-type(3) div:nth-of-type(1){ - font-size: 14px; + height: 25px; + line-height: 30px; + font-size: 24px; color: #fff; } +.dislog-footer{ + height:25px; + line-height: 25px; + font-size:12px; + font-family:PingFang-SC-Regular; + font-weight:400; + color:rgba(7,179,245,1); +} +.dislog-footer-main{ + height:34px ; + overflow-y: auto; +} +.dislog-footer-main li { + font-size:12px; + font-family:PingFang-SC-Regular; + font-weight:400; + color:rgba(7,179,245,1); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} .anchorBL{display:none;} /*去掉百度地图logo*/ diff --git a/src/views/mapsection.vue b/src/views/mapsection.vue index bee6e78..ae70220 100644 --- a/src/views/mapsection.vue +++ b/src/views/mapsection.vue @@ -141,13 +141,13 @@ export default { }, baiduMap (data) { - console.log(data.length) + console.log(data) if(data.length === 0){ var map = new BMap.Map('allmap', {enableMapClick: false}) var point = new BMap.Point(111.742579, 40.878675) map.centerAndZoom(point, 14) var mapStyle={ style : "midnight" } - map.enableScrollWheelZoom(true); + map.enableScrollWheelZoom(false); map.setMapStyle(mapStyle); // var marker = new BMap.Marker(point) // 创建标注 // map.addOverlay(marker) // 将标注添加到地图中 @@ -158,7 +158,7 @@ export default { var point = new BMap.Point(data[0].lonId, data[0].latId) map.centerAndZoom(point, 15) var mapStyle={ style : "midnight" } - map.enableScrollWheelZoom(true); + map.enableScrollWheelZoom(false); map.setMapStyle(mapStyle); // var marker = new BMap.Marker(point) // 创建标注 // map.addOverlay(marker) // 将标注添加到地图中 @@ -204,19 +204,28 @@ export default { map.addOverlay(marker); var myLabel; - marker.addEventListener("mouseover", (e)=> { + marker.addEventListener("click", (e)=> { + map.removeOverlay(myLabel); var that = this; myLabel = new BMap.Label( `
-
${data[itemthat].plAddress}
- -
`, +
${data[itemthat].plAddress}
+
${data[itemthat].plAddress}
+ + + + `, { - offset: new BMap.Size(25, -35), //label的偏移量,为了让label的中心显示在点上 + offset: new BMap.Size(-225, -55), //label的偏移量,为了让label的中心显示在点上 position: pt }); myLabel.setStyle({ @@ -233,9 +242,9 @@ export default { marker.setTop(true,27000000); }); - marker.addEventListener("mouseout", function (e) { - map.removeOverlay(myLabel); - }); + // marker.addEventListener("mouseout", function (e) { + // map.removeOverlay(myLabel); + // }); i++; })(i); }