From b9aa1e3bc9b70df68967b3a37ece51ae1729f5b2 Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期三, 07 四月 2021 11:39:14 +0800
Subject: [PATCH] 统一样式-图层组件样式修改
---
src/components/panel/RightSearchPanel.vue | 112 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 65 insertions(+), 47 deletions(-)
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index f9abbfb..e309125 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -5,9 +5,14 @@
<!-- :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">
+ <buttom type="button" class="el-button special-button el-button--default el-icon-d-arrow-right"></buttom>
+ </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 style=" ">
+ <li>
<!-- <span>{{item.name}}</span>-->
<!-- <div >-->
<img src="../../assets/images/map-pages/icon/sl.png" class="icon">
@@ -35,11 +40,11 @@
<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>
@@ -97,6 +102,7 @@
},
selected (val) {
// console.log(val)
+ this.title = val.name + '锛堟绱級'
this.topicList.forEach((itm) => {
itm.checked = val.name === itm.name
})
@@ -177,16 +183,14 @@
<style lang="less">
.search-title{
- color: rgb(255, 255, 255);
- font-size: 16px;
+ color:@color-title;
+ font-size: 18px;
margin: 5px;
}
.search-container {
position: relative;
width: 1.79167rem;
/*height: 5.6475rem;*/
- min-height: 60vh;
- max-height: 80vh;
overflow: hidden;
}
.module-wrap{
@@ -223,8 +227,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;
@@ -249,6 +253,15 @@
// background-color: #061e51 !important;
// border: solid 1px #0e639e !important;
//}
+ .el-button--default {
+ padding: 15px 3px;
+ background: rgba(0, 16, 30, 0.7);
+ color: #C0C4CC;
+ }
+ .el-button--default:hover{
+ background: transparent;
+ border-color: #0f93a9;
+ }
.el-form-item__label {
color: rgb(52, 224, 255);
@@ -473,7 +486,7 @@
display: inline-block;
position: relative;
padding-right: 5px;
- color:#f5f5f5;
+ color:@color-shadow;
i{
display: block;
width: 15px;
@@ -487,14 +500,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;
@@ -506,6 +518,11 @@
box-shadow: 0 0 3px #000;
background: #0B3B6D;
}
+ }
+ .environmental-risk-list.hover,
+ .environmental-risk-list:hover{
+ color:@color-over;
+ background: @background-color;
}
//.search-panel {
// border: #07325B;
@@ -680,38 +697,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;
- // .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;
+ /******************浠ヤ笅鍏叡閮ㄥ垎**********/
+ .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);}
}
- .el-input__inner{background: none;color:#fff;font-size: 14px;border-radius: 0; border-color: @color;background: rgba(0,16,30,.5);}
- }
- .search-btn{
+ .search-btn{
- }
- //location-btn{
- //
- //}
- .location-btn:hover,.el-input__icon:hover{
- color: @color;
- cursor: pointer;
+ }
+ //location-btn{
+ //
+ //}
+ .location-btn:hover,.el-input__icon:hover{
+ color: @color;
+ cursor: pointer;
+ }
}
}
+
</style>
--
Gitblit v1.8.0