问题修改

QibolinCzp

2021-05-14 2775d5f5cee087361e9e85e10ff55665e5ed0839

 src/components/BaseNav/pipeline/AffiliatedFacilities.vue

@@ -7,26 +7,29 @@
                :visible.sync="dialogVisible"
                :append-to-body="true"
                :modal="false"
                 v-dialogDragBottom
                >
                v-dialogDragBottom
        >
            <div class="search-panel">
                <el-form ref="form" :model="form" label-width="90px" class="search-form">
                    <!--  <el-form-item label="管线信息：" size="mini" class="search-panel-item">
                       <div class="el-select el-select--mini">8888</div>
                    </el-form-item> -->
                    <el-form-item label="设施类型：" size="mini" class="search-panel-item">
                        <el-select style="width: 100%"  v-model="dataType" value-key="code" @change="handleDataType" :popper-class="'select-down'">
                            <el-option v-for="(item,index) in classification" :key="index" :label="item.name" :value="item"></el-option>
                        <el-select style="width: 100%" v-model="dataType" value-key="code" @change="handleDataType"
                                   :popper-class="'select-down'">
                            <el-option v-for="(item,index) in classification" :key="index" :label="item.name"
                                       :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="rightButtonSearch">
                        <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
                        <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                        <el-button class="el-icon-search" @click="handleSearch"></el-button>
                    </div>
                </el-form>
            </div>
            <el-scrollbar style="height:300px;">
                <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''">
                <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
                     :class="activeNum===index?'hover':''">
                    <img class="state" :src="getImgSrc()" style="background: none"/>
                    <div>
                        <h3 @click="handleLocation(item,index)">{{ item.properties.pipename }}</h3>
@@ -52,7 +55,7 @@
import AjaxUtils from '@utils/AjaxUtils'
import { LayerFsss } from '@src/conf/layers/LayerFsss'

console.log(LayerFsss, 8888888888)
// console.log(LayerFsss, 8888888888)
export default {
  name: 'AffiliatedFacilities',
  data () {
@@ -123,91 +126,101 @@
}
</script>

<style  lang="less">
.affiliatedFacilities-dialog{
    width: calc(20% - 60px) !important; // calc(30% - 15px);
    left: 60%;
    .el-dialog__body{
        padding: 0.04rem;
        .search-panel {
            background-color: transparent;
            padding: 10px;
            border-bottom: 1px solid @background-color-split;
            // .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;
<style lang="less">
    .affiliatedFacilities-dialog {
        width: calc(20% - 60px) !important; // calc(30% - 15px);
        left: 60%;

                .el-select .el-input.is-focus .el-input__inner {
        .el-dialog__body {
            padding: 0.04rem;

            .search-panel {
                background-color: transparent;
                padding: 10px;
                border-bottom: 1px solid @background-color-split;
                // .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-form-item__label {
                    color: #00fff6
                }

                .el-input__inner {
                    background: none;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 0;
                    border-color: @color;
                    background: rgba(0, 16, 30, .5);
                }
            }
            .el-form-item__label{
                color:#00fff6
            }
            .el-input__inner {
                background: none;
                color: #fff;
                font-size: 14px;
                border-radius: 0;
                border-color: @color;
                background: rgba(0, 16, 30, .5);
            }
        }
        /*input 点击搜索样式*/

        .rightButtonSearch {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*input 点击搜索样式*/

            .el-input {
                margin-right: 10px
            .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: 28px;
                    line-height: 28px;
                    text-align: center;
                    color: #fff;
                    border-radius: 2px;
                    cursor: pointer;
                    background: rgba(0, 16, 30, .5);
                    padding: 0;
                }
            }

            .el-icon-search {
                width: 40px;
                border: 1px solid @color;
                height: 28px;
                line-height: 28px;
                text-align: center;
                color: #fff;
                border-radius: 2px;
                cursor: pointer;
                background: rgba(0, 16, 30, .5);
                padding: 0;
            }
        }
        .environmental-risk-list {
            position: relative;
            padding-left: 50px;
            padding-top: 5px;
            padding-bottom: 5px;
            color: @color-shadow;
            border-bottom: 1px solid @background-color-split;
            h3{ cursor: pointer;}
            .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 {
                position: relative;
                padding-left: 50px;
                padding-top: 5px;
                padding-bottom: 5px;
                color: @color-shadow;
                border-bottom: 1px solid @background-color-split;

        .environmental-risk-list.hover,
        .environmental-risk-list:hover {
            color: @color-highlight;
            background: @background-color;
                h3 {
                    cursor: pointer;
                }

                .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.hover,
            .environmental-risk-list:hover {
                color: @color-highlight;
                background: @background-color;
            }
        }
    }
}
</style >
</style>