|
|
@@ -14,10 +14,23 @@
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<div ref="compass" class="compass-box">
|
|
|
- <div class="circle-box" :style="`transform: translateX(-50%)rotate(${rotateNum + tabNum}deg)`">
|
|
|
- <div class="bg-active" :style="`transform:rotate(${getDeg()}deg);`"></div>
|
|
|
+ <div
|
|
|
+ class="circle-box"
|
|
|
+ :style="`transform: translateX(-50%)rotate(${rotateNum + tabNum}deg)`"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="bg-active"
|
|
|
+ :style="`transform:rotate(${getDeg()}deg);`"
|
|
|
+ ></div>
|
|
|
<div class="circle-content">
|
|
|
- <div class="circle-item" :class="{ active: tabType == i.type }" @click="chooseItem(i, index)" v-for="(i, index) in typeData">{{ i.title }}</div>
|
|
|
+ <div
|
|
|
+ class="circle-item"
|
|
|
+ :class="{ active: tabType == i.title }"
|
|
|
+ @click="chooseItem(i, index)"
|
|
|
+ v-for="(i, index) in typeData"
|
|
|
+ >
|
|
|
+ {{ i.title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line-btn" @click="openLineList()"></div>
|
|
|
@@ -41,12 +54,24 @@
|
|
|
<!-- </div> -->
|
|
|
|
|
|
<!-- <div class="open-line" @click="showLineList = true"></div> -->
|
|
|
- <div class="open-chat" @click="switchChat()" :class="roleShow ? 'in' : 'out'"></div>
|
|
|
+ <div
|
|
|
+ class="open-chat"
|
|
|
+ @click="switchChat()"
|
|
|
+ :class="roleShow ? 'in' : 'out'"
|
|
|
+ ></div>
|
|
|
<div class="slide-tab">
|
|
|
<div class="btn" @click="slideToView('/food?mac=1')"></div>
|
|
|
<div class="btn" @click="slideToView('/video')"></div>
|
|
|
- <div class="td-btn" :class="{ active: tabType == '3d' }" @click="goTd"></div>
|
|
|
- <div class="audio-btn" :class="{ active: audioStatus }" @click="switchAudio"></div>
|
|
|
+ <div
|
|
|
+ class="td-btn"
|
|
|
+ :class="{ active: tabType == '3d' }"
|
|
|
+ @click="goTd"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="audioPath-btn"
|
|
|
+ :class="{ active: audioStatus }"
|
|
|
+ @click="switchAudio"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
<div class="chat-box" :class="{ show: showChat }">
|
|
|
<!-- <div class="icon" @click="switchChat()"></div> -->
|
|
|
@@ -63,7 +88,13 @@
|
|
|
<div class="chat-msg" ref="scrollRef">
|
|
|
<div class="default-question">
|
|
|
<div class="question-scroll" :style="`width:${questW}px;`">
|
|
|
- <div class="quest-item" @click="hanlderQuest(i)" v-for="i in questList">{{ i }}</div>
|
|
|
+ <div
|
|
|
+ class="quest-item"
|
|
|
+ @click="hanlderQuest(i)"
|
|
|
+ v-for="i in questList"
|
|
|
+ >
|
|
|
+ {{ i }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<template v-for="(i, index) in messages">
|
|
|
@@ -77,7 +108,13 @@
|
|
|
</div>
|
|
|
<div class="ipt-box">
|
|
|
<div class="ipt-bg">
|
|
|
- <div class="chat-text"><input v-model.trim="chat.content" type="text" placeholder="发消息" /></div>
|
|
|
+ <div class="chat-text">
|
|
|
+ <input
|
|
|
+ v-model.trim="chat.content"
|
|
|
+ type="text"
|
|
|
+ placeholder="发消息"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
<div class="send-btn" @click="sendChat"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -85,14 +122,29 @@
|
|
|
</div>
|
|
|
|
|
|
<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">
|
|
|
+ <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 trvelList">
|
|
|
+ <div
|
|
|
+ v-for="i in trvelList"
|
|
|
+ :key="i.id"
|
|
|
+ class="list-item"
|
|
|
+ :style="{
|
|
|
+ background: `url(${BASE_URL}${i.thumb}) no-repeat center / cover`,
|
|
|
+ }"
|
|
|
+ @click.stop="goLine(i)"
|
|
|
+ >
|
|
|
<div class="content">
|
|
|
<p class="title">{{ i.name }}</p>
|
|
|
- <span class="tag">拍照必打卡{{ lines }}</span>
|
|
|
- <p class="desc">预计用时：{{ i.time }}日，共{{ i.list.length }}个景点</p>
|
|
|
+ <span class="tag">{{ i.tag }}</span>
|
|
|
+ <p class="intro">
|
|
|
+ 预计用时：{{ i.expect }}日，共{{ i.sites.length }}个景点
|
|
|
+ </p>
|
|
|
</div>
|
|
|
<div class="ticket"></div>
|
|
|
</div>
|
|
|
@@ -102,16 +154,23 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <Dialog v-if="dialogData" :tabType="tabType" :dialogData="dialogData" @close="closeDetails" />
|
|
|
+ <Dialog
|
|
|
+ v-if="dialogData"
|
|
|
+ :tabType="tabType"
|
|
|
+ :dialogData="dialogData"
|
|
|
+ @close="closeDetails"
|
|
|
+ />
|
|
|
|
|
|
- <div class="vr-content" v-if="vrLink">
|
|
|
- <div class="vr-back" :class="{ pd: tabType == '3d' }" @click="linkBack"><img src="@/assets/images/vr-back.png" alt="" /></div>
|
|
|
- <iframe :src="vrLink" frameborder="0"></iframe>
|
|
|
+ <div class="vr-content" v-if="vrUrl">
|
|
|
+ <div class="vr-back" :class="{ pd: tabType == '3d' }" @click="linkBack">
|
|
|
+ <img src="@/assets/images/vr-back.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <iframe :src="vrUrl" frameborder="0"></iframe>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { nextTick, onMounted, ref, watch, computed } from "vue";
|
|
|
+import { nextTick, onMounted, ref, computed } from "vue";
|
|
|
import { mapConfig, deepseekConfig } from "@/utils/config.js";
|
|
|
|
|
|
import Dialog from "./dialog.vue";
|
|
|
@@ -130,13 +189,15 @@ import OpenAI from "openai";
|
|
|
import Swiper from "swiper";
|
|
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
import axios from "axios";
|
|
|
+import { debounce } from "lodash";
|
|
|
+import { getSitePageApi, getWayPageApi, getSiteApi } from "@/api";
|
|
|
|
|
|
import { useAudioStore } from "@/stores/audio";
|
|
|
const audioStore = useAudioStore();
|
|
|
const audioStatus = computed(() => audioStore.audioStatus);
|
|
|
const mapData = ref(null);
|
|
|
const typeData = ref(null);
|
|
|
-const weightData = ref(null);
|
|
|
+const BASE_URL = import.meta.env.VITE_BASE_URL;
|
|
|
let isPlay = true;
|
|
|
const switchAudio = () => {
|
|
|
audioStore.setState();
|
|
|
@@ -146,7 +207,7 @@ const linkBack = () => {
|
|
|
if (isPlay) {
|
|
|
audioStore.setState({ status: true });
|
|
|
}
|
|
|
- vrLink.value = "";
|
|
|
+ vrUrl.value = "";
|
|
|
};
|
|
|
const getData = async () => {
|
|
|
axios
|
|
|
@@ -175,32 +236,24 @@ const getData = async () => {
|
|
|
.catch((error) => {
|
|
|
console.log(error);
|
|
|
});
|
|
|
- await axios
|
|
|
- .get("./static/data/weight.json")
|
|
|
- .then((res) => {
|
|
|
- weightData.value = res.data;
|
|
|
+ await getSitePageApi({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 9999,
|
|
|
+ }).then((siteDate) => {
|
|
|
+ mapData.value = siteDate.records;
|
|
|
+
|
|
|
+ getWayPageApi({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 9999,
|
|
|
})
|
|
|
- .catch((error) => {
|
|
|
- console.log(error);
|
|
|
- });
|
|
|
- await axios
|
|
|
- .get("./static/data/map.json")
|
|
|
- .then((res) => {
|
|
|
- mapData.value = res.data;
|
|
|
-
|
|
|
- axios
|
|
|
- .get("./static/data/line.json")
|
|
|
- .then((res) => {
|
|
|
- trvelList.value = res.data;
|
|
|
- initMap();
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.log(error);
|
|
|
- });
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.log(error);
|
|
|
- });
|
|
|
+ .then((res) => {
|
|
|
+ trvelList.value = res.records;
|
|
|
+ initMap();
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ });
|
|
|
};
|
|
|
let iconList = {
|
|
|
tagIcon1,
|
|
|
@@ -217,19 +270,21 @@ const showLineList = ref(false);
|
|
|
const showLineBox = ref(false);
|
|
|
const initTrvel = () => {
|
|
|
trvelList.value.forEach((item, index) => {
|
|
|
- let stratObj = mapData.value.find((i) => item.list[0] == i.id);
|
|
|
- let endObj = mapData.value.find((i) => item.list[item.list.length - 1] == i.id);
|
|
|
+ let stratObj = mapData.value.find((i) => item.sites[0].id == i.id);
|
|
|
+ let endObj = mapData.value.find(
|
|
|
+ (i) => item.sites[item.sites.length - 1].id == i.id
|
|
|
+ );
|
|
|
|
|
|
- var startLngLat = [stratObj.location.split(",")[0], stratObj.location.split(",")[1]]; //起始点坐标
|
|
|
- var endLngLat = [endObj.location.split(",")[0], endObj.location.split(",")[1]]; //终点坐标
|
|
|
+ var startLngLat = [stratObj.lon, stratObj.lat]; //起始点坐标
|
|
|
+ var endLngLat = [endObj.lon, endObj.lat]; //终点坐标
|
|
|
|
|
|
var opts = {
|
|
|
waypoints: [], //途经点参数，最多支持传入16个途经点
|
|
|
};
|
|
|
- item.list.map((j_item, j_index) => {
|
|
|
- if (j_index != 0 || j_index != item.list.length - 1) {
|
|
|
- let obj = mapData.value.find((data) => j_item == data.id);
|
|
|
- opts.waypoints.push([obj.location.split(",")[0], obj.location.split(",")[1]]);
|
|
|
+ item.sites.map((j_item, j_index) => {
|
|
|
+ if (j_index != 0 || j_index != item.sites.length - 1) {
|
|
|
+ let obj = mapData.value.find((data) => j_item.id == data.id);
|
|
|
+ opts.waypoints.push([obj.lon, obj.lat]);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
@@ -253,23 +308,28 @@ const initTrvel = () => {
|
|
|
});
|
|
|
};
|
|
|
const goTd = () => {
|
|
|
- chooseItem({ type: "3d" });
|
|
|
+ chooseItem({ title: "3d" });
|
|
|
};
|
|
|
|
|
|
-const getHtml = (data) => {
|
|
|
- activeTagData.value = data;
|
|
|
+const getHtml = async (data) => {
|
|
|
+ const siteDetail = await getSiteApi(data.id);
|
|
|
+ activeTagData.value = siteDetail;
|
|
|
let calssName = "vr-btn";
|
|
|
- if (tabType.value == "3d" && data.modelLink) {
|
|
|
+ if (tabType.value == "3d" && siteDetail.modelUrl) {
|
|
|
calssName = "vr-btn model-btn";
|
|
|
}
|
|
|
let html = `<div class="map-window" id="mapWindow">
|
|
|
<div class="img-box" id="vrBtn">
|
|
|
- <img src="./static/image/全部/${data.images[0]}">
|
|
|
- <div style="${data.vrLink || (tabType.value == "3d" && data.modelLink) ? "" : "display:none"}" class="${calssName}" ></div>
|
|
|
+ <img src="${BASE_URL}/${siteDetail.files?.[0].filePath}">
|
|
|
+ <div style="${
|
|
|
+ siteDetail.vrUrl || (tabType.value == "3d" && siteDetail.modelUrl)
|
|
|
+ ? ""
|
|
|
+ : "display:none"
|
|
|
+ }" class="${calssName}" ></div>
|
|
|
<div class="close-btn" id="closeBtn"></div>
|
|
|
</div>
|
|
|
<div class="map-window-controls">
|
|
|
- <div class="title">${data.name}</div>
|
|
|
+ <div class="title">${siteDetail.name}</div>
|
|
|
<div class="details-btn" id="detailsBtn">详情</div>
|
|
|
</div>
|
|
|
</div>`;
|
|
|
@@ -277,7 +337,7 @@ const getHtml = (data) => {
|
|
|
return html;
|
|
|
};
|
|
|
const activeTagData = ref(null);
|
|
|
-const vrLink = ref(null);
|
|
|
+const vrUrl = ref(null);
|
|
|
const openDetails = (data) => {
|
|
|
dialogData.value = activeTagData.value;
|
|
|
audioStore.setState({ status: false });
|
|
|
@@ -289,21 +349,21 @@ const closeDetails = () => {
|
|
|
}
|
|
|
};
|
|
|
const openVrLink = () => {
|
|
|
- // vrLink.value = activeTagData.value.vrLink;
|
|
|
+ // vrUrl.value = activeTagData.value.vrUrl;
|
|
|
|
|
|
if (tabType.value == "3d") {
|
|
|
- vrLink.value = activeTagData.value.modelLink;
|
|
|
- if (activeTagData.value.modelLink) {
|
|
|
- // vrLink.value = activeTagData.value.vrLink;
|
|
|
- vrLink.value = activeTagData.value.modelLink;
|
|
|
+ vrUrl.value = activeTagData.value.modelUrl;
|
|
|
+ if (activeTagData.value.modelUrl) {
|
|
|
+ // vrUrl.value = activeTagData.value.vrUrl;
|
|
|
+ vrUrl.value = activeTagData.value.modelUrl;
|
|
|
} else {
|
|
|
openDetails();
|
|
|
}
|
|
|
} else {
|
|
|
- vrLink.value = activeTagData.value.vrLink;
|
|
|
- if (activeTagData.value.vrLink) {
|
|
|
- // vrLink.value = activeTagData.value.vrLink;
|
|
|
- vrLink.value = activeTagData.value.vrLink;
|
|
|
+ vrUrl.value = activeTagData.value.vrUrl;
|
|
|
+ if (activeTagData.value.vrUrl) {
|
|
|
+ // vrUrl.value = activeTagData.value.vrUrl;
|
|
|
+ vrUrl.value = activeTagData.value.vrUrl;
|
|
|
} else {
|
|
|
openDetails();
|
|
|
}
|
|
|
@@ -337,22 +397,22 @@ const closeTag = (e) => {
|
|
|
const getDeg = () => {
|
|
|
let deg = 180;
|
|
|
switch (tabType.value) {
|
|
|
- case 1:
|
|
|
+ case "历史文化":
|
|
|
deg = -90;
|
|
|
break;
|
|
|
- case 2:
|
|
|
+ case "自然探索":
|
|
|
deg = -60;
|
|
|
break;
|
|
|
- case 3:
|
|
|
+ case "亲子休闲":
|
|
|
deg = -30;
|
|
|
break;
|
|
|
- case 4:
|
|
|
+ case "城市烟火":
|
|
|
deg = 0;
|
|
|
break;
|
|
|
- case 5:
|
|
|
+ case "交通住宿":
|
|
|
deg = 30;
|
|
|
break;
|
|
|
- case 6:
|
|
|
+ case "政府驻地":
|
|
|
deg = 60;
|
|
|
break;
|
|
|
}
|
|
|
@@ -392,7 +452,7 @@ let AMap = null;
|
|
|
let map = null;
|
|
|
let imageLayer = null;
|
|
|
|
|
|
-const tabType = ref(6);
|
|
|
+const tabType = ref("政府驻地");
|
|
|
let openaiA = new OpenAI(deepseekConfig);
|
|
|
const questList = ref([]);
|
|
|
|
|
|
@@ -475,7 +535,7 @@ const initTab = () => {
|
|
|
|
|
|
const dialogData = ref(null);
|
|
|
const chooseItem = (i, index) => {
|
|
|
- tabType.value = i.type;
|
|
|
+ tabType.value = i.title;
|
|
|
closeTag();
|
|
|
switchView(false);
|
|
|
if (markers.length) {
|
|
|
@@ -506,38 +566,17 @@ let clusters = null;
|
|
|
|
|
|
const setMarkerCluster = () => {
|
|
|
let pointers = [];
|
|
|
- let weights = weightData.value[tabType.value];
|
|
|
mapData.value.forEach((item, j_index) => {
|
|
|
- let weight = 1;
|
|
|
+ let weight = item.weight ?? 1;
|
|
|
if (tabType.value == "3d") {
|
|
|
- if (item.modelLink) {
|
|
|
- let pos = item.location.split(",");
|
|
|
- if (weights) {
|
|
|
- let index = weights.findIndex((w) => w == item.id);
|
|
|
- if (index >= 0) {
|
|
|
- // console.error(item.name, index, weights.length);
|
|
|
- weight = weights.length - index + 1;
|
|
|
- }
|
|
|
- }
|
|
|
- pointers.push({ weight, lnglat: [pos[0], pos[1]], info: item });
|
|
|
+ if (item.modelUrl) {
|
|
|
+ pointers.push({ weight, lnglat: [item.lon, item.lat], info: item });
|
|
|
|
|
|
// return true;
|
|
|
}
|
|
|
} else {
|
|
|
if (item.type == tabType.value) {
|
|
|
- let pos = item.location.split(",");
|
|
|
- if (weights) {
|
|
|
- let index = weights.findIndex((w) => w == item.id);
|
|
|
- if (index >= 0) {
|
|
|
- // console.error(item.name, index, weights.length);
|
|
|
- weight = weights.length - index + 1 + mapData.value.length;
|
|
|
- } else {
|
|
|
- weight = j_index;
|
|
|
- }
|
|
|
- } else {
|
|
|
- weight = j_index;
|
|
|
- }
|
|
|
- pointers.push({ weight, lnglat: [pos[0], pos[1]], info: item });
|
|
|
+ pointers.push({ weight, lnglat: [item.lon, item.lat], info: item });
|
|
|
|
|
|
// return true;
|
|
|
}
|
|
|
@@ -574,7 +613,19 @@ const setMarkerCluster = () => {
|
|
|
if (tabType.value == "3d") {
|
|
|
tagType = "3d";
|
|
|
}
|
|
|
- marker.setContent(`<div class="custom-marker"><p>${extData.name}</p><img style="width:${iconW}px;height:${iconH}px;" src="${iconList[`tagIcon${tagType}`]}" /></div>`);
|
|
|
+ marker.setContent(
|
|
|
+ `<div class="custom-marker"><p>${
|
|
|
+ extData.name
|
|
|
+ }</p><img style="width:${iconW}px;height:${iconH}px;" src="${
|
|
|
+ iconList[
|
|
|
+ `tagIcon${
|
|
|
+ tagType === "3d"
|
|
|
+ ? "3d"
|
|
|
+ : typeData.value.findIndex((i) => i.title === tagType) + 1
|
|
|
+ }`
|
|
|
+ ]
|
|
|
+ }" /></div>`
|
|
|
+ );
|
|
|
marker.setOffset(offset);
|
|
|
},
|
|
|
style: {
|
|
|
@@ -582,22 +633,21 @@ const setMarkerCluster = () => {
|
|
|
},
|
|
|
}
|
|
|
);
|
|
|
- clusters.on("click", hanlderClusterEvent);
|
|
|
+ clusters.on("click", debounce(hanlderClusterEvent, 200));
|
|
|
};
|
|
|
let wiondowButton,
|
|
|
vrBtn,
|
|
|
closeBtn = null;
|
|
|
-const hanlderClusterEvent = (e) => {
|
|
|
+const hanlderClusterEvent = async (e) => {
|
|
|
if (e.clusterData.length == 1) {
|
|
|
// dialogData.value = e.clusterData[0].info;
|
|
|
let data = e.clusterData[0].info;
|
|
|
- let center = data.location.split(",");
|
|
|
|
|
|
- map.setZoomAndCenter(map.getZoom(), center, false, 100);
|
|
|
+ map.setZoomAndCenter(map.getZoom(), [data.lon, data.lat], false, 100);
|
|
|
// return
|
|
|
infoWindow = new AMap.InfoWindow({
|
|
|
zIndex: 1000,
|
|
|
- content: getHtml(data), // 设置弹窗内容为自定义的HTML元素
|
|
|
+ content: await getHtml(data), // 设置弹窗内容为自定义的HTML元素
|
|
|
offset: new AMap.Pixel(0, -30), // 设置弹窗偏移量，可根据需要调整
|
|
|
});
|
|
|
|
|
|
@@ -614,7 +664,7 @@ const hanlderClusterEvent = (e) => {
|
|
|
}, 100);
|
|
|
} else {
|
|
|
setTimeout(() => {
|
|
|
- let center = e.clusterData[0].info.location.split(",");
|
|
|
+ let center = [e.clusterData[0].info.lon, e.clusterData[0].info.lat];
|
|
|
console.error(center);
|
|
|
map.setZoomAndCenter(map.getZoom() + 2, center, false, 300);
|
|
|
}, 0);
|
|
|
@@ -628,7 +678,17 @@ const initMap = async () => {
|
|
|
const _AMap = await AMapLoader.load({
|
|
|
key: mapConfig.key, //玉琦账号
|
|
|
version: "2.0",
|
|
|
- plugins: ["AMap.MoveAnimation", "AMap.ImageLayer", "AMap.TileLayer", "AMap.Geolocation", "AMap.DistrictSearch", "AMap.Driving", "AMap.Walking", "AMap.MarkerCluster", "AMap.InfoWindow"],
|
|
|
+ plugins: [
|
|
|
+ "AMap.MoveAnimation",
|
|
|
+ "AMap.ImageLayer",
|
|
|
+ "AMap.TileLayer",
|
|
|
+ "AMap.Geolocation",
|
|
|
+ "AMap.DistrictSearch",
|
|
|
+ "AMap.Driving",
|
|
|
+ "AMap.Walking",
|
|
|
+ "AMap.MarkerCluster",
|
|
|
+ "AMap.InfoWindow",
|
|
|
+ ],
|
|
|
});
|
|
|
AMap = _AMap;
|
|
|
|
|
|
@@ -674,24 +734,24 @@ const switchView = (effect = true) => {
|
|
|
let scale = 8.2;
|
|
|
if (data.length) {
|
|
|
switch (tabType.value) {
|
|
|
- case 1:
|
|
|
+ case "历史文化":
|
|
|
center = [113.333049, 29.101023];
|
|
|
scale = 8.45;
|
|
|
break;
|
|
|
- case 3:
|
|
|
+ case "亲子休闲":
|
|
|
scale = 9.09;
|
|
|
center = [113.272171, 28.979474];
|
|
|
break;
|
|
|
- case 5:
|
|
|
- case 4:
|
|
|
+ case "交通住宿":
|
|
|
+ case "城市烟火":
|
|
|
scale = 12.4;
|
|
|
center = [113.129162, 29.369332];
|
|
|
break;
|
|
|
- case 5:
|
|
|
+ case "交通住宿":
|
|
|
scale = 10.6;
|
|
|
center = [113.207352, 29.366234];
|
|
|
break;
|
|
|
- case 3:
|
|
|
+ case "亲子休闲":
|
|
|
// scale = 12;
|
|
|
break;
|
|
|
}
|
|
|
@@ -979,7 +1039,7 @@ onMounted(() => {
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
- .audio-btn {
|
|
|
+ .audioPath-btn {
|
|
|
width: 0.8933rem;
|
|
|
height: 0.8933rem;
|
|
|
background: url("@/assets/images/mapMusic.png") no-repeat;
|
|
|
@@ -1095,7 +1155,13 @@ onMounted(() => {
|
|
|
justify-content: space-between;
|
|
|
padding: 0 0.5333rem 0 0;
|
|
|
border-bottom: 1px solid;
|
|
|
- border-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)) 1 1;
|
|
|
+ border-image: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ rgba(0, 0, 0, 0),
|
|
|
+ rgba(0, 0, 0, 0.4),
|
|
|
+ rgba(0, 0, 0, 0)
|
|
|
+ )
|
|
|
+ 1 1;
|
|
|
|
|
|
> div {
|
|
|
display: flex;
|
|
|
@@ -1150,12 +1216,22 @@ onMounted(() => {
|
|
|
justify-content: center;
|
|
|
|
|
|
border-top: 1px solid;
|
|
|
- border-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)) 1 1;
|
|
|
+ border-image: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ rgba(0, 0, 0, 0),
|
|
|
+ rgba(0, 0, 0, 0.4),
|
|
|
+ rgba(0, 0, 0, 0)
|
|
|
+ )
|
|
|
+ 1 1;
|
|
|
.ipt-bg {
|
|
|
margin-top: 0.1333rem;
|
|
|
width: 8.0933rem;
|
|
|
height: 1.5733rem;
|
|
|
- background: linear-gradient(180deg, #ccb299 0%, rgba(188, 188, 188, 0) 100%);
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ #ccb299 0%,
|
|
|
+ rgba(188, 188, 188, 0) 100%
|
|
|
+ );
|
|
|
border-radius: 0.0933rem;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -1288,22 +1364,6 @@ onMounted(() => {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 0 0.56rem 0 0.5333rem;
|
|
|
- &:nth-of-type(1) {
|
|
|
- background: url("@/assets/images/line1.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- &:nth-of-type(2) {
|
|
|
- background: url("@/assets/images/line2.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- &:nth-of-type(3) {
|
|
|
- background: url("@/assets/images/line3.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- &:nth-of-type(4) {
|
|
|
- background: url("@/assets/images/line4.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
.content {
|
|
|
.title {
|
|
|
font-size: 0.4267rem;
|
|
|
@@ -1319,7 +1379,7 @@ onMounted(() => {
|
|
|
display: inline-block;
|
|
|
margin-bottom: 0.16rem;
|
|
|
}
|
|
|
- .desc {
|
|
|
+ .intro {
|
|
|
font-size: 0.2667rem;
|
|
|
color: #6a4934;
|
|
|
}
|
chenlei