From 5453ae1464bdd671199940a77b74072e0c1dce67 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 15 Feb 2022 15:00:14 +0800
Subject: [PATCH] 组件封装调整
---
/dev/null | 89 -----------------------------
src/components/campusNav/index.vue | 8 +-
src/components/map/components/campusBuildingSearch.vue | 3
src/pcviews/tool/layer-manage.vue | 8 +-
src/styles/pcpage/tool/sign.scss | 1
src/pcviews/tool/area.vue | 10 +-
src/components/publicBox/index.vue | 12 +--
src/styles/pcpage/campus-nav.scss | 1
src/pcviews/tool/ranging.vue | 10 +-
src/pcviews/tool/sign.vue | 8 +-
10 files changed, 31 insertions(+), 119 deletions(-)
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index 1a664ae..54ba0d4 100644
--- a/src/components/campusNav/index.vue
+++ b/src/components/campusNav/index.vue
@@ -1,13 +1,13 @@
<template>
- <tool-small-box class="campus-nav-box">
- <template slot="tool-small-box-header">
+ <public-box class="campus-nav-box">
+ <template slot="public-box-header">
<div class="title">
<img class="icon deblurring" src="/img/icon/xndh.png" alt />
<span>社区内导航</span>
</div>
<img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
</template>
- <template slot="tool-small-box-content">
+ <template slot="public-box-content">
<div class="tab">
<ul>
<li @click="tabClick('步行')" :class="{on:tabOneFlag}">
@@ -60,7 +60,7 @@
</div>
</div>
</template>
- </tool-small-box>
+ </public-box>
</template>
<script>
diff --git a/src/components/map/components/campusBuildingSearch.vue b/src/components/map/components/campusBuildingSearch.vue
index 77f09e6..2868f35 100644
--- a/src/components/map/components/campusBuildingSearch.vue
+++ b/src/components/map/components/campusBuildingSearch.vue
@@ -151,7 +151,8 @@
this.$message({
message: '请输入关键字',
- type: 'warning'
+ type: 'warning',
+ duration: 1000
})
return
}
diff --git a/src/components/publicBox/index.vue b/src/components/publicBox/index.vue
index a40c649..ebe3200 100644
--- a/src/components/publicBox/index.vue
+++ b/src/components/publicBox/index.vue
@@ -1,12 +1,10 @@
<template>
<div ref="publicBox">
- <div class="container">
- <div class="header" @mousedown="move" :class="{'move': moveFlag}">
- <slot name="public-box-header"></slot>
- </div>
- <div class="content">
- <slot name="public-box-content"></slot>
- </div>
+ <div class="header" @mousedown="move" :class="{'move': moveFlag}">
+ <slot name="public-box-header"></slot>
+ </div>
+ <div class="content">
+ <slot name="public-box-content"></slot>
</div>
</div>
</template>
diff --git a/src/components/toolBigBox/index.vue b/src/components/toolBigBox/index.vue
deleted file mode 100644
index c8fef36..0000000
--- a/src/components/toolBigBox/index.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
- <div ref="toolBigBox">
- <div class="header" @mousedown="move" :class="{ move: moveFlag }">
- <slot name="too-big-box-header"></slot>
- </div>
- <div class="content">
- <slot name="too-big-box-content"></slot>
- </div>
- </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
- name: 'ToolBigBox',
- data () {
- return {
- DC: null,
- signList: [],
- destroyedFlag: true,
- moveFlag: false
- }
- },
- computed: {
- ...mapGetters(['viewer'])
- },
- mounted () {
-
- },
- methods: {
- move (e) {
- const that = this
- const odiv = this.$refs.toolBigBox // 获取目标元素
- // 算出鼠标相对元素的位置
- 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
- }
- }
- },
- destroyed () {
-
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.move {
- cursor: move;
-}
-</style>
diff --git a/src/components/toolSmallBox/index.vue b/src/components/toolSmallBox/index.vue
deleted file mode 100644
index 8370eb1..0000000
--- a/src/components/toolSmallBox/index.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * @Author: Morpheus
- * @Name: 工具小的封装
- * @Date: 2021-11-13 16:04:27
- * @Last Modified by: Morpheus
- * @Last Modified time: 2022-02-15 10:45:07
- */
-
-<template>
- <div ref="tooSmallBox">
- <div class="header" @mousedown="move" :class="{ move: moveFlag }">
- <slot name="tool-small-box-header"></slot>
- </div>
- <div class="content">
- <slot name="tool-small-box-content"></slot>
- </div>
- </div>
-</template>
-
-<script>
-
-export default {
- name: 'ToolSmallBox',
- data () {
- return {
- moveFlag: false
- }
- },
- computed: {
-
- },
- created () { },
- methods: {
- move (e) {
- const that = this
- const odiv = this.$refs.tooSmallBox // 获取目标元素
- // 算出鼠标相对元素的位置
- 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
- }
- }
- },
- destroyed () { }
-}
-</script>
-
-<style lang="scss" scoped>
-.move {
- cursor: move;
-}
-</style>
diff --git a/src/pcviews/tool/area.vue b/src/pcviews/tool/area.vue
index 61fac01..f8d1c31 100644
--- a/src/pcviews/tool/area.vue
+++ b/src/pcviews/tool/area.vue
@@ -3,24 +3,24 @@
* @Name: 地图测面
* @Date: 2021-11-13 16:04:27
* @Last Modified by: Morpheus
- * @Last Modified time: 2022-02-15 10:48:24
+ * @Last Modified time: 2022-02-15 14:27:28
*/
<template>
- <tool-small-box class="tool-area">
- <template slot="tool-small-box-header">
+ <public-box class="tool-area">
+ <template slot="public-box-header">
<div class="title">
<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" />
</template>
- <template slot="tool-small-box-content">
+ <template slot="public-box-content">
<el-button type="primary" size="mini" @click.stop="calcDistance">开始</el-button>
<el-button type="danger" size="mini" @click.stop="deactivate">清除</el-button>
</template>
- </tool-small-box>
+ </public-box>
</template>
<script>
diff --git a/src/pcviews/tool/layer-manage.vue b/src/pcviews/tool/layer-manage.vue
index b304751..ffb60a1 100644
--- a/src/pcviews/tool/layer-manage.vue
+++ b/src/pcviews/tool/layer-manage.vue
@@ -1,13 +1,13 @@
<template>
- <tool-big-box class="tool-layer">
- <template slot="too-big-box-header">
+ <public-box class="tool-layer">
+ <template slot="public-box-header">
<div class="title">
<img class="icon deblurring" src="/img/icon/tool-layer.png" alt />
<span>图层管理</span>
</div>
<img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
</template>
- <template slot="too-big-box-content">
+ <template slot="public-box-content">
<div class="list-box">
<ul v-show="signList.length > 0">
<li v-for="(item, index) in signList" :key="index">
@@ -22,7 +22,7 @@
</div>
</div>
</template>
- </tool-big-box>
+ </public-box>
</template>
<script>
diff --git a/src/pcviews/tool/ranging.vue b/src/pcviews/tool/ranging.vue
index 521990a..d787bfd 100644
--- a/src/pcviews/tool/ranging.vue
+++ b/src/pcviews/tool/ranging.vue
@@ -3,24 +3,24 @@
* @Name: 地图测距
* @Date: 2021-11-13 16:04:27
* @Last Modified by: Morpheus
- * @Last Modified time: 2022-02-15 10:47:42
+ * @Last Modified time: 2022-02-15 14:28:44
*/
<template>
- <tool-small-box class="tool-ranging">
- <template slot="tool-small-box-header">
+ <public-box class="tool-ranging">
+ <template slot="public-box-header">
<div class="title">
<img class="icon deblurring" src="/img/icon/tool-ranging.png" alt />
<span>地图测距</span>
</div>
<img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
</template>
- <template slot="tool-small-box-content">
+ <template slot="public-box-content">
<el-button type="primary" size="mini" @click.stop="calcDistance">开始</el-button>
<el-button type="danger" size="mini" @click.stop="deactivate">清除</el-button>
</template>
- </tool-small-box>
+ </public-box>
</template>
<script>
diff --git a/src/pcviews/tool/sign.vue b/src/pcviews/tool/sign.vue
index 0bd75ce..fa99df4 100644
--- a/src/pcviews/tool/sign.vue
+++ b/src/pcviews/tool/sign.vue
@@ -1,13 +1,13 @@
<template>
- <tool-big-box class="tool-sign">
- <template slot="too-big-box-header">
+ <public-box class="tool-sign">
+ <template slot="public-box-header">
<div class="title">
<img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
<span>地图标记</span>
</div>
<img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
</template>
- <template slot="too-big-box-content">
+ <template slot="public-box-content">
<div class="list-box">
<ul v-show="signList.length > 0">
<li v-for="(item, index) in signList" :key="index">
@@ -25,7 +25,7 @@
<el-button type="primary" size="mini" @click.stop="addSign">新增</el-button>
</div>
</template>
- </tool-big-box>
+ </public-box>
</template>
<script>
diff --git a/src/styles/pcpage/campus-nav.scss b/src/styles/pcpage/campus-nav.scss
index adbc7b5..00dcab1 100644
--- a/src/styles/pcpage/campus-nav.scss
+++ b/src/styles/pcpage/campus-nav.scss
@@ -8,6 +8,7 @@
color: #fff;
background: #fff;
border-radius: 8px;
+ box-shadow: 0 0 4px 2px #dddddd;
.header {
position: relative;
diff --git a/src/styles/pcpage/tool/sign.scss b/src/styles/pcpage/tool/sign.scss
index b43adae..7fdebc1 100644
--- a/src/styles/pcpage/tool/sign.scss
+++ b/src/styles/pcpage/tool/sign.scss
@@ -48,6 +48,7 @@
.content {
position: relative;
+ width: 100%;
height: calc(100% - 36px);
.list-box {
--
Gitblit v1.9.3