fix: .

index.html

@@ -10,7 +10,7 @@
     <div id="app"></div>
     <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
     <script type="module" src="/src/main.js"></script>
-    <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js"></script> -->
-    <!-- <script>  var vConsole = new VConsole();  </script> -->
+    <script src="https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js"></script>
+    <script>  var vConsole = new VConsole();  </script>
   </body>
 </html>

package.json

@@ -12,6 +12,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "^1.9.0",
     "crypto-js": "^4.2.0",
+    "hammerjs": "^2.0.8",
     "jsonp": "^0.2.1",
     "lib-flexible": "^0.3.2",
     "markdown-it": "^14.1.0",

src/main.js

@@ -6,6 +6,8 @@ import "lib-flexible/flexible";
 import App from "./App.vue";
 import router from "./router";
 import {initJssdk} from "./utils/wxConfig";
+
+
 // console.error(initJssdk)
 const app = createApp(App);
 initJssdk()

src/views/answer/index.vue

@@ -27,7 +27,7 @@
               <div v-if="optionIndex == index && !i.correct" class="icon false"></div> -->
             </div>
           </div>
-          <div class="viewer" @click="showReview = true">查看解析</div>
+          <div class="viewer" :class="{ show: isCheck }" @click="showReview = true">查看解析</div>
         </div>
       </div>
     </div>
@@ -194,6 +194,10 @@ const reStartOrContinue = (type = 1) => {
           border: 1px solid #6a4934;
           margin-top: 2.6667rem;
           margin-bottom: 1.8267rem;
+          visibility: hidden;
+          &.show {
+            visibility: visible;
+          }
         }
         .options {
           margin-top: 0.5333rem;

src/views/home/index.vue

@@ -3,26 +3,13 @@
   <div class="home">
     <div class="home-layer" v-show="!showFrist">
       <div class="home-title"></div>
-      <div class="item" :class="`item${i}`" @click="goItem(i)" v-for="i in 6"></div>
+      <div class="item" :class="`item${i}`" @click="goItem(i)" v-for="i in 4"></div>
 
-      <!-- <div class="header" @click="goItem(1)">
-        <img src="@/assets/images/homeText1.png" alt="" />
-      </div>
-      <div class="middle">
-        <div class="middle-left" @click="goItem(2)"><img src="@/assets/images/homeText2.png" alt="" /></div>
-        <div class="middle-right">
-          <div class="item up" @click="goItem(3)"><img src="@/assets/images/homeText3.png" alt="" /></div>
-          <div class="item down" @click="goItem(4)"><img src="@/assets/images/homeText4.png" alt="" /></div>
-        </div>
-      </div>
-      <div class="bottom">
-        <div class="item l" @click="goItem(5)"><img src="@/assets/images/homeText5.png" alt="" /></div>
-        <div class="item r" @click="goItem(6)"><img src="@/assets/images/homeText6.png" alt="" /></div>
-      </div>
-      <div class="close-btn" @click="close"></div> -->
+      <div class="logo"></div>
     </div>
-    <div class="frist-box" v-show="showFrist" @click="enter">
+    <div class="frist-box" v-show="showFrist">
       <div class="title"></div>
+      <div class="btn" @click="enter">即刻游览</div>
     </div>
   </div>
 </template>
@@ -72,7 +59,7 @@ const goItem = (type) => {
     height: 100%;
     top: 0;
     left: 0;
-    background: url("@/assets/images/homeBg.png") no-repeat;
+    background: url("@/assets/images/homeBg.jpg") no-repeat;
     background-size: 100% 100%;
     padding: 0 0.44rem 0;
     color: #fff;
@@ -80,12 +67,13 @@ const goItem = (type) => {
     overflow: hidden;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     flex-direction: column;
+    padding-top: 1.1867rem;
     .home-title {
-      width: 5.3333rem;
-      height: 2.6667rem;
-      background: url("@/assets/images/homeTitle.png") no-repeat;
+      width: 5.4533rem;
+      height: 5.6267rem;
+      background: url("@/assets/images/fristTitle.png") no-repeat;
       background-size: 100% 100%;
       // position: absolute;
       // top: 1.3333rem;
@@ -93,9 +81,19 @@ const goItem = (type) => {
       // transform: translateX(-50%);
       z-index: 1;
     }
+    .logo {
+      width: 7.16rem;
+      height: 1rem;
+      background: url("@/assets/images/homeLogo.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      bottom: 0.6667rem;
+      left: 50%;
+      transform: translateX(-50%);
+    }
     .item {
       width: 6.8533rem;
-      height: 1.9067rem;
+      height: 2.12rem;
       // background: red;
       margin-bottom: 0.56rem;
       position: relative;
@@ -247,20 +245,38 @@ const goItem = (type) => {
 .frist-box {
   width: 100%;
   height: 100%;
-  background: url("@/assets/images/frist.png") no-repeat;
-  background-size: cover;
+  background: url("@/assets/images/homeBg.jpg") no-repeat;
+  background-size: 100% 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   .title {
-    width: 4.8rem;
-    height: 2.4667rem;
+    width: 7.6267rem;
+    height: 7.88rem;
     background: url("@/assets/images/fristTitle.png") no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    right: 1.0667rem;
-    top: 5.3333rem;
+    left: 50%;
+    top: 9%;
+    transform: translateX(-50%);
+  }
+  .btn {
+    width: 4.2533rem;
+    height: 1.0933rem;
+    background: url("@/assets/images/fristBtn.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    bottom: 12%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-weight: bold;
+    font-size: 0.4667rem;
+    color: #ffffff;
+    line-height: 0.3733rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 </style>

src/views/line/index.vue

@@ -18,13 +18,17 @@
         </div>
       </div>
       <div class="bottom">
-        <div class="item" @click="gotoItem(i)" v-for="(i, index) in lineData">
+        <div class="item" @click="gotoItem(i)" :class="{ active: i.id == activeTagData?.id }" v-for="(i, index) in lineData">
           <div class="icon">{{ index + 1 }}</div>
           <p class="name">{{ i.name }}</p>
         </div>
       </div>
     </div>
   </div>
+  <div class="vr-content" v-if="vrLink">
+    <div class="vr-back" @click="vrLink = ''"></div>
+    <iframe :src="vrLink" frameborder="0"></iframe>
+  </div>
 </template>
 
 <script setup>
@@ -32,7 +36,7 @@ import { nextTick, onMounted, ref } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
 import jsonp from "jsonp";
 import Header from "@/components/header/index.vue";
-import { mapData } from "./data.js";
+import { mapData } from "../map/data.js";
 import Dialog from "../map/dialog.vue";
 import tagIcon from "@/assets/images/tagIcon.png";
 let AMap = null;
@@ -40,25 +44,95 @@ let map = null;
 let imageLayer = null;
 const dialogData = ref(null);
 const activeId = ref(0);
+let infoWindow = null;
+const activeTagData = ref(null);
+const vrLink = ref(null);
+const goVr = () => {
+  vrLink.value = props.dialogData.vrLink;
+};
+
+const test = (data) => {
+  let zoom = map.getZoom();
+  let item = markers.find((i) => i.getExtData().id == data.id);
+  // let data = item.getExtData();
+  infoWindow = new AMap.InfoWindow({
+    content: getHtml(data), // 设置弹窗内容为自定义的HTML元素
+    offset: new AMap.Pixel(0, -30), // 设置弹窗偏移量，可根据需要调整
+  });
+
+  // infoWindow.open(map, e.target.getPosition());
+  infoWindow.open(map, item.getPosition());
+
+  let center = data.location.split(",");
+  map.setZoomAndCenter(zoom, center, false, 300);
+  setTimeout(() => {
+    setTimeout(() => {
+      const button = document.getElementById("detailsBtn");
+      button.addEventListener("click", openDetails);
+      const vrBtn = document.getElementById("vrBtn");
+      vrBtn.addEventListener("click", openVrLink);
+      const closeBtn = document.getElementById("closeBtn");
+      closeBtn.addEventListener("click", closeTag);
+    }, 100);
+  }, 100);
+};
+const getHtml = (data) => {
+  activeTagData.value = data;
+  let html = `<div class="map-window">
+      <div class="img-box">
+        <img src="./static/image/全部/${data.images[0]}">
+        <div style="${data.VrLink ? "" : "display:none"}" class="vr-btn" id="vrBtn"></div>
+        <div class="close-btn" id="closeBtn"></div>
+        </div>
+      <div class="map-window-controls">
+        <div class="title">${data.name}</div>
+        <div class="details-btn" id="detailsBtn">详情</div>
+        </div>
+      </div>`;
+
+  return html;
+};
+const openDetails = (data) => {
+  dialogData.value = activeTagData.value;
+};
+const openVrLink = () => {
+  if (activeTagData.value.vrLink) {
+    vrLink.value = activeTagData.value.vrLink;
+  }
+};
+const closeTag = (e) => {
+  activeTagData.value = null;
+  infoWindow.close();
+  infoWindow = null;
+};
 const hanlderMakerEvent = (e) => {
   console.log("click", e.target.getExtData());
-  // showDialog.value = true;
   let data = e.target.getExtData();
-  dialogData.value = data;
+  // dialogData.value = data;
+
+  console.error(e);
+
+  infoWindow = new AMap.InfoWindow({
+    content: getHtml(data), // 设置弹窗内容为自定义的HTML元素
+    offset: new AMap.Pixel(0, -30), // 设置弹窗偏移量，可根据需要调整
+  });
+  infoWindow.open(map, e.target.getPosition());
+  setTimeout(() => {
+    const button = document.getElementById("detailsBtn");
+    button.addEventListener("click", openDetails);
+    const vrBtn = document.getElementById("vrBtn");
+    vrBtn.addEventListener("click", openVrLink);
+    const closeBtn = document.getElementById("closeBtn");
+    closeBtn.addEventListener("click", closeTag);
+  }, 100);
 };
 let markers = [];
 const lineData = ref([]);
 const gotoItem = (item) => {
-  let marker = markers.find((i) => i.getExtData().id == item.id);
-  let data = marker.getExtData();
-  dialogData.value = data;
-  // var infoWindow = new AMap.InfoWindow({
-  //   content: `<div class="map-window">
-  //     <div class="img-box"><img src="./static/image/全部/${data.images[0]}"></div></div>`, // 设置弹窗内容为自定义的HTML元素
-  //   offset: new AMap.Pixel(0, -30), // 设置弹窗偏移量，可根据需要调整
-  // });
-  // // infoWindow.open(map, e.target.getPosition());
-  // infoWindow.open(map, marker.getPosition());
+  // let marker = markers.find((i) => i.getExtData().id == item.id);
+  // let data = marker.getExtData();
+  // dialogData.value = data;
+  test(item);
 };
 const setMarker = () => {
   let data = mapData.filter((item) => item.type == 4);
@@ -73,24 +147,23 @@ const setMarker = () => {
     let iconH = 57;
     let customIcon = null;
     let offset = [new AMap.Pixel(0, 0)];
-    if (data[i].iconSize) {
-      iconW = (data[i].iconSize[0] - 0) * scale;
-      iconH = (data[i].iconSize[1] - 0) * scale;
-      customIcon = new AMap.Icon({
-        // size: new AMap.Size(50, 50),
-        image: `./static/image/景点地标切图/${data[i].name}.png`,
-        imageSize: new AMap.Size(iconW, iconH),
-      });
-      offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
-    } else {
-      offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
-      customIcon = new AMap.Icon({
-        size: new AMap.Size(iconW, iconH),
-        image: tagIcon,
-        imageSize: new AMap.Size(iconW, iconH),
-      });
-      // customIcon = markerContent;
-    }
+    // if (data[i].iconSize) {
+    //   iconW = (data[i].iconSize[0] - 0) * scale;
+    //   iconH = (data[i].iconSize[1] - 0) * scale;
+    //   customIcon = new AMap.Icon({
+    //     // size: new AMap.Size(50, 50),
+    //     image: `./static/image/景点地标切图/${data[i].name}.png`,
+    //     imageSize: new AMap.Size(iconW, iconH),
+    //   });
+    //   offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
+    // } else {
+    offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
+    customIcon = new AMap.Icon({
+      size: new AMap.Size(iconW, iconH),
+      image: tagIcon,
+      imageSize: new AMap.Size(iconW, iconH),
+    });
+    // }
 
     let pos = data[i].location.split(",");
     let extData = data[i];
@@ -597,6 +670,12 @@ onMounted(() => {
             display: none;
           }
         }
+        &.active {
+          .icon {
+            background: url("@/assets/images/line-btn_active@2x.png") no-repeat;
+            background-size: 100% 100%;
+          }
+        }
         .icon {
           width: 0.6933rem;
           height: 0.6933rem;
@@ -656,24 +735,84 @@ onMounted(() => {
     background-size: 100% 100%;
   }
 }
-/* 
-.custom-content-marker img {
+.map-window {
+  width: 6.4rem;
+  // height: 4.6667rem;
+
+  .img-box {
+    width: 100%;
+    height: 3.7333rem;
+    .vr-btn {
+      width: 1.4rem;
+      height: 1.4rem;
+      background: url("@/assets/images/vr720.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .close-btn {
+      width: 0.4rem;
+      height: 0.4rem;
+      background: url("@/assets/images/lineClose.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 0.16rem;
+      right: 0.16rem;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .map-window-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.1333rem;
+    .title {
+      padding-left: 0.2667rem;
+      font-size: 0.2667rem;
+      font-weight: bold;
+      width: 80%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .details-btn {
+      padding: 0.1333rem;
+      color: #e49246;
+      border: 1px solid #e49246;
+      height: 0.5333rem;
+      border-radius: 0.2667rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+.vr-content {
+  position: absolute;
   width: 100%;
   height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  background-color: #232323;
+  .vr-back {
+    width: 42px;
+    height: 42px;
+    background: url("@/assets/images/vr-back.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0.5333rem;
+    left: 0.5333rem;
+  }
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
 }
-
-.custom-content-marker .close-btn {
-  position: absolute;
-  top: -6px;
-  right: -8px;
-  width: 15px;
-  height: 15px;
-  font-size: 12px;
-  background: #ccc;
-  border-radius: 50%;
-  color: #fff;
-  text-align: center;
-  line-height: 15px;
-  box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
-} */
 </style>

src/views/map/dialog.vue

@@ -1,11 +1,16 @@
 <!--  -->
 <template>
+  <div class="dialog-header">
+    <div class="back-icon" @click="close"></div>
+    <div class="title">智游岳阳</div>
+  </div>
   <div class="dialog">
     <!-- <audio ref="audioRef" v-if="dialogData.audio" :autoplay="true" :src="`./static/image/${dialogData.title}/${dialogData.name}/${dialogData.audio}`"></audio> -->
     <audio ref="audioRef" v-if="dialogData.audio" :autoplay="true" :src="`./static/image/全部/${dialogData.audio}`"></audio>
 
     <div class="dialog-conntent">
-      <div class="close-btn" @click="emits('close')"></div>
+      <p class="dialog-title">{{ dialogData.name }}</p>
+      <!-- <div class="close-btn" @click="emits('close')"></div> -->
       <div class="img-box">
         <div class="dialog-swiper-container">
           <div class="swiper-wrapper">
@@ -16,29 +21,37 @@
           </div>
           <!-- 如果需要分页器 -->
           <div class="swiper-pagination"></div>
-          <div class="swiper-button-next"></div>
-          <div class="swiper-button-prev"></div>
+          <!-- <div class="swiper-button-next"></div>
+          <div class="swiper-button-prev"></div> -->
         </div>
         <div class="audio-icon" :class="{ active: isPlay }" v-if="dialogData.audio" @click="plauMusic"></div>
       </div>
       <div class="text-box">
-        <div class="header-info">
+        <div class="desc-info">
+          <p>
+            {{ dialogData.desc }}
+          </p>
+        </div>
+        <!-- <div class="header-info">
           <div class="info">
             <span class="title"> {{ dialogData.name }}</span> <span class="name">湖南省岳阳市{{ dialogData.address }}{{ dialogData.name }}</span>
           </div>
           <div class="tag" v-if="dialogData.rate">
             <span>{{ dialogData.rate }}</span> <span>景区</span>
           </div>
-        </div>
-        <div class="desc-info">
-          <p>
-            {{ dialogData.desc }}
-          </p>
+        </div> -->
+
+        <div class="location">
+          <div class="adress">
+            <div class="adress-icon"></div>
+            <span class="name"><span class="pos-text">位置</span>湖南省岳阳市{{ dialogData.address }}{{ dialogData.name }}</span>
+          </div>
+
+          <div class="pos-icon" @click="goLocation"></div>
         </div>
         <div class="text-bottom">
-          <div class="close" @click="emits('close')"></div>
-
-          <div class="explain" v-if="dialogData.vrLink" @click="goVr"></div>
+          <div class="" v-if="dialogData.vrLink" @click="goVr">查看全景</div>
+          <div class="">三维景点</div>
         </div>
       </div>
     </div>
@@ -53,6 +66,7 @@
 import Swiper from "swiper";
 import "swiper/css/swiper.css";
 import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, defineEmits, defineProps, onUnmounted, onBeforeUnmount } from "vue";
+import Header from "@/components/header/index.vue";
 const emits = defineEmits(["close"]);
 const props = defineProps({
   dialogData: {
@@ -60,6 +74,23 @@ const props = defineProps({
     default: null,
   },
 });
+const close = () => {
+  emits("close");
+};
+
+const goLocation = () => {
+  let lat = props.dialogData.location[0];
+  let lon = props.dialogData.location[1];
+  let ad = `湖南省岳阳市${props.dialogData.address}${props.dialogData.name}`;
+  wx.openLocation({
+    latitude: lat, // 纬度，浮点数，范围为90 ~ -90
+    longitude: lon, // 经度，浮点数，范围为180 ~ -180。
+    name: props.dialogData.name, // 位置名
+    address: ad, // 地址详情说明
+    scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
+  });
+};
+
 const vrLink = ref("");
 const isPlay = ref(false);
 const audioRef = ref(null);
@@ -108,12 +139,12 @@ onBeforeUnmount(() => {
 </script>
 <style lang="scss" scoped>
 .vr-content {
-  position: fixed;
+  position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-  z-index: 1001;
+  z-index: 10000;
   background-color: #232323;
   .vr-back {
     width: 42px;
@@ -130,19 +161,33 @@ onBeforeUnmount(() => {
   }
 }
 .dialog {
-  position: absolute;
+  position: fixed;
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+
+  background-color: #f2f2f2;
+
+  z-index: 100;
   top: 0;
   left: 0;
   .dialog-conntent {
     width: 100%;
-    height: 80%;
+    height: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
+    padding-top: 1.0667rem;
+    background: url("@/assets/images/detailsBg.png") no-repeat;
+
+    background-size: cover;
+    overflow-y: auto;
+    overflow-x: hidden;
+    .dialog-title {
+      font-size: 0.56rem;
+      font-weight: bold;
+      margin: 0.7067rem auto 0.4rem;
+      text-align: center;
+    }
     .close-btn {
       width: 1.0667rem;
       height: 1.0667rem;
@@ -156,18 +201,18 @@ onBeforeUnmount(() => {
     }
     .img-box {
       width: 100%;
-      height: 55%;
+      height: 5.48rem;
       background: #f2f2f2;
       position: relative;
-      overflow-x: hidden;
+      // overflow-x: hidden;
       .audio-icon {
         width: 0.72rem;
         height: 0.72rem;
         background: url("@/assets/images/audio-icon.png") no-repeat;
         background-size: 100% 100%;
         position: absolute;
-        right: 0.44rem;
-        bottom: 1.0667rem;
+        right: 0.4267rem;
+        bottom: 0.1333rem;
         z-index: 10;
         &.active {
           background: url("@/assets/images/musicActive.png") no-repeat;
@@ -192,17 +237,25 @@ onBeforeUnmount(() => {
           }
         }
         :deep(.swiper-pagination) {
-          bottom: 0.8rem;
+          bottom: -0.5333rem;
+          height: 0.5333rem;
 
           .swiper-pagination-bullet {
-            border-radius: 50%;
-            border: 2.0025px solid #ffffff;
-            background: transparent;
-            opacity: 1;
+            // border-radius: 50%;
+            // border: 2.0025px solid #ffffff;
+            // background: transparent;
+            // opacity: 1;
+            width: 0.16rem;
+            height: 0.16rem;
+            border: 0.0267rem solid #8e7c7c;
+
+            background: none;
           }
 
           .swiper-pagination-bullet-active {
             background: #fff;
+            border: none;
+            border: 0.1px solid #cacaca;
           }
         }
         :deep(.swiper-button-prev) {
@@ -232,61 +285,101 @@ onBeforeUnmount(() => {
     .text-box {
       z-index: 10;
       width: 100%;
-      height: 50%;
-      background: #eee;
-      background: url("@/assets/images/dialogTextBg.png") no-repeat;
-      background-size: 100% 100%;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      padding: 0 1.0667rem;
-      .header-info {
+      // height: 50%;
+      // background: #eee;
+      // background: url("@/assets/images/dialogTextBg.png") no-repeat;
+      // background-size: 100% 100%;
+      // position: absolute;
+      // bottom: 0;
+      // left: 0;
+      // padding: 0 1.0667rem;
+      margin-top: 0.8rem;
+      padding: 0 0.9333rem;
+      // .header-info {
+      //   display: flex;
+      //   justify-content: space-between;
+      //   align-items: center;
+      //   border-bottom: 2.0025px solid rgba(40, 40, 40, 0.32);
+      //   height: 26%;
+      //   padding-top: 0.2667rem;
+      //   .info {
+      //     display: flex;
+      //     justify-content: space-between;
+      //     align-items: flex-start;
+      //     flex-direction: column;
+      //     .title {
+      //       font-size: 0.56rem;
+      //       color: #4a4a4a;
+      //       line-height: 0.6533rem;
+      //     }
+      //     .name {
+      //       font-size: 0.3333rem;
+      //       color: #4a4a4a;
+      //       line-height: 0.4rem;
+      //     }
+      //   }
+      //   .tag {
+      //     font-size: 0.24rem;
+      //     color: #4a4a4a;
+      //     line-height: 0.28rem;
+      //     display: flex;
+      //     flex-direction: column;
+      //     align-items: center;
+      //     justify-content: center;
+      //     > span {
+      //       &:last-of-type {
+      //         margin-top: 0.1333rem;
+      //       }
+      //     }
+      //   }
+      // }
+      .desc-info {
+        width: 100%;
+        max-height: 40%;
+        overflow: auto;
+        margin: 0.2667rem 0;
+        // padding: 0 0.9333rem;
+        > p {
+          font-size: 0.3333rem;
+          color: #4a4a4a;
+          line-height: 0.6rem;
+        }
+      }
+      .location {
+        // padding: 0 0.9333rem;
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        border-bottom: 2.0025px solid rgba(40, 40, 40, 0.32);
-        height: 26%;
-        padding-top: 0.2667rem;
-        .info {
+        justify-content: space-between;
+        margin-top: 0.5333rem;
+        border-bottom: 0.0267rem dashed #6a4934;
+        border-top: 0.0267rem dashed #6a4934;
+        padding: 0.2667rem 0;
+        .adress {
           display: flex;
-          justify-content: space-between;
-          align-items: flex-start;
-          flex-direction: column;
-          .title {
-            font-size: 0.56rem;
-            color: #4a4a4a;
-            line-height: 0.6533rem;
+          align-items: center;
+          width: 80%;
+          .adress-icon {
+            width: 0.56rem;
+            height: 0.56rem;
+            background: url("@/assets/images/icon_address@2x.png") no-repeat;
+            background-size: 100% 100%;
           }
           .name {
+            width: calc(100% - 0.56rem);
             font-size: 0.3333rem;
-            color: #4a4a4a;
-            line-height: 0.4rem;
-          }
-        }
-        .tag {
-          font-size: 0.24rem;
-          color: #4a4a4a;
-          line-height: 0.28rem;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          > span {
-            &:last-of-type {
-              margin-top: 0.1333rem;
+            color: #6a4934;
+            .pos-text {
+              font-weight: bold;
+              margin-right: 0.2667rem;
             }
           }
         }
-      }
-      .desc-info {
-        width: 100%;
-        max-height: 40%;
-        overflow: auto;
-        margin: 0.2667rem 0;
-        > p {
-          font-size: 0.28rem;
-          color: #4a4a4a;
-          line-height: 0.4933rem;
+
+        .pos-icon {
+          width: 0.56rem;
+          height: 0.56rem;
+          background: url("@/assets/images/icon_navigation@2x.png") no-repeat;
+          background-size: 100% 100%;
         }
       }
       .text-bottom {
@@ -295,20 +388,50 @@ onBeforeUnmount(() => {
         justify-content: center;
         align-items: center;
         margin-top: 0.5333rem;
-        .explain {
-          width: 3.6667rem;
-          height: 0.92rem;
-          background: url("@/assets/images/goVrBtn.png") no-repeat;
-          background-size: 100% 100%;
-        }
-        .close {
-          width: 3.6667rem;
-          height: 0.92rem;
-          background: url("@/assets/images/dialogBack.png") no-repeat;
+
+        > div {
+          width: 2.7067rem;
+          height: 0.8267rem;
+          background: url("@/assets/images/Group 767@2x.png") no-repeat;
           background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+          font-size: 0.3333rem;
+          margin: 1.3333rem 0.22rem 0;
         }
       }
     }
   }
 }
+
+.dialog-header {
+  width: 100%;
+  height: 1.0667rem;
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.2667rem;
+  .back-icon {
+    height: 0.56rem;
+    width: 0.56rem;
+    background: url("@/assets/images/header-back.png") no-repeat;
+    background-size: 100%;
+  }
+  .title {
+    width: 100%;
+    font-weight: 500;
+    font-size: 0.4rem;
+    color: rgba(0, 0, 0, 0.6);
+    line-height: 70px;
+    text-align: center;
+    padding: 0 0.8rem 0 0;
+  }
+}
 </style>

src/views/map/index.vue

@@ -1,16 +1,24 @@
 <template>
+  <Header title="智游岳阳" />
   <div class="map-box">
-    <Header title="智游岳阳" />
-    <div class="tab-bar">
+    <!-- <div class="tab-bar">
       <div class="swiper-container">
         <div class="swiper-wrapper">
           <div @click="chooseItem(i, index)" :class="{ active: tabType == i.type }" class="swiper-slide" v-for="(i, index) in typeData">{{ i.title }}</div>
 
-          <!-- 更多幻灯片 -->
+ 
         </div>
-        <!-- 如果需要分页器 -->
-        <!-- <div class="swiper-pagination"></div> -->
+    
       </div>
+    </div> -->
+    <div ref="compass" class="compass-box">
+      <div class="circle-box" :style="`transform: translateX(-50%)rotate(${rotateNum + tabNum}deg)`">
+        <div class="bg-active" :style="`transform:rotate(${getDeg()}deg);`"></div>
+        <div class="circle-content">
+          <div class="circle-item" :class="{ active: index == 3 }" @click="chooseItem(i, index)" v-for="(i, index) in typeData">{{ i.title }}</div>
+        </div>
+      </div>
+      <div class="line-btn" @click="showLineList = true"></div>
     </div>
     <div id="amap" />
     <div id="panel"></div>
@@ -30,7 +38,7 @@
       <!-- <button @click="test()">拉起</button> -->
     </div>
 
-    <div class="open-line" @click="showLineList = true"></div>
+    <!-- <div class="open-line" @click="showLineList = true"></div> -->
     <div class="open-chat" @click="switchChat()"></div>
 
     <div class="chat-box" :class="{ show: showChat }">
@@ -71,7 +79,14 @@
     <div class="line-layer" @click="showLineList = false" v-if="showLineList">
       <div class="line-box">
         <div class="line-list">
-          <div class="list-item" @click.stop="goLine(i)" v-for="i in 4"></div>
+          <div class="list-item" @click.stop="goLine(i)" v-for="i in 4">
+            <div class="content">
+              <p class="title">江湖风味游</p>
+              <span class="tag">拍照必打卡</span>
+              <p class="desc">预计用时：10小时，共7个景点</p>
+            </div>
+            <div class="ticket"></div>
+          </div>
         </div>
       </div>
     </div>
@@ -94,6 +109,37 @@ import tagIcon from "@/assets/images/tagIcon.png";
 import MarkdownIt from "markdown-it";
 // import { mapStores } from "pinia";
 import router from "@/router";
+import Hammer from "hammerjs";
+const compass = ref(null);
+const getDeg = () => {
+  let deg = 0;
+  switch (tabType.value) {
+    case 1:
+      deg = -90;
+      break;
+    case 2:
+      deg = -60;
+      break;
+    case 3:
+      deg = -30;
+      break;
+    case 4:
+      deg = 0;
+      break;
+    case 5:
+      deg = 30;
+      break;
+    case 6:
+      deg = 60;
+      break;
+  }
+  return deg;
+};
+// var hammertime = new Hammer(myElement, myOptions);
+// hammertime.on('pan', function(ev) {
+// 	console.log(ev);
+// });
+
 const md = new MarkdownIt();
 const scrollRef = ref(null);
 // console.error(mapData);
@@ -271,24 +317,24 @@ const setMarker = () => {
     let iconH = 57;
     let customIcon = null;
     let offset = [new AMap.Pixel(0, 0)];
-    if (data[i].iconSize) {
-      iconW = (data[i].iconSize[0] - 0) * scale;
-      iconH = (data[i].iconSize[1] - 0) * scale;
-      customIcon = new AMap.Icon({
-        // size: new AMap.Size(50, 50),
-        image: `./static/image/景点地标切图/${data[i].name}.png`,
-        imageSize: new AMap.Size(iconW, iconH),
-      });
-      offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
-    } else {
-      offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
-      customIcon = new AMap.Icon({
-        size: new AMap.Size(iconW, iconH),
-        image: tagIcon,
-        imageSize: new AMap.Size(iconW, iconH),
-      });
-      // customIcon = markerContent;
-    }
+    // if (data[i].iconSize) {
+    //   iconW = (data[i].iconSize[0] - 0) * scale;
+    //   iconH = (data[i].iconSize[1] - 0) * scale;
+    //   customIcon = new AMap.Icon({
+    //     // size: new AMap.Size(50, 50),
+    //     image: `./static/image/景点地标切图/${data[i].name}.png`,
+    //     imageSize: new AMap.Size(iconW, iconH),
+    //   });
+    //   offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
+    // } else {
+    offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
+    customIcon = new AMap.Icon({
+      size: new AMap.Size(iconW, iconH),
+      image: tagIcon,
+      imageSize: new AMap.Size(iconW, iconH),
+    });
+    // customIcon = markerContent;
+    // }
 
     let pos = data[i].location.split(",");
     let extData = data[i];
@@ -868,6 +914,10 @@ const searchPos = () => {
     });
   });
 };
+
+const rotateNum = ref(0);
+let tabNum = ref(0);
+const deg = ref(0);
 onMounted(() => {
   initMap();
   // weixinConfig();
@@ -881,24 +931,137 @@ onMounted(() => {
 .map-box {
   width: 100%;
   height: 100%;
-  .open-line {
-    width: 1.72rem;
-    height: 1.64rem;
-    background: url("@/assets/images/ywxlBtn.png") no-repeat;
-    background-size: 100% 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  .compass-box {
+    width: 10rem;
+    height: 10rem;
     position: absolute;
-    bottom: .8rem;
+    bottom: -4rem;
+    left: 0;
+    z-index: 100;
     left: 50%;
+
     transform: translateX(-50%);
+    .line-btn {
+      width: 1.4667rem;
+      height: 1.4667rem;
+      background: url("@/assets/images/ywxlBtn.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .circle-box {
+      display: flex;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      // background: #fff;
+      transform: translateX(-50%);
+      background: url("@/assets/images/circleBg.png") no-repeat;
+      background-size: 100% 100%;
+      .bg-active {
+        width: 100%;
+        height: 100%;
+        // background: #fff;
+        background: url("@/assets/images/circleBg-active.png") no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        // transition: transform .3s linear;
+      }
+      .circle-content {
+        width: 100%;
+        height: 100%;
+        // background: #fff;
+        // background: url("@/assets/images/circleBg-active.png") no-repeat;
+        // background-size: 100% 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        .circle-item {
+          display: inline-block;
+          // width: 2ch; /* 2个字符的宽度 */
+          width: 4ch;
+          text-align: center;
+          font-size: 0.32rem;
+          color: #fff;
+          text-shadow: 0px 2px 5px #000000;
+          // writing-mode: vertical-lr;
+          // transform-origin: bottom center;
+          // width: auto;
+          // height: 50%;
+          // position: absolute;
+          // top: 0;
+          // left: 50%;
+          // transform: translateX(-50%);
+          font-weight: bold;
+          padding: 0.2667rem 0;
+          &.active {
+            color: #93561d;
+            text-shadow: none;
+          }
+          &:nth-of-type(1) {
+            position: absolute;
+            top: 37%;
+            left: 23%;
+            transform: rotate(-77deg);
+          }
+          &:nth-of-type(2) {
+            position: absolute;
+            top: 26%;
+            left: 29%;
+            transform: rotate(-46deg);
+            // transform: rotate(-60deg) translateX(-50%);
+          }
+          &:nth-of-type(3) {
+            // transform: rotate(-30deg) translateX(-50%);
+            position: absolute;
+            top: 20%;
+            left: 40%;
+            transform: rotate(-19deg);
+          }
+          &:nth-of-type(4) {
+            // transform: rotate(0deg) translateX(-50%);
+            position: absolute;
+            top: 20%;
+            left: 53%;
+
+            transform: rotate(15deg);
+          }
+          &:nth-of-type(5) {
+            // transform: rotate(30deg) translateX(-50%);
+            position: absolute;
+            top: 26%;
+            left: 63%;
+            transform: rotate(45deg);
+          }
+          &:nth-of-type(6) {
+            // transform: rotate(60deg) translateX(-50%);
+            position: absolute;
+            top: 37%;
+            left: 69%;
+            transform: rotate(72deg);
+          }
+        }
+      }
+    }
   }
+
   .open-chat {
     width: 1.3333rem;
     height: 1.3333rem;
     background: url("@/assets/images/deepseekBtn.png") no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    bottom: .9867rem;
-    right: .4267rem;
+    bottom: 0.9867rem;
+    right: 0.4267rem;
   }
   .tab-bar {
     width: 100%;
@@ -914,7 +1077,7 @@ onMounted(() => {
     align-items: center;
     .swiper-container {
       width: 100%;
-      padding: 0 .4rem;
+      padding: 0 0.4rem;
       display: flex;
       align-items: center;
       .swiper-wrapper {
@@ -931,12 +1094,12 @@ onMounted(() => {
           display: flex;
           align-items: center;
           justify-content: center;
-          border-radius: .16rem;
-          padding: 0 .2133rem;
+          border-radius: 0.16rem;
+          padding: 0 0.2133rem;
           background: url("@/assets/images/tabNormal.png") no-repeat;
           background-size: 100% 100%;
-          height: .8267rem;
-          font-size: .3467rem;
+          height: 0.8267rem;
+          font-size: 0.3467rem;
           &.active {
             // background: #50c4b2;
             // color: #fff;
@@ -948,7 +1111,7 @@ onMounted(() => {
             background-size: 100% 100%;
             display: flex;
             align-items: flex-end;
-            padding-bottom: .2rem;
+            padding-bottom: 0.2rem;
           }
         }
       }
@@ -980,11 +1143,11 @@ onMounted(() => {
       }
     }
     .icon {
-      width: .6133rem;
-      height: .5867rem;
+      width: 0.6133rem;
+      height: 0.5867rem;
       background: url("@/assets/images/slideIcon.png") no-repeat;
       background-size: 100% 100%;
-      margin-left: .6rem;
+      margin-left: 0.6rem;
       position: absolute;
       right: 1.4533rem;
       top: 1.2rem;
@@ -995,7 +1158,7 @@ onMounted(() => {
       // background: url("@/assets/images/chatTab.png") no-repeat;
       // background-size: 100% 100%;
       position: relative;
-      margin-bottom: .4rem;
+      margin-bottom: 0.4rem;
 
       > div {
         width: 100%;
@@ -1003,7 +1166,7 @@ onMounted(() => {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding-right: .8rem;
+        padding-right: 0.8rem;
         > div {
           display: flex;
           align-items: center;
@@ -1014,25 +1177,25 @@ onMounted(() => {
             background: url("@/assets/images/deepseek.png") no-repeat;
             background-size: 100% 100%;
             margin-top: -4%;
-            margin-left: .8rem;
+            margin-left: 0.8rem;
             // position: absolute;
             // left: .8rem;
             // top: -52%;
           }
           .text {
             // margin-top: -1.5%;
-            font-size: .2667rem;
+            font-size: 0.2667rem;
             color: rgba(0, 0, 0, 0.6);
-            line-height: .9333rem;
+            line-height: 0.9333rem;
           }
         }
 
         .icon {
-          width: .56rem;
-          height: .56rem;
+          width: 0.56rem;
+          height: 0.56rem;
           background: url("@/assets/images/slideIcon.png") no-repeat;
           background-size: 100% 100%;
-          margin-left: .6rem;
+          margin-left: 0.6rem;
         }
       }
     }
@@ -1041,15 +1204,15 @@ onMounted(() => {
       height: 9.76rem;
       // background: url("@/assets/images/chatBg.png") no-repeat;
       // background-size: 100% 100%;
-      margin-bottom: .5333rem;
-      padding: .6667rem .8rem 1.3333rem 1.2rem;
+      margin-bottom: 0.5333rem;
+      padding: 0.6667rem 0.8rem 1.3333rem 1.2rem;
       position: relative;
 
       .ipt-box {
         width: 100%;
-        height: .7067rem;
+        height: 0.7067rem;
         position: absolute;
-        bottom: .5333rem;
+        bottom: 0.5333rem;
         left: 50%;
         transform: translateX(-50%);
         display: flex;
@@ -1059,34 +1222,34 @@ onMounted(() => {
           width: 6.2933rem;
           height: 100%;
           background: #fff;
-          border-radius: .16rem;
+          border-radius: 0.16rem;
           overflow: hidden;
-          border: .9975px solid #adadad;
+          border: 0.9975px solid #adadad;
           input {
             border: none;
             outline: none;
             width: 100%;
             height: 100%;
-            font-size: .2667rem;
-            padding: 0 .5333rem;
-            line-height: .7067rem;
+            font-size: 0.2667rem;
+            padding: 0 0.5333rem;
+            line-height: 0.7067rem;
           }
         }
         .send-btn {
-          width: .7067rem;
-          height: .7067rem;
+          width: 0.7067rem;
+          height: 0.7067rem;
           background: url("@/assets/images/sendBtn.png") no-repeat;
           background-size: 100% 100%;
-          margin-left: .16rem;
+          margin-left: 0.16rem;
         }
       }
       .chat-msg {
         width: 100%;
         height: 100%;
         font-weight: 400;
-        font-size: .3333rem;
-        line-height: .4667rem;
-        padding-right: .2667rem;
+        font-size: 0.3333rem;
+        line-height: 0.4667rem;
+        padding-right: 0.2667rem;
         overflow-y: auto;
         .default-question {
           // display: flex;
@@ -1096,13 +1259,13 @@ onMounted(() => {
           .quest-item {
             display: inline;
             background: #d9d9d9;
-            border: .9975px solid #dddddd;
-            padding: .1333rem;
+            border: 0.9975px solid #dddddd;
+            padding: 0.1333rem;
             color: rgba(0, 0, 0, 0.7);
-            border-radius: .16rem;
-            font-size: .2667rem;
-            margin: 0 .1333rem .1333rem 0;
-            line-height: .8rem;
+            border-radius: 0.16rem;
+            font-size: 0.2667rem;
+            margin: 0 0.1333rem 0.1333rem 0;
+            line-height: 0.8rem;
           }
         }
         > div {
@@ -1116,22 +1279,22 @@ onMounted(() => {
             display: inline-block;
             float: right;
             background: #4d6bfe;
-            padding: .1333rem .5333rem;
-            border-radius: .24rem;
-            margin-top: .4rem;
+            padding: 0.1333rem 0.5333rem;
+            border-radius: 0.24rem;
+            margin-top: 0.4rem;
           }
         }
         .reply {
-          border-radius: .24rem;
+          border-radius: 0.24rem;
           color: #000;
           > div {
             max-width: 5.4667rem;
             display: inline-block;
             float: left;
             background: #fff;
-            padding: .1333rem .5333rem;
-            border-radius: .24rem;
-            margin-top: .4rem;
+            padding: 0.1333rem 0.5333rem;
+            border-radius: 0.24rem;
+            margin-top: 0.4rem;
           }
         }
       }
@@ -1160,13 +1323,58 @@ onMounted(() => {
       position: absolute;
       bottom: 0;
       left: 0;
-      padding: .1333rem .6667rem;
+      padding: 0.1333rem 0.6667rem;
       overflow-y: auto;
       .list-item {
         width: 100%;
         height: 2.64rem;
-        background: yellow;
-        margin-bottom: .24rem;
+        margin-bottom: 0.24rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 0.56rem 0 0.5333rem;
+        &:nth-of-type(1) {
+          background: url("@/assets/images/line1.png") no-repeat;
+          background-size: 100% 100%;
+        }
+        &:nth-of-type(2) {
+          background: url("@/assets/images/line2.png") no-repeat;
+          background-size: 100% 100%;
+        }
+        &:nth-of-type(3) {
+          background: url("@/assets/images/line3.png") no-repeat;
+          background-size: 100% 100%;
+        }
+        &:nth-of-type(4) {
+          background: url("@/assets/images/line4.png") no-repeat;
+          background-size: 100% 100%;
+        }
+        .content {
+          .title {
+            font-size: 0.4267rem;
+            font-weight: bold;
+            margin-bottom: 0.16rem;
+          }
+          .tag {
+            background: #ffbf4a;
+            color: #fff;
+            padding: 0.0533rem 0.1333rem;
+            font-size: 0.24rem;
+            border-radius: 0.4667rem;
+            display: inline-block;
+            margin-bottom: 0.16rem;
+          }
+          .desc {
+            font-size: 0.2667rem;
+            color: #6a4934;
+          }
+        }
+        .ticket {
+          width: 1.5467rem;
+          height: 1.3467rem;
+          background: url("@/assets/images/lineTj.png") no-repeat;
+          background-size: 100% 100%;
+        }
       }
     }
   }
@@ -1175,16 +1383,19 @@ onMounted(() => {
 <style lang="scss">
 .map-box {
   .amap-marker-label {
-    height: .5333rem;
-    line-height: .5333rem;
-    font-size: .2667rem;
-    border: .0625rem solid #fff;
-    background: #e49246;
+    height: 0.5333rem;
+    line-height: 0.5333rem;
+    font-size: 0.2667rem;
+    // border: 0.0625rem solid #fff;
+    // background: #e49246;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 0.0533rem;
+    border: none;
     color: #fff;
-    padding: 0 .2667rem;
-    border-radius: 1.375rem;
+    padding: 0.0667rem 0.1333rem;
     display: flex;
     align-items: center;
+    justify-content: center;
   }
 }
 .amap-icon {

yarn.lock

@@ -923,11 +923,6 @@ cfb@~1.2.1:
     adler-32 "~1.3.0"
     crc-32 "~1.2.0"
 
-"charenc@>= 0.0.1":
-  version "0.0.2"
-  resolved "https://registry.npmmirror.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
-  integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
-
 chokidar@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.3.tgz#7be37a4c03c9aee1ecfe862a4a23b2c70c205d30"
@@ -973,11 +968,6 @@ cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-"crypt@>= 0.0.1":
-  version "0.0.2"
-  resolved "https://registry.npmmirror.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
-  integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
-
 crypto-js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
@@ -1275,6 +1265,11 @@ graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   resolved "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
+hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.npmmirror.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+  integrity sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==
+
 has-symbols@^1.0.3, has-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
@@ -1720,14 +1715,6 @@ semver@^6.3.1:
   resolved "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-sha1@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmmirror.com/sha1/-/sha1-1.1.1.tgz#addaa7a93168f393f19eb2b15091618e2700f848"
-  integrity sha512-dZBS6OrMjtgVkopB1Gmo4RQCDKiZsqcpAQpkV/aaj+FCrCg8r4I4qMkDPQjBgLIxlmu9k4nUbWq6ohXahOneYA==
-  dependencies:
-    charenc ">= 0.0.1"
-    crypt ">= 0.0.1"
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"