# 优化样式

src/views/counter/map2.vue

@@ -15,31 +15,52 @@ export default {
       defaultPositions: [
         {
           title: '海洋公园',
-          position: [114.186739, 22.250872]
+          position: [114.186739, 22.250872],
+          count: 66,
+          signal: 23,
+          energy: 4333
         },
         {
           title: '香港大学',
-          position: [114.143472, 22.284105]
+          position: [114.149176, 22.286245],
+          count: 232,
+          signal: 23,
+          energy: 4333
         },
         {
           title: '南丫北容村',
-          position: [114.126261, 22.22863]
+          position: [114.126261, 22.22863],
+          count: 87,
+          signal: 33,
+          energy: 4333
         },
         {
           title: '大帽山',
-          position: [114.124105, 22.401088]
+          position: [114.124105, 22.401088],
+          count: 66,
+          signal: 23,
+          energy: 4223
         },
         {
           title: '西贡郊野公园',
-          position: [114.370966, 22.411628]
+          position: [114.370966, 22.411628],
+          count: 616,
+          signal: 23,
+          energy: 4556
         },
         {
           title: '盐田',
-          position: [114.223565, 22.380771]
+          position: [114.223565, 22.380771],
+          count: 66,
+          signal: 23,
+          energy: 4433
         },
         {
           title: '清水',
-          position: [114.312821, 22.301076]
+          position: [114.312821, 22.301076],
+          count: 2336,
+          signal: 23,
+          energy: 4333
         }
       ]
     }
@@ -86,6 +107,7 @@ export default {
       // 定义顶部标题
       const top = document.createElement('div')
       const titleD = document.createElement('div')
+      titleD.className = 'title'
       const closeX = document.createElement('img')
       top.className = 'info-top'
       titleD.innerHTML = title
@@ -99,7 +121,6 @@ export default {
       // 定义中部内容
       const middle = document.createElement('div')
       middle.className = 'info-middle'
-      middle.style.backgroundColor = 'white'
       middle.innerHTML = content
       info.appendChild(middle)
 
@@ -113,17 +134,19 @@ export default {
       sharp.src = 'https://webapi.amap.com/images/sharp.png'
       bottom.appendChild(sharp)
       info.appendChild(bottom)
+      console.log(info)
       return info
     },
     instantiateInforWindow(title) {
       const content = []
-      content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里")
+      content.push('<div class="count">339</div>')
-      content.push('电话：010-64733333')
+      content.push('<div class="time">时间：2018年5月15日 14:33:25</div>')
-      content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>")
+      content.push('<div><span>信号：23</span><span class="energy">电量：4233</span></div>')
+      content.push('<div>区域：尖沙咀</div>\n')
       const infoWindow = new AMap.InfoWindow({
         isCustom: true,
         closeWhenClickMap: true,
-        content: this.createInfoWindow(title, content.join('<br/>')),
+        content: this.createInfoWindow(title, content.join('\n')),
         offset: new AMap.Pixel(16, -45)
       })
       return infoWindow
@@ -145,7 +168,6 @@ export default {
     overflow: hidden;
     position: absolute;
   }
-
   .info {
     border: solid 1px silver;
   }
@@ -155,9 +177,9 @@ export default {
     border-bottom: 1px solid #CCC;
     border-radius: 5px 5px 0 0;
   }
-  div.info-top div {
+  div.info-top .title {
     display: inline-block;
-    color: #333333;
+    color: rgb(236, 110, 37);
     font-size: 14px;
     font-weight: bold;
     line-height: 31px;
@@ -174,8 +196,20 @@ export default {
   }
   div.info-middle {
     font-size: 12px;
-    padding: 6px;
+    padding: .4rem .8rem .5rem .5rem;
     line-height: 20px;
+    background-color: white;
+  }
+  .info-middle .count {
+    display: flex;
+    justify-content: flex-end;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #666;
+    margin: 0 0 .4rem 0;
+  }
+  .info-middle span.energy {
+    margin-left: 2rem;
   }
   div.info-bottom {
     height: 0px;
@@ -187,12 +221,4 @@ export default {
     position: relative;
     z-index: 104;
   }
-  span {
-    margin-left: 5px;
-    font-size: 11px;
-}
-  .info-middle img {
-    float: left;
-    margin-right: 6px;
-  }
 </style>