From 725201fe7dc72061c7a19c1ebb5f3c56f78da02e Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期二, 06 四月 2021 18:10:14 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- 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