From aaa4266212e36aabb1926c3e0e255ca274599f4a Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期一, 15 三月 2021 17:48:24 +0800 Subject: [PATCH] 修改左上角功能实现部分 --- src/assets/css/map/_map-variable.less | 1 + src/assets/images/map-pages/icon/toolbox/line.png | 0 src/assets/css/map/map-panel-style.less | 4 ++++ src/components/panel/ToolBoxPanel.vue | 25 +++++++++++++++++-------- src/assets/images/map-pages/icon/toolbox/map.png | 0 src/assets/images/map-pages/icon/toolbox/polygon.png | 0 src/assets/images/map-pages/icon/toolbox/circle.png | 0 src/assets/images/map-pages/icon/toolbox/ju.png | 0 8 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less index a6c435b..9938ddd 100644 --- a/src/assets/css/map/_map-variable.less +++ b/src/assets/css/map/_map-variable.less @@ -3,6 +3,7 @@ @color-gray: #C0C4CC; @color-title: white; @color-over: white; +@color-tool:#C0C4CC; @background-color: rgba(0, 16, 30, .8); @background-color-light: rgba(40, 50, 100, .4); @background-color-split: rgba(0, 255, 246, .14); diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less index 59d1b93..bb2b491 100644 --- a/src/assets/css/map/map-panel-style.less +++ b/src/assets/css/map/map-panel-style.less @@ -147,5 +147,9 @@ height: 45px; background: @background-color-tools; vertical-align: middle !important; + img { + width: 16px; + height: 16px; + } } } diff --git a/src/assets/images/map-pages/icon/toolbox/circle.png b/src/assets/images/map-pages/icon/toolbox/circle.png new file mode 100644 index 0000000..c1c3f3c --- /dev/null +++ b/src/assets/images/map-pages/icon/toolbox/circle.png Binary files differ diff --git a/src/assets/images/map-pages/icon/toolbox/ju.png b/src/assets/images/map-pages/icon/toolbox/ju.png new file mode 100644 index 0000000..1a0341e --- /dev/null +++ b/src/assets/images/map-pages/icon/toolbox/ju.png Binary files differ diff --git a/src/assets/images/map-pages/icon/toolbox/line.png b/src/assets/images/map-pages/icon/toolbox/line.png new file mode 100644 index 0000000..6736258 --- /dev/null +++ b/src/assets/images/map-pages/icon/toolbox/line.png Binary files differ diff --git a/src/assets/images/map-pages/icon/toolbox/map.png b/src/assets/images/map-pages/icon/toolbox/map.png new file mode 100644 index 0000000..93cd827 --- /dev/null +++ b/src/assets/images/map-pages/icon/toolbox/map.png Binary files differ diff --git a/src/assets/images/map-pages/icon/toolbox/polygon.png b/src/assets/images/map-pages/icon/toolbox/polygon.png new file mode 100644 index 0000000..4111565 --- /dev/null +++ b/src/assets/images/map-pages/icon/toolbox/polygon.png Binary files differ diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue index 1bc1804..88f2c4e 100644 --- a/src/components/panel/ToolBoxPanel.vue +++ b/src/components/panel/ToolBoxPanel.vue @@ -19,7 +19,9 @@ <span>{{ item.label }}</span> </el-button> <el-button v-for="(itemT,indexT) in item.items" :key="indexT"> - <i class="el-icon-s-tools"></i> + <!-- <i class="el-icon-s-tools"></i>--> + <img :src="itemT.icon" alt=""/> + <!-- <span>{{ itemT.label }}</span>--> </el-button> </el-popover> </el-row> @@ -31,10 +33,14 @@ </template> <script> -import circle from '@assets/images/map-pages/icon/toolbox/biaohui.png' -import location from '@assets/images/map-pages/icon/toolbox/celiang1.png' -import polygon from '@assets/images/map-pages/icon/toolbox/ditu.png' +import plot from '@assets/images/map-pages/icon/toolbox/biaohui.png' +import polygon from '@assets/images/map-pages/icon/toolbox/celiang1.png' +import location from '@assets/images/map-pages/icon/toolbox/ditu.png' import fullscreen from '@assets/images/map-pages/icon/toolbox/xiazai.png' + +// 鏍囩粯鐨勫彲閫夋嫨鏁版嵁 +import marker from '@assets/images/map-pages/icon/toolbox/map.png' +import line from '@assets/images/map-pages/icon/toolbox/line.png' // import square from '@/assets/images/map-pages/icon/toolbox/square.png' // 娴嬮噺鐨勬柟娉� @@ -52,17 +58,19 @@ return { menuList: [ { - icon: circle, + icon: plot, label: '鏍囩粯', index: '1', items: [ { index: '1-1', - label: '鐐规爣缁�' + label: '鐐规爣缁�', + icon: marker }, { index: '1-2', - label: '绾挎爣缁�' + label: '绾挎爣缁�', + icon: line }, { index: '1-3', @@ -253,6 +261,7 @@ height: 45px; background: @background-color-tools; border: none; + box-shadow: 0 0 0.03rem #00fff6; img { width: 22px; @@ -262,7 +271,7 @@ span { display: block; font-size: 0.012rem; - color: @color-over; + color: @color-tool; } } -- Gitblit v1.8.0