fix: .

src/assets/main.css

@@ -110,3 +110,26 @@ iframe {
     transition: all 0.3s;
   }
 }
+::-webkit-scrollbar {
+  width: 4px;
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+  background: #ccc;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  /* background: #000000; */
+}
+input {
+  background: none;
+}

src/components/header/index.vue

@@ -0,0 +1,54 @@
+vue3
+<!--  -->
+<template>
+  <div class="header">
+    <div class="back-icon" @click="back"></div>
+    <div class="title">{{ title }}</div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, watch, defineEmits, defineProps } from "vue";
+import router from "@/router";
+const back = () => {
+   router.replace('/');
+};
+const props = defineProps({
+  title: {
+    type: String,
+    default: "12321",
+  },
+});
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.header {
+  width: 100%;
+  height: 1.0667rem;
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  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>
+<style></style>

src/views/answer/index.vue

@@ -1,6 +1,7 @@
 <!--  -->
 <template>
   <div class="answer">
+    <Header title="诗潮岳涌" />
     <div class="bg-container">
       <div class="bg-img">
         <img :src="`./static/app/img/answerBg.png`" alt="" />
@@ -56,6 +57,7 @@
 
 <script setup>
 import { reactive, ref, toRefs, onBeforeMount, onMounted, watch } from "vue";
+import Header from "@/components/header/index.vue";
 import { custom } from "./constant";
 const answerIndex = ref(0);
 const optionIndex = ref(-1);
@@ -115,7 +117,7 @@ const reStartOrContinue = (type = 1) => {
       }
     }
     .control-box {
-      height: 40%;
+      min-height: 40%;
       width: 100%;
       background: url("@/assets/images/answerBg.png") no-repeat;
       background-size: 100% 100%;

src/views/food/index.vue

@@ -1,6 +1,7 @@
 <!--  -->
 <template>
   <div class="food">
+    <Header title="数字美食" />
     <div class="food-title">食物名称</div>
     <div class="food-container">
       <div class="swiper-wrapper">
@@ -20,6 +21,7 @@
 <script setup>
 import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
 import Swiper from "swiper";
+import Header from "@/components/header/index.vue";
 import "swiper/css/swiper.css";
 const initTab = () => {
   new Swiper(".food-container", {

src/views/map/dialog.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="dialog">
-    <audio ref="audioRef" v-if="dialogData.audio" :autoplay="false" :src="`./static/image/${dialogData.title}/${dialogData.name}/${dialogData.audio}`"></audio>
+    <audio ref="audioRef" v-if="dialogData.audio" :autoplay="true" :src="`./static/image/${dialogData.title}/${dialogData.name}/${dialogData.audio}`"></audio>
 
     <div class="dialog-conntent">
       <div class="img-box">

src/views/map/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="map-box">
+    <Header title="智游岳阳" />
     <div class="tab-bar">
       <div class="swiper-container">
         <div class="swiper-wrapper">
@@ -12,6 +13,7 @@
       </div>
     </div>
     <div id="amap" />
+    <div id="panel"></div>
     <!-- <div style="position: absolute; top: 0; left: 0">
       <wx-open-launch-weapp appid="wx0bc995dace29b2ba" path="pages/banner/index">
         <component :is="'script'" type="text/wxtag-template">
@@ -40,6 +42,9 @@
       <div class="chat-content">
         <!-- <div class="answer-list"></div> -->
         <div class="chat-msg" ref="scrollRef">
+          <div class="default-question">
+            <div class="quest-item" @click="hanlderQuest" v-for="i in 10">你好吗</div>
+          </div>
           <template v-for="(i, index) in messages">
             <div class="ask" v-if="i.role == 'user'">
               <div>{{ i.content }}</div>
@@ -66,6 +71,7 @@ import jsonp from "jsonp";
 import OpenAI from "openai";
 import Swiper from "swiper";
 import Dialog from "./dialog.vue";
+import Header from "@/components/header/index.vue";
 import "swiper/css/swiper.css";
 import { mapData, typeData } from "./data.js";
 
@@ -95,6 +101,15 @@ let dataAll = {
   stream: true,
 };
 const isLoading = ref(false);
+const hanlderQuest = () => {
+  if (isLoading.value) {
+    return;
+  }
+  messages.value.push({ content: "你好吗", role: "user" });
+  // answers.value.push(JSON.parse(JSON.stringify(chat.value)));
+  autoScroll();
+  handleRequest();
+};
 const sendChat = () => {
   if (chat.value.content == "" || isLoading.value) {
     return;
@@ -257,40 +272,157 @@ const goLocation = (index) => {
   }
 };
 const initMap = async () => {
+  window._AMapSecurityConfig = {
+    securityJsCode: "2d0885f937e5fa6d093830e1765f593d",
+  };
   const _AMap = await AMapLoader.load({
-    key: "655ac083de961ed970f2be4ba23b3c9f",
+    // key: "655ac083de961ed970f2be4ba23b3c9f",//玉骑账号
+    key: "b19c9847b3775cd993c5a8a71c5fa1a0",
     version: "2.0",
-    plugins: ["AMap.MoveAnimation", "AMap.ImageLayer", "AMap.TileLayer", "AMap.DistrictSearch"],
+    plugins: ["AMap.MoveAnimation", "AMap.ImageLayer", "AMap.TileLayer", "AMap.DistrictSearch", "AMap.Walking"],
   });
   AMap = _AMap;
 
   addImageLayer();
 
-  const layer = new AMap.createDefaultLayer({
-    visible: true, // 是否可见
-    opacity: 1, // 透明度
-    zIndex: 10, // 叠加层级
-  });
+  // const layer = new AMap.createDefaultLayer({
+  //   visible: true, // 是否可见
+  //   opacity: 1, // 透明度
+  //   zIndex: 10, // 叠加层级
+  // });
   var tilerLayer = new AMap.TileLayer({
     zIndex: 10,
     getTileUrl: function (x, y, z) {
       //return /*dir*/'tiles/' + z + '/' + x + '_' + y + '.png';
       // return /*dir*/ "tiles/" + z + "/" + x + "_" + y + ".png";
-      return /*dir*/ "tiles/" + z + "/" + x + "/" + y + ".png";
+      return /*dir*/ "static/tiles/" + z + "/" + x + "/" + y + ".png";
     },
   });
   map = new AMap.Map("amap", {
     viewMode: "2D",
+    mapStyle: "amap://styles/76c9ffde986e653b6c8dc2bba6a9186e", //设置地图的显示样式
+    labels: true,
     zoom: 10, // 地图显示的缩放级别
     zooms: [8, 18],
     // center: [106.837106, 29.712762],
     // center: [114.2983, 30.5466],
     center: [113.236426, 29.138033],
+    // center: [116.397428, 39.90923], //地图中心点
     resizeEnable: true, // 是否监控地图容器尺寸变化
     // layers: [layer, imageLayer],
-    layers: [layer],
+    // layers: [layer],
+    // features: ["bg", "point", "road"],
   });
+
   // map.add(tilerLayer);
+  // 当前示例的目标是展示如何根据规划结果绘制路线，因此walkOption为空对象
+  // var walkingOption = {};
+
+  // // 步行导航
+  // var walking = new AMap.Walking(walkingOption);
+
+  // //根据起终点坐标规划步行路线
+  // walking.search([116.399028, 39.845042], [116.436281, 39.880719], function (status, result) {
+
+  //   if (status === "complete") {
+  //     if (result.routes && result.routes.length) {
+  //       drawRoute(result.routes[0]);
+  //       // log.success('绘制步行路线完成')
+  //     }
+  //   } else {
+  //     // log.error('步行路线数据查询失败' + result)
+  //   }
+  // });
+
+  function drawRoute(route) {
+    var path = parseRouteToPath(route);
+
+    var startMarker = new AMap.Marker({
+      position: path[0],
+      icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
+      map: map,
+      anchor: "bottom-center",
+    });
+
+    var endMarker = new AMap.Marker({
+      position: path[path.length - 1],
+      icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
+      map: map,
+      anchor: "bottom-center",
+    });
+
+    var routeLine = new AMap.Polyline({
+      path: path,
+      isOutline: true,
+      outlineColor: "#fff",
+      borderWeight: 1,
+      strokeWeight: 4,
+      strokeColor: "red",
+      strokeOpacity: 0.9,
+      showDir: true,
+      lineJoin: "round",
+    });
+
+    map.add(routeLine);
+
+    // 调整视野达到最佳显示区域
+    map.setFitView([startMarker, endMarker, routeLine]);
+  }
+
+  // 解析WalkRoute对象，构造成AMap.Polyline的path参数需要的格式
+  // WalkRoute对象的结构文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkRoute
+  function parseRouteToPath(route) {
+    var path = [];
+
+    for (var i = 0, l = route.steps.length; i < l; i++) {
+      var step = route.steps[i];
+
+      for (var j = 0, n = step.path.length; j < n; j++) {
+        path.push(step.path[j]);
+      }
+    }
+
+    return path;
+  }
+
+  // AMap.plugin(["AMap.PlaceSearch"], function () {
+  //   //构造地点查询类
+  //   var placeSearch = new AMap.PlaceSearch({
+  //     pageSize: 5, // 单页显示结果条数
+  //     pageIndex: 1, // 页码
+  //     city: "010", // 兴趣点城市
+  //     citylimit: true, //是否强制限制在设置的城市内搜索
+  //     // map: map, // 展现结果的地图实例
+  //     // panel: "panel", // 结果列表将在此容器中进行展示。
+  //     autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+  //   });
+  //   //关键字查询
+  //   placeSearch.search("停车场", function (status, result) {
+  //     // 查询成功时，result即对应匹配的POI信息
+  //     console.error(result);
+  //     var pois = result.poiList.pois;
+  //     for (var i = 0; i < pois.length; i++) {
+  //       var poi = pois[i];
+  //       var marker = [];
+  //       marker[i] = new AMap.Marker({
+  //         position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+  //         title: poi.name,
+  //       });
+  //       // 将创建的点标记添加到已有的地图实例：
+  //       map.add(marker[i]);
+  //       marker[i].on("click", () => {
+  //         console.error(1);
+  //       });
+  //     }
+  //     // map.setFitView();
+  //   });
+  // });
+
+  // map.setFeatures(["bg", "road", "building"]);
+
+  // map.setFeatures(["bg", "road", "roadLabel"], true); // 显示背景、道路和建筑物
+  // map.setFeatures(['roadLabel'], false); // 关闭道路名称显示
+
   // var circle = new AMap.Rectangle({
   //   bounds: new AMap.Bounds(
   //     [106.837106, 29.712762], // 左下  手绘图左下相对于地图的经纬度
@@ -323,6 +455,11 @@ const initMap = async () => {
   });
   map.on("zoomchange", () => {
     console.log("当前缩放级别:", map.getZoom());
+    // if (map.getZoom() < 10 || map.getZoom() > 15) {
+    //   map.remove(tilerLayer);
+    // } else {
+    //   map.add(tilerLayer);
+    // }
   });
   setMarker();
 
@@ -423,8 +560,13 @@ const openApp = () => {
 
   wx.miniProgram.navigateTo({ url: path });
 };
-const switchView = (type) => {
-  map.setCenter([113.236426, 29.138033], true);
+const switchView = () => {
+  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: 南京市
@@ -493,7 +635,7 @@ onMounted(() => {
     background: url("@/assets/images/tabBg.png") no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    top: 0;
+    top: 1.0667rem;
     left: 0;
     z-index: 10;
     overflow-x: hidden;
@@ -647,6 +789,21 @@ onMounted(() => {
         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;
+          }
+        }
         > div {
           overflow: hidden;
         }

src/views/season/index.vue

@@ -1,6 +1,7 @@
 <!--  -->
 <template>
   <div class="season" :class="season">
+    <Header title="洞庭幻波" />
     <div class="effect"></div>
     <div class="btns">
       <div @click="showLayer(1)" class="btn-item st"></div>
@@ -30,6 +31,7 @@
 <script setup>
 import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
 import world from "./world.vue";
+import Header from "@/components/header/index.vue";
 const showLayerType = ref(0);
 const season = ref("spring");
 const change = (type) => {
@@ -105,7 +107,7 @@ const showLayer = (type) => {
   .btns {
     position: absolute;
     right: 0.1333rem;
-    top: 1.0667rem;
+    top: 2.1333rem;
     .btn-item {
       width: 1.1867rem;
       height: 2rem;