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 | 160 +++++++++++++++++++++++++++++------------------------
1 files changed, 88 insertions(+), 72 deletions(-)
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index dacfcbe..41d70da 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,46 +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 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 style=" ">
-<!-- <span>{{item.name}}</span>-->
-<!-- <div >-->
- <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
-<!-- </div>-->
- </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: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>
@@ -72,7 +69,8 @@
toggleMonitorStyle: 'right:0px',
title: '姹￠洦姘寸缃�',
- isCollapse: true
+ isCollapse: true,
+ selectGroup: true
}
},
computed: {},
@@ -95,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.title = val.name
+ this.selectGroup = true
this.topicList.forEach((itm) => {
itm.checked = val.name === itm.name
})
@@ -177,17 +184,18 @@
</script>
<style lang="less">
-.search-title{
- color: rgb(255, 255, 255);
- font-size: 16px;
- margin: 5px;
-}
+ .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;
/*height: 5.6475rem;*/
- min-height: 80vh;
- max-height: 90vh;
overflow: hidden;
}
.module-wrap{
@@ -224,8 +232,8 @@
//top: 10px;
height: 0;
position: absolute;
- top: .4rem;
- right: .08333rem;
+ top: 0.42979rem;
+ right: 0.14583rem;
z-index: 501;
display: -webkit-box;
display: -ms-flexbox;
@@ -250,6 +258,18 @@
// background-color: #061e51 !important;
// border: solid 1px #0e639e !important;
//}
+ .el-button--default {
+ padding: 15px 3px;
+ 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 {
color: rgb(52, 224, 255);
@@ -457,13 +477,14 @@
.el-icon-search{
width: 40px;
border:1px solid @color;
- height: 26px;
- line-height: 26px;
+ height: 28px;
+ line-height: 28px;
text-align: center;
color:#fff;
border-radius: 2px;
cursor:pointer;
background: rgba(0,16,30,.5);
+ padding:0;
}
}
/*鍗曢�夋寜閽牱寮�*/
@@ -474,7 +495,7 @@
display: inline-block;
position: relative;
padding-right: 5px;
- color:#f5f5f5;
+ color:@color-shadow;
i{
display: block;
width: 15px;
@@ -488,14 +509,13 @@
.el-radio.is-checked .levelOfRisk-type{color:#409EFF}
.environmental-risk-list{
- border:1px solid @color;
- margin-right: 10px;
- margin-bottom: 15px;
position: relative;
+ cursor: pointer;
padding-left:50px;
- padding-top:3px;
- padding-bottom:3px;
- color: #f5f5f5;
+ padding-top:5px;
+ padding-bottom:5px;
+ color: @color-shadow;
+ border-bottom:1px solid @background-color-split;
.state{
width: 30px;
height: 30px;
@@ -508,16 +528,11 @@
background: #0B3B6D;
}
}
- //.search-panel {
- // border: #07325B;
- // background-color: #07325B !important;
- // margin-top: 0px;
- //
- // .el-input__inner {
- // border-radius: 0px !important;
- // background-color: #061e51 !important;
- // }
- //}
+ .environmental-risk-list.hover,
+ .environmental-risk-list:hover{
+ color:@color-over;
+ background: @background-color;
+ }
input::-webkit-input-placeholder {
color: #569ee1;
@@ -685,10 +700,11 @@
.sewers-search{
position: relative;
overflow: hidden;
+ .panel-title{}
.search-panel{
background-color: transparent;
- border: 1px solid @background-color-split;
padding: 10px 0;
+ border-bottom: 1px solid @background-color-split;
// .el-input{width:calc(100% - 40px);position: relative}
/deep/ input {
border-radius: 0;
--
Gitblit v1.8.0