From c5de910ae8d6691c90130f43a817cab9f2427f1c Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期二, 06 四月 2021 12:38:25 +0800
Subject: [PATCH] 右侧固废查询面板及整体样式修改
---
src/components/panel/RightSearchPanel.vue | 301 +++++++++++++++++++++++++------------------------
1 files changed, 152 insertions(+), 149 deletions(-)
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index dacfcbe..480803e 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,45 +1,45 @@
<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 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>
+ <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" >-->
+ <!-- <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="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="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 :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>
</div>
</template>
@@ -142,33 +142,33 @@
// const right = rightControl.css('right')
// const rightit = rightControl.ownerDocument.defaultView
// const right = rightit.getComputedStyle(rightit, null).right
- // if (right === '10px') {
- // rightControl.animate({
- // right: '-322px'
- // })
- // el.css({
- // transform: 'rotateY(180deg)',
- // 'transform-origin': '50% 50%',
- // transition: 'transform 1s linear'
- // })
- // el2.animate({
- // right: '320px',
- // speed: 1000
- // })
- // } else {
- // rightControl.animate({
- // right: '10px'
- // })
- // el.css({
- // transform: 'rotateY(0deg)',
- // 'transform-origin': '50% 50%',
- // transition: 'transform 1s linear'
- // })
- // el2.animate({
- // right: '290px',
- // speed: 1000
- // })
- // }
+ // if (right === '10px') {
+ // rightControl.animate({
+ // right: '-322px'
+ // })
+ // el.css({
+ // transform: 'rotateY(180deg)',
+ // 'transform-origin': '50% 50%',
+ // transition: 'transform 1s linear'
+ // })
+ // el2.animate({
+ // right: '320px',
+ // speed: 1000
+ // })
+ // } else {
+ // rightControl.animate({
+ // right: '10px'
+ // })
+ // el.css({
+ // transform: 'rotateY(0deg)',
+ // 'transform-origin': '50% 50%',
+ // transition: 'transform 1s linear'
+ // })
+ // el2.animate({
+ // right: '290px',
+ // speed: 1000
+ // })
+ // }
}
},
mounted () {
@@ -178,17 +178,17 @@
<style lang="less">
.search-title{
- color: rgb(255, 255, 255);
- font-size: 16px;
- margin: 5px;
+ color: rgb(255, 255, 255);
+ font-size: 16px;
+ margin: 5px;
}
.search-container {
- position: relative;
- width: 1.79167rem;
- /*height: 5.6475rem;*/
- min-height: 80vh;
- max-height: 90vh;
- overflow: hidden;
+ position: relative;
+ width: 1.79167rem;
+ /*height: 5.6475rem;*/
+ min-height: 80vh;
+ max-height: 90vh;
+ overflow: hidden;
}
.module-wrap{
width: 0.15rem;
@@ -365,7 +365,7 @@
transform: rotateY(0deg);
transform-origin: 50% 50%;
transition: transform 1s linear;
- /*transition: 3s linear;*/
+ /*transition: 3s linear;*/
}
.btn-shrink {
width: 20px;
@@ -416,7 +416,7 @@
.a{
transform: translateX(328px);
transition: transform 3s linear;
- }
+ }
.panel_searchTotal {
font-size: 12px;
float: right;
@@ -448,66 +448,69 @@
display: grid;
font-size: 18px;
}
- /*input 鐐瑰嚮鎼滅储鏍峰紡*/
- .rightButtonSearch{
- display: flex;
- justify-content: space-between;
- align-items: center;
- .el-input{margin-right: 10px}
- .el-icon-search{
- width: 40px;
- border:1px solid @color;
- height: 26px;
- line-height: 26px;
- text-align: center;
- color:#fff;
- border-radius: 2px;
- cursor:pointer;
- background: rgba(0,16,30,.5);
- }
+ /*input 鐐瑰嚮鎼滅储鏍峰紡*/
+ .rightButtonSearch{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .el-input{margin-right: 10px}
+ .el-icon-search{
+ width: 40px;
+ border:1px solid @color;
+ height: 26px;
+ text-align: center;
+ line-height: 26px;
+ color:#fff;
+ border-radius: 2px;
+ cursor:pointer;
+ background: rgba(0,16,30,.5);
}
- /*鍗曢�夋寜閽牱寮�*/
- .levelOfRisk{padding-left:20px}
- .levelOfRisk .el-radio{padding-bottom:6px}
+ .el-button {
+ padding: 0;
+ }
+ }
+ /*鍗曢�夋寜閽牱寮�*/
+ .levelOfRisk{padding-left:20px}
+ .levelOfRisk .el-radio{padding-bottom:6px}
- .levelOfRisk-type{
- display: inline-block;
- position: relative;
- padding-right: 5px;
- color:#f5f5f5;
- i{
- display: block;
- width: 15px;
- height: 10px;
- position: absolute;
- top:50%;
- right: -15px;
- margin-top: -5px;
- }
+ .levelOfRisk-type{
+ display: inline-block;
+ position: relative;
+ padding-right: 5px;
+ color:#f5f5f5;
+ i{
+ display: block;
+ width: 15px;
+ height: 10px;
+ position: absolute;
+ top:50%;
+ right: -15px;
+ margin-top: -5px;
}
- .el-radio.is-checked .levelOfRisk-type{color:#409EFF}
+ }
+ .el-radio.is-checked .levelOfRisk-type{color:#409EFF}
- .environmental-risk-list{
- border:1px solid @color;
- margin-right: 10px;
- margin-bottom: 15px;
- position: relative;
- padding-left:50px;
- padding-top:3px;
- padding-bottom:3px;
- color: #f5f5f5;
- .state{
- width: 30px;
- height: 30px;
- position: absolute;
- top:50%;
- left:10px;
- margin-top: -15px;
- border-radius: 50%;
- box-shadow: 0 0 3px #000;
- background: #0B3B6D;
- }
+ .environmental-risk-list{
+ border:1px solid @color;
+ margin-right: 10px;
+ margin-bottom: 15px;
+ position: relative;
+ padding-left:50px;
+ padding-top:3px;
+ padding-bottom:3px;
+ color: #f5f5f5;
+ .state{
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ top:50%;
+ left:10px;
+ margin-top: -15px;
+ border-radius: 50%;
+ box-shadow: 0 0 3px #000;
+ background: #0B3B6D;
}
+ }
//.search-panel {
// border: #07325B;
// background-color: #07325B !important;
@@ -681,39 +684,39 @@
transform: translateX(0px);
transition: transform 0.5s linear;
}
- /******************浠ヤ笅鍏叡閮ㄥ垎**********/
- .sewers-search{
- position: relative;
- overflow: hidden;
- .search-panel{
- background-color: transparent;
- border: 1px solid @background-color-split;
- padding: 10px 0;
- // .el-input{width:calc(100% - 40px);position: relative}
- /deep/ input {
- border-radius: 0;
- background-color: @background-color-split ;
- border: solid 1px @color ;
- color: @color-gray;
- font-size: 0.01rem;
- padding:0 15px;
- .el-select .el-input.is-focus .el-input__inner{
- border-color: @color;
- }
- }
- .el-input__inner{background: none;color:#fff;font-size: 14px;border-radius: 0; border-color: @color;background: rgba(0,16,30,.5);}
+ /******************浠ヤ笅鍏叡閮ㄥ垎**********/
+ .query-search{
+ position: relative;
+ overflow: hidden;
+ .search-panel{
+ background-color: transparent;
+ border: 1px solid @background-color-split;
+ padding: 10px 0;
+ // .el-input{width:calc(100% - 40px);position: relative}
+ /deep/ input {
+ border-radius: 0;
+ background-color: @background-color-split ;
+ border: solid 1px @color ;
+ color: @color-gray;
+ font-size: 0.01rem;
+ padding:0 15px;
+ .el-select .el-input.is-focus .el-input__inner{
+ border-color: @color;
}
- .search-btn{
-
- }
- //location-btn{
- //
- //}
- .location-btn:hover,.el-input__icon:hover{
- color: @color;
- cursor: pointer;
- }
+ }
+ .el-input__inner{background: none;color:#fff;font-size: 14px;border-radius: 0; border-color: @color;background: rgba(0,16,30,.5);}
}
+ .search-btn{
+
+ }
+ //location-btn{
+ //
+ //}
+ .location-btn:hover,.el-input__icon:hover{
+ color: @color;
+ cursor: pointer;
+ }
+ }
}
</style>
--
Gitblit v1.8.0