弹窗

liuqimichale
1 parent 33e582e5
Showing 3 changed files with 85 additions and 31 deletions
src/assets/img/dialog-address.png
src/styles/reset.css
src/views/mapsection.vue
@@ -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*/
@@ -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(
                 `<div class="dislog-wrap">
-                <div class="dialog-header" title="${data[itemthat].plAddress}">${data[itemthat].plAddress}</div>
-                <ul class="dislog-body">
-                  <li><div>${data[itemthat].freeBrethNum}</div><div>空闲</div></li>
-                  <li><div>/</div><div></div></li>
-                  <li><div>${data[itemthat].plBerthNum}</div><div>总数</div></li>
-                </ul>
-              </div>`,
+                  <div class="dialog-header" title="${data[itemthat].plAddress}">${data[itemthat].plAddress}</div>
+                  <div class="dialog-address" title="${data[itemthat].plAddress}">${data[itemthat].plAddress}</div>
+                  <ul class="dislog-body">
+                    <li><div>${data[itemthat].freeBrethNum}</div><div>空闲</div></li>
+                    <li></li>
+                    <li><div>${data[itemthat].plBerthNum}</div><div>总数</div></li>
+                  </ul>
+                  <div class="dislog-footer">收费标准</div>
+                  <ul class="dislog-footer-main">
+                    <li>收费标准收费标准收费标准收费标准</li>
+                    <li>收费标准收费标准收费标准收费标准</li>
+                    <li>收费标准收费标准收费标准收费标准</li>
+                    <li>收费标准收费标准收费标准收费标准</li>
+                  </ul>
+                </div>`,
                 {
-                  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);
         }