From 3ca24d97c52399dcbd93165bf5c01e2ee2af7823 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期一, 15 三月 2021 09:13:48 +0800 Subject: [PATCH] 修改功能样式 --- src/components/panel/ToolBoxPanel.vue | 203 ++++++++++++++++++++++++++++++-------------------- 1 files changed, 123 insertions(+), 80 deletions(-) diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue index 74a25e2..92aeed5 100644 --- a/src/components/panel/ToolBoxPanel.vue +++ b/src/components/panel/ToolBoxPanel.vue @@ -8,8 +8,6 @@ mode="horizontal" :collapse="isCollapse" unique-opened - @open="handleOpen" - @close="handleClose" @select="handleSelect" v-show='selectGroup' > @@ -46,85 +44,115 @@ return { menuList: [ { - title: circle, - alt: '鏍囩粯', + icon: circle, + label: '鏍囩粯', + index: '1', items: [ { - headings: '鐐规爣缁�' + index: '1-1', + label: '鐐规爣缁�' }, { - headings: '绾挎爣缁�' + index: '1-2', + label: '绾挎爣缁�' }, { - headings: '闈㈡爣缁�', + index: '1-3', + label: '闈㈡爣缁�', items: [ - { headings: '鍦嗗舰' }, - { headings: '澶氳竟褰�' }, - { headings: '鐭╁舰' } - ] - } - ] - }, - // { - // title: square, - // alt: '鏍囨敞', - // items: [ - // { headings: '鐐规爣娉�' }, - // { headings: '绾挎爣娉�' }, - // { headings: '闈㈡爣娉�' }, - // { headings: '鏂囧瓧鏍囨敞' }, - // { headings: '鍥炬爣鏍囨敞' } - // ] - // }, - // { - // title: legend, - // alt: '娴嬮噺', - // items: [ - // { headings: '璺濈娴嬮噺' }, - // { headings: '闈㈢Н娴嬮噺' } - // ] - // }, - { - title: location, - alt: '鍒囨崲搴曞浘', - items: [ - { - headings: '褰卞儚鍥�', - items: [ - { headings: '褰卞儚妯欐敞' } - ] - }, - { - headings: '鐭㈤噺鍥�', - items: [ - { headings: '鐭㈤噺妯欐敞' } - ] - }, - { - headings: '鍦板舰鍥�', - items: [ - { headings: '鍦板舰妯欐敞' } + { + index: '1-3-1', + label: '鍦嗗舰' + }, + { + index: '1-3-2', + label: '澶氳竟褰�' + }, + { + index: '1-3-3', + label: '鐭╁舰' + } ] } ] }, { - title: polygon, - alt: '绠$綉', + icon: location, + label: '鍒囨崲搴曞浘', + index: '2', items: [ - { headings: '杩為�氭�у垎鏋�' }, - { headings: '鐖嗙鍒嗘瀽' }, - { headings: '娴佸悜鍒嗘瀽' }, - { headings: '妯柇闈㈠垎鏋�' } + { + label: '褰卞儚鍥�', + index: '2-1', + items: [ + { + index: '2-1-1', + label: '褰卞儚妯欐敞' + } + ] + }, + { + label: '鐭㈤噺鍥�', + index: '2-2', + items: [ + { + index: '2-2-1', + label: '鐭㈤噺妯欐敞' + } + ] + }, + { + label: '鍦板舰鍥�', + index: '2-3', + items: [ + { + index: '2-3-1', + label: '鍦板舰妯欐敞' + } + ] + } ] }, { - title: fullscreen, - alt: '涓嬭浇', + icon: polygon, + label: '绠$綉', + index: '3', items: [ - { headings: '鍏ㄥ睆' }, - { headings: 'A4妯悜' }, - { headings: 'A4绾靛悜' } + { + index: '3-1', + label: '杩為�氭�у垎鏋�' + }, + { + index: '3-2', + label: '鐖嗙鍒嗘瀽' + }, + { + index: '3-3', + label: '娴佸悜鍒嗘瀽' + }, + { + index: '3-4', + label: '妯柇闈㈠垎鏋�' + } + ] + }, + { + icon: fullscreen, + label: '涓嬭浇', + index: '4', + items: [ + { + index: '4-1', + label: '鍏ㄥ睆' + }, + { + index: '4-2', + label: 'A4妯悜' + }, + { + index: '4-3', + label: 'A4绾靛悜' + } ] } ], @@ -142,19 +170,10 @@ }, handleClose () { }, - handleSelect (index, indexPath) { - - }, - gitBounced (params) { - this.bouncedText = params - }, - changeSelect () { - this.selectGroup = !this.selectGroup - }, - handleSelects (command) { - console.log(command) - switch (command) { - case '鍏ㄥ睆': + handleSelect (index) { + console.log(index) + switch (index) { + case '4-1': // this.map.toggleFullscreen() var printer = this.L.easyPrint({ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], @@ -212,13 +231,18 @@ Measure.startMeasureArea(this.map, this.L) break } + }, + gitBounced (params) { + this.bouncedText = params + }, + changeSelect () { + this.selectGroup = !this.selectGroup } } } </script> <style lang="less"> - .lefttop-toolbox-panel { position: absolute; left: 15px; @@ -231,7 +255,6 @@ line-height: 55px; display: flex; align-items: center; - justify-content: space-around; .init-choose { background: #305B62; @@ -246,12 +269,21 @@ } .el-menu { - width: 80%; + width: 100%; background: none; z-index: 1; border: none; background: #305B62; border-radius: 50px; + //margin-left: -30px; + + .el-icon-arrow-down:before { + content: " "; + } + + .el-submenu__title:focus, .el-submenu__title:hover { + background: none; + } } } @@ -279,4 +311,15 @@ //} } +.el-menu--horizontal { + .el-menu--popup { + min-width: 100px; + .el-menu-item { + min-width: 50px; + } + } +} +ul { + padding-inline-start: 0; +} </style> -- Gitblit v1.8.0