From 35298bdcd712499f2066c0e80d37acc96c1d2a63 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 09 Feb 2022 15:52:24 +0800
Subject: [PATCH] 样式调整
---
src/pcviews/tool/area.vue | 61 +++++++++++++++++++++++++++++-
1 files changed, 58 insertions(+), 3 deletions(-)
diff --git a/src/pcviews/tool/area.vue b/src/pcviews/tool/area.vue
index 82a21ec..42f1067 100644
--- a/src/pcviews/tool/area.vue
+++ b/src/pcviews/tool/area.vue
@@ -7,10 +7,10 @@
*/
<template>
- <div class="tool-ranging">
+ <div class="tool-area" ref="toolAreaBox">
<div class="header" @mousedown="move" :class="{'move': moveFlag}">
<div class="title">
- <img class="icon deblurring" src="/img/icon/dtcj.png" alt />
+ <img class="icon deblurring" src="/img/icon/tool-area.png" alt />
<span>地图测面</span>
</div>
<img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
@@ -28,6 +28,11 @@
import { mapGetters } from 'vuex'
export default {
+ data () {
+ return {
+ moveFlag: false
+ }
+ },
computed: {
...mapGetters([
'viewer'
@@ -36,6 +41,53 @@
created () {
},
methods: {
+ move (e) {
+ const that = this
+ const odiv = this.$refs.toolAreaBox // 获取目标元素
+ // 算出鼠标相对元素的位置
+ const disX = e.clientX - odiv.offsetLeft
+ const disY = e.clientY - odiv.offsetTop
+
+ const disH = odiv.offsetHeight
+ const disW = odiv.offsetWidth
+
+ document.onmousemove = (e) => {
+ that.moveFlag = true
+ // 鼠标按下并移动的事件
+ // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+ let left = e.clientX - disX
+ let top = e.clientY - disY
+
+ // 绑定元素位置到positionX和positionY上面
+
+ if (left >= window.innerWidth - disW) {
+ left = window.innerWidth - disW
+ }
+
+ if (left <= 0) {
+ left = 0
+ }
+
+ if (top >= window.innerHeight - disH) {
+ top = window.innerHeight - disH
+ }
+
+ if (top <= 60) {
+ top = 60
+ }
+
+ // 移动当前元素
+ odiv.style.left = (left) + 'px'
+ odiv.style.top = (top) + 'px'
+ odiv.style.bottom = 'auto'
+ }
+ document.onmouseup = (e) => {
+ that.moveFlag = false
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ },
+
calcDistance () {
this.viewer.measure.areaSurface()
},
@@ -54,5 +106,8 @@
}
</script>
-<style>
+<style lang="scss" scoped>
+.move {
+ cursor: move;
+}
</style>
--
Gitblit v1.9.3