| | |
| | | <!-- :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 style=" "> |
| | | <!-- <span>{{item.name}}</span>--> |
| | | <!-- <div >--> |
| | | <img src="../../assets/images/map-pages/icon/sl.png" class="icon"> |
| | | <!-- </div>--> |
| | | </li> |
| | | </el-tooltip> |
| | | <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="[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:0 6px 6px 6px;font-size: 13px;"> |
| | | <component :title="title" :is="gcComp"></component> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | }, |
| | | selected (val) { |
| | | // console.log(val) |
| | | this.title = val.name + '(检索)' |
| | | this.title = val.name |
| | | this.topicList.forEach((itm) => { |
| | | itm.checked = val.name === itm.name |
| | | }) |
| | |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | .search-title{ |
| | | 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; |
| | | } |
| | | .module-wrap{ |
| | |
| | | //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; |
| | |
| | | // background-color: #061e51 !important; |
| | | // border: solid 1px #0e639e !important; |
| | | //} |
| | | .el-button--default { |
| | | padding: 15px 3px; |
| | | background: rgba(0, 16, 30, 0.7); |
| | | color: #C0C4CC; |
| | | border-radius:50% 0.03rem 0.03rem 50% ; |
| | | } |
| | | .el-button--default:hover{ |
| | | background:@background-color; |
| | | } |
| | | |
| | | .el-form-item__label { |
| | | color: rgb(52, 224, 255); |
| | |
| | | .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; |
| | | } |
| | | } |
| | | /*单选按钮样式*/ |
| | |
| | | display: inline-block; |
| | | position: relative; |
| | | padding-right: 5px; |
| | | color:#f5f5f5; |
| | | color:@color-shadow; |
| | | i{ |
| | | display: block; |
| | | width: 15px; |
| | |
| | | .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; |
| | |
| | | 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; |
| | |
| | | .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; |