From 1dee40ea46601f2ee5d10aa0190625ebf03bdc4e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 02 Dec 2024 17:02:19 +0800
Subject: [PATCH] 1
---
src/pages/map/components/mainTool.vue | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 115 insertions(+), 0 deletions(-)
diff --git a/src/pages/map/components/mainTool.vue b/src/pages/map/components/mainTool.vue
new file mode 100644
index 0000000..98ed57a
--- /dev/null
+++ b/src/pages/map/components/mainTool.vue
@@ -0,0 +1,115 @@
+<template>
+ <div class="toolBarRight animation-slide-top no-print-view">
+ <el-button v-for="item, index in btnGroup" :key="index" @click="btnClick(item)"
+ class="btn btn-link toolBarRight-btn">
+ <i :class="item.icon"></i>{{ item.name }}
+ </el-button>
+ </div>
+
+ <base-map v-show="currentComponent == 'map'" @close="closeBox"></base-map>
+ <layers-control :show="currentComponent == 'layers'" @close="closeBox"></layers-control>
+ <tool-list :moreToolShow="moreToolShow" @close="closeBox"></tool-list>
+</template>
+
+<script setup>
+import baseMap from './scomponents/baseMap.vue'
+import layersControl from './scomponents/layersControl.vue'
+import toolList from './scomponents/toolList.vue'
+
+const currentComponent = ref('')
+let moreToolShow = ref(false)
+
+const btnGroup = [
+ {
+ name: '底图',
+ icon: 'fa fa-map',
+ key: 'map',
+ },
+ {
+ name: '图层',
+ icon: 'fa fa-tasks',
+ key: 'layers',
+ },
+ {
+ name: '工具',
+ icon: 'fa fa-cubes',
+ key: 'tool',
+ },
+]
+
+const btnClick = (item) => {
+ if (item.key == 'tool') {
+ moreToolShow.value = !moreToolShow.value
+ return
+ }
+
+ if (currentComponent.value == item.key) {
+ closeBox(item.key)
+ return
+ }
+
+ currentComponent.value = item.key
+}
+
+const closeBox = (type) => {
+ if (type == 'tool') {
+ moreToolShow.value = false
+ } else {
+ currentComponent.value = ''
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.toolBarRight {
+ display: flex;
+ flex-wrap: nowrap;
+ position: absolute;
+ right: 540px;
+ z-index: 99;
+ top: 110px;
+
+ border: 1px solid #4081CB;
+ border-radius: 4px;
+ background: rgba(135, 158, 199, 0.3);
+ box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
+ pointer-events: auto;
+
+ ::v-deep(.el-button) {
+ margin-left: 0;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+
+ &.btn {
+ padding: 4px 12px;
+ font-size: 14px;
+ line-height: 1.6;
+ -webkit-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
+ -o-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
+ transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
+ }
+
+ &.btn-link {
+ font-weight: 400;
+ color: #007bff;
+ text-decoration: none;
+ }
+
+ &.toolBarRight-btn {
+ list-style-type: none;
+ cursor: pointer;
+ border-right: solid 1px #2b2c2f;
+ color: #edffff;
+ }
+
+ &.toolBarRight-btn:last-child {
+ border-right: none;
+ }
+
+ i {
+ margin-right: 4px;
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3