<template>
|
<div class="ai-chat">
|
|
<el-popover
|
placement="bottom"
|
:visible="visible"
|
:width="200"
|
trigger="click"
|
>
|
<template #reference>
|
<div class="chat" id="chatID" v-drag:chatID @mousedown="handleMouseDown"
|
@mouseup="handleMouseUp"/>
|
</template>
|
<div>
|
快和我对话吧
|
<el-input/>
|
</div>
|
</el-popover>
|
|
|
<img class="chat-bottom" src="../../assets/images/chat-bottom.png" alt="">
|
</div>
|
<div class="r-side">
|
<img class="positioning" src="../../assets/images/self-positioning.png" alt="" @mouseenter="enterHover(0)" @mouseleave="logIndex=3">
|
<img class="measuring-scale" src="../../assets/images/measuring-scale.png" alt="" @mouseenter="enterHover(1)" @mouseleave="logIndex=3">
|
<img class="layer" src="../../assets/images/layer.png" alt="" @mouseenter="enterHover(2)" @mouseleave="logIndex=3">
|
</div>
|
<div v-if="logIndex===0" class="r-side-positioning">切换地图模式</div>
|
<div v-if="logIndex===1" class="r-side-measuring">量尺</div>
|
<div v-if="logIndex===2" class="r-side-layer">返回当前位置</div>
|
</template>
|
|
<script setup>
|
import vDrag from '@/directive/drag'
|
let logIndex = ref(3);
|
const enterHover = (value) => {
|
logIndex.value = value;
|
}
|
const visible = ref(false);
|
let pressStart = 0;
|
|
const handleMouseDown = () => {
|
pressStart = Date.now(); // 记录按下时间
|
};
|
|
const handleMouseUp = () => {
|
const pressDuration = Date.now() - pressStart; // 计算按下时长
|
if (pressDuration < 150) {
|
// 如果按下时间小于200ms，认为是点击
|
visible.value = !visible.value;
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.ai-chat {
|
position: absolute;
|
bottom: 309px;
|
right: 440px;
|
cursor: pointer;
|
img {
|
width: 100px;
|
height: 68px;
|
display: block;
|
};
|
|
|
.chat {
|
position: fixed;
|
bottom: 330px;
|
height: 124px;
|
width: 100px;
|
user-select: none;
|
z-index: 999;
|
background: url('@/assets/images/chat.png') no-repeat center / 100% 100%;
|
}
|
}
|
.r-side {
|
position: absolute;
|
bottom: 122px;
|
right: 463px;
|
cursor: pointer;
|
img {
|
display: block;
|
width: 48px;
|
height: 48px;
|
}
|
.positioning {
|
position: relative;
|
bottom: 24px;
|
}
|
.measuring-scale {
|
position: relative;
|
bottom: 12px;
|
}
|
}
|
.r-side-positioning, .r-side-measuring, .r-side-layer {
|
position: absolute;
|
right: 514px;
|
width: 130px;
|
height: 48px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 18px;
|
color: #FFFFFF;
|
line-height: 48px;
|
text-align: center;
|
background: url('@/assets/images/cursor.png');
|
}
|
.r-side-positioning {
|
bottom: 242px;
|
}
|
.r-side-measuring {
|
bottom: 182px;
|
}
|
.r-side-layer {
|
bottom: 122px;
|
}
|
|
</style>
|
