feat

package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "animate.css": "^4.1.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/components/header/index.vue

@@ -10,7 +10,13 @@ vue3
 <script setup>
 import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, watch, defineEmits, defineProps } from "vue";
 import router from "@/router";
+
+const emits = defineEmits(["close"]);
 const back = () => {
+  if (props.isClose) {
+    emits("close");
+    return;
+  }
   if (props.path) {
     router.replace(`/${props.path}`);
     return;
@@ -26,6 +32,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  isClose: {
+    type: Boolean,
+    default: false,
+  },
   // isBack: {
   //   type: Boolean,
   //   default: false,

src/main.js

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

src/router/index.js

@@ -39,6 +39,7 @@ const router = createRouter({
       name: "unity",
       component: () => import("../views/unity/index.vue"),
     },
+
     {
       path: "/data",
       name: "data",

src/views/food/data.js

@@ -0,0 +1,7 @@
+export const foodList = [
+  { url: "https://www.720yun.com/3dm/603ze82Of6s", name: "辣姜凤爪" },
+  { url: "https://www.720yun.com/3dm/603ze82Of6s", name: "辣姜凤爪1" },
+  { url: "https://www.720yun.com/3dm/603ze82Of6s", name: "辣姜凤爪2" },
+  { url: "https://www.720yun.com/3dm/603ze82Of6s", name: "辣姜凤爪3" },
+  { url: "https://www.720yun.com/3dm/603ze82Of6s", name: "辣姜凤爪4" },
+];

src/views/food/index.vue

@@ -1,11 +1,15 @@
 <!--  -->
 <template>
   <div class="food">
-    <Header title="数字美食" />
-    <div class="food-title">食物名称</div>
+    <Header title="数字美食" path="map" />
+    <div class="food-title">{{ foodList[swipeIndex].name }}</div>
     <div class="food-container">
       <div class="swiper-wrapper">
-        <div class="swiper-slide" v-for="i in 10"><img src="https://img1.baidu.com/it/u=2406584972,1640672778&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" /></div>
+        <div class="swiper-slide" @click="goToViwe(i)" v-for="i in foodList">
+          <div class="slide-bg"></div>
+
+          <img src="https://img1.baidu.com/it/u=2406584972,1640672778&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" />
+        </div>
 
         <!-- 更多幻灯片 -->
       </div>
@@ -13,9 +17,10 @@
       <!-- <div class="swiper-pagination"></div> -->
     </div>
 
-    <div class="model-btn"></div>
+    <!-- <div class="model-btn"></div> -->
     <div class="miniprogram-btn">气味王国</div>
   </div>
+  <WebView v-if="showWebView" :link="openData.url" :title="openData.name" @close="closeWebView" />
 </template>
 
 <script setup>
@@ -23,31 +28,46 @@ import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
 import Swiper from "swiper";
 import Header from "@/components/header/index.vue";
 import "swiper/css/swiper.css";
+import { foodList } from "./data.js";
+import WebView from "../webview/index.vue";
+console.error(foodList);
+const swipeIndex = ref(0);
+let swiper = null;
+const showWebView = ref(false);
+const closeWebView = () => {
+  showWebView.value = false;
+};
+const openData = ref({});
 const initTab = () => {
-  new Swiper(".food-container", {
+  swiper = new Swiper(".food-container", {
     direction: "horizontal",
     slidesPerView: "auto",
     centeredSlides: true,
     spaceBetween: 0,
     // Swiper选项...
-    loop: true,
-    // slidesPerView: 3,
-    // spaceBetween: 15,
-    // freeMode: true,
-
-    // pagination: {
-    //   el: ".swiper-pagination",
-    //   clickable: true,
-    // },
+    loop: false,
+    on: {
+      slideChange: (e) => {
+        console.error(swiper);
+        swipeIndex.value = swiper.activeIndex;
+      },
+    },
   });
 };
+const goToViwe = (item) => {
+  openData.value = {
+    url: item.url,
+    name: item.name,
+  };
+  showWebView.value = true;
+};
 onMounted(() => {
   initTab();
 });
 </script>
 <style lang="scss" scoped>
 .food {
-   width: 100%;
+  width: 100%;
   height: 100%;
 
   position: relative;
@@ -55,15 +75,21 @@ onMounted(() => {
   background: url("@/assets/images/foodBg.png") no-repeat;
   background-size: cover;
   .food-title {
+    font-weight: bold;
     font-size: 0.4267rem;
-    color: rgba(0, 0, 0, 0.8);
+    color: #785c49;
     line-height: 0.4933rem;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
-    top: 17%;
-    width: 100%;
+    top: 12%;
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 5.5333rem;
+    height: 0.8533rem;
+    background: url("@/assets/images/foodTitleBg.png") no-repeat;
+    background-size: 100% 100%;
   }
   .model-btn {
     width: 0.9333rem;
@@ -73,17 +99,16 @@ onMounted(() => {
     margin: 1.3333rem auto;
   }
   .miniprogram-btn {
-    font-weight: normal;
-    font-size: 32px;
-    color: #883f45;
-    line-height: 37px;
-    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-    width: 4.1733rem;
-    height: 0.8533rem;
-    background: url("@/assets/images/rangeTab.png") no-repeat;
+    font-weight: bold;
+    font-size: 0.4667rem;
+    color: #ffffff;
+    line-height: 0.3733rem;
+    width: 4.2666rem;
+    height: 1.0933rem;
+    background: url("@/assets/images/fristBtn.png") no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    bottom: 2.7333rem;
+    bottom: 10%;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
@@ -91,26 +116,49 @@ onMounted(() => {
     justify-content: center;
   }
   .food-container {
-    margin-top: 28vh;
+    // margin-top: 28vh;
+    height: 38%;
+    width: 100%;
+    position: absolute;
+    top: 22%;
+    left: 0;
     .swiper-slide {
-      background: red;
+      // background: red;
       width: 60%;
-      height: 300px;
+      height: 100%;
       transition: all 0.3s ease-in-out;
+
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .slide-bg {
+        position: absolute;
+        width: 110%;
+        height: 110%;
+        background: url("@/assets/images/foodSliderBg.png") no-repeat;
+        background-size: 100% 100%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1;
+      }
       img {
-        width: 100%;
-        height: 100%;
+        width: 80%;
+        height: 36%;
         object-fit: cover;
+        z-index: 2;
+        position: relative;
       }
     }
     .swiper-slide-prev {
       // transform: scale(0.8) translateY(-120px);
-      transform: scale(0.8);
+      transform: scale(0.64);
     }
     .swiper-slide-active {
     }
     .swiper-slide-next {
-      transform: scale(0.8) ;
+      transform: scale(0.64);
     }
   }
 }

src/views/home/index.vue

@@ -39,7 +39,7 @@ const goItem = (type) => {
       router.replace("/unity");
       break;
     case 3:
-      router.replace("/season");
+      // router.replace("/season");
       break;
     case 4:
       router.replace("/answer");

src/views/map/dialog.vue

@@ -27,31 +27,26 @@
         <div class="audio-icon" :class="{ active: isPlay }" v-if="dialogData.audio" @click="plauMusic"></div>
       </div>
       <div class="text-box">
-        <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 class="text-scroll">
+          <div class="desc-info">
+            <p>
+              {{ dialogData.desc }}
+            </p>
           </div>
-        </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="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 class="pos-icon" @click="goLocation"></div>
+          </div>
         </div>
+
         <div class="text-bottom">
           <div class="" v-if="dialogData.vrLink" @click="goVr">查看全景</div>
-          <div class="">三维景点</div>
+          <div class="" v-if="dialogData.modelLink">三维景点</div>
         </div>
       </div>
     </div>
@@ -79,12 +74,13 @@ const close = () => {
 };
 
 const goLocation = () => {
-  let lat = props.dialogData.location[0];
-  let lon = props.dialogData.location[1];
+  let lat = props.dialogData.location.split(",")[0] - 0;
+  let lon = props.dialogData.location.split(",")[1] - 0;
   let ad = `湖南省岳阳市${props.dialogData.address}${props.dialogData.name}`;
+  console.error(lat, lon, ad);
   wx.openLocation({
-    latitude: lat, // 纬度，浮点数，范围为90 ~ -90
-    longitude: lon, // 经度，浮点数，范围为180 ~ -180。
+    latitude: lon, // 纬度，浮点数，范围为90 ~ -90
+    longitude: lat, // 经度，浮点数，范围为180 ~ -180。
     name: props.dialogData.name, // 位置名
     address: ad, // 地址详情说明
     scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
@@ -195,8 +191,9 @@ onBeforeUnmount(() => {
     .dialog-title {
       font-size: 0.56rem;
       font-weight: bold;
-      margin: 0.7067rem auto 0.4rem;
+      margin: 0.6667rem auto 0.4rem;
       text-align: center;
+      height: 0.8rem;
     }
     .close-btn {
       width: 1.0667rem;
@@ -211,7 +208,7 @@ onBeforeUnmount(() => {
     }
     .img-box {
       width: 100%;
-      height: 5.48rem;
+      height: 5.4667rem;
       background: #f2f2f2;
       position: relative;
       // overflow-x: hidden;
@@ -295,109 +292,76 @@ 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;
-      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 {
+      height: calc(100% - 7.3333rem);
+
+      // margin-top: 0.8rem;
+      padding: 0.8rem 0.9333rem;
+
+      .text-scroll {
         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;
+        height: calc(100% - 2.9333rem);
+        // overflow-y: auto;
+        .desc-info {
+          width: 100%;
+          max-height: calc(100% - 1.8667rem);
+          overflow: auto;
+          margin: 0.2667rem 0;
+          padding-bottom: 0.5333rem;
+          // padding: 0 0.9333rem;
+          > p {
+            font-size: 0.3333rem;
+            color: #4a4a4a;
+            line-height: 0.6rem;
+          }
         }
-      }
-      .location {
-        // padding: 0 0.9333rem;
-        display: flex;
-        align-items: center;
-        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 {
+        .location {
+          // padding: 0 0.9333rem;
           display: flex;
+          height: 1.3333rem;
           align-items: center;
-          width: 80%;
-          .adress-icon {
+          justify-content: space-between;
+
+          border-bottom: 0.0267rem dashed #6a4934;
+          border-top: 0.0267rem dashed #6a4934;
+          // padding: 0.2667rem 0;
+          display: flex;
+          align-items: center;
+          .adress {
+            display: flex;
+            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: #6a4934;
+              .pos-text {
+                font-weight: bold;
+                margin-right: 0.2667rem;
+              }
+            }
+          }
+
+          .pos-icon {
             width: 0.56rem;
             height: 0.56rem;
-            background: url("@/assets/images/icon_address@2x.png") no-repeat;
+            background: url("@/assets/images/icon_navigation@2x.png") no-repeat;
             background-size: 100% 100%;
           }
-          .name {
-            width: calc(100% - 0.56rem);
-            font-size: 0.3333rem;
-            color: #6a4934;
-            .pos-text {
-              font-weight: bold;
-              margin-right: 0.2667rem;
-            }
-          }
-        }
-
-        .pos-icon {
-          width: 0.56rem;
-          height: 0.56rem;
-          background: url("@/assets/images/icon_navigation@2x.png") no-repeat;
-          background-size: 100% 100%;
         }
       }
+
       .text-bottom {
         display: flex;
         // flex-direction: column;
         justify-content: center;
         align-items: center;
-        margin-top: 0.5333rem;
+        margin-top: 39.9975px;
 
         > div {
           width: 2.7067rem;
@@ -409,7 +373,7 @@ onBeforeUnmount(() => {
           justify-content: center;
           color: #fff;
           font-size: 0.3333rem;
-          margin: 1.3333rem 0.22rem 0;
+          // margin: 1.3333rem 0.22rem 0;
         }
       }
     }

src/views/map/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <Header title="智游岳阳" />
   <div class="map-box">
+    <Header title="智游岳阳" />
+
     <!-- <div class="tab-bar">
       <div class="swiper-container">
         <div class="swiper-wrapper">
@@ -18,30 +19,30 @@
           <div class="circle-item" :class="{ active: tabType == i.type }" @click="chooseItem(i, index)" v-for="(i, index) in typeData">{{ i.title }}</div>
         </div>
       </div>
-      <div class="line-btn" @click="showLineList = true"></div>
+      <div class="line-btn" @click="openLineList()"></div>
     </div>
     <div id="amap" />
     <div id="panel"></div>
-    <div style="position: absolute; top: 0; left: 0; z-index: 1000">
-      <!-- <wx-open-launch-weapp appid="wx0bc995dace29b2ba" path="pages/banner/index"> -->
-      <!-- <wx-open-launch-weapp appid="wx4cbb8e9d0a6fface">
+    <!-- <div style="position: absolute; top: 100px; left: 0; z-index: 100000"> -->
+    <!-- <wx-open-launch-weapp appid="wx0bc995dace29b2ba" path="pages/banner/index"> -->
+    <!-- <wx-open-launch-weapp appid="wx4cbb8e9d0a6fface">
         <component :is="'script'" type="text/wxtag-template">
           <button class="btn">打开小程序</button>
         </component>
-      </wx-open-launch-weapp>
-      <button @click="goLocation()">导航1</button>
-      <button @click="goLocation(2)">导航2</button>
+      </wx-open-launch-weapp> -->
+    <!-- <button @click="goLocation()">导航1</button> -->
+    <!-- <button @click="goLocation(2)">导航2</button>
       <button @click="goLocation(3)">导航3</button>
       <button @click="openApp">打开小程序</button>
-      <button @click="switchView(1)">切换视图1</button> 
-      <button @click="switchView(2)">切换视图2</button>-->
-      <!-- <button @click="test()">拉起</button> -->
-    </div>
+      <button @click="switchView(1)">切换视图1</button>
+      <button @click="switchView(2)">切换视图2</button> -->
+    <!-- <button @click="test()">拉起</button> -->
+    <!-- </div> -->
 
     <!-- <div class="open-line" @click="showLineList = true"></div> -->
     <div class="open-chat" @click="switchChat()"></div>
     <div class="slide-tab">
-      <div class="btn"></div>
+      <div class="btn" @click="slideToView('/food')"></div>
       <div class="btn"></div>
     </div>
     <div class="chat-box" :class="{ show: showChat }">
@@ -80,19 +81,21 @@
       </div>
     </div>
 
-    <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 class="content">
-              <p class="title">江湖风味游</p>
-              <span class="tag">拍照必打卡</span>
-              <p class="desc">预计用时：10小时，共7个景点</p>
+    <div class="line-layer" @click="closeLineList()" v-show="showLineList">
+      <transition appear name="fade" enter-active-class="animate__animated animate__slideInUp short faster" leave-active-class="animate__animated animate__slideOutDown short faster">
+        <div class="line-box" v-show="showLineBox">
+          <div class="line-list">
+            <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 class="ticket"></div>
           </div>
         </div>
-      </div>
+      </transition>
     </div>
   </div>
 
@@ -113,8 +116,9 @@ 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 showLineList = ref(false);
+const showLineBox = ref(false);
 const getDeg = () => {
   let deg = 0;
   switch (tabType.value) {
@@ -139,15 +143,23 @@ const getDeg = () => {
   }
   return deg;
 };
-// var hammertime = new Hammer(myElement, myOptions);
-// hammertime.on('pan', function(ev) {
-// 	console.log(ev);
-// });
-
+const slideToView = (path) => {
+  router.replace(path);
+};
+const openLineList = () => {
+  showLineList.value = true;
+  showLineBox.value = true;
+};
+const closeLineList = () => {
+  showLineBox.value = false;
+  setTimeout(() => {
+    showLineList.value = false;
+  }, 100);
+};
 const md = new MarkdownIt();
 const scrollRef = ref(null);
 // console.error(mapData);
-const showLineList = ref(false);
+
 const goLine = (id) => {
   router.replace(`/line/${id}`);
 };
@@ -275,7 +287,7 @@ const chooseItem = (i, index) => {
   // marker.clearEvents("mousedown");
   // marker.off("mousedown", hanlderMakerEvent);
   tabType.value = i.type;
-  switchView();
+  switchView(false);
   if (markers.length) {
     markers.forEach((item) => {
       map.remove(item);
@@ -311,6 +323,7 @@ const hanlderMakerEvent = (e) => {
 let markers = [];
 const setMarker = () => {
   let data = mapData.filter((item) => item.type == tabType.value);
+  // switchView(true);
   let scale = 0.2;
   const markerContent = `<div class="custom-content-marker">
     <div class="title">sdasdas</div>
@@ -751,91 +764,32 @@ const weixinConfig = () => {
       });
     }
   );
-  // wx.config({
-  //   debug: false,
-  //   // appId: data.appId,
-  //   // timestamp: data.timestamp,
-  //   // nonceStr: data.nonceStr,
-  //   // signature: data.signature,
-  //   appId: "wx6b34086b4f650eb4",
-  //   timestamp: "1744773687",
-  //   nonceStr: "Wm3WZYTPz0wzacny",
-  //   signature: "02342e6621d4a253f8d2a72d5e38cfd15e722859",
-  //   jsApiList: ["openLocation", "uploadImage", "openLaunchWeapp"],
-  //   openTagList: ["wx-open-launch-weapp"],
-  // });
 
   wx.ready(() => {
     console.log("config初始化正确");
   });
 };
-const openApp = () => {
-  // var appid = "wx4cbb8e9d0a6fface"; // 小程序的 AppID
-  var appid = "wx0bc995dace29b2ba"; // 小程序的 AppID
-
-  var path = "/pages/banner/index"; // 小程序中需要打开的页面路径
-
-  var url = "weixin://dl/business/?appid=" + appid + "&path=" + path;
-
-  window.location.href = url;
-  // wx.ready(() => {
-  //   console.error("ready");
-  //   wx.navigateToMiniProgram({
-  //     appId: appid,
-  //     path: path,
-  //     success: function (res) {
-  //       // 打开成功
-  //     },
-  //   });
-  // });
-
-  // wx.miniProgram.navigateTo({ url: path });
-};
-const switchView = () => {
+//*
+// *effect 是否false 需要过渡
+// /
+const switchView = (effect = true) => {
   let data = mapData.filter((item) => item.type == tabType.value);
-  let center = [113.236426, 29.138033];
-  // if (data.length) {
-  //   center = [data[0].location.split(",")[0], data[0].location.split(",")[1]];
-  // }
-  map.setZoomAndCenter(10, center, false, 300);
-};
 
-// 绘制当前区域 name: 南京市
-const drawBounds = (name) => {
-  // const district = new AMap.DistrictSearch({
-  //   subdistrict: 0, //获取边界不需要返回下级行政区
-  //   extensions: "all", //返回行政区边界坐标组等具体信息
-  //   level: "district", //查询行政级别为县区
-  // });
-  // district.search(name, (state, res) => {
-  //   this.mapInstance.remove(this.polygons);
-  //   this.polygons = [];
-  //   res.districtList[0].boundaries.forEach((q) => {
-  //     const polygon = new AMap.Polygon({
-  //       strokeWeight: 1,
-  //       path: q,
-  //       fillOpacity: 0.4,
-  //       fillColor: "#143048",
-  //       strokeColor: "#0A1A29",
-  //     });
-  //     this.polygons.push(polygon);
-  //   });
-  //   this.mapInstance.add(this.polygons);
-  //   this.mapInstance.setFitView(this.polygons); // 自适应缩放比
-  // });
-  // const district = new AMap.DistrictSearch({subdistrict:0,extensions:'all',level:'province'});
-  // AMap.plugin("AMap.DistrictSearch", function () {
-  // var districtSearch = new AMap.DistrictSearch({
-  //   level: "province",
-  //   subdistrict: 0,
-  //   extensions: "all", //返回行政区边界坐标组等具体信息
-  // });
-  // // 搜索所有省/直辖市信息
-  // districtSearch.search(name, (status, result) => {
-  //   // 查询成功时，result即为对应的行政区信息
-  //   console.error(name, result);
-  // });
-  // });
+  let center = null;
+  let scale = 11;
+  if (data.length) {
+    center = data[0].location.split(",");
+    switch (tabType.value) {
+      case 1:
+        center = [113.236426, 29.138033];
+        scale = 10;
+        break;
+      case 4:
+        scale = 13;
+        break;
+    }
+  }
+  map.setZoomAndCenter(scale, center, effect, 300);
 };
 
 const autoScroll = () => {
@@ -922,15 +876,13 @@ let tabNum = ref(0);
 const questW = ref(10000);
 onMounted(() => {
   initMap();
-  // weixinConfig();
   nextTick(() => {
     initTab();
-
     setTimeout(() => {
       let questItems = document.querySelectorAll(".quest-item");
       let w = 0;
       questItems.forEach((item, index) => {
-        console.error(item.getBoundingClientRect().width);
+        // console.error(item.getBoundingClientRect().width);
         w += item.getBoundingClientRect().width + 10;
       });
       questW.value = w;
@@ -954,7 +906,7 @@ onMounted(() => {
     left: 0;
     z-index: 100;
     left: 50%;
-
+    pointer-events: none;
     transform: translateX(-50%);
     .line-btn {
       width: 1.4667rem;
@@ -965,6 +917,7 @@ onMounted(() => {
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
+      pointer-events: auto;
     }
     .circle-box {
       display: flex;
@@ -973,6 +926,7 @@ onMounted(() => {
       left: 50%;
       width: 100%;
       height: 100%;
+      pointer-events: none;
       // background: #fff;
       transform: translateX(-50%);
       background: url("@/assets/images/circleBg.png") no-repeat;
@@ -1005,6 +959,7 @@ onMounted(() => {
           font-size: 0.32rem;
           color: #fff;
           text-shadow: 0px 2px 5px #000000;
+          pointer-events: auto;
           // writing-mode: vertical-lr;
           // transform-origin: bottom center;
           // width: auto;
@@ -1480,4 +1435,8 @@ onMounted(() => {
     }
   }
 }
+
+:root {
+  --animate-duration: 300ms;
+}
 </style>

src/views/webview/index.vue

@@ -0,0 +1,48 @@
+<!--  -->
+<template>
+  <div class="webview">
+    <Header @close="close" :isClose="true" :title="title" />
+
+    <iframe :src="link" frameborder="0"></iframe>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted, defineEmits, defineProps } from "vue";
+import Header from "@/components/header/index.vue";
+
+const emits = defineEmits(["close"]);
+const props = defineProps({
+  link: {
+    type: String,
+    default: "https://www.720yun.com/3dm/603ze82Of6s",
+  },
+  title: {
+    type: String,
+    default: "https://www.720yun.com/3dm/603ze82Of6s",
+  },
+  path: {
+    type: String,
+    default: "/",
+  },
+});
+const close = () => {
+  emits("close");
+};
+</script>
+<style lang="scss" scoped>
+.webview {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-top: 1.0667rem;
+  z-index: 10000;
+  background-color: #232323;
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

yarn.lock

@@ -842,6 +842,11 @@ agentkeepalive@^4.2.1:
   dependencies:
     humanize-ms "^1.2.1"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -1265,11 +1270,6 @@ 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"