Browse Source

修改集团首页地图样式

fujunwen 4 years ago
parent
commit
84206fc100
4 changed files with 75 additions and 13 deletions
  1. 51 4
      public/index.html
  2. 1 0
      src/assets/css/dark.less
  3. 1 0
      src/assets/css/light.less
  4. 22 9
      src/views/statistics/index.vue

+ 51 - 4
public/index.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2020-06-28 13:40:38
- * @LastEditTime: 2020-12-08 18:21:22
+ * @LastEditTime: 2020-12-25 18:25:40
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \wanda-bm-guide\public\index.html
@@ -50,7 +50,6 @@
             color: #333;
             white-space: nowrap;
         }
-        
         .dark-my-leaflet-div-icon{
             color: white;
             white-space: nowrap;
@@ -67,11 +66,10 @@
             background: rgba(255, 255, 255, 0.5);
 
         }
-
         .leaflet-mypopup-content {
             padding: 8px 12px !important;
+            
         }
-
         .leaflet-mypopup-content .title {
             margin-bottom: 12px;
         }
@@ -111,6 +109,55 @@
             font-size: 12px;
             color: #F54E45;
         }
+
+        .leaflet-popup-pane .dark-leaflet-mypopup-content {
+            padding: 8px 12px !important;
+            background: #09173E!important;
+            border: 1px solid #69CFEA;
+        }
+        .leaflet-popup-pane .dark-leaflet-mypopup-content .title {
+            color: white;
+            margin-bottom: 12px;
+        }
+
+        .leaflet-popup-pane .dark-leaflet-mypopup-content .title span {
+            font-size: 14px;
+            font-weight: bold;
+            color: white;
+        }
+
+        .leaflet-popup-pane .dark-leaflet-mypopup-content .line {
+            margin-bottom: 12px;
+            color: white;
+        }
+
+        .leaflet-popup-pane .dark-leaflet-mypopup-content .line span {
+            margin-right: 10px;
+            color: white;
+        }
+
+        .leaflet-popup-pane .dark-leaflet-mypopup-content .line span:nth-of-type(1) {
+            font-size: 12px;
+            color: white;
+        }
+
+        .leaflet-popup-pane .dark-leaflet-mypopup-content .line span:nth-of-type(2) {
+            font-size: 16px;
+            color: white;
+        }
+
+        .leaflet-popup-pane .dark-leaflet-mypopup-content .line span:nth-of-type(3) i {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 8px;
+            color: #F54E45;
+        }
+
+        .leaflet-popup-pane .dark-leaflet-mypopup-content .line span:nth-of-type(3) em {
+            font-size: 12px;
+            color: #F54E45;
+        }
     </style>
     <script>
         var remHandle = function () {

+ 1 - 0
src/assets/css/dark.less

@@ -515,6 +515,7 @@
           left: 1.4rem;
           bottom: 10rem;
           padding: 0.6rem;
+          z-index: 8000;
           background: #0D368D;
           .legend-bar {
             display: flex;

+ 1 - 0
src/assets/css/light.less

@@ -480,6 +480,7 @@
           position: absolute;
           left: 1.4rem;
           bottom: 10rem;
+          z-index: 8000;
           padding: 0.6rem;
           background: white;
           .legend-bar {

+ 22 - 9
src/views/statistics/index.vue

@@ -78,8 +78,7 @@
                     transform: item.expand ? 'rotate(0)' : 'rotate(180deg)',
                   }"
                 >
-                  <!-- <img v-if="item.showColor" :src="`../../assets/images/icons/${skinMode === 'light'?'arrow':'expand_dark'}.png`" /> -->
-                  <img v-if="item.showColor" src="`../../assets/images/icons/arrow.png`" />
+                  <img v-if="item.showColor" src="../../assets/images/icons/arrow.png" />
                   <img v-else src="../../assets/images/icons/grey.png" />
                 </div>
                 <div class="system-equipments">
@@ -1184,7 +1183,6 @@ export default {
           return {
             weight: 1,
             color: vm.skinMode === "light" ? "#B3D2FF" :"#56a3c2",
-            // fillColor: vm.skinMode === "light" ? "#DEECFF" : "red",
             fillColor: vm.skinMode === "light" ? "#DEECFF" : "#21285c",
             fillOpacity: vm.skinMode === "light" ? 0.2 : 1
           };
@@ -1555,9 +1553,24 @@ export default {
         let marker = L.marker(center, { icon: textIcon }).addTo(groupLayer);
         let marker2 = L.marker(center, { icon: circleIcon }).addTo(groupLayer);
         let feaureGroup = L.featureGroup([marker, marker2]);
+       
+        popup.on('add' , (ev) => {
+           let popupDom = document.querySelectorAll('.leaflet-mypopup-content')[0]
+           let tipDom = document.querySelectorAll('.leaflet-popup-tip')[0]
+           console.log(tipDom)
+           if (this.skinMode === 'light') {
+             popupDom.setAttribute('class', 'leaflet-mypopup-content')
+             tipDom.style.background="white"
+           } else {
+             popupDom.setAttribute('class', 'dark-leaflet-mypopup-content')
+             tipDom.style.background="#09173E"
+           }
+        })
+      
         marker2.on("mouseover", (ev) => {
-          popup.openOn(myMaps);
+            popup.openOn(myMaps);
         });
+
         marker2.on("mouseout", (ev) => {
           myMaps.closePopup(popup);
         });
@@ -1615,10 +1628,10 @@ export default {
                 ? "段"
                 : "台"
             }</span>
-                            <span><span style="display: inline-block;width: 16px;height: 16px;line-height: 16px;border-radius: 8px; color: white; background : #F54E45;text-align: center;cursor: default;">!</span><em>${
-                              item.is_exception_num
-                            }</em></span>
-                        </div>`;
+                    <span><span style="display: inline-block;width: 16px;height: 16px;line-height: 16px;border-radius: 8px; color: white; background : #F54E45;text-align: center;cursor: default;">!</span><em>${
+                      item.is_exception_num
+                    }</em></span>
+                </div>`;
           } else {
             html += `<div class="line">
                             <span>${item.category_name}</span> 
@@ -1632,7 +1645,7 @@ export default {
                         </div>`;
           }
         }
-        return `<div class="leaflet-mypopup-content"><div class="title"><span>${name}</span>-<span>${that.currentSelectedSys.smsxtname}</span></div>${html}</div>`;
+        return `<div class="leaflet-mypopup-content" }"><div class="title"><span>${name}</span>-<span>${that.currentSelectedSys.smsxtname}</span></div>${html}</div>`;
       } else {
         return "";
       }