统一样式修改部分完成。

chenyabin

2021-04-07 7b2f20f1299306f087d89aa202b52708df7ec4e6

统一样式修改部分完成。

 src/assets/css/map/_map-variable.less

@@ -1,12 +1,12 @@
@color: #00fff6;
@color-highlight: #fff700;
@color-gray: #C0C4CC;
@color-title: white;
@color-title: white;//标题色
@color-over: white;
@color-tool: #C0C4CC;
@color-shadow: #00fff6;
@background-color: rgba(0, 16, 30, .5);
@background-color-light: rgba(40, 50, 100, .4);
@background-color-split: rgba(0, 255, 246, .14);
@background-color-tools: #1A4951;
@border-radius: .03rem;
@color-tool: #C0C4CC;//工具色
@color-shadow: #00fff6;//显示颜色
@background-color: rgba(0, 16, 30, .7);//背景填充色
@background-color-light: rgba(40, 50, 100, .4);//光晕
@background-color-split: rgba(0, 255, 246, .14);//分割线
@background-color-tools: #1A4951;//工具箱
@border-radius: .03rem;//倒角

 src/assets/css/map/map-panel-style.less

@@ -46,7 +46,7 @@

  .el-dialog__title {
    padding: .03125rem .08333rem;
    color: @color;
    color: @color-title;
    cursor: pointer;
    flex-shrink: 0;
  }
@@ -210,7 +210,37 @@
  margin-left: 10px;
}

.el-scrollbar__wrap{

}
.el-scrollbar__wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.el-scrollbar__wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background: none;
}
.el-scrollbar__wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : none;
  border-radius: 10px;
}
#el-scrollbar__wrap::-webkit-scrollbar-button { /*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
  background: #74D334;
}
/*******************操作按钮点击选中整体样式******************************/
.el-button{

}
.active-button{
  border: 0.00521rem solid #fff700 !important;
  box-shadow: 0 0 0.03rem #fff700 !important;
  color:#fff700 !important;
}

/***************Company 图层 悬浮框样式。*********************************/
.company-bindTooltip{
@@ -242,3 +272,40 @@
  width: 50%;
}

/***********************************************动画效果************/
.transition{
  transition: all .5s;
 /* transform-origin: top left;*/
  animation: bounce-in .2s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/**map 页面图标按钮*/
.iconBtn {
  width:0.26rem;
  height: 0.26rem;
  text-align: center;
  background: rgba(0, 16, 30, 0.5);
  cursor: pointer;
  color: #00fff6;
  border: 0.00521rem solid #00fff6;
  box-shadow: 0 0 0.03rem #00fff6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  border-radius: 0.03rem;
  .icon{
    width: 20px;
    margin: 0 auto;
  }

}

 src/components/LayerController/LayerController.vue

@@ -1,9 +1,13 @@
<template>
  <div class="float-panel">
    <div :class='["iconBtn",layerControllerVisible ? "active" : ""]' @click="showPanel"><span><img src="@assets/images/map-pages/icon/layer.png" alt="" width="26px" style="display: block;margin: auto"><span class="icon-name">图层</span></span></div>
  <div :class='["float-panel",layerControllerVisible ? "active" : ""]' >
    <div @click="showPanel" class="iconBtn transition" :class='layerControllerVisible ? "active-button" : ""' v-show="!layerControllerVisible" style="position: absolute;top:0;left: 0">
      <img src="@assets/images/map-pages/icon/layer.png" alt="" class="icon">
      <span class="icon-name">图层</span>
    </div>
    <transition name="fade">
      <div :class="'legend-content map-background'" style="position: absolute;left: 50px;top: 0" v-show="layerControllerVisible">
      <div :class="'legend-content map-background'" v-show="layerControllerVisible" style=" transform-origin: top left;">
        <lc-service-layer></lc-service-layer>
        <buttom  @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></buttom>
      </div>
    </transition>
  </div>
@@ -89,27 +93,19 @@
<style lang="less">
.float-panel {
  position: absolute;
  left: 2px;
  top: 120px;
  left: 0.14583rem;
  top: 0.8rem;
  height: auto;
  font-size: 11px;
  z-index: 1000;
  display: flex;

  div {
    color: #00fff6;
  }
  .iconBtn {
    width:45px;
    text-align: center;
    background: rgba(0, 16, 30, 0.5);
    cursor: pointer;
    color: #00fff6;
    border: 0.00521rem solid #00fff6;
    box-shadow: 0 0 0.03rem #00fff6;
  }
  .active {
    border: 0.00521rem solid #fff700;
    box-shadow: 0 0 0.03rem #fff700;

  .iconBtn.active{
    display: none;
  }
  .title-border {
    width: 100%;
@@ -216,9 +212,8 @@
  .switch-head-down {
    transform: rotateX(180deg);
    transform-origin: 50% 50%;
    transition: transform 0.5s linear 0s;
    transition: transform 2s linear 0s;
  }

  select {
    background: transparent;
    margin: 6px;
@@ -246,6 +241,21 @@
    border-radius: 0px;
    background: #0E3565;
  }
  .el-button--default{
   margin-left: 10px;
    padding: 15px 3px;
    background:@background-color;
    color:@color-tool;
    position: absolute;
    top:0;
    right: -26px;
  }
  .el-button--default:hover{
    background:@background-color;
  }
  .legend-content{
    width:  1.79167rem;
  }
}

</style>

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -101,18 +101,13 @@
<style scoped lang="less">
    .inner-panel {
        .title{
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            color: @color-title;
            font-size: 18px;
            margin: 10px;
            text-align: center;
        }
        .btn-filter {
            cursor: pointer;
            color: #ffffff;
        }
        .wms-panel {
            width:  1.79167rem;

            .wms-panel-scrollbar{
                height: 50vh;
                width: 100%;

 src/components/panel/RightSearchPanel.vue

@@ -7,7 +7,7 @@
      <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="   ">
          <li>
<!--            <span>{{item.name}}</span>-->
<!--            <div >-->
                <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
@@ -178,16 +178,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: 80vh;
    max-height: 90vh;
    overflow: hidden;
}
.module-wrap{
@@ -224,8 +222,8 @@
  //top: 10px;
  height: 0;
  position: absolute;
  top: .4rem;
  right: .08333rem;
  top: .46rem;
  right: 0.14583rem;
  z-index: 501;
  display: -webkit-box;
  display: -ms-flexbox;
@@ -474,7 +472,7 @@
        display: inline-block;
        position: relative;
        padding-right: 5px;
        color:#f5f5f5;
        color:@color-shadow;
        i{
            display: block;
            width: 15px;
@@ -488,14 +486,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;
@@ -508,6 +505,11 @@
            background: #0B3B6D;
        }
    }
    .environmental-risk-list.hover,
    .environmental-risk-list:hover{
        color:@color-over;
        background: @background-color;
    }
  //.search-panel {
  //  border: #07325B;
  //  background-color: #07325B !important;

 src/components/panel/ToolBoxPanel.vue

@@ -1,10 +1,9 @@
<template>
  <div class="left-top-toolbox-panel">
    <div class="specific-tools">
      <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice"
                 @mouseover.enter.native="changeSelectMouse">
        <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt=""/>
        <span class="span-default">工具</span>
      <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice"   @mouseover.enter.native="changeSelectMouse">
          <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt="" class="icon" />
          <span class="span-default">工具</span>
      </el-button>
      <transition name="animationChange">
        <el-row v-show="selectGroup" class="specific-tools-group">
@@ -422,8 +421,8 @@

.left-top-toolbox-panel {
  position: absolute;
  left: 0;
  top: 15px;
  left: 0.14583rem;
  top: 0.11979rem;
  z-index: 999;

  .specific-tools {
@@ -445,22 +444,18 @@
      .base-map-img:hover {
        cursor: pointer;
      }

      img {
        width: 22px;
        height: 22px;
      }

      .span-default {
        display: block;
        color: @color-shadow;
        font-size: 11px;
        font-size: 10px;
      }

      span {
        display: block;
        color: @color-over;
        font-size: 11px;
        font-size: 10px;
        color: #0B89B5;
      }
    }

@@ -468,7 +463,8 @@
      left: 500px;
      z-index: 999;
      padding: 0;
      margin: 0 0.015rem;
      margin: 0;
      margin-right:0.015rem;
      width: 45px;
      height: 45px;
      background: @background-color;

 src/components/panel/topicSearch/DischargeSearch.vue

@@ -44,8 +44,8 @@
        </div>
      </el-form>
    </div>
    <el-scrollbar style="height:300px">
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
    <el-scrollbar style="height:416.44px">
      <div class="environmental-risk-list hover" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>

 src/components/panel/topicSearch/EnvRiskSearch.vue

@@ -44,7 +44,7 @@
        </div>
      </el-form>
    </div>
    <el-scrollbar style="height:300px">
    <el-scrollbar style="height:264px">
      <div class="environmental-risk-list" v-for="(item,index) in 5" :key="index" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>

 src/components/panel/topicSearch/SewersSearch.vue

@@ -39,7 +39,7 @@
              <!--              </el-form-item>-->
            </el-form>
          </div>
          <el-scrollbar style="height:100%">
          <el-scrollbar style="height:380.44px;" >
            <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
              <div class="B-TMD-table-list-title">
                <div class="B-TMD-table-list-head">

 src/components/panel/topicSearch/SoilGroundWaterSearch.vue

@@ -54,7 +54,7 @@
                <!--              </el-form-item>-->
            </el-form>
        </div>
        <el-scrollbar style="height:300px">
        <el-scrollbar style="height:416.44px">
            <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>

 src/components/panel/topicSearch/SolidWasteSearch.vue

@@ -29,16 +29,17 @@
          <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom>
        </div>
      </el-form>
      <el-card class="box-card"
               v-for="(item,index) in searchDataDisplay"
               :key="index">
        <div>
          {{ item.CompanyName }}
        </div>
      </el-card>
    </div>
    <!--      <el-scrollbar style="height:100%">-->
    <!--      </el-scrollbar>-->
    <el-scrollbar style="height:286.22px">
      <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>


 src/components/panel/topicSearch/WaterWasteSearch.vue

@@ -23,43 +23,17 @@
                    <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom>
                </div>
            </el-form>
            <div>
                <el-card class="box-card" v-for="(item,index) in searchDataDisplay" :key="index">
                    <div v-if="total > 3">
                        {{ item.CompanyName }}
                    </div>
                </el-card>
                <!--        <el-pagination-->
                <!--            small-->
                <!--            layout="prev, pager, next"-->
                <!--            :total=total-->
                <!--            :current-page=1-->
                <!--            class="warnPagination"-->
                <!--        >-->
                <!--        </el-pagination>-->
            </div>
            <!--      <el-scrollbar style="height:100%">-->
            <!--      <el-card class="footer-page">-->
            <!--        <ul>-->
            <!--          {{ searchDataDisplay }}-->
            <!--          <li v-for="(item,index) in searchDataDisplay" :key="index">-->
            <!--            {{ item.CompanyName }}-->
            <!--          </li>-->
            <!--        </ul>-->
            <!--      </el-card>-->
            <!--          <el-pagination-->
            <!--              small-->
            <!--              @current-change="handlePage"-->
            <!--              :page-size=pageSize-->
            <!--              layout="prev, pager, next"-->
            <!--              :total=total-->
            <!--              :current-page=current-->
            <!--              class="warnPagination"-->
            <!--          >-->
            <!--          </el-pagination>-->
            <!--      </el-card>-->
            <!--      </el-scrollbar>-->
        </div>
        <el-scrollbar style="height:264px">
            <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>


 src/components/plugin/FullScreen.js

@@ -48,7 +48,7 @@
      },



      _toggleTitle: function () {

        this.link.title = this.options.title[this._map.isFullscreen()]

        this.link.title = this.optionsthis._map.isFullscreen()]

      }

    })




 src/components/table/enterprise.vue

@@ -1,13 +1,22 @@
<template>
    <div class="enterprise-panel">
        <div class="enterprise-function" @click="showWarnDialog()">
            <div :class='["iconBtn",warnVisible ? "active" : ""]'><span><img src="@/assets/images/map-pages/icon/map/warn.png" alt="" width="26px" style="display: block;margin: auto"><span class="icon-name">预报警</span></span></div>
            <div :class='["iconBtn",warnVisible ? "active-button" : ""]'>
                <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" class="icon">
                <span class="icon-name">预报警</span>
                <!--    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="预报警" placement="left">
                    <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" width="26px" style="display: block;margin: auto">

                </el-tooltip> -->
            </div>
        </div>
        <div class="enterprise-function" @click="showStatisDialog()">
            <div :class='["iconBtn",companyVisible ? "active" : ""]'><span><img src="@/assets/images/map-pages/icon/map/company.png" alt="" width="26px" style="display: block;margin: auto"><span class="icon-name">指标</span></span></div>
            <div :class='["iconBtn",companyVisible ? "active-button" : ""]'>
                <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon">
                <span class="icon-name">指标</span>
            </div>
        </div>
        <Dialog ref="warnDialog" title="企业预警报警分类统计">
        <Dialog ref="warnDialog" title="企业预警报警分类统计" >
            <warn></warn>
        </Dialog>
        <Dialog ref="indexStatisticsDialog" title="企业指标分类统计">
@@ -47,6 +56,17 @@
      this.$refs.indexStatisticsDialog.show()
      this.companyVisible = true
    }
  },
  mounted () {
    const that = this
    this.$nextTick(() => {
      this.$refs.warnDialog.$on('closeDialog', () => {
        that.warnVisible = false
      })
      this.$refs.indexStatisticsDialog.$on('closeDialog', () => {
        that.companyVisible = false
      })
    })
  }
}
</script>
@@ -54,27 +74,15 @@
<style lang="less" scoped>
.enterprise-panel{
    position: absolute;
    right: 5px;
    top:5px;
    right: 0.14583rem;
    top:0.11979rem;
    z-index: 9999;

    .enterprise-function{
        width: 50px;
        float: left;
        cursor: pointer;
    }
    .iconBtn {
        width:45px;
        text-align: center;
        background: rgba(0, 16, 30, 0.5);
        cursor: pointer;
        color: #00fff6;
        border: 0.00521rem solid #00fff6;
        box-shadow: 0 0 0.03rem #00fff6;
    }
    .active {
        // border: 0.00521rem solid #fff700;
        // box-shadow: 0 0 0.03rem #fff700;
    .enterprise-function:not(:first-child){
        margin-left: 10px;
    }
}
</style>

 src/components/table/summarySheets.vue

@@ -1,6 +1,9 @@
<template>
    <div class="summary-sheets">
        <div :class='["iconBtn",summaryVisible ? "active" : ""]' @click="closeBtn"><span><img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" width="26px" style="display: block;margin: auto"><span class="icon-name">统计表</span></span></div>
        <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn">
            <img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" class="icon">
            <span class="icon-name">统计表</span>
        </div>
        <Dialog ref="summarySheets" title="企业指标分类统计">
          <tab-handover></tab-handover>
        </Dialog >
@@ -26,7 +29,16 @@
      // const summary = document.getElementById('summary')
      // summary.style.display = 'none'
      this.$refs.summarySheets.show()
      this.summaryVisible = true
    }
  },
  mounted () {
    const that = this
    this.$nextTick(() => {
      this.$refs.summarySheets.$on('closeDialog', () => {
        that.summaryVisible = false
      })
    })
  }
}
</script>
@@ -34,29 +46,17 @@
<style scoped lang="less">
    .summary-sheets {
        position: absolute;
        top: 70px;
        left: 1px;
        top: 0.46rem;
        left: 0.14583rem;
        /*width: 850px;*/
        /*height: 265px;*/
        z-index:500;

        /*color: #fff;*/
       .el-icon-c-scale-to-original {
         width: 30px;
         height: 30px;
         font-size: 30px;
       }
        .iconBtn {
            width:45px;
            text-align: center;
            background: rgba(0, 16, 30, 0.5);
            cursor: pointer;
            color: #00fff6;
            border: 0.00521rem solid #00fff6;
            box-shadow: 0 0 0.03rem #00fff6;
        }
        .active {
            border: 0.00521rem solid #fff700;
            box-shadow: 0 0 0.03rem #fff700;
        }
    }
</style>

 src/styles/theme-dark/el-ui/button.less

@@ -1,35 +1,35 @@
.el-button--primary{
--primary{
    color: @dark--text-base;
    background-color: @dark--button-primary-background-color;
    border-color: @dark--primary-color;
}

.el-button--primary:hover, .el-button--primary:focus{
--primary:hover, --primary:focus{
    background: rgb(51, 163, 182);
    border-color: rgb(81, 229, 253);
    color: @dark--title-color;
}

.el-button--primary:active{
--primary:active{
    background: rgb(0, 126, 148);
    border-color: rgb(34, 200, 228);
    color: @dark--title-color;
    outline: none;
}

.el-button--primary.is-active{
--primary.is-active{
    background: rgb(0, 126, 148);
    border-color: rgb(34, 200, 228);
    color: @dark--title-color;
}

.el-button--primary.is-plain{
--primary.is-plain{
    background: transparent;
    border: 1px solid #198CA7;
    color: rgb(31, 45, 61);
}

.el-button--primary.is-plain:hover, .el-button--primary.is-plain:focus{
--primary.is-plain:hover, --primary.is-plain:focus{
    background: transparent;
    border-color: @dark--primary-color;
    color: @dark--button-primary-background-color;

 src/views/popup/Dialog.vue

@@ -5,6 +5,7 @@
            width="30%"
            :modal="false"
            :close-on-click-modal="false"
             @close='closeDialog'
            center>
        <slot></slot>
    </el-dialog>
@@ -27,6 +28,9 @@
  methods: {
    show () {
      this.centerDialogVisible = true
    },
    closeDialog () {
      this.$emit('closeDialog')
    }
  }
}