|
|
@@ -15,7 +15,7 @@
|
|
|
<div class="circle-box" :style="`transform: translateX(-50%)rotate(${rotateNum + tabNum}deg)`">
|
|
|
<div class="bg-active" :style="`transform:rotate(${getDeg()}deg);`"></div>
|
|
|
<div class="circle-content">
|
|
|
- <div class="circle-item" :class="{ active: index == 3 }" @click="chooseItem(i, index)" v-for="(i, index) in typeData">{{ i.title }}</div>
|
|
|
+ <div class="circle-item" :class="{ active: tabType == i.type }" @click="chooseItem(i, index)" v-for="(i, index) in typeData">{{ i.title }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line-btn" @click="showLineList = true"></div>
|
|
|
@@ -40,25 +40,27 @@
|
|
|
|
|
|
<!-- <div class="open-line" @click="showLineList = true"></div> -->
|
|
|
<div class="open-chat" @click="switchChat()"></div>
|
|
|
-
|
|
|
+ <div class="slide-tab">
|
|
|
+ <div class="btn"></div>
|
|
|
+ <div class="btn"></div>
|
|
|
+ </div>
|
|
|
<div class="chat-box" :class="{ show: showChat }">
|
|
|
- <div class="icon" @click="switchChat()"></div>
|
|
|
- <!-- <div class="chat-tab" @click="switchChat()">
|
|
|
+ <!-- <div class="icon" @click="switchChat()"></div> -->
|
|
|
+ <div class="chat-tab">
|
|
|
<div>
|
|
|
- <div>
|
|
|
- <div class="logo"></div>
|
|
|
- <div class="text">带你深度探索岳阳风景</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="icon"></div>
|
|
|
+ <div class="logo"></div>
|
|
|
+ <div class="text">带你深度探索岳阳风景</div>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
+ <div class="icon" @click="switchChat()"></div>
|
|
|
+ </div>
|
|
|
<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(i)" v-for="i in questList">{{ i }}</div>
|
|
|
+ <div class="question-scroll" :style="`width:${questW}px;`">
|
|
|
+ <div class="quest-item" @click="hanlderQuest(i)" v-for="i in questList">{{ i }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<template v-for="(i, index) in messages">
|
|
|
<div class="ask" v-if="i.role == 'user'">
|
|
|
@@ -70,8 +72,10 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="ipt-box">
|
|
|
- <div class="chat-text"><input v-model.trim="chat.content" type="text" placeholder="发消息" /></div>
|
|
|
- <div class="send-btn" @click="sendChat"></div>
|
|
|
+ <div class="ipt-bg">
|
|
|
+ <div class="chat-text"><input v-model.trim="chat.content" type="text" placeholder="发消息" /></div>
|
|
|
+ <div class="send-btn" @click="sendChat"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -344,14 +348,12 @@ const setMarker = () => {
|
|
|
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,
|
|
|
+ label: {
|
|
|
+ // Marker标签
|
|
|
+ direction: "top",
|
|
|
+ content: extData.name, // 标签内容
|
|
|
+ offset: new AMap.Pixel(0, -5), // 标签偏移量，可根据需要调整
|
|
|
+ },
|
|
|
// icon: data[i].iconSize ? customIcon : null, //添加 icon 图标 URL
|
|
|
icon: customIcon, //添加 icon 图标 URL
|
|
|
// title: data[i].name,
|
|
|
@@ -917,12 +919,22 @@ const searchPos = () => {
|
|
|
|
|
|
const rotateNum = ref(0);
|
|
|
let tabNum = ref(0);
|
|
|
-const deg = ref(0);
|
|
|
+const questW = ref(10000);
|
|
|
onMounted(() => {
|
|
|
initMap();
|
|
|
// weixinConfig();
|
|
|
nextTick(() => {
|
|
|
initTab();
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ let questItems = document.querySelectorAll(".quest-item");
|
|
|
+ let w = 0;
|
|
|
+ questItems.forEach((item, index) => {
|
|
|
+ console.error(item.getBoundingClientRect().width);
|
|
|
+ w += item.getBoundingClientRect().width + 10;
|
|
|
+ });
|
|
|
+ questW.value = w;
|
|
|
+ }, 0);
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
@@ -1060,8 +1072,35 @@ onMounted(() => {
|
|
|
background: url("@/assets/images/deepseekBtn.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
- bottom: 0.9867rem;
|
|
|
- right: 0.4267rem;
|
|
|
+ bottom: 20%;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+ .slide-tab {
|
|
|
+ width: 1.4933rem;
|
|
|
+ height: 4.6933rem;
|
|
|
+ background: url("@/assets/images/slideTab.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 16%;
|
|
|
+ right: 0.3733rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .btn {
|
|
|
+ width: 1.0133rem;
|
|
|
+ height: 1.56rem;
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ background: url("@/assets/images/szms.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ background: url("@/assets/images/dmyy.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 0.6667rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.tab-bar {
|
|
|
width: 100%;
|
|
|
@@ -1121,7 +1160,7 @@ onMounted(() => {
|
|
|
height: 100%;
|
|
|
}
|
|
|
.chat-box {
|
|
|
- width: 9.6rem;
|
|
|
+ width: 100%;
|
|
|
height: 12.1467rem;
|
|
|
position: fixed;
|
|
|
background: url("@/assets/images/chatBg.png") no-repeat;
|
|
|
@@ -1129,143 +1168,165 @@ onMounted(() => {
|
|
|
bottom: 0;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, 100%);
|
|
|
- z-index: 10;
|
|
|
+ z-index: 1000;
|
|
|
transition: all 0.3s linear;
|
|
|
- padding-top: 2.1333rem;
|
|
|
+ // padding: 0.9333rem 1.2rem 1.3333rem .9333rem;
|
|
|
+ padding: 0.9333rem 0.8rem 0 0.8rem;
|
|
|
&.show {
|
|
|
transform: translate(-50%, 0);
|
|
|
|
|
|
.chat-tab {
|
|
|
- margin-bottom: 0;
|
|
|
+ // margin-bottom: 0;
|
|
|
.icon {
|
|
|
- transform: rotate(180deg);
|
|
|
+ // transform: rotate(180deg);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .icon {
|
|
|
- width: 0.6133rem;
|
|
|
- height: 0.5867rem;
|
|
|
- background: url("@/assets/images/slideIcon.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-left: 0.6rem;
|
|
|
- position: absolute;
|
|
|
- right: 1.4533rem;
|
|
|
- top: 1.2rem;
|
|
|
- }
|
|
|
+ // .icon {
|
|
|
+ // width: 0.6133rem;
|
|
|
+ // height: 0.5867rem;
|
|
|
+ // background: url("@/assets/images/slideIcon.png") no-repeat;
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ // margin-left: 0.6rem;
|
|
|
+ // position: absolute;
|
|
|
+ // right: 1.4533rem;
|
|
|
+ // top: 1.2rem;
|
|
|
+ // }
|
|
|
.chat-tab {
|
|
|
- width: 8.8rem;
|
|
|
- height: 1.7333rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 1.6rem;
|
|
|
// background: url("@/assets/images/chatTab.png") no-repeat;
|
|
|
// background-size: 100% 100%;
|
|
|
position: relative;
|
|
|
- margin-bottom: 0.4rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ 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;
|
|
|
|
|
|
> 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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 0.56rem;
|
|
|
- height: 0.56rem;
|
|
|
- background: url("@/assets/images/slideIcon.png") no-repeat;
|
|
|
+ justify-content: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ height: 1.6rem;
|
|
|
+ .logo {
|
|
|
+ width: 1.96rem;
|
|
|
+ height: 1.96rem;
|
|
|
+ background: url("@/assets/images/deepseek.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- margin-left: 0.6rem;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 0.6133rem;
|
|
|
+ height: 0.5867rem;
|
|
|
+ background: url("@/assets/images/slideIcon.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ // margin-left: 0.6rem;
|
|
|
}
|
|
|
}
|
|
|
.chat-content {
|
|
|
width: 100%;
|
|
|
- height: 9.76rem;
|
|
|
+ height: calc(100% - 1.6rem);
|
|
|
// background: url("@/assets/images/chatBg.png") no-repeat;
|
|
|
// background-size: 100% 100%;
|
|
|
margin-bottom: 0.5333rem;
|
|
|
- padding: 0.6667rem 0.8rem 1.3333rem 1.2rem;
|
|
|
+ // padding: 0.6667rem 0.8rem 1.3333rem 1.2rem;
|
|
|
position: relative;
|
|
|
-
|
|
|
+ // padding: 0 0.9333rem;
|
|
|
.ipt-box {
|
|
|
width: 100%;
|
|
|
- height: 0.7067rem;
|
|
|
+ height: 2.8rem;
|
|
|
position: absolute;
|
|
|
- bottom: 0.5333rem;
|
|
|
+ bottom: 0;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ align-items: flex-start;
|
|
|
justify-content: center;
|
|
|
- .chat-text {
|
|
|
- width: 6.2933rem;
|
|
|
- height: 100%;
|
|
|
- background: #fff;
|
|
|
- border-radius: 0.16rem;
|
|
|
- overflow: hidden;
|
|
|
- border: 0.9975px solid #adadad;
|
|
|
- input {
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- font-size: 0.2667rem;
|
|
|
- padding: 0 0.5333rem;
|
|
|
- line-height: 0.7067rem;
|
|
|
+
|
|
|
+ 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;
|
|
|
+ .ipt-bg {
|
|
|
+ margin-top: 0.1333rem;
|
|
|
+ width: 8.0933rem;
|
|
|
+ height: 1.5733rem;
|
|
|
+ background: linear-gradient(180deg, #ccb299 0%, rgba(188, 188, 188, 0) 100%);
|
|
|
+ border-radius: 0.0933rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .chat-text {
|
|
|
+ width: 6.2933rem;
|
|
|
+ height: 0.7067rem;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 0.16rem;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 0.9975px solid #adadad;
|
|
|
+ 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.8rem;
|
|
|
+ height: 0.8rem;
|
|
|
+ background: url("@/assets/images/sendBtn.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-left: 0.16rem;
|
|
|
}
|
|
|
- }
|
|
|
- .send-btn {
|
|
|
- width: 0.7067rem;
|
|
|
- height: 0.7067rem;
|
|
|
- background: url("@/assets/images/sendBtn.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-left: 0.16rem;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.chat-msg {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ height: calc(100% - 2.8rem);
|
|
|
font-weight: 400;
|
|
|
font-size: 0.3333rem;
|
|
|
line-height: 0.4667rem;
|
|
|
- padding-right: 0.2667rem;
|
|
|
+ padding: 0.1333rem 0.2667rem 0.1333rem 0;
|
|
|
overflow-y: auto;
|
|
|
.default-question {
|
|
|
// display: flex;
|
|
|
// flex-wrap: wrap;
|
|
|
// flex-flow: row wrap;
|
|
|
-
|
|
|
- .quest-item {
|
|
|
- display: inline;
|
|
|
- background: #d9d9d9;
|
|
|
- border: 0.9975px solid #dddddd;
|
|
|
- padding: 0.1333rem;
|
|
|
- color: rgba(0, 0, 0, 0.7);
|
|
|
- border-radius: 0.16rem;
|
|
|
- font-size: 0.2667rem;
|
|
|
- margin: 0 0.1333rem 0.1333rem 0;
|
|
|
- line-height: 0.8rem;
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ .question-scroll {
|
|
|
+ width: 1000px;
|
|
|
+ height: 0.7067rem;
|
|
|
+ .quest-item {
|
|
|
+ height: 0.7067rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ float: left;
|
|
|
+ background: #d9d9d9;
|
|
|
+ border: 0.9975px solid #dddddd;
|
|
|
+ padding: 0.1333rem;
|
|
|
+ color: rgba(0, 0, 0, 0.7);
|
|
|
+ border-radius: 0.16rem;
|
|
|
+ font-size: 0.2667rem;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ line-height: 0.8rem;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
> div {
|
