左侧图层控制check样式修改

yangdelong

2021-04-19 fbf48d910ae20f1df53a018c5a37a9b63fb2a169

左侧图层控制check样式修改

 src/components/BaseNav/PublicDataStandard.vue

New file
@@ -0,0 +1,45 @@
<template>
  <div class="animation">
    <div class="information">
<!--      <span class="grid-content">氮氧化物 : <i style="color: #e8ee0b">29.93</i>  标准 : <i style="color: #fff">100</i></span>-->
<!--      <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : <i style="color: #fff">50</i></span>-->
<!--      <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : <i style="color: #fff">30</i></span>-->
<!--      <span class="grid-content">废气流量 : <i style="color: #e8ee0b">120343.18</i></span>-->
      <span class="grid-content" v-for="item in dataStandard" :key="item.current.name">{{ item.current.name }} :
        <i style="color: #e8ee0b">{{ item.current.val }}</i>  {{ item.standard.name ?item.standard.name+':':'' }} <i style="color: #fff">{{ item.standard.val }}</i></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublicDataStandard',
  props: {
    dataStandard: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.animation {
  .information {
    padding: 0.02rem 0.04rem;

    .grid-content {
      font-size: 0.08rem;
      background-color: #2e4967;
      text-align: center;
      border-radius: 0.01rem;
      height: 0.15rem;
      line-height: 0.15rem;
      margin-right: 0.04rem;
      padding: 0 0.04rem
    }
  }
}
</style>

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -6,7 +6,7 @@
                <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                    <i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down -->
                    <!-- 一级图层遍历 -->
                    <div style="padding-left:25px;padding-top:10px;color:#fff">
                    <div style="padding-left:25px;padding-top:10px;color:#fff;font-size: 16px;">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item,'')"/>{{ item.name }}
                    </div>
                    <div class="layerbox-item" v-show="item.isShow">
@@ -122,6 +122,10 @@
                    padding-top: 5px;
                    .basemap-layer-item {
                        margin-bottom: 5px;
                      input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 10px;position: relative;}
                      input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
                      input[type="checkbox"]:checked::before{content: "\2713";background-color: @color-highlight;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #fff700;color:@background-color;font-size: 10px;font-weight: bold;}

                    }
                }
                .layerbox-item-3{

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -136,8 +136,10 @@
                    padding-bottom: 5px;
                    //overflow-y: hidden;
                }

                //
              input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 10px;position: relative;}
              input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
              input[type="checkbox"]:checked::before{content: "\2713";background-color: @color-highlight;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #fff700;color:@background-color;font-size: 10px;font-weight: bold;}
              //
                //::-webkit-scrollbar {
                //    width: 7px;
                //    height: 5px !important;