infoWindow组件优化

hookehuyr
Commit 0e2d36e3d68766d2eb5ad6191e00dd66961bab22 0e2d36e3 1 parent d0851587
Showing 2 changed files with 148 additions and 24 deletions
src/components/InfoWindow.vue
src/views/index.vue
--- a/src/components/InfoWindow.vue
View file @0e2d36e
+++ b/src/components/InfoWindow.vue
View file @0e2d36e
 <template>
-  <div>
+  <div style="position: relative;">
-    <div class="box-card" style="padding: 0 80 30 80;width: 400px;border-radius: 10px;">
+    <div class="info-window-wrapper">
-
+      <div class="t-popup-content">
-      {{ title }}
+        <div class="popup-content" style="height: 13.5rem;">
-      <div id="del-div">
+          <div style="position: relative;">
-        <div type="primary" icon="el-icon-close" @click="close()">123</div>
+            <h3 class="view-name">三宝楼</h3>
+            <van-icon @click="close" name="cross" size="1.25rem" style="position: absolute; right: 0.75rem; top: 0.75rem;" />
+          </div>
+          <img class="view-photo"
+            src="https://img0.baidu.com/it/u=3974116483,397969091&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=496">
+          <p class="introduction" style="padding: 0.5rem; padding-bottom: 0;">尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......</p>
+          <div class="control-play"><span></span></div>
+          <div @click="showDetail" class="show-details" style="color: white; text-align: center; line-height: 3rem;">详情</div>
+        </div>
       </div>
-      <div style="text-align: center;">
+    </div>
-        <button type="primary">主要按钮</button>
+    <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;"><div class="leaflet-popup-tip"></div></div>
+
+    <van-popup teleport="body" v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
+      <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
+      <div class="popup-wrapper">
+        <div class="title">
+          {{ popup_title }}
+        </div>
+        <div class="content" v-html="popup_content">
+        </div>
+        <video-player ref="videoPlayer" style="width: 100%; height: 10rem;"
+          poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
+          :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
       </div>
-  </div>
+    </van-popup>
   </div>
 </template>
@@ -25,27 +45,128 @@ export default {
       default: ''
     }
   },
+  data () {
+    return {
+      show_popup: false,
+      popup_title: '',
+      popup_content: '',
+      video_src: '',
+    }
+  },
   methods: {
     // 关闭
     close() {
       // 高德地图信息窗关闭的api
       this.infoWindow.close()
     },
-    edit() {
+    showDetail () {
-      console.log('编辑按钮测试')
+      this.show_popup = true;
-    },
+      this.popup_title = '三宝楼';
-    del() {
+      this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
-      console.log('删除按钮测试')
+      this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
     }
   }
 }
 </script>
-<style lang="less" scoped>
+<style lang="less">
-#del-div {
+.info-window-wrapper {
-  position: absolute;
+  background: #fff;
-  right: 20;
+  color: #333;
-  top: 20;
+  -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-  transform: scale(1.2);
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+  text-align: left;
+  border-radius: 12px;
+  padding: 0;
+
+  .t-popup-content {
+    position: relative;
+    width: 25rem;
+    padding: 0;
+    margin: 0;
+    border-radius: 0.1rem;
+    background: rgba(255, 255, 255, 0.9);
+    -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
+    line-height: 1.4;
+
+    .view-name {
+      margin: 0;
+      padding: 0.5rem;
+      width: 25rem;
+      height: 2.5rem;
+      font-size: 1.2rem;
+      text-indent: 0.2rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: #5b5b5b;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      border-bottom: solid 1px #e8e8e8;
+      border-radius: 0.1rem 0.1rem 0 0;
+      background: #f7f7f7;
+      overflow: hidden;
+    }
+
+    .view-photo {
+      display: block;
+      float: left;
+      margin: 0.5rem;
+      height: 100%;
+      width: 9rem;
+      height: 9rem;
+      border-radius: 3px;
+    }
+
+    .introduction {
+      float: left;
+      margin: 0.2rem 0;
+      width: 13.5rem;
+      height: 6.75rem;
+      font-size: 0.9rem;
+      color: #202020;
+      overflow: hidden;
+    }
+
+    .control-play {
+      display: block;
+      float: left;
+      margin-right: 0.5rem;
+      width: 7rem;
+      height: 3rem;
+      border-radius: 2px;
+      background: #ffdd02 center no-repeat;
+      background-size: 6.5rem 3rem;
+    }
+
+    .show-details {
+      display: block;
+      float: left;
+      width: 7rem;
+      height: 3rem;
+      border-radius: 2px;
+      background: #9196a9 center no-repeat;
+      background-size: 6.5rem 3rem;
+    }
+  }
+}
+
+.leaflet-popup-tip-container {
+  margin-top: -1px;
+  width: 2rem;
+  height: 2rem;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.leaflet-popup-tip {
+    width: 1rem;
+    height: 1rem;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    background: transparent url(https://map.365daoyou.cn/web/images/info-sharp.png) center no-repeat;
+    background-size: 1rem 1rem;
+    box-shadow: none;
 }
 </style>
--- a/src/views/index.vue
View file @0e2d36e
+++ b/src/views/index.vue
View file @0e2d36e
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-05-30 18:09:09
+ * @LastEditTime: 2023-05-31 13:11:26
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -78,7 +78,7 @@
         </div>
       </div>
     </div>
-    <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem' }">
+    <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }">
       <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
       <div class="popup-wrapper">
         <div class="title">
@@ -825,6 +825,8 @@ export default {
         " ] 的位置单击了地图！当前层级" +
         zoom;
       console.warn(text);
+      // 点击空白处 关闭弹框
+      this.$refs['infoWindow'].close()
     },
     setWalkRoute() {
       //步行导航
@@ -877,13 +879,13 @@ export default {
     positionMarker() {
       // this.setInfoWindow([120.587519, 31.315924])
       // 点击后创建自定义信息窗口
-      this.setInfoWindows('title', 'content', [120.587519, 31.315924])
+      this.setInfoWindows([120.587519, 31.315924])
       // 把地图中心点设置为当前点击的标记点
       this.map.setZoomAndCenter(this.zoom, [120.587519, 31.315924]);
       //
       this.show_nav_popup = false;
     },
-    setInfoWindows(title, content, position) {
+    setInfoWindows(position) {
       // 此时需要把组件的样式设置为可见
       this.showInfoWindow = true
       // 设置marker头部的标题信息窗口
@@ -990,6 +992,7 @@ export default {
   top: 10%;
   width: 20px;
   height: auto;
+  z-index: 100;
   .box-wrapper {
     display: flex;