From 49f1198d1f2da71f6213270dfe94be9b34ebf235 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 07 Apr 2025 20:41:50 +0800
Subject: [PATCH] feat: 量尺
---
src/views/Home/RSide.vue | 46 ++++++++++++++++++++++++++++++++++------------
1 files changed, 34 insertions(+), 12 deletions(-)
diff --git a/src/views/Home/RSide.vue b/src/views/Home/RSide.vue
index ffc2da6..3baca19 100644
--- a/src/views/Home/RSide.vue
+++ b/src/views/Home/RSide.vue
@@ -1,6 +1,5 @@
<template>
<div class="ai-chat">
-
<el-popover
placement="bottom"
:visible="visible"
@@ -16,25 +15,43 @@
<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">
+ <img v-for="(item, index) in images"
+ :key="index" :class="item.class"
+ :src="activeIndex === index ? item.activeSrc : item.src" alt=""
+ @click="activeChange(index)"
+ @mouseenter="enterHover(index)"
+ @mouseleave="logIndex=3"
+ >
</div>
- <div v-if="logIndex===0" class="r-side-positioning">切换地图模式</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>
+ <div v-if="logIndex===2" class="r-side-layer">切换地图模式</div>
+ <MeasuringDistance v-if="activeIndex === 1"/>
</template>
<script setup>
import vDrag from '@/directive/drag'
+import MeasuringDistance from '@/components/MeasuringDistance.vue'
+import dw from '@/assets/images/rSide/dw.png'
+import dw1 from '@/assets/images/rSide/dw1.png'
+import lc from '@/assets/images/rSide/lc.png'
+import lc1 from '@/assets/images/rSide/lc1.png'
+import tc from '@/assets/images/rSide/tc.png'
+import tc1 from '@/assets/images/rSide/tc1.png'
+
let logIndex = ref(3);
const enterHover = (value) => {
- logIndex.value = value;
+ logIndex.value = value;
+}
+
+let activeIndex = ref(null);
+const activeChange = (value) => {
+ if (value === 1){
+ activeIndex.value = activeIndex.value === 1 ? null : value;
+ }
}
const visible = ref(false);
let pressStart = 0;
@@ -50,6 +67,13 @@
visible.value = !visible.value;
}
};
+
+// 添加: 定义图片数组
+const images = [
+ { class: 'positioning', src: dw,activeSrc:dw1 },
+ { class: 'measuring-scale', src: lc,activeSrc:lc1 },
+ { class: 'layer', src: tc,activeSrc:tc1 }
+];
</script>
<style scoped lang="scss">
@@ -63,8 +87,6 @@
height: 68px;
display: block;
};
-
-
.chat {
position: fixed;
bottom: 330px;
@@ -116,5 +138,5 @@
.r-side-layer {
bottom: 122px;
}
-
</style>
+
--
Gitblit v1.9.3