fix 操作优化

hookehuyr
Commit 883a13b7f0bb272a9346bad00af0860f0e57f41c 883a13b7 1 parent f53f3c9f
Showing 3 changed files with 73 additions and 64 deletions
package.json
src/views/bieyuan/map.vue
yarn.lock
--- a/package.json
View file @883a13b
+++ b/package.json
View file @883a13b
@@ -18,6 +18,7 @@
     "@photo-sphere-viewer/markers-plugin": "^5.7.3",
     "@photo-sphere-viewer/stereo-plugin": "^5.7.3",
     "@photo-sphere-viewer/virtual-tour-plugin": "^5.7.3",
+    "@vant/touch-emulator": "^1.4.0",
     "@videojs-player/vue": "^1.0.0",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vueuse/core": "^8.5.0",
--- a/src/views/bieyuan/map.vue
View file @883a13b
+++ b/src/views/bieyuan/map.vue
View file @883a13b
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-18 17:24:37
+ * @LastEditTime: 2024-09-18 18:39:01
  * @FilePath: /map-demo/src/views/bieyuan/map.vue
  * @Description: 公众地图主体页面
 -->
@@ -9,7 +9,7 @@
   <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
     <div id="container"></div>
     <div style="position: absolute; top: 2rem; right: 1rem; display: flex; flex-direction: column;">
-      <van-icon size="2rem" name="search" color="#DD7850" style="margin-bottom: 1rem;" />
+      <!-- <van-icon size="2rem" name="search" color="#DD7850" style="margin-bottom: 1rem;" /> -->
       <van-image
         width="2rem"
         height="2rem"
@@ -35,13 +35,13 @@
     </div>
     <van-config-provider :theme-vars="themeVars">
-      <van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange" :content-draggable="true">
+      <van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange">
-        <template #header>
+        <!-- <template #header>
           <div class="custom-header">
             <h3>自定义标题</h3>
             <button @click="show = false">关闭</button>
           </div>
-        </template>
+        </template> -->
         <page-info ref="pageInfo"></page-info>
         <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
           <van-icon name="arrow-left" color="#FFF" size="1.5rem" />
@@ -52,6 +52,7 @@
 </template>
 <script>
+import "@vant/touch-emulator";
 // import { mapState } from 'vuex'
 import coord from '@/common/map_data'
 import my_router from '@/common/my_router'
@@ -145,8 +146,46 @@ export default {
       anchors: [0,  (0.5 * window.innerHeight),  (1 * window.innerHeight)],
       themeVars: {
         floatingPanelHeaderHeight: 0,
+        floatingPanelBorderRadius: '1.25rem'
       },
       showClose: false,
+      markerStyle1: { // 未选中
+        //设置文本样式，Object 同 css 样式表
+        "padding": ".5rem .2rem .5rem .2rem",
+        // "margin-bottom": "1rem",
+        "border-radius": ".25rem",
+        "background-color": "#DD7850",
+        // "width": "1rem",
+        // "border-width": 0,
+        // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
+        // "text-align": "center",
+        "font-size": "0.8rem",
+        "color": "white",
+        "writing-mode": "vertical-rl",
+        "text-orientation": "mixed",
+        "display": "flex",
+        "justify-content": "center",
+        "align-items": "center",
+      },
+      markerStyle2: { // 选中
+        //设置文本样式，Object 同 css 样式表
+        "padding": ".5rem .2rem .5rem .2rem",
+        // "margin-bottom": "1rem",
+        "border-color": "#DD7850",
+        "border-radius": ".25rem",
+        "background-color": "#FFF",
+        // "width": "1rem",
+        // "border-width": 0,
+        // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
+        // "text-align": "center",
+        "font-size": "0.8rem",
+        "color": "#DD7850",
+        "writing-mode": "vertical-rl",
+        "text-orientation": "mixed",
+        "display": "flex",
+        "justify-content": "center",
+        "align-items": "center",
+      },
     }
   },
   async mounted() {
@@ -192,7 +231,7 @@ export default {
     // setTimeout(() => {
     //   this.info_height = (0.5 * window.innerHeight);
     //   // 浮动面板样式
-    //   $('.van-floating-panel__content').css('borderRadius', '1rem');
+    //   $('.van-floating-panel__content').css('borderRadius', '1.5rem');
     // }, 2000);
   },
   watch: {
@@ -247,24 +286,7 @@ export default {
             // draggable: true, //是否可拖拽
             // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
             // angle: 10, //点标记的旋转角度
-            style: {
+            style: this.markerStyle1,
-              //设置文本样式，Object 同 css 样式表
-              "padding": ".5rem .2rem .5rem .2rem",
-              // "margin-bottom": "1rem",
-              "border-radius": ".25rem",
-              "background-color": "#DD7850",
-              // "width": "1rem",
-              // "border-width": 0,
-              // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
-              // "text-align": "center",
-              "font-size": "0.8rem",
-              "color": "white",
-              "writing-mode": "vertical-rl",
-              "text-orientation": "mixed",
-              "display": "flex",
-              "justify-content": "center",
-              "align-items": "center",
-            },
             position: entity_info[i].position, //点标记在地图上显示的位置
           });
           textMarker.setMap(this.map); //将文本标记设置到地图上
@@ -278,46 +300,11 @@ export default {
             this.markerSum.forEach(item => {
               if (e.target.hS !== item.hS) {
                 // 修改文本的样式
-                item.setStyle({
+                item.setStyle(this.markerStyle1);
-                  //设置文本样式，Object 同 css 样式表
-                  "padding": ".5rem .2rem .5rem .2rem",
-                  // "margin-bottom": "1rem",
-                  "border-radius": ".25rem",
-                  "background-color": "#DD7850",
-                  // "width": "1rem",
-                  // "border-width": 0,
-                  // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
-                  // "text-align": "center",
-                  "font-size": "0.8rem",
-                  "color": "white",
-                  "writing-mode": "vertical-rl",
-                  "text-orientation": "mixed",
-                  "display": "flex",
-                  "justify-content": "center",
-                  "align-items": "center",
-                });
               }
             })
             // 修改文本的样式
-            e.target.setStyle({
+            e.target.setStyle(this.markerStyle2);
-                //设置文本样式，Object 同 css 样式表
-                "padding": ".5rem .2rem .5rem .2rem",
-                // "margin-bottom": "1rem",
-                "border-color": "#DD7850",
-                "border-radius": ".25rem",
-                "background-color": "#FFF",
-                // "width": "1rem",
-                // "border-width": 0,
-                // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
-                // "text-align": "center",
-                "font-size": "0.8rem",
-                "color": "#DD7850",
-                "writing-mode": "vertical-rl",
-                "text-orientation": "mixed",
-                "display": "flex",
-                "justify-content": "center",
-                "align-items": "center",
-            });
             // 修改文本内容
             // textMarker.setText('样式已修改');
@@ -329,7 +316,8 @@ export default {
             // 打开浮动面板
             this.info_height = (0.5 * window.innerHeight);
             // 浮动面板样式
-            $('.van-floating-panel__content').css('borderRadius', '0.5rem');
+            $('.van-floating-panel__content').css('borderRadius', '1.25rem');
+            $('.van-floating-panel').css('boxShadow', '0 0 15px black');
           })
         }
       });
@@ -582,6 +570,11 @@ export default {
         e.lnglat.getLat() +
         "],"
       console.log(text);
+      // 关闭浮动面板
+      this.info_height = 0;
+      $('.van-floating-panel').css('boxShadow', 'none');
+      // 还原样式
+      this.resetMarkStyle();
     },
     scanQrcode() {
       wx.scanQRCode({
@@ -605,16 +598,22 @@ export default {
           path: '/bieyuan/info'
         })
       } else {
-        $('.van-floating-panel__content').css('borderRadius', '0.5rem');
+        $('.van-floating-panel__content').css('borderRadius', '1.25rem');
+        $('.van-floating-panel').css('boxShadow', 'none');
         this.showClose = false;
       }
     },
     closeFloatPanel () {
       this.info_height = (0.5 * window.innerHeight);
-      $('.van-floating-panel__content').css('borderRadius', '0.5rem');
+      $('.van-floating-panel__content').css('borderRadius', '1.25rem');
       this.showClose = false;
       // 关闭音频
       this.$refs.pageInfo.outerStopAudio();
+    },
+    resetMarkStyle () {
+      this.markerSum.forEach(item => {
+        item.setStyle(this.markerStyle1);
+      })
     }
   }
 }
@@ -810,4 +809,8 @@ export default {
   padding: 10px;
   background-color: #f7f8fa;
 }
+
+.van-floating-panel__header-bar {
+  background: none;
+}
 </style>
--- a/yarn.lock
View file @883a13b
+++ b/yarn.lock
View file @883a13b
@@ -269,6 +269,11 @@
   resolved "https://mirrors.cloud.tencent.com/npm/@vant/popperjs/-/popperjs-1.3.0.tgz"
   integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
+"@vant/touch-emulator@^1.4.0":
+  version "1.4.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vant/touch-emulator/-/touch-emulator-1.4.0.tgz#02420ca5f312a7eb6c36c349cbb8e80e6f29ff2f"
+  integrity sha512-Zt+zISV0+wpOew2S1siOJ3G22y+hapHAKmXM+FhpvWzsRc4qahaYXatCAITuuXt0EcDp7WvEeTO4F7p9AtX/pw==
+
 "@vant/use@^1.6.0":
   version "1.6.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@vant/use/-/use-1.6.0.tgz#237df3091617255519552ca311ffdfea9de59001"