From 474268898f7d35316a685823ede1415684019e8c Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期四, 08 四月 2021 14:31:12 +0800
Subject: [PATCH] 统一样式-企业图标修改，搜索样式修改。
---
src/components/panel/RightSearchPanel.vue | 112 +++++++++++++++------------
/dev/null | 0
src/assets/css/map/_map-variable.less | 1
src/assets/css/map/map-panel-style.less | 34 +++++++-
src/components/panel/ToolBoxPanel.vue | 10 +
public/assets/images/map/company_refining.png | 0
src/components/LayerController/logic/Company.js | 9 +-
public/assets/images/map/company_oil.png | 0
public/assets/images/map/company_sales.png | 0
src/components/LayerController/LayerController.vue | 29 +++++-
10 files changed, 127 insertions(+), 68 deletions(-)
diff --git a/public/assets/images/map/company.png b/public/assets/images/map/company.png
deleted file mode 100644
index a48d213..0000000
--- a/public/assets/images/map/company.png
+++ /dev/null
Binary files differ
diff --git a/public/assets/images/map/company_oil.png b/public/assets/images/map/company_oil.png
new file mode 100644
index 0000000..cec6627
--- /dev/null
+++ b/public/assets/images/map/company_oil.png
Binary files differ
diff --git a/public/assets/images/map/company_refining.png b/public/assets/images/map/company_refining.png
new file mode 100644
index 0000000..faa99c1
--- /dev/null
+++ b/public/assets/images/map/company_refining.png
Binary files differ
diff --git a/public/assets/images/map/company_sales.png b/public/assets/images/map/company_sales.png
new file mode 100644
index 0000000..28a279a
--- /dev/null
+++ b/public/assets/images/map/company_sales.png
Binary files differ
diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less
index 8ef5f52..64c7e30 100644
--- a/src/assets/css/map/_map-variable.less
+++ b/src/assets/css/map/_map-variable.less
@@ -6,6 +6,7 @@
@color-tool: #C0C4CC;//宸ュ叿鑹�
@color-shadow: #00fff6;//鏄剧ず棰滆壊
@background-color: rgba(0, 16, 30, .7);//鑳屾櫙濉厖鑹�
+@background-color4: rgba(0, 16, 30, .4);//鑳屾櫙濉厖鑹�
@background-color-light: rgba(40, 50, 100, .4);//鍏夋檿
@background-color-split: rgba(0, 255, 246, .14);//鍒嗗壊绾�
@background-color-tools: #1A4951;//宸ュ叿绠�
diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less
index 3545ff7..8bf42ab 100644
--- a/src/assets/css/map/map-panel-style.less
+++ b/src/assets/css/map/map-panel-style.less
@@ -1,5 +1,9 @@
@import "_map-variable";
-
+.leaflet-container,
+html,body{
+ // font-family: 'Microsoft YaHei';
+ font: 12px/1.5 "Microsoft YaHei", Arial, Helvetica, sans-serif;
+}
/*鍏ㄥ眬璁剧疆***********/
h1, h2, h3, h4, h5, h6, ul, li, p {
padding: 0;
@@ -243,18 +247,35 @@
/***************Company 鍥惧眰 鎮诞妗嗘牱寮忋��*********************************/
.company-bindTooltip {
- background: @background-color-split;
+ //background: @background-color-split;
+ background: none;
border: none;
color: red;
font-size: 16px;
- font-weight: 900 !important;
- text-shadow: 0 0 5px #fff;
+ box-shadow: none;
+ //text-shadow: 0 0 5px #fff;
//filter:Dropshadow(offx=1,offy=0,color=white)
//Dropshadow(offx=0,offy=1,color=white)
//Dropshadow(offx=0,offy=-1,color=white)
//Dropshadow(offx=-1,offy=0,color=white);
- box-shadow: none;
- -webkit-text-stroke: .5px #fff;
+ //box-shadow: none;
+ //-webkit-text-stroke: .5px #fff;
+ ul{
+ position: relative;
+ li:not(:first-child){
+ position: absolute;
+ top:0;
+ left:0;
+ width: 100%;
+ font-weight: 900;
+ }
+ li{
+ text-shadow: 0 0 4px #fff;
+ }
+ }
+}
+.company-bindTooltip:before{
+ display: none;
}
.company-bindTooltip-hover h3 {
@@ -345,6 +366,7 @@
.icon{
width: 20px;
margin: 0 auto;
+ font-size: 20px;
}
}
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index ce4d496..e494157 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -7,7 +7,7 @@
<!-- <span class="icon-name">鍥惧眰</span>-->
</div>
</el-tooltip>
- <transition name="animationChange">
+ <transition name="layerChange">
<div :class="'legend-content map-background'" v-show="layerControllerVisible">
<lc-service-layer></lc-service-layer>
<button @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></button>
@@ -74,14 +74,27 @@
</script>
<style lang="less">
- .animationChange-enter-active, .animationChange-leave-active {
+
+ .layerChange-enter-active {
+ transform-origin: top left;
+ animation: bounce-in .2s;
+ }
+ .layerChange-leave-active {
+ transform-origin: top left;
+ animation: bounce-in .2s reverse;
+ }
+ /*
+
+ .layerChange-enter-active,
+ .layerChange-leave-active {
transition: all 0.5s;
}
- .animationChange-enter, .animationChange-leave-to {
+ .layerChange-enter,
+ .layerChange-leave-to {
opacity: 0;
transform: translateX(-100px);
- }
+ }*/
.float-panel.active{
overflow: visible;
}
@@ -235,16 +248,20 @@
}
.el-button--default{
padding: 15px 3px;
- background:@background-color;
+ background:@background-color4;
color:@color-tool;
position: absolute;
top:0;
left: 100%;
margin-left: .02rem;
- border-radius: 0.03rem 50% 50% 0.03rem;
+ border:1px solid @color-tool;
+ // border-radius: 0.03rem 50% 50% 0.03rem;
}
.el-button--default:hover{
background:@background-color;
+ border:1px solid @color;
+ box-shadow: 0 0 2px @color;
+ color:@color;
}
.legend-content{
width: 1.79167rem;
diff --git a/src/components/LayerController/logic/Company.js b/src/components/LayerController/logic/Company.js
index ae08aa5..82490b9 100644
--- a/src/components/LayerController/logic/Company.js
+++ b/src/components/LayerController/logic/Company.js
@@ -2,7 +2,7 @@
* 鍥哄簾
*/
// 鍖哄垎涓嶅悓绫诲瀷 浣跨敤涓嶅悓img
-const companyImg = '/assets/images/map/company.png'
+const companyImg = '/assets/images/map/company_refining.png'
const mapApi = require('../../../api/mapApi').default
const AnimalService = require('../service/AnimalService').default
@@ -32,13 +32,14 @@
icon: L.icon({
iconUrl: iconUrl,
iconSize: [30, 30],
- iconAnchor: [13, 5]
+ iconAnchor: [15, 15]
}),
test: data[i]
})
- marker.bindTooltip(data[i].name, {
+ const htmls = '<ul><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li></ul>'
+ marker.bindTooltip(htmls, {
permanent: true,
- offset: [0, 14],
+ offset: [0, 5],
direction: 'bottom',
className: 'company-bindTooltip'
})
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 30af0e3..41d70da 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,49 +1,43 @@
<template>
<div class="panel-right" v-show="isShow">
- <div class="panel-tab">
-<!-- <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd"-->
-<!-- :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">-->
-<!-- <img :src="item.icon" style="width: 24px;height: 24px;"></div>-->
- <div class="container">
- <ul>
- <li style="text-align: right">
- <button type="button" class="el-button special-button el-button--default el-icon-d-arrow-right"></button>
- </li>
- </ul>
-
- <ul v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
- <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
- <li>
- <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
- </li>
- </el-tooltip>
- </ul>
- </div>
- </div>
-<!-- <div class="panel-fold-btn" >-->
-<!-- <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
-<!-- </div>-->
-
-<!-- <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
-<!-- <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
-<!--<!– <div class="btn-stretch" v-if="isCollapse" </div>–>-->
-<!--<!– <div class="btn-shrink" v-else-if="!isCollapse" ></div>–>-->
-<!--<!– :style = "{width:isCollapse ? '290px' : '0px'}"–>-->
-<!-- </div>-->
-<!-- <div class="right-control" v-if="!isCollapse" >-->
- <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
- <div class="panel-fold-btn" @click="toggleMonitorPanel">
-<!-- <div class="btn-stretch" v-if="isCollapse"></div>-->
-<!-- <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
- <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
- </div>
-
- <div :class="'search-container map-background'">
- <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
- <component :title="title" :is="gcComp"></component>
- </div>
- </div>
- </div>
+ <transition name="searchPanelChange">
+ <div style=" display: inline-flex;">
+ <div class="panel-tab">
+ <div class="container">
+ <ul>
+ <li style="text-align: right">
+ <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default">
+ <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
+ <i class=" el-icon-d-arrow-left" v-else ></i>
+ </div>
+ </li>
+ </ul>
+ <ul v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
+ <li>
+ <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
+ </li>
+ </el-tooltip>
+ </ul>
+ </div>
+ </div>
+ <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
+ <div class="panel-fold-btn" @click="toggleMonitorPanel">
+ <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
+ </div>
+ <div :class="'search-container map-background'" v-show="selectGroup" >
+ <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
+ <component :title="title" :is="gcComp"></component>
+ </div>
+ </div>
+ </div>
+ </div>
+ </transition>
+ <!-- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎼滅储" placement="left" v-show="!selectGroup">
+ <div :class="selectGroup === true ?'active-button':''" class="iconBtn" @click="setSearchPanelChange" style="position: absolute;top:0;right: 0" >
+ <i class="el-icon-search icon"></i>
+ </div>
+ </el-tooltip> -->
</div>
</template>
@@ -75,7 +69,8 @@
toggleMonitorStyle: 'right:0px',
title: '姹￠洦姘寸缃�',
- isCollapse: true
+ isCollapse: true,
+ selectGroup: true
}
},
computed: {},
@@ -98,9 +93,18 @@
handleClose (done) {
console.log(done)
},
+ setSearchPanelChange () {
+ this.selectGroup = !this.selectGroup
+ if (!this.selectGroup) {
+ this.topicList.forEach((itm) => {
+ itm.checked = false
+ })
+ }
+ },
selected (val) {
// console.log(val)
this.title = val.name
+ this.selectGroup = true
this.topicList.forEach((itm) => {
itm.checked = val.name === itm.name
})
@@ -180,7 +184,14 @@
</script>
<style lang="less">
-
+ .searchPanelChange-enter-active {
+ transform-origin: top right;
+ animation: bounce-in .2s;
+ }
+ .searchPanelChange-leave-active {
+ transform-origin: top right;
+ animation: bounce-in .2s reverse;
+ }
.search-container {
position: relative;
width: 1.79167rem;
@@ -249,12 +260,15 @@
//}
.el-button--default {
padding: 15px 3px;
- background: rgba(0, 16, 30, 0.7);
- color: #C0C4CC;
- border-radius:50% 0.03rem 0.03rem 50% ;
+ background:@background-color4;
+ color:@color-tool;
+ border:1px solid @color-tool;
}
.el-button--default:hover{
background:@background-color;
+ border:1px solid @color;
+ box-shadow: 0 0 2px @color;
+ color:@color;
}
.el-form-item__label {
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index 850d54c..e019544 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -489,11 +489,15 @@
.special-button {
width: 0.1362rem;
height: 0.2725rem;
- color: #C0C4CC;
- border-radius: 0.03rem 50% 50% 0.03rem;
+ background:@background-color4;
+ color:@color-tool;
+ border:1px solid @color-tool;
}
.special-button:hover{
- color: #00fff6;
+ background:@background-color;
+ border:1px solid @color;
+ box-shadow: 0 0 2px @color;
+ color:@color;
}
}
}
--
Gitblit v1.8.0