From 7af991bc50092c018f3a2996d730274a168079cb Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期四, 25 二月 2021 10:53:15 +0800
Subject: [PATCH] 增加菜单主题
---
public/assets/images/menu/earth.png | 0
src/components/panel/MenuSpecial.vue | 118 +++++++++++++++++++++++++++++++++++++++
public/assets/images/menu/special.png | 0
src/views/MapTemplate.vue | 3 +
public/assets/images/menu/menu-background.svg | 12 ++++
src/components/LayerController/LayerController.vue | 2
6 files changed, 134 insertions(+), 1 deletions(-)
diff --git a/public/assets/images/menu/earth.png b/public/assets/images/menu/earth.png
new file mode 100644
index 0000000..f5faeff
--- /dev/null
+++ b/public/assets/images/menu/earth.png
Binary files differ
diff --git a/public/assets/images/menu/menu-background.svg b/public/assets/images/menu/menu-background.svg
new file mode 100644
index 0000000..7af6d5d
--- /dev/null
+++ b/public/assets/images/menu/menu-background.svg
@@ -0,0 +1,12 @@
+锘�<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="115px" height="31px" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <mask fill="white" id="clip6">
+ <path d="M 0 31 L 11.5534948188238 15.5 L 0 0.206422018348576 L 97.235294117647 0.206422018348576 L 114.690647482014 15.5 L 97.235294117647 31 L 0 31 Z " fill-rule="evenodd" />
+ </mask>
+ </defs>
+ <g transform="matrix(1 0 0 1 -40 -864 )">
+ <path d="M 0 31 L 11.5534948188238 15.5 L 0 0.206422018348576 L 97.235294117647 0.206422018348576 L 114.690647482014 15.5 L 97.235294117647 31 L 0 31 Z " fill-rule="nonzero" fill="#305b62" stroke="none" fill-opacity="0.752941176470588" transform="matrix(1 0 0 1 40 864 )" />
+ <path d="M 0 31 L 11.5534948188238 15.5 L 0 0.206422018348576 L 97.235294117647 0.206422018348576 L 114.690647482014 15.5 L 97.235294117647 31 L 0 31 Z " stroke-width="2" stroke="#90c8e0" fill="none" transform="matrix(1 0 0 1 40 864 )" mask="url(#clip6)" />
+ </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/images/menu/special.png b/public/assets/images/menu/special.png
new file mode 100644
index 0000000..fee30bb
--- /dev/null
+++ b/public/assets/images/menu/special.png
Binary files differ
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index 7f2fd10..d009ca7 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -105,7 +105,7 @@
.float-panel {
position: absolute;
left: 10px;
- bottom: 10px;
+ top: 45%;
width: 230px;
height: auto;
font-size: 11px;
diff --git a/src/components/panel/MenuSpecial.vue b/src/components/panel/MenuSpecial.vue
new file mode 100644
index 0000000..a250e3a
--- /dev/null
+++ b/src/components/panel/MenuSpecial.vue
@@ -0,0 +1,118 @@
+<!--涓婚鑿滃崟閫夐」-->
+<template>
+<div class="menu-special">
+ <div style="color: white;z-index: 1000;">
+ <img src="/assets/images/menu/earth.png" style="width: 2rem;height: 2rem;background-size: 100% 100%;padding-right: 1rem;display: inline; " @click="toggle()" >
+ <div id="menu-special-context" class="menu-special-context">
+ <div class="menu-special-item" v-for="item in SpecialList" :key="item.id">
+ <img :src="item.icon" style="width: 1.2rem;height: 1.2rem;" >
+ {{item.name}}
+ </div>
+ </div>
+
+ </div>
+</div>
+</template>
+
+<script>
+export default {
+ name: 'MenuSpecial',
+ data () {
+ return {
+ SpecialList: [{
+ name: '姹℃煋婧�',
+ id: 1,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }, {
+ name: '搴熸按鐩戞祴',
+ id: 2,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }, {
+ name: '搴熸皵鐩戞祴',
+ id: 3,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }, {
+ name: '鍥哄簾绠＄悊',
+ id: 4,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }, {
+ name: '鐜椋庨櫓',
+ id: 5,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }, {
+ name: '鍦熷￥鍙婂湴涓嬫按',
+ id: 6,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }, {
+ name: '姹￠洦姘寸缃�',
+ id: 7,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }, {
+ name: '棰勮鎶ヨ',
+ id: 8,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }, {
+ name: '鎸囨爣缁熻',
+ id: 9,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }, {
+ name: '搴旀�ュ湴鍥�',
+ id: 10,
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ }]
+ }
+ },
+ methods: {
+ toggle () {
+ console.log('toggle')
+ const el = document.getElementById('menu-special-context')
+ console.log(el.clientWidth + ':' + el.offsetHeight)
+ if (el.clientWidth > 0) {
+ el.style.width = '0'
+ } else {
+ el.style.width = 'auto'
+ }
+ }
+ }
+
+}
+</script>
+
+<style lang="less" scoped>
+.menu-special{
+ position: absolute;
+ left: 1rem;
+ bottom:10rem;
+ height: 2rem;
+ font-size: 1rem;
+ z-index: 1000;
+ font-family: 'Arial Normal', 'Arial';
+ font-weight: 400;
+ font-style: normal;
+ .menu-special-context{
+
+ display: inline;
+ transition: height 1s;
+ .menu-special-item{
+ display: inline;background: url('/assets/images/menu/menu-background.svg') no-repeat;
+ background-size: 100% 100%;
+ padding: 0 1rem 0 1rem;
+ font-size: 1rem;
+ vertical-align: top;
+ /*line-height: 2rem;*/
+ /*height: 2rem;*/
+ }
+ }
+
+}
+</style>
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 6354a8c..513fc98 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -11,6 +11,7 @@
<monitor-panel></monitor-panel>
<top-enterprise-panel></top-enterprise-panel>
<tool-box-panel></tool-box-panel>
+ <menu-special></menu-special>
</div>
</template>
@@ -25,10 +26,12 @@
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
+import MenuSpecial from '@components/panel/MenuSpecial'
export default {
name: 'MapTemplate',
components: {
+ MenuSpecial,
ToolBoxPanel,
TopEnterprisePanel,
SgisLayerController,
--
Gitblit v1.8.0