feat: 量尺

罗广辉

2025-04-07 49f1198d1f2da71f6213270dfe94be9b34ebf235

 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>