究极香蕉船

postcss.config.js

@@ -1,22 +1,22 @@
 export default {
   plugins: {
     autoprefixer: {},
-    "postcss-px-to-viewport": {
-      unitToConvert: "px", // 需要转换的单位，默认为"px"
-      viewportWidth: 750, // 设计稿的视口宽度
-      unitPrecision: 5, // 单位转换后保留的精度
-      propList: ["*"], // 能转化为vw的属性列表
-      viewportUnit: "vw", // 希望使用的视口单位
-      fontViewportUnit: "vw", // 字体使用的视口单位
-      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
-      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
-      mediaQuery: true, // 媒体查询里的单位是否需要转换单位
-      replace: true, //  是否直接更换属性值，而不添加备用属性
-      exclude: /node_modules/i, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
-      include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
-      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
-      landscapeUnit: "vw", // 横屏时使用的单位
-      landscapeWidth: 750, // 横屏时使用的视口宽度
-    },
+    // "postcss-px-to-viewport": {
+    //   unitToConvert: "px", // 需要转换的单位，默认为"px"
+    //   viewportWidth: 750, // 设计稿的视口宽度
+    //   unitPrecision: 5, // 单位转换后保留的精度
+    //   propList: ["*"], // 能转化为vw的属性列表
+    //   viewportUnit: "vw", // 希望使用的视口单位
+    //   fontViewportUnit: "vw", // 字体使用的视口单位
+    //   selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+    //   minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+    //   mediaQuery: true, // 媒体查询里的单位是否需要转换单位
+    //   replace: true, //  是否直接更换属性值，而不添加备用属性
+    //   exclude: /node_modules/i, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+    //   include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
+    //   landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+    //   landscapeUnit: "vw", // 横屏时使用的单位
+    //   landscapeWidth: 750, // 横屏时使用的视口宽度
+    // },
   },
 };

src/assets/main.css

@@ -38,6 +38,12 @@ body {
   font-family: "SourceHanSerifSC-Regular";
   -webkit-tap-highlight-color: transparent;
 }
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+}
 a {
   color: #fff;
   cursor: pointer;
@@ -117,7 +123,7 @@ iframe {
 
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+  box-shadow: inset 0 0 5px rgba(106, 73, 52, 1);
   background: #ccc;
 }
 
@@ -126,13 +132,21 @@ iframe {
 }
 
 ::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 5px transparent;
   border-radius: 4px;
   /* background: #000000; */
 }
 input {
   background: none;
 }
-.amap-logo,.amap-copyright {
+.amap-logo,
+.amap-copyright {
   display: none !important;
 }
+.amap-info-close {
+  display: none;
+}
+.amap-info-content {
+  padding: 0;
+  border-radius: 0.16rem;
+}

src/components/header/index.vue

@@ -11,13 +11,25 @@ vue3
 import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, watch, defineEmits, defineProps } from "vue";
 import router from "@/router";
 const back = () => {
-   router.replace('/');
+  if (props.path) {
+    router.replace(`/${props.path}`);
+    return;
+  }
+  router.replace("/");
 };
 const props = defineProps({
   title: {
     type: String,
-    default: "12321",
+    default: "",
+  },
+  path: {
+    type: String,
+    default: "",
   },
+  // isBack: {
+  //   type: Boolean,
+  //   default: false,
+  // },
 });
 onMounted(() => {});
 </script>

src/router/index.js

@@ -15,7 +15,7 @@ const router = createRouter({
       component: () => import("../views/map/index.vue"),
     },
     {
-      path: "/line",
+      path: "/line/:id",
       name: "line",
       component: () => import("../views/line/index.vue"),
     },

src/views/answer/index.vue

@@ -4,53 +4,65 @@
     <Header title="诗潮岳涌" />
     <div class="bg-container">
       <div class="bg-img">
-        <img :src="`./static/app/img/answerBg.png`" alt="" />
+        <img src="@/assets/images/anserHome.png" alt="" />
       </div>
+
       <div class="control-box">
+        <div class="pic"></div>
+
         <div class="content">
-          <div class="title">{{ custom[answerIndex].question }}</div>
+          <div class="title">
+            <div class="icon"></div>
+            <span>{{ custom[answerIndex].question }}</span>
+          </div>
           <div class="options">
-            <div @click="changeOption(index, i)" class="item" v-for="(i, index) in custom[answerIndex].options">
+            <div
+              @click="changeOption(index, i)"
+              class="item"
+              v-for="(i, index) in custom[answerIndex].options"
+              :class="{ isTrue: optionIndex != -1 && i.correct, isFalse: optionIndex == index && !i.correct }"
+            >
               <span>{{ i.text }}</span>
-              <div v-if="optionIndex != -1 && i.correct" class="icon true"></div>
-              <div v-if="optionIndex == index && !i.correct" class="icon false"></div>
+              <!-- <div v-if="optionIndex != -1 && i.correct" class="icon true"></div>
+              <div v-if="optionIndex == index && !i.correct" class="icon false"></div> -->
             </div>
-            <!-- <div class="item">
-            <span>B.这是一段诗句文本</span>
-            <div class="icon false"></div>
-          </div>
-          <div class="item">
-            <span>C.这是一段诗句文本</span>
-            <div class="icon"></div>
-          </div>
-          <div class="item">
-            <span>D.这是一段诗句文本</span>
-            <div class="icon"></div>
-          </div> -->
           </div>
+          <div class="viewer" @click="showReview = true">查看解析</div>
         </div>
       </div>
     </div>
     <div class="review-layer" v-if="showReview">
-      <div class="text-box">
-        <p class="review-title">{{ custom[answerIndex].content.title }}</p>
-        <span>{{ custom[answerIndex].content.time }} {{ custom[answerIndex].content.author }} </span>
-        <p class="review-content" v-html="custom[answerIndex].content.text"></p>
-        <p class="desc-title">诗词译文</p>
-        <p class="desc" v-html="custom[answerIndex].content.explain"></p>
-        <p class="desc-title">诗词赏析</p>
-        <p class="desc" v-html="custom[answerIndex].content.appreciate"></p>
-      </div>
-      <div class="controls-box">
-        <div class="replay" @click="reStartOrContinue(0)">重新开始</div>
-        <div class="continue" @click="reStartOrContinue()">继续</div>
+      <div class="review-bg">
+        <div class="text-box">
+          <div class="header">
+            <p class="review-title">{{ custom[answerIndex].content.title }}</p>
+            <span class="review-author">{{ custom[answerIndex].content.time }} {{ custom[answerIndex].content.author }} </span>
+            <p class="review-content" v-html="custom[answerIndex].content.text"></p>
+          </div>
+          <div class="body">
+            <p class="desc-title">诗词译文</p>
+            <p class="desc" v-html="custom[answerIndex].content.explain"></p>
+            <p class="desc-title">诗词赏析</p>
+            <p class="desc" v-html="custom[answerIndex].content.appreciate"></p>
+          </div>
+        </div>
+        <div class="controls-box">
+          <div class="replay" @click="reStartOrContinue(0)">重新开始</div>
+          <div class="continue" @click="reStartOrContinue()">继续</div>
+        </div>
       </div>
     </div>
     <div class="complete-layer" v-if="showComplete">
-      <div class="icon true"></div>
-      <p class="complete-title">您已完成全部题目</p>
-      <span class="complete-count">答对{{ counts }}道题目</span>
-      <div class="replay" @click="reStartOrContinue(0)">重新开始</div>
+      <div class="complete-content">
+        <div class="pic"></div>
+        <p>恭喜您！</p>
+        <p class="complete-title">您已完成全部题目</p>
+        <p class="complete-count">
+          答对<span>{{ counts }}</span
+          >道题目
+        </p>
+        <div class="replay" @click="reStartOrContinue(0)">重新开始</div>
+      </div>
     </div>
   </div>
 </template>
@@ -72,9 +84,9 @@ const changeOption = (index, i) => {
       counts.value++;
     }
     isCheck.value = true;
-    setTimeout(() => {
-      showReview.value = true;
-    }, 1000);
+    // setTimeout(() => {
+    //   showReview.value = true;
+    // }, 1000);
   }
 };
 watch(
@@ -104,12 +116,15 @@ const reStartOrContinue = (type = 1) => {
 </script>
 <style lang="scss" scoped>
 .answer {
+  width: 100%;
+  height: 100%;
   .bg-container {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     position: relative;
     .bg-img {
-      height: 65%;
+      height: 100%;
+
       img {
         width: 100%;
         height: 100%;
@@ -120,47 +135,98 @@ const reStartOrContinue = (type = 1) => {
       min-height: 40%;
       width: 100%;
       background: url("@/assets/images/answerBg.png") no-repeat;
-      background-size: 100% 100%;
+      background-size: cover;
       position: absolute;
       bottom: 0;
       left: 0;
       padding: 0.9333rem 1.1467rem 0;
       padding-top: 0.4rem;
+      .pic {
+        width: 3.8667rem;
+        height: 1.6667rem;
+        background: url("@/assets/images/answerTitle.png") no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        top: -2.4rem;
+        left: 50%;
+        transform: translateX(-50%);
+      }
       .content {
         width: 100%;
         height: 100%;
         overflow-y: auto;
 
         .title {
-          background: rgba(0, 0, 0, 0.25);
           min-height: 0.9333rem;
           border-radius: 0.4667rem;
           padding: 0.1333rem 0.2667rem;
           display: flex;
           align-items: center;
-          justify-content: flex-start;
-          box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.25); /* 内阴影效果 */
-          font-size: 0.5067rem;
-          color: #3f3f3f;
-          margin-top: 0.5333rem;
+          // justify-content: flex-start;
+          font-size: 0.3733rem;
+          color: #3d2924;
+          margin-top: 1.3333rem;
+          margin-bottom: 0.5867rem;
+          .icon {
+            width: 0.3067rem;
+            height: 0.3067rem;
+            background: url("../../assets/images/answerTitleIcon.png");
+            background-size: 100% 100%;
+
+            display: inline-block;
+          }
+          span {
+            padding-left: 0.1333rem;
+            display: inline-block;
+            width: calc(100% - 0.3067rem);
+          }
+        }
+        .viewer {
+          width: 100%;
+          height: 1.28rem;
+          color: #6a4934;
+          font-size: 0.3733rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(216, 199, 167, 0.5);
+          border-radius: 1.1733rem;
+          border: 1px solid #6a4934;
+          margin-top: 2.6667rem;
+          margin-bottom: 1.8267rem;
         }
         .options {
           margin-top: 0.5333rem;
           .item {
             background: #fff;
-            min-height: 0.84rem;
+            min-height: 1.28rem;
             border-radius: 0.4533rem;
             padding: 0.1333rem 0.2667rem;
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25); /* 内阴影效果 */
+            justify-content: center;
+            // box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25); /* 内阴影效果 */
             font-size: 0.3733rem;
             color: rgba(0, 0, 0, 0.8);
             margin-bottom: 0.2667rem;
 
+            border-radius: 1.1733rem;
+            border: 1px solid rgba(106, 73, 52, 0.5);
+            background: none;
+            &.isFalse {
+              background: rgba(227, 97, 97, 0.3);
+              border: 1px solid rgba(167, 9, 9, 0.5);
+              color: rgba(146, 37, 37, 1);
+            }
+            &.isTrue {
+              background: rgba(76, 179, 127, 0.3);
+              border: 1px solid #4cb37f;
+              color: rgba(14, 132, 73, 1);
+            }
+
             span {
-              width: 80%;
+              width: 100%;
+              text-align: center;
             }
           }
         }
@@ -168,80 +234,130 @@ const reStartOrContinue = (type = 1) => {
     }
   }
   .review-layer {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
-    background: url("@/assets/images/reviewBg.png") no-repeat;
-    background-size: 100% 100%;
+    background: url("@/assets/images/anserHome.png") no-repeat;
+    background-size: cover;
     padding: 1.12rem 0 0 1.1467rem;
-    .text-box {
+    .review-bg {
       width: 100%;
       height: 80%;
-      padding-right: 1.1467rem;
-      overflow-y: auto;
-      .review-title {
-        font-weight: normal;
-        font-size: 0.6533rem;
-        color: #404040;
-        line-height: 1rem;
-      }
-      .review-content {
-        font-weight: normal;
-        font-size: 0.4267rem;
-        color: #404040;
-        line-height: 0.5333rem;
-        margin-top: 0.5333rem;
-      }
-      .desc-title {
-        font-weight: normal;
-        font-size: 0.6533rem;
-        color: #404040;
-        line-height: 0.5333rem;
-        margin-top: 1.0667rem;
+      padding: 1.0667rem;
+      // overflow-y: auto;
+      background: url("@/assets/images/answerBg.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      .text-box {
+        width: 100%;
+        height: 80%;
+        overflow-y: auto;
+        .header {
+          width: 90%;
+          padding: 0 0.4rem 0.5333rem;
+          border-bottom: 0.0267rem dashed #9c8f86;
+          margin: 0 auto;
+          .review-title {
+            font-weight: bold;
+            font-size: 0.4667rem;
+            color: #3d2924;
+            text-align: center;
+            margin-top: 0.4rem;
+          }
+          .review-author {
+            font-weight: 400;
+            font-size: 0.3733rem;
+            color: #3d2924;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            padding: 0 1.0667rem;
+            margin-top: 0.4rem;
+          }
+          .review-content {
+            font-size: 0.3733rem;
+            color: #3d2924;
+            line-height: 0.6533rem;
+            letter-spacing: 0.12rem;
+            display: flex;
+            margin-top: 0.2rem;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+        .body {
+          width: 90%;
+          // padding: 0 0.4rem 0.5333rem;
+          margin: 0 auto;
+          .desc-title {
+            font-weight: bold;
+            font-size: 0.4667rem;
+            color: #6a4934;
+            margin-top: 0.9067rem;
+            &::before {
+              content: "";
+              width: 0.3067rem;
+              height: 0.3067rem;
+              display: inline-block;
+              background: url("@/assets/images/reviewTitleIcon.png") no-repeat;
+              background-size: 100% 100%;
+              margin-right: 0.16rem;
+            }
+          }
+          .desc {
+            font-weight: 400;
+            font-size: 0.3333rem;
+            color: rgba(106, 73, 52, 0.8);
+            line-height: 0.4933rem;
+            margin-top: 0.5333rem;
+          }
+        }
       }
-      .desc {
+      .controls-box {
+        width: 100%;
+        height: 20%;
         font-weight: normal;
         font-size: 0.3333rem;
-        color: #404040;
-        line-height: 0.5333rem;
-        margin-top: 0.5333rem;
-      }
-    }
-    .controls-box {
-      width: 100%;
-      height: 20%;
-      font-weight: normal;
-      font-size: 0.3333rem;
-      color: #2d2d2d;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      > div {
+        color: #2d2d2d;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 3.0667rem;
-        height: 0.72rem;
-        background: #cccccc;
-        border-radius: 0.1467rem;
-        border: 1px solid rgba(0, 0, 0, 0.12);
-        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-      }
-      .replay {
-        margin-right: 0.2667rem;
-      }
-      .continue {
+        > div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 3.7333rem;
+          height: 1.28rem;
+          font-weight: 400;
+          font-size: 0.3333rem;
+          color: #6a4934;
+          line-height: 0.4933rem;
+          background: none;
+          border-radius: 1.1733rem;
+        }
+        .replay {
+          border: 2px solid #6a4934;
+
+          margin-right: 0.2667rem;
+        }
+        .continue {
+          background: url("@/assets/images/continue.png") no-repeat;
+          background-size: 100% 100%;
+        }
       }
     }
   }
+
   .complete-layer {
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(8px);
-    width: 100vw;
-    height: 100vh;
+    background: url("@/assets/images/anserHome.png") no-repeat;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
     position: absolute;
     top: 0;
     left: 0;
@@ -251,31 +367,51 @@ const reStartOrContinue = (type = 1) => {
     align-items: center;
     flex-direction: column;
     justify-content: center;
-    .complete-title {
-      font-size: 0.4267rem;
-      color: #ffffff;
-      line-height: 0.4933rem;
-      margin-top: 0.1333rem;
-    }
-    .complete-count {
-      font-weight: normal;
-      font-size: 0.3333rem;
-      color: #ffffff;
-      line-height: 0.4933rem;
-      margin: 0.0667rem auto 0.9333rem;
-      display: block;
-    }
-    .replay {
+    .complete-content {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 3.0667rem;
-      height: 0.72rem;
-      background: #cccccc;
-      border-radius: 0.1467rem;
-      border: 1px solid rgba(0, 0, 0, 0.12);
-      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-      color: #2d2d2d;
+      flex-direction: column;
+      .pic {
+        width: 6.0667rem;
+        height: 2.08rem;
+        background: url("@/assets/images/complete@2x.png") no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 1.0667rem;
+      }
+      p {
+        font-weight: 400;
+        font-size: 0.3333rem;
+        color: #3d2924;
+        line-height: 0.4933rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .complete-count {
+        font-size: 24.9975px;
+        margin-top: 0.4rem;
+        span {
+          font-size: 0.84rem;
+          font-weight: bold;
+        }
+      }
+
+      .replay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 3.7333rem;
+        height: 1.28rem;
+        font-weight: 400;
+        font-size: 0.3333rem;
+        color: #6a4934;
+        line-height: 0.4933rem;
+        background: url("@/assets/images/continue.png") no-repeat;
+        background-size: 100% 100%;
+        border-radius: 1.1733rem;
+        margin-top: 1.84rem;
+      }
     }
   }
 }

src/views/data/index.vue

@@ -69,9 +69,9 @@ const procressData = (list) => {
   list = list.filter((item) => item["提供日期"]);
 
   console.error(list);
-  list.forEach((item) => {
+  list.forEach((item, index) => {
     let obj = {};
-
+    obj.id = index + 1;
     for (let key in item) {
       switch (key) {
         case "地图上分类":

src/views/food/index.vue

@@ -47,8 +47,8 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .food {
-  width: 100vw;
-  height: 100vh;
+   width: 100%;
+  height: 100%;
 
   position: relative;
   overflow-x: hidden;

src/views/home/index.vue

@@ -1,8 +1,11 @@
 <!--  -->
 <template>
   <div class="home">
-    <div class="home-layer">
-      <div class="header" @click="goItem(1)">
+    <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="header" @click="goItem(1)">
         <img src="@/assets/images/homeText1.png" alt="" />
       </div>
       <div class="middle">
@@ -16,44 +19,57 @@
         <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="close-btn" @click="close"></div> -->
+    </div>
+    <div class="frist-box" v-show="showFrist" @click="enter">
+      <div class="title"></div>
     </div>
   </div>
 </template>
 
 <script setup>
 import router from "@/router";
-import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
+import { reactive, ref, toRefs, onBeforeMount, onMounted, computed } from "vue";
 const close = () => {
   wx.miniProgram.navigateBack({
     delta: 1,
   });
 };
+const showFrist = ref(true);
+if (sessionStorage.getItem("isEnter")) {
+  showFrist.value = false;
+}
+const enter = () => {
+  sessionStorage.setItem("isEnter", true);
+  showFrist.value = false;
+};
 const goItem = (type) => {
   switch (type) {
     case 1:
-      router.push("/map");
+      router.replace("/map");
       break;
     case 2:
-      router.push("/unity");
+      router.replace("/unity");
       break;
     case 3:
-      router.push("/season");
+      router.replace("/season");
       break;
     case 4:
-      router.push("/answer");
+      router.replace("/answer");
       break;
     case 5:
-      router.push("/food");
+      router.replace("/food");
       break;
   }
 };
 </script>
 <style lang="scss" scoped>
 .home {
+  width: 100%;
+  height: 100%;
   .home-layer {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     top: 0;
     left: 0;
     background: url("@/assets/images/homeBg.png") no-repeat;
@@ -66,6 +82,47 @@ const goItem = (type) => {
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    .home-title {
+      width: 5.3333rem;
+      height: 2.6667rem;
+      background: url("@/assets/images/homeTitle.png") no-repeat;
+      background-size: 100% 100%;
+      // position: absolute;
+      // top: 1.3333rem;
+      // left: 50%;
+      // transform: translateX(-50%);
+      z-index: 1;
+    }
+    .item {
+      width: 6.8533rem;
+      height: 1.9067rem;
+      // background: red;
+      margin-bottom: 0.56rem;
+      position: relative;
+      z-index: 2;
+
+      &.item1 {
+        background: url("@/assets/images/home1.png") no-repeat;
+        background-size: 100% 100%;
+      }
+      &.item2 {
+        background: url("@/assets/images/home2.png") no-repeat;
+        background-size: 100% 100%;
+      }
+      &.item3 {
+        background: url("@/assets/images/home3.png") no-repeat;
+        background-size: 100% 100%;
+      }
+      &.item4 {
+        background: url("@/assets/images/home4.png") no-repeat;
+        background-size: 100% 100%;
+      }
+      &.item5 {
+        background: url("@/assets/images/home5.png") no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+
     .close-btn {
       position: absolute;
       width: 0.8rem;
@@ -174,7 +231,7 @@ const goItem = (type) => {
         height: auto;
         max-height: 80%;
         object-fit: contain;
-        margin-top:.7067rem;
+        margin-top: 0.7067rem;
       }
       &.l {
         background: url("@/assets/images/home5.png") no-repeat;
@@ -187,4 +244,23 @@ const goItem = (type) => {
     }
   }
 }
+.frist-box {
+  width: 100%;
+  height: 100%;
+  background: url("@/assets/images/frist.png") no-repeat;
+  background-size: cover;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  .title {
+    width: 4.8rem;
+    height: 2.4667rem;
+    background: url("@/assets/images/fristTitle.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    right: 1.0667rem;
+    top: 5.3333rem;
+  }
+}
 </style>

src/views/line/index.vue

@@ -1,9 +1,29 @@
 <template>
   <div class="map-box">
-    <Header title="旅游线路" />
+    <Header title="旅游线路" path="map" />
 
     <div id="amap" />
     <div id="panel"></div>
+
+    <Dialog v-if="dialogData" :dialogData="dialogData" @close="dialogData = null" />
+    <div class="line-content">
+      <div class="top">
+        <div class="title">
+          <p>打卡拍照路线</p>
+          <span>江湖风味游</span>
+        </div>
+        <div class="time">
+          <span class="num">7个景点</span>
+          <span>预计用时：10小时</span>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="item" @click="gotoItem(i)" v-for="(i, index) in lineData">
+          <div class="icon">{{ index + 1 }}</div>
+          <p class="name">{{ i.name }}</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -13,11 +33,13 @@ import AMapLoader from "@amap/amap-jsapi-loader";
 import jsonp from "jsonp";
 import Header from "@/components/header/index.vue";
 import { mapData } from "./data.js";
-
+import Dialog from "../map/dialog.vue";
+import tagIcon from "@/assets/images/tagIcon.png";
 let AMap = null;
 let map = null;
 let imageLayer = null;
-
+const dialogData = ref(null);
+const activeId = ref(0);
 const hanlderMakerEvent = (e) => {
   console.log("click", e.target.getExtData());
   // showDialog.value = true;
@@ -25,46 +47,82 @@ const hanlderMakerEvent = (e) => {
   dialogData.value = data;
 };
 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());
+};
 const setMarker = () => {
   let data = mapData.filter((item) => item.type == 4);
+  lineData.value = data;
   let scale = 0.2;
+  const markerContent = `<div class="custom-content-marker">
+    <div class="title">sdasdas</div>
+    <div class="icon"></div>
+      </div>`;
   for (let i = 0; i < data.length; i++) {
-    let iconW = 100;
-    let iconH = 100;
+    let iconW = 41;
+    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;
-      const markerContent = `<div class="custom-content-marker">
-<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
-<div class="close-btn" onclick="clearMarker()">X</div>
-</div>`;
-      var customIcon = new AMap.Icon({
+      customIcon = new AMap.Icon({
         // size: new AMap.Size(50, 50),
         image: `./static/image/景点地标切图/${data[i].name}.png`,
         imageSize: new AMap.Size(iconW, iconH),
       });
-      let pos = data[i].location.split(",");
-      let extData = data[i];
-      let marker = new AMap.Marker({
-        // position: new AMap.LngLat(106.837106, 29.712762),
-
-        position: new AMap.LngLat(pos[0], pos[1]),
-        // content: markerContent, //将 html 传给 content
-        offset: new AMap.Pixel(-(iconW / 2), -(iconH / 2)),
-        icon: customIcon, //添加 icon 图标 URL
-        // title: data[i].name,
-        zooms: [9, 20], // 设置可见级别，[最小级别，最大级别]
-        extData: {
-          //自定义数据
-          ...extData,
-        },
-        clickable: true,
+      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),
       });
-      markers.push(marker);
-      marker.on("mousedown", hanlderMakerEvent);
-      // marker.off("mousedown", hanlderMakerEvent);
-      map.add(marker);
+      // customIcon = markerContent;
     }
+
+    let pos = data[i].location.split(",");
+    let extData = data[i];
+    let marker = new AMap.Marker({
+      // position: new AMap.LngLat(106.837106, 29.712762),
+
+      position: new AMap.LngLat(pos[0], pos[1]),
+      offset: offset,
+      // content: !data[i].iconSize ? markerContent : null, //将 html 传给 content
+      label: !data[i].iconSize
+        ? {
+            // Marker标签
+            direction: "top",
+            content: extData.name, // 标签内容
+            offset: new AMap.Pixel(0, -5), // 标签偏移量，可根据需要调整
+          }
+        : null,
+      // icon: data[i].iconSize ? customIcon : null, //添加 icon 图标 URL
+      icon: customIcon, //添加 icon 图标 URL
+      // title: data[i].name,
+      zooms: [9, 20], // 设置可见级别，[最小级别，最大级别]
+      id: `marker_${data[i].id}`,
+      extData: {
+        //自定义数据
+        ...extData,
+      },
+      clickable: true,
+    });
+    markers.push(marker);
+    marker.on("mousedown", hanlderMakerEvent);
+    // marker.off("mousedown", hanlderMakerEvent);
+    map.add(marker);
   }
 
   nextTick(() => {
@@ -131,8 +189,8 @@ const createdLine = () => {
       outlineColor: "#fff",
       borderWeight: 1,
       strokeWeight: 4,
-      strokeColor: "red",
-      strokeOpacity: 0.9,
+      strokeColor: "#FFB200",
+      strokeOpacity: 1,
       showDir: true,
       lineJoin: "round",
     });
@@ -141,7 +199,7 @@ const createdLine = () => {
 
     // 调整视野达到最佳显示区域
     // map.setFitView([startMarker, endMarker, routeLine]);
-    map.setFitView([ routeLine]);
+    map.setFitView([routeLine]);
   }
   function parseRouteToPath(route) {
     var path = [];
@@ -438,223 +496,167 @@ onMounted(() => {
 <style lang="scss" scoped>
 .map-box {
   width: 100%;
-  height: 100vh;
-  .tab-bar {
+  height: 100%;
+
+  #amap {
     width: 100%;
-    height: 1.1733rem;
-    background: url("@/assets/images/tabBg.png") no-repeat;
+    height: 100%;
+  }
+  .line-content {
+    width: 100%;
+    height: 6.1333rem;
+    background: url("@/assets/images/lineBg.png") no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    top: 1.0667rem;
+    bottom: 0;
     left: 0;
-    z-index: 10;
-    overflow-x: hidden;
-    display: flex;
-    align-items: center;
-    .swiper-container {
-      width: 100%;
-      padding: 0 0.4rem;
+    .top {
+      height: 2.6667rem;
       display: flex;
-      align-items: center;
-      .swiper-wrapper {
+      align-items: flex-start;
+      justify-content: flex-end;
+      flex-direction: column;
+      color: #6a4934;
+      .title {
+        margin-left: 12%;
         display: flex;
-        align-items: center;
-        .swiper-slide {
-          background: rgba(255, 255, 255, 0.6);
-          // min-height: 0.56rem;
-          width: auto;
-          height: auto;
-          font-weight: bold;
-          color: rgba(56, 56, 56, 0.8);
+        p {
+          font-size: 0.4667rem;
+        }
+        span {
           display: flex;
           align-items: center;
           justify-content: center;
-          border-radius: 0.16rem;
-          padding: 0.16rem;
-          &.active {
-            background: #50c4b2;
-            color: #fff;
-          }
-        }
-      }
-    }
-  }
-  #amap {
-    height: 100vh;
-  }
-  .chat-box {
-    width: 8.8rem;
-    position: fixed;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 83%);
-    z-index: 10;
-    transition: all 0.3s linear;
-    &.show {
-      transform: translate(-50%, 0);
-
-      .chat-tab {
-        margin-bottom: 0;
-        .icon {
-          transform: rotate(180deg);
+          background: #ffbf4a;
+          height: 0.56rem;
+          border-radius: 0.28rem;
+          font-weight: 400;
+          font-size: 0.3333rem;
+          color: #fff9ed;
+          padding: 0 0.1333rem;
+          margin-left: 0.1333rem;
         }
       }
-    }
-    .chat-tab {
-      width: 8.8rem;
-      height: 1.7333rem;
-      background: url("@/assets/images/chatTab.png") no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      margin-bottom: 0.4rem;
-
-      > div {
-        width: 100%;
-        height: 1.52rem;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-right: 0.8rem;
-        > div {
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-          .logo {
-            width: 2.76rem;
-            height: 2.76rem;
-            background: url("@/assets/images/deepseek.png") no-repeat;
-            background-size: 100% 100%;
-            margin-top: -4%;
-            margin-left: 0.8rem;
-            // position: absolute;
-            // left: .8rem;
-            // top: -52%;
-          }
-          .text {
-            // margin-top: -1.5%;
-            font-size: 0.2667rem;
-            color: rgba(0, 0, 0, 0.6);
-            line-height: 0.9333rem;
+      .time {
+        margin-left: 12%;
+        font-size: 0.3333rem;
+        margin-top: 0.0667rem;
+        .num {
+          position: relative;
+          margin-right: 0.2667rem;
+          &::before {
+            content: "";
+            width: 1px;
+            height: 0.4rem;
+            background: #6a4934;
+            display: inline-block;
+            position: absolute;
+            right: -0.1333rem;
+            top: 50%;
+            transform: translateY(-50%);
           }
         }
-
-        .icon {
-          width: 0.56rem;
-          height: 0.56rem;
-          background: url("@/assets/images/slideIcon.png") no-repeat;
-          background-size: 100% 100%;
-          margin-left: 0.6rem;
-        }
       }
     }
-    .chat-content {
+    .bottom {
       width: 100%;
-      height: 9.76rem;
-      background: url("@/assets/images/chatBg.png") no-repeat;
-      background-size: 100% 100%;
-      margin-bottom: 0.5333rem;
-      padding: 0.3rem 0.2rem 1.3333rem 0.8rem;
-      position: relative;
-
-      .ipt-box {
-        width: 100%;
-        height: 0.7067rem;
-        position: absolute;
-        bottom: 0.5333rem;
-        left: 50%;
-        transform: translateX(-50%);
+      height: calc(100% - 2.6667rem);
+      display: flex;
+      flex-wrap: wrap; /* 允许子项换行 */
+      padding: 0.1333rem 0.3067rem;
+      overflow-y: auto;
+
+      .item {
+        // width: 1.3333rem;
+        // height: 1.3333rem;
+        // background: yellow;
+        width: calc(20% - 10px); /* 每行五个项目，减去一些边距 */
+        // margin: 5px;
+        box-sizing: border-box;
         display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
         align-items: center;
-        justify-content: center;
-        .chat-text {
-          width: 6.2933rem;
-          height: 100%;
-          background: #fff;
-          border-radius: 0.3467rem;
-          overflow: hidden;
-
-          input {
-            border: none;
-            outline: none;
-            width: 100%;
-            height: 100%;
-            font-size: 0.2667rem;
-            padding: 0 0.5333rem;
-            line-height: 0.7067rem;
-          }
-        }
-        .send-btn {
-          width: 0.7067rem;
-          height: 0.7067rem;
-          background: url("@/assets/images/sendBtn.png") no-repeat;
-          background-size: 100% 100%;
-          margin-left: 0.16rem;
+        margin-right: 10px;
+        position: relative;
+        &::after {
+          width: 40%;
+          content: "";
+          border: 1px dashed #6a4934;
+          position: absolute;
+          top: 0.3467rem;
+          right: -26%;
         }
-      }
-      .chat-msg {
-        width: 100%;
-        height: 100%;
-        font-weight: 400;
-        font-size: 0.3333rem;
-        line-height: 0.4667rem;
-        padding-right: 0.6rem;
-        overflow-y: auto;
-        .default-question {
-          // display: flex;
-          // flex-wrap: wrap;
-          // flex-flow: row wrap;
-
-          .quest-item {
-            display: inline;
-            background: #fff;
-            padding: 0.1333rem;
-            border-radius: 0.1067rem;
-            font-size: 0.2667rem;
-            margin: 0 0.1333rem 0.1333rem 0;
-            line-height: 0.8rem;
+        &:nth-of-type(5n) {
+          &::after {
+            display: none;
           }
         }
-        > div {
-          overflow: hidden;
-        }
-        .ask {
-          color: #ffffff;
-
-          > div {
-            max-width: 5.4667rem;
-            display: inline-block;
-            float: right;
-            background: #4d6bfe;
-            padding: 0.1333rem 0.5333rem;
-            border-radius: 0.24rem;
-            margin-top: 0.4rem;
+        &:last-of-type {
+          &::after {
+            display: none;
           }
         }
-        .reply {
-          border-radius: 0.24rem;
-          color: #000;
-          > div {
-            max-width: 5.4667rem;
-            display: inline-block;
-            float: left;
-            background: #fff;
-            padding: 0.1333rem 0.5333rem;
-            border-radius: 0.24rem;
-            margin-top: 0.4rem;
+        .icon {
+          width: 0.6933rem;
+          height: 0.6933rem;
+          background: url("@/assets/images/line_btn_normal@2x.png") no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .name {
+          overflow: hidden; /*必须结合的属性,当内容溢出元素框时发生的事情*/
+          text-overflow: ellipsis; /*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
+          display: -webkit-box; /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
+          -webkit-line-clamp: 2; /*用来限制在一个块元素显示的文本的行数。*/
+          -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
+          font-size: 0.24rem;
+          color: #6a4934;
+          &.active {
+            color: #6a4934;
+            font-weight: bold;
           }
+          // transform: scale(0.8);
         }
       }
     }
   }
 }
 </style>
-<style>
+<style lang="scss">
+.map-box {
+  .amap-marker-label {
+    height: 0.5333rem;
+    line-height: 0.5333rem;
+    font-size: 0.2667rem;
+    border: 0.0625rem solid #fff;
+    background: #e49246;
+    color: #fff;
+    padding: 0 0.2667rem;
+    border-radius: 1.375rem;
+    display: flex;
+    align-items: center;
+  }
+}
 .custom-content-marker {
-  position: relative;
-  width: 25px;
-  height: 34px;
+  /* position: absolute;
+  bottom: 90%; */
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-direction: column;
+  height: 100px;
+  width: 100px;
+  .icon {
+    width: 41px;
+    height: 57px;
+    background: url("@/assets/images/tagIcon.png") no-repeat;
+    background-size: 100% 100%;
+  }
 }
-
+/* 
 .custom-content-marker img {
   width: 100%;
   height: 100%;
@@ -673,5 +675,5 @@ onMounted(() => {
   text-align: center;
   line-height: 15px;
   box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
-}
+} */
 </style>

src/views/map/dialog.vue

@@ -5,6 +5,7 @@
     <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>
       <div class="img-box">
         <div class="dialog-swiper-container">
           <div class="swiper-wrapper">
@@ -18,7 +19,7 @@
           <div class="swiper-button-next"></div>
           <div class="swiper-button-prev"></div>
         </div>
-        <div class="audio-icon" v-if="dialogData.audio" @click="plauMusic"></div>
+        <div class="audio-icon" :class="{ active: isPlay }" v-if="dialogData.audio" @click="plauMusic"></div>
       </div>
       <div class="text-box">
         <div class="header-info">
@@ -108,8 +109,8 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .vr-content {
   position: fixed;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   top: 0;
   left: 0;
   z-index: 1001;
@@ -142,6 +143,17 @@ onBeforeUnmount(() => {
     position: absolute;
     bottom: 0;
     left: 0;
+    .close-btn {
+      width: 1.0667rem;
+      height: 1.0667rem;
+
+      background: url("@/assets/images/homeClose.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      right: 0.2667rem;
+      top: 0.2667rem;
+      z-index: 100;
+    }
     .img-box {
       width: 100%;
       height: 55%;
@@ -157,6 +169,10 @@ onBeforeUnmount(() => {
         right: 0.44rem;
         bottom: 1.0667rem;
         z-index: 10;
+        &.active {
+          background: url("@/assets/images/musicActive.png") no-repeat;
+          background-size: 100% 100%;
+        }
       }
       .dialog-swiper-container {
         width: 100%;

src/views/map/index.vue

@@ -14,23 +14,28 @@
     </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: 0; left: 0; z-index: 1000">
+      <!-- <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>
-      <button @click="goLocation(3)">导航3</button> -->
-    <!-- <button @click="openApp">打开小程序</button> -->
-    <!-- <button @click="switchView(1)">切换视图1</button>
-      <button @click="switchView(2)">切换视图2</button> -->
-    <!-- </div> -->
+      <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>
+
+    <div class="open-line" @click="showLineList = true"></div>
+    <div class="open-chat" @click="switchChat()"></div>
 
     <div class="chat-box" :class="{ show: showChat }">
-      <div class="chat-tab" @click="switchChat()">
+      <div class="icon" @click="switchChat()"></div>
+      <!-- <div class="chat-tab" @click="switchChat()">
         <div>
           <div>
             <div class="logo"></div>
@@ -39,7 +44,7 @@
 
           <div class="icon"></div>
         </div>
-      </div>
+      </div> -->
       <div class="chat-content">
         <!-- <div class="answer-list"></div> -->
 
@@ -62,7 +67,16 @@
         </div>
       </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>
+        </div>
+      </div>
+    </div>
   </div>
+
   <Dialog v-if="dialogData" :dialogData="dialogData" @close="dialogData = null" />
 </template>
 
@@ -76,13 +90,17 @@ import Dialog from "./dialog.vue";
 import Header from "@/components/header/index.vue";
 import "swiper/css/swiper.css";
 import { mapData, typeData } from "./data.js";
-
+import tagIcon from "@/assets/images/tagIcon.png";
 import MarkdownIt from "markdown-it";
-import { mapStores } from "pinia";
+// import { mapStores } from "pinia";
+import router from "@/router";
 const md = new MarkdownIt();
 const scrollRef = ref(null);
 // console.error(mapData);
-
+const showLineList = ref(false);
+const goLine = (id) => {
+  router.replace(`/line/${id}`);
+};
 const messages = ref([]);
 if (sessionStorage.getItem("messages")) {
   messages.value = JSON.parse(sessionStorage.getItem("messages"));
@@ -96,7 +114,27 @@ const chat = ref({ content: "", role: "user" });
 let AMap = null;
 let map = null;
 let imageLayer = null;
-
+const test = () => {
+  let item = markers.find((i) => i.getExtData().id == 1);
+  let data = item.getExtData();
+  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, item.getPosition());
+};
+function getMarkerByPosition(position) {
+  var markers = map.getOverlays(); // 获取地图上的所有覆盖物，包括 Marker
+  for (var i = 0; i < markers.length; i++) {
+    if (AMap.isPointInArea(position, markers[i].getPosition())) {
+      // 检查位置是否匹配
+      return markers[i]; // 返回找到的 Marker
+    }
+  }
+  return null; // 如果没有找到，返回 null
+}
 const showDialog = ref(false);
 const tabType = ref(1);
 let openaiA = new OpenAI({
@@ -201,21 +239,38 @@ const switchChat = () => {
   showChat.value = !showChat.value;
 };
 
+// var infoWindow = new AMap.InfoWindow({
+//   content: "<div style='padding: 5.0025px;'>这里是你要显示的内容</div>", // 可以是HTML字符串
+//   offset: new AMap.Pixel(0, -30), // 偏移量设置
+// });
 const hanlderMakerEvent = (e) => {
   console.log("click", e.target.getExtData());
   // showDialog.value = true;
   let data = e.target.getExtData();
   dialogData.value = data;
+  // console.error(e);
+  //  infoWindow.open(map, marker.getPosition());
+  // 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());
+  // console.error(infoWindow);
 };
 let markers = [];
 const setMarker = () => {
   let data = mapData.filter((item) => item.type == tabType.value);
   let scale = 0.2;
+  const markerContent = `<div class="custom-content-marker">
+    <div class="title">sdasdas</div>
+    <div class="icon"></div>
+      </div>`;
   for (let i = 0; i < data.length; i++) {
-    let iconW = 50;
-    let iconH = 50;
+    let iconW = 41;
+    let iconH = 57;
     let customIcon = null;
-    let offset = [0, 0];
+    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;
@@ -225,17 +280,14 @@ const setMarker = () => {
         imageSize: new AMap.Size(iconW, iconH),
       });
       offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
-      //       const markerContent = `<div class="custom-content-marker">
-      // <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
-      // <div class="close-btn" onclick="clearMarker()">X</div>
-      // </div>`;
     } else {
-      // customIcon = new AMap.Icon({
-      //   size: new AMap.Size(iconW, iconH),
-      //   // image: `./static/image/景点地标切图/${data[i].name}.png`,
-      //   // imageSize: new AMap.Size(iconW, iconH),
-      // });
-      offset = 0;
+      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(",");
@@ -244,11 +296,21 @@ const setMarker = () => {
       // position: new AMap.LngLat(106.837106, 29.712762),
 
       position: new AMap.LngLat(pos[0], pos[1]),
-      // content: markerContent, //将 html 传给 content
       offset: offset,
+      // content: !data[i].iconSize ? markerContent : null, //将 html 传给 content
+      label: !data[i].iconSize
+        ? {
+            // Marker标签
+            direction: "top",
+            content: extData.name, // 标签内容
+            offset: new AMap.Pixel(0, -5), // 标签偏移量，可根据需要调整
+          }
+        : null,
+      // icon: data[i].iconSize ? customIcon : null, //添加 icon 图标 URL
       icon: customIcon, //添加 icon 图标 URL
       // title: data[i].name,
       zooms: [9, 20], // 设置可见级别，[最小级别，最大级别]
+      id: `marker_${data[i].id}`,
       extData: {
         //自定义数据
         ...extData,
@@ -319,7 +381,7 @@ const setMarkerCluster = () => {
     map, // 地图实例
     pointers, // 海量点数据，数据中需包含经纬度信息字段 lnglat
     {
-      gridSize: 100,
+      gridSize: 30,
       clusterByZoomChange: true,
       // styles: {
       //   // url: `./static/image/景点地标切图/${data.name}.png`,
@@ -354,8 +416,20 @@ const setMarkerCluster = () => {
       },
     }
   );
+
   cluster.on("click", (e) => {
-    console.error(e);
+    if (e.clusterData.length == 1) {
+      dialogData.value = e.clusterData[0].info;
+    } else {
+      // console.error(map.getZoom());
+      setTimeout(() => {
+        // map.setZoomAndCenter(map.getZoom() + 2);
+        let center = e.clusterData[0].info.location.split(",");
+        console.error(center);
+        map.setZoomAndCenter(map.getZoom() + 2, center, false, 300);
+      }, 0);
+      // console.error(map.getZoom());
+    }
   });
 };
 const goLocation = (index) => {
@@ -372,10 +446,10 @@ const initMap = async () => {
     securityJsCode: "2d0885f937e5fa6d093830e1765f593d",
   };
   const _AMap = await AMapLoader.load({
-    key: "655ac083de961ed970f2be4ba23b3c9f", //玉骑账号
-    // key: "b19c9847b3775cd993c5a8a71c5fa1a0",
+    // key: "655ac083de961ed970f2be4ba23b3c9f", //玉骑账号
+    key: "b19c9847b3775cd993c5a8a71c5fa1a0",
     version: "2.0",
-    plugins: ["AMap.MoveAnimation", "AMap.ImageLayer", "AMap.TileLayer", "AMap.Geolocation", "AMap.DistrictSearch", "AMap.Driving", "AMap.Walking", "AMap.MarkerCluster"],
+    plugins: ["AMap.MoveAnimation", "AMap.ImageLayer", "AMap.TileLayer", "AMap.Geolocation", "AMap.DistrictSearch", "AMap.Driving", "AMap.Walking", "AMap.MarkerCluster", "AMap.InfoWindow"],
   });
   AMap = _AMap;
 
@@ -396,7 +470,7 @@ const initMap = async () => {
   });
   map = new AMap.Map("amap", {
     viewMode: "2D",
-    // mapStyle: "amap://styles/76c9ffde986e653b6c8dc2bba6a9186e", //设置地图的显示样式
+    mapStyle: "amap://styles/76c9ffde986e653b6c8dc2bba6a9186e", //设置地图的显示样式
     labels: true,
     zoom: 10, // 地图显示的缩放级别
     zooms: [8, 18],
@@ -554,7 +628,7 @@ const initMap = async () => {
     console.error("click");
   });
   map.on("zoomchange", () => {
-    // console.log("当前缩放级别:", map.getZoom());
+    console.log("当前缩放级别:", map.getZoom());
     // if (map.getZoom() < 10 || map.getZoom() > 15) {
     //   map.remove(tilerLayer);
     // } else {
@@ -591,8 +665,10 @@ const initMap = async () => {
 const addImageLayer = () => {
   imageLayer = new AMap.ImageLayer({
     bounds: new AMap.Bounds(
-      [112.327252, 29.848416], // 左下  手绘图左下相对于地图的经纬度
-      [114.158561, 28.41688] // 右上  手绘图右上相对于地图的经纬度
+      // [112.327252, 29.848416], // 左下  手绘图左下相对于地图的经纬度
+      // [114.158561, 28.41688] // 右上  手绘图右上相对于地图的经纬度
+      [112.319302, 29.848272], // 左下  手绘图左下相对于地图的经纬度
+      [114.159538, 28.396902] // 右上  手绘图右上相对于地图的经纬度
     ),
     // url为手绘图地址
     // url: "https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg",
@@ -600,7 +676,7 @@ const addImageLayer = () => {
 
     zIndex: 10,
     clickable: true,
-    zooms: [0, 20], // 设置可见级别，[最小级别，最大级别]
+    zooms: [0, 16], // 设置可见级别，[最小级别，最大级别]
   });
 };
 
@@ -804,14 +880,33 @@ onMounted(() => {
 <style lang="scss" scoped>
 .map-box {
   width: 100%;
-  height: 100vh;
+  height: 100%;
+  .open-line {
+    width: 1.72rem;
+    height: 1.64rem;
+    background: url("@/assets/images/ywxlBtn.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    bottom: .8rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .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;
+  }
   .tab-bar {
     width: 100%;
-    height: 87.9975px;
+    height: 1.1733rem;
     background: url("@/assets/images/tabBg.png") no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    top: 80.0025px;
+    top: 1.0667rem;
     left: 0;
     z-index: 10;
     overflow-x: hidden;
@@ -819,43 +914,61 @@ onMounted(() => {
     align-items: center;
     .swiper-container {
       width: 100%;
-      padding: 0 30px;
+      padding: 0 .4rem;
       display: flex;
       align-items: center;
       .swiper-wrapper {
         display: flex;
-        align-items: center;
+        align-items: flex-end;
+
         .swiper-slide {
           background: rgba(255, 255, 255, 0.6);
-          // min-height: 42px;
+          // min-height: .56rem;
           width: auto;
           height: auto;
           font-weight: bold;
-          color: rgba(56, 56, 56, 0.8);
+          color: #fff;
           display: flex;
           align-items: center;
           justify-content: center;
-          border-radius: 12px;
-          padding: 12px;
+          border-radius: .16rem;
+          padding: 0 .2133rem;
+          background: url("@/assets/images/tabNormal.png") no-repeat;
+          background-size: 100% 100%;
+          height: .8267rem;
+          font-size: .3467rem;
           &.active {
-            background: #50c4b2;
-            color: #fff;
+            // background: #50c4b2;
+            // color: #fff;
+            height: 1.24rem;
+
+            color: #883f45;
+            text-shadow: 0px 2.0025px 3px #be8500;
+            background: url("@/assets/images/tabActive.png") no-repeat;
+            background-size: 100% 100%;
+            display: flex;
+            align-items: flex-end;
+            padding-bottom: .2rem;
           }
         }
       }
     }
   }
   #amap {
-    height: 100vh;
+    height: 100%;
   }
   .chat-box {
-    width: 660px;
+    width: 9.6rem;
+    height: 12.1467rem;
     position: fixed;
+    background: url("@/assets/images/chatBg.png") no-repeat;
+    background-size: 100% 100%;
     bottom: 0;
     left: 50%;
-    transform: translate(-50%, 83%);
+    transform: translate(-50%, 100%);
     z-index: 10;
     transition: all 0.3s linear;
+    padding-top: 2.1333rem;
     &.show {
       transform: translate(-50%, 0);
 
@@ -866,104 +979,114 @@ onMounted(() => {
         }
       }
     }
-    .chat-tab {
-      width: 660px;
-      height: 129.9975px;
-      background: url("@/assets/images/chatTab.png") no-repeat;
+    .icon {
+      width: .6133rem;
+      height: .5867rem;
+      background: url("@/assets/images/slideIcon.png") no-repeat;
       background-size: 100% 100%;
+      margin-left: .6rem;
+      position: absolute;
+      right: 1.4533rem;
+      top: 1.2rem;
+    }
+    .chat-tab {
+      width: 8.8rem;
+      height: 1.7333rem;
+      // background: url("@/assets/images/chatTab.png") no-repeat;
+      // background-size: 100% 100%;
       position: relative;
-      margin-bottom: 30px;
+      margin-bottom: .4rem;
 
       > div {
         width: 100%;
-        height: 114px;
+        height: 1.52rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding-right: 60px;
+        padding-right: .8rem;
         > div {
           display: flex;
           align-items: center;
           justify-content: flex-start;
           .logo {
-            width: 207px;
-            height: 207px;
+            width: 2.76rem;
+            height: 2.76rem;
             background: url("@/assets/images/deepseek.png") no-repeat;
             background-size: 100% 100%;
             margin-top: -4%;
-            margin-left: 60px;
+            margin-left: .8rem;
             // position: absolute;
-            // left: 60px;
+            // left: .8rem;
             // top: -52%;
           }
           .text {
             // margin-top: -1.5%;
-            font-size: 20.0025px;
+            font-size: .2667rem;
             color: rgba(0, 0, 0, 0.6);
-            line-height: 69.9975px;
+            line-height: .9333rem;
           }
         }
 
         .icon {
-          width: 42px;
-          height: 42px;
+          width: .56rem;
+          height: .56rem;
           background: url("@/assets/images/slideIcon.png") no-repeat;
           background-size: 100% 100%;
-          margin-left: 45px;
+          margin-left: .6rem;
         }
       }
     }
     .chat-content {
       width: 100%;
-      height: 732px;
-      background: url("@/assets/images/chatBg.png") no-repeat;
-      background-size: 100% 100%;
-      margin-bottom: 39.9975px;
-      padding: 22.5px 15px 99.9975px 60px;
+      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;
       position: relative;
 
       .ipt-box {
         width: 100%;
-        height: 53.0025px;
+        height: .7067rem;
         position: absolute;
-        bottom: 39.9975px;
+        bottom: .5333rem;
         left: 50%;
         transform: translateX(-50%);
         display: flex;
         align-items: center;
         justify-content: center;
         .chat-text {
-          width: 471.9975px;
+          width: 6.2933rem;
           height: 100%;
           background: #fff;
-          border-radius: 26.0025px;
+          border-radius: .16rem;
           overflow: hidden;
-
+          border: .9975px solid #adadad;
           input {
             border: none;
             outline: none;
             width: 100%;
             height: 100%;
-            font-size: 20.0025px;
-            padding: 0 39.9975px;
-            line-height: 53.0025px;
+            font-size: .2667rem;
+            padding: 0 .5333rem;
+            line-height: .7067rem;
           }
         }
         .send-btn {
-          width: 53.0025px;
-          height: 53.0025px;
+          width: .7067rem;
+          height: .7067rem;
           background: url("@/assets/images/sendBtn.png") no-repeat;
           background-size: 100% 100%;
-          margin-left: 12px;
+          margin-left: .16rem;
         }
       }
       .chat-msg {
         width: 100%;
         height: 100%;
         font-weight: 400;
-        font-size: 24.9975px;
-        line-height: 35.0025px;
-        padding-right: 45px;
+        font-size: .3333rem;
+        line-height: .4667rem;
+        padding-right: .2667rem;
         overflow-y: auto;
         .default-question {
           // display: flex;
@@ -972,12 +1095,14 @@ onMounted(() => {
 
           .quest-item {
             display: inline;
-            background: #fff;
-            padding: 9.9975px;
-            border-radius: 8.0025px;
-            font-size: 20.0025px;
-            margin: 0 9.9975px 9.9975px 0;
-            line-height: 60px;
+            background: #d9d9d9;
+            border: .9975px solid #dddddd;
+            padding: .1333rem;
+            color: rgba(0, 0, 0, 0.7);
+            border-radius: .16rem;
+            font-size: .2667rem;
+            margin: 0 .1333rem .1333rem 0;
+            line-height: .8rem;
           }
         }
         > div {
@@ -987,58 +1112,80 @@ onMounted(() => {
           color: #ffffff;
 
           > div {
-            max-width: 410.0025px;
+            max-width: 5.4667rem;
             display: inline-block;
             float: right;
             background: #4d6bfe;
-            padding: 9.9975px 39.9975px;
-            border-radius: 18px;
-            margin-top: 30px;
+            padding: .1333rem .5333rem;
+            border-radius: .24rem;
+            margin-top: .4rem;
           }
         }
         .reply {
-          border-radius: 18px;
+          border-radius: .24rem;
           color: #000;
           > div {
-            max-width: 410.0025px;
+            max-width: 5.4667rem;
             display: inline-block;
             float: left;
             background: #fff;
-            padding: 9.9975px 39.9975px;
-            border-radius: 18px;
-            margin-top: 30px;
+            padding: .1333rem .5333rem;
+            border-radius: .24rem;
+            margin-top: .4rem;
           }
         }
       }
     }
   }
 }
-</style>
-<style lang="scss">
-.custom-content-marker {
-  position: relative;
-  width: 0.3333rem;
-  height: 0.4533rem;
-}
-
-.custom-content-marker img {
+.line-layer {
+  position: absolute;
   width: 100%;
   height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  .line-box {
+    width: 100%;
+    height: 8.8133rem;
+    background: url("@/assets/images/mapLineBg.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    .line-list {
+      width: 100%;
+      height: calc(100% - 2rem);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      padding: .1333rem .6667rem;
+      overflow-y: auto;
+      .list-item {
+        width: 100%;
+        height: 2.64rem;
+        background: yellow;
+        margin-bottom: .24rem;
+      }
+    }
+  }
 }
-
-.custom-content-marker .close-btn {
-  position: absolute;
-  top: -0.08rem;
-  right: -0.1067rem;
-  width: 0.2rem;
-  height: 0.2rem;
-  font-size: 0.16rem;
-  background: #ccc;
-  border-radius: 50%;
-  color: #fff;
-  text-align: center;
-  line-height: 0.2rem;
-  box-shadow: -0.0133rem 0.0133rem 0.0133rem rgba(10, 10, 10, 0.2);
+</style>
+<style lang="scss">
+.map-box {
+  .amap-marker-label {
+    height: .5333rem;
+    line-height: .5333rem;
+    font-size: .2667rem;
+    border: .0625rem solid #fff;
+    background: #e49246;
+    color: #fff;
+    padding: 0 .2667rem;
+    border-radius: 1.375rem;
+    display: flex;
+    align-items: center;
+  }
 }
 .amap-icon {
   img {
@@ -1046,4 +1193,19 @@ onMounted(() => {
     height: 100%;
   }
 }
+
+.map-window {
+  width: 6.4rem;
+  height: 4.6667rem;
+
+  .img-box {
+    width: 100%;
+    height: 3.7333rem;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
 </style>

src/views/unity/index.vue

@@ -11,8 +11,8 @@ import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
 </script>
 <style lang="scss" scoped>
 .wrapper {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   iframe {
     width: 100%;
     height: 100%;