From 041aef6ee488898c7f4f1839f6cb8aa3187277ca Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期五, 26 二月 2021 15:49:40 +0800
Subject: [PATCH] 修改专题菜单样式
---
src/components/panel/MenuSpecial.vue | 164 +++++++++++++++++++++++++++++++++++++++++-------------
src/assets/css/map/_map-variable.less | 1
src/assets/css/map/custom-popup.css | 1
aliases.config.js | 4
4 files changed, 127 insertions(+), 43 deletions(-)
diff --git a/aliases.config.js b/aliases.config.js
index a01418b..2f09e44 100644
--- a/aliases.config.js
+++ b/aliases.config.js
@@ -1,6 +1,6 @@
const path = require('path')
-function resolveSrc(_path) {
+function resolveSrc (_path) {
return path.join(__dirname, _path)
}
@@ -11,7 +11,7 @@
'@components': 'src/components',
'@assets': 'src/assets',
'@utils': 'src/utils',
- '@styles': 'src/styles'
+ '@styles': 'src/assets/css'
}
module.exports = {
diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less
index 9373d4e..9bd1ac9 100644
--- a/src/assets/css/map/_map-variable.less
+++ b/src/assets/css/map/_map-variable.less
@@ -1,2 +1,3 @@
@color:#00fff6;
+@color-highlight:#fff700;
@background-color:rgba(0,16,30,.8);
diff --git a/src/assets/css/map/custom-popup.css b/src/assets/css/map/custom-popup.css
index cf742ef..f85f5fc 100644
--- a/src/assets/css/map/custom-popup.css
+++ b/src/assets/css/map/custom-popup.css
@@ -1,3 +1,4 @@
+
.custom-popup .leaflet-popup-content-wrapper {
background-color: rgba(14, 45, 84, 0.9);
color: #ffffff;
diff --git a/src/components/panel/MenuSpecial.vue b/src/components/panel/MenuSpecial.vue
index a250e3a..4b42915 100644
--- a/src/components/panel/MenuSpecial.vue
+++ b/src/components/panel/MenuSpecial.vue
@@ -1,25 +1,47 @@
<!--涓婚鑿滃崟閫夐」-->
<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 class="menu-special">
+ <div style="color: white;z-index: 1000;display:inline-flex;">
+ <img class="menu-special-toggle" src="/assets/images/menu/earth.png"
+ style=""
+ @click="toggle()">
+ <div id="menu-special-context" class="menu-special-context">
+ <el-checkbox-button v-show="isShow" class="menu-special-item" v-model="specialAll.check" :checked="specialAll.checked" @change="checkedSpecialChangeAll(specialAll)">
+ <div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="specialAll.icon" ></div>
+ {{ specialAll.name }}</el-checkbox-button>
+
+ <el-checkbox-group indeterminate="true" v-show="isShow" v-model="checkedList" size="medium">
+ <el-checkbox-button class="menu-special-item" v-for="item in specialList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
+ <div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="item.icon" ></div>
+ {{item.name}}</el-checkbox-button>
+ </el-checkbox-group>
+<!-- <ul class="menu-special-item" v-for="item in SpecialList" :key="item.id">-->
+<!-- <li style="display: inline-flex;vertical-align: middle">-->
+<!-- <div style="height: 1rem;width: 1rem;"> <img :src="item.icon" ></div>-->
+
+<!-- <a>{{ item.name }}</a>-->
+<!-- </li>-->
+<!-- </ul>-->
</div>
</div>
-
</div>
-</div>
</template>
<script>
+
export default {
name: 'MenuSpecial',
data () {
return {
- SpecialList: [{
+ isShow: false,
+ // checkedList: ['姹℃煋婧�', '搴熸按鐩戞祴'],
+ checkedList: [],
+ specialAll: {
+ name: '鍏ㄩ��',
+ check: false,
+ icon: '/assets/images/menu/special.png'
+ },
+ specialList: [{
name: '姹℃煋婧�',
id: 1,
check: false,
@@ -27,92 +49,152 @@
}, {
name: '搴熸按鐩戞祴',
id: 2,
- check: false,
+ checked: false,
icon: '/assets/images/menu/special.png'
}, {
name: '搴熸皵鐩戞祴',
id: 3,
- check: false,
+ checked: false,
icon: '/assets/images/menu/special.png'
}, {
name: '鍥哄簾绠＄悊',
id: 4,
- check: false,
+ checked: false,
icon: '/assets/images/menu/special.png'
}, {
name: '鐜椋庨櫓',
id: 5,
- check: false,
+ checked: false,
icon: '/assets/images/menu/special.png'
}, {
name: '鍦熷￥鍙婂湴涓嬫按',
id: 6,
- check: false,
+ checked: false,
icon: '/assets/images/menu/special.png'
}, {
name: '姹￠洦姘寸缃�',
id: 7,
- check: false,
+ checked: false,
icon: '/assets/images/menu/special.png'
}, {
name: '棰勮鎶ヨ',
id: 8,
- check: false,
+ checked: false,
icon: '/assets/images/menu/special.png'
}, {
name: '鎸囨爣缁熻',
id: 9,
- check: false,
+ checked: false,
icon: '/assets/images/menu/special.png'
}, {
name: '搴旀�ュ湴鍥�',
id: 10,
- check: false,
+ checked: false,
icon: '/assets/images/menu/special.png'
}]
}
},
+ computed: {
+ },
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'
- }
+ this.isShow = !this.isShow
+ // 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'
+ // }
+ },
+ checkedSpecialChangeAll (val) {
+ // this.checkedCities = val ? this.cities.map(item => item.id) : []
+ // this.isIndeterminate = false
+ // let list = []
+ // if (val === true) {
+ // list = this.specialList.map(item => item.name)
+ // }
+
+ this.checkedList = val.check ? this.specialList.map(item => item.name) : []
+ },
+ checkedSpecialChange (item) {
+ console.log(item)
}
}
}
</script>
-<style lang="less" scoped>
-.menu-special{
+<style lang="less" >
+@import '@assets/css/map/_map-variable';
+.menu-special {
position: absolute;
left: 1rem;
- bottom:10rem;
- height: 2rem;
- font-size: 1rem;
+ bottom: 1rem;
+
z-index: 1000;
font-family: 'Arial Normal', 'Arial';
font-weight: 400;
font-style: normal;
- .menu-special-context{
+.menu-special-toggle{
+ width: 2rem;height: 2rem;background-size: 100% 100%;padding-right: 1rem;display: inline;
+}
+ .menu-special-context {
- display: inline;
+ display: inline-flex;
transition: height 1s;
- .menu-special-item{
- display: inline;background: url('/assets/images/menu/menu-background.svg') no-repeat;
+
+ li {
+ //display: inline-flex;
+
+ line-height: 2rem;
+ height: 2rem;
+ img {
+ font-size: 0;
+ height: 100%;
+ width: 100%;
+ }
+ }
+ .menu-special-item {
+ 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;*/
+ line-height: 2rem;
+ height: 2rem;
+ }
+ .menu-special-item :hover {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ .menu-special-item:active{
+ color: @color-highlight;
}
}
-
+ .el-checkbox-button__inner{
+ padding: 0;
+ background: transparent;
+//border: 1px solid @color;
+ color: @color;
+ line-height: 1rem;
+ box-shadow: none;
+ border:none;
+}
+ .el-checkbox-button.is-checked .el-checkbox-button__inner {
+ color: @color-highlight;
+ background-color: transparent;
+ //border-color: transparent;
+ box-shadow: none;
+ border:none;
+ }
+ .el-checkbox-button:first-child .el-checkbox-button__inner{
+ border-left: none;
+ }
+ .el-checkbox-button--medium .el-checkbox-button__inner{
+ padding:0;
+ }
+ .el-checkbox-button__inner:hover{
+ color: @color-highlight;
+ }
}
</style>
--
Gitblit v1.8.0