Procházet zdrojové kódy

团队最新定位页面优化并增加人员及图片显示

zhanglikun před 4 roky
rodič
revize
886f4d9f4c
1 změnil soubory, kde provedl 23 přidání a 34 odebrání
  1. 23 34
      src/apps/mobile/views/personnel/team.vue

+ 23 - 34
src/apps/mobile/views/personnel/team.vue

@@ -12,10 +12,7 @@
           :close-when-click-map="true"
           :is-custom="true"
         >
-        <div id="info-window">
-          <p>{{ window.text }}</p>
-        </div>
-      </el-amap-info-window>
+        </el-amap-info-window>
       </el-amap>
     </div>
   </div>
@@ -89,28 +86,33 @@ export default {
                     mouseover() {
                       // 方法:鼠标移动到点标记上,显示相应窗体
                       that.windows.forEach(window => {
-                        window.visible = false // 关闭窗体
+                          window.visible = false // 关闭窗体
                       })
                       that.window = that.windows[index]
                       that.$nextTick(() => {
-                        that.window.visible = true
+                          that.window.visible = true
                       })
                     }
                   }
                 })
-              windows.push({
-                position: item.position,
-                isCustom: true,
-                offset: [115, 55], // 窗体偏移
-                showShadow: false,
-                visible: false, // 初始是否显示
-                text: item.text
-              })
+
+                windows.push({
+                  position: item.position,
+                  isCustom: true,   //是否自定义信息窗体
+                  offset: [125, 45],  // 窗体偏移
+                  showShadow: false,
+                  visible: false, // 初始是否显示
+                  content: `<div style="color:white;width:211px;background-color:rgba(7,25,54,0.6);padding: 0 0 10px 0">
+                              <h3 style="background-color:#071936;padding:5px;">人员信息</h3>
+                              <img src="${item.text.avatarUrl}" width="100%" height="100%">
+                              <strong>姓名:</strong>${item.text.name}
+                            </div>`
+                })
             })
-            //  加点
-            this.texts = texts
-            // 加弹窗
-            this.windows = windows
+                //  加点
+                this.texts = texts
+                // 加弹窗
+                this.windows = windows
               })
               .catch(() => {
               });
@@ -133,21 +135,8 @@ export default {
     vertical-align: 10px;
   }
 
-.amap-demo {
-      height: 800px;
-    }
-    .amap-page-container {
-      position: relative;
-    }
-    #info-window{
-      width: 211px;
-      height: 80px;
-      margin-left: 30px;
-      background:rgba(255,255,255,0.9);
-      border-radius: 1px;
-      position: relative;
-      overflow: hidden;
-    }
-
+  .amap-demo {
+    height: 800px;
   }
+}
 </style>