Project_yhfu/src/assets/styles/base.scss

// 字体
$fontFk: zk;
$fontLED: led;

//颜色
$white: #fff;
$inBlue: #25bdcb;
$subtitle: #638395;
$inBlueHover: #07ffc1;
$inYellow: #ffd014;
$deepBlue: #0b293a;
$listText: #1a7988;
$textGray: #ccc;
$grayBlue: #5685a0;
$tipHover: #23b8ba;
$eventBG: #0b284e;


//渐变
$GradualGreen: 180deg, rgba($color: #138399, $alpha: .8),
rgba($color: #04151e, $alpha: .8);

$conBg: 180deg, rgba($color: #0f282c, $alpha: 1),
rgba($color: #051216, $alpha: 1);

$btmMemu: 180deg, rgba($color: #0a1f20, $alpha: 1),
rgba($color: #011d2a, $alpha: 1);

$boxBG: 180deg, rgba($color: #0d2760, $alpha: 1),
rgba($color: #081a41, $alpha: 1);

//内阴影
$shadowList: 0 0 1rem 0 rgba($color: #0b1b25, $alpha: .8);
$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #15dbb4, $alpha: .09) inset;
$shadowListHover: rgba($color: #1cbfc2, $alpha: .7) 0px 0px 50px inset;
$shadowListHoverI: 0 0 3px rgba($color: #41ff84, $alpha: .5), -0 -0 10px rgba($color: #41fff8, $alpha: .9);
$shadowTip: 0 0 1rem 0 rgba($color: #34c7e7, $alpha: .8) inset;
$shadowCount: 0 0 .5rem 0 rgba($color: #00c8ff, $alpha: 1) inset;

//可视化 数字林业
$fBlue: #0bb3c2;
$fBlueHover: #07ffc1;
$fBlueG: #0bf3f7;
$fListTitle: #0fc4d4;
$barBgc: rgba($color: #102127, $alpha: .9);
$barShadow: rgba($color: #078ad1, $alpha: .8) 0px 0px 18px inset;
$barBorder: solid rgba($color: #33467f, $alpha: .7);
$tableBorder: solid rgba($color: #33467f, $alpha: .7);
$countBorder: solid rgba($color: #00aeff, $alpha: .9);
$searchBorder: solid rgba($color: #33727f, $alpha: 1);
$searchBG: #102127;
$deepBG: #09192f;
//icon
$iconBg: #f5ad1b, #58b35d, #0FA2FF, #da8ec5, #78bfc2, #a28e52, #ff6063, #96bd5b, #f5ad1b, #da8ec5, #5f89ce, #78bfc2, #bec278, #f07779;
$iconColor: #32e583, #f5ad1b, #da8ec5, #5f89ce, #78bfc2, #bec278, #f07779;

//状态
$state-wcl: #ff9c00;
$state-wyc: #1cef84;


$eventStateColor-sb: #11b57e;
$eventStateColor-qs: #f18425;
$eventStateColor-wb: #c2bc43;
$eventStateColor-cf: #a23737;
$eventStateColor-bj: #6ae08f;
$eventStateColor-gd: #0369ef;
$eventStateColor-qr: #20EF56;

$eventStateColor-xsb: #11b57e;
$eventStateColor-cb: #e63b4a;
$eventStateColor-yqs: #f18425;
$eventStateColor-ld: #a23737;
$eventStateColor-tb: #0369ef;


//日历状态
$date-state1: #2abc65;
$date-state2: #e68d3f;
$date-state3: #d6333b;


//公共
body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

.inlineBlock {
  display: block;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

aside {
  background: #eef1f6;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

iframe {
  border: 0;
}

* {
  padding: 0;
  margin: 0;
}

a {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

.sj-container {
  width: 100%;
  height: 100vh;
}

div::-webkit-scrollbar {
  display: none;
}

//#toolbar::-webkit-scrollbar {
//  width: 20px !important;
//  display: block !important;
//}
//
//#toolbar::-webkit-scrollbar-track {
//  background: linear-gradient(0deg, rgba(10, 19, 47, 1.0) 0%, rgba(36, 46, 104, 1.0) 100%) !important;
//}
//
//#toolbar::-webkit-scrollbar-thumb {
//  background: transparent !important;
//  box-shadow: 0px 0px 0px 100vh black !important;
//}

#icon {
  margin-bottom: 5rem;
  padding: .5rem;
}

.ztree {
  padding: .5rem;
}

#toolbar {
  color: $inBlue;
}

.w-5 {
  width: 5.5rem;
}

.h-9 {
  height: 9vh;
}

.h-10 {
  height: 10vh;
}

.h-13 {
  height: 13vh;
}

.h-14 {
  height: 14vh;
}

.h-15 {
  height: 15vh;
}

.h-16 {
  height: 16vh;
}

.h-18 {
  height: 18vh;
}

.h-19 {
  height: 19vh !important;
}

.h-20 {
  height: 20vh !important;
}

.h-21 {
  height: 21vh;
}

.h-22 {
  height: 22vh;
}

.h-23 {
  height: 23vh !important;
}

.h-25 {
  height: 25vh !important;
}

.h-26 {
  height: 26vh !important;
}

.h-27 {
  height: 27vh;
}

.h-28 {
  height: 28vh !important;
}

.h-29 {
  height: 29vh;
}

.h-29-5 {
  height: 29.5vh;
}

.h-30 {
  height: 30vh;
}

.h-31 {
  height: 31vh;
}

.h-35 {
  height: 34vh;
}

.h-32 {
  height: 31.6vh;
}

.h-39 {
  height: 39vh !important;
}

.h-40 {
  height: 40vh !important;
}

.h-43 {
  height: 42vh !important;
}

.h-45 {
  height: 45vh !important;
}

.h-50 {
  height: 50vh !important;
}

.h-51 {
  height: 51vh;
}

.h-55 {
  height: 55vh;
}

.h-60 {
  height: 59vh;
}

.h-63 {
  height: 62vh;
}

.h-67 {
  height: 66.5vh;
}

.h-73 {
  height: 74vh;
}

.h-78 {
  height: 78vh;
}

.h-80 {
  height: 80vh;
}

.line-h-1 {
  line-height: 1rem;

}

.w-100p {
  width: 100% !important;
  max-width: 100% !important;
}

.w-25 {
  width: 25rem !important;
}

.w-50 {
  width: 50% !important;
}

.w-33 {
  width: 33% !important;
}

.w-10 {
  width: 10rem !important;
}

.top-2 {
  top: 5vh !important;
  position: relative !important;
}

.flex-d {
  flex-direction: column !important;
}

.a-item {
  align-items: center;
}

.icon-bigger {
  font-size: 2.4rem !important;
}

.no-padding {
  padding: 0;
}

.m-t-no {
  margin-top: 0 !important;
}

.m-btm-no {
  margin-bottom: 0 !important;
}

.overflow-y {
  overflow-y: scroll;
}

.el-radio {
  margin-right: 1rem;
}

.justify-content-bt {

  justify-content: space-between
}

.justify-content-end {
  justify-content: end
}

.text-right {
  text-align: right;
}

.flex-c {
  flex-direction: column !important;
}

.flex-r {
  flex-direction: row !important;
}

.padding-box {
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
}

// 不换行

.nowrap {
  flex-wrap: nowrap !important;
}

.d-tit {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 1rem 0.5rem;

  h4 {
    font-size: 14px !important;
    margin: 0;
    color: $fListTitle;
    font-weight: normal;
    display: block;
    max-width: 90%;
    line-height: 1rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid $fBlueHover;

  }
}

.t-a-center {
  text-align: center;
}

.m-r-none {
  margin-right: 0 !important;
}

.icon-text-col {
  margin-top: .5rem;
}

// 弹层按钮组
.info-button-group {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;

  button {
    color: #3cd7ef;
    background: 180deg, rgba(9, 30, 54, 0.8), rgba(6, 27, 39, 0.8);
    margin: 5px;
    color: #3cd7ef;
    background: -webkit-gradient(linear, right top, left top, from(#051d2b), color-stop(#00335c), to(#051d2b));
    background: linear-gradient(to left, #051d2b, #00335c, #051d2b);
    margin: 5px;
    padding: 0.5rem 1rem;
    border: 0;
    cursor: pointer;
  }

  button:hover {
    color: #fff;
    font-weight: bolder;
    background: -webkit-gradient(linear, right top, left top, from(#051d2b), color-stop(#006ec8), to(#051d2b));
    background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
    -webkit-box-shadow: rgb(5 103 194 / 80%) 0px 0px 15px inset;
    box-shadow: rgb(5 103 194 / 80%) 0px 0px 15px inset;
    padding: 0.5rem 1rem;
    cursor: pointer;
  }

}

//弹层样式
.customWidth {
  width: 1822px !important;
  height: 866px !important;
}

//视频摄像头预览弹层样式
.videoCustomWidth {
  width: 1070px !important;
  height: 700px !important;
}
//电视墙视频摄像头预览弹层样式
.TVWallCustomWidth {
  width: 1150px !important;
  height: 700px !important;
}

.dia-event-info {


  .el-row {
    height: 780px;
  }

  .dia-left {
    height: 780px !important;
    position: absolute;
    z-index: 999;
    //超图绘制截屏

	button {
	  padding: 0 .3rem;
	  height: 1.5rem;
	  background-color: #112543;
	  color: $inBlue;
	  border: 1px $searchBorder;
	}

	button:hover {
	  text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
	}
	.fire-m{
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		z-index:100000;

	}

    .leaflet-pane .leaflet-overlay-pane {
      height: 780px !important;
      width: 1340px !important;
    }

    .leaflet-pane .leaflet-overlay-pane svg {
      height: 780px !important;
      width: 1340px !important;
      transform: translate3d(0px, 0px, 0px) !important;
    }

    .dia-left-top {
      width: 16.3rem;
      display: flex;
      color: $inBlue;
      align-items: center;
      border: 1px $barBorder;
      padding: 0.5 1rem;
      position: absolute;
      background: linear-gradient(180deg, #0d2760, #081a41);
      z-index: 999;
      left: 1rem;
      top: 1rem;


      .dia-left-top-tit {
        width: 6.3rem;
        padding: .5rem;
        background: linear-gradient($boxBG);
      }

      .dia-left-top-carousel {
        width: 10rem;
        padding-left: 1rem;
        overflow: hidden;

        .el-carousel__indicator {
          display: none;
        }

        .el-carousel__item {
          display: flex;
          align-items: center;
        }
      }
    }

    .dia-left-btm-tool {
      position: absolute;
      bottom: 0;
      left: 0;
      border: 1px $barBorder;
      width: 90%;
      border-radius: 1rem;
      height: 4rem;

    }
  }

  .dia-right {
    height: 780px !important;
    position: absolute;
    right: 0;
    color: $inBlue;

    .e-right {
      height: 780px !important;
      .forthis1{
        height: 530px;
        margin-bottom: .5vh;
        .map-con {
          height: 100% !important;
          position: relative !important;
        }


        .this-title {
          width: 100%;
          font-size: .7rem;
          height: 2vh;
          line-height: 2vh;
          padding: 0rem 0 0 1rem;
          display: flex;
          justify-content: space-between;
          // background-image: -moz-linear-gradient($GradualGreen);
          // background-image: -webkit-linear-gradient($GradualGreen);
          // background-image: linear-gradient($GradualGreen);
          // box-shadow: $shadowTitle;
          .el-date-editor {
            width: 100%;
          }

          .el-input__inner {
            background: $barBgc;
            box-shadow: $shadowTitle;
            height: 1.5rem;
            color: $inBlue;
            border: 1px $barBorder;
          }

          .el-input__inner:hover {
            background: #00335c;
          }

          .el-input__icon {
            line-height: .5rem;
            height: auto;
          }

          i {
            font-size: 1rem;
          }

          span {
            font-family: $fontLED;
            color: $white;
            text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha: 1);
            display: flex;
            align-items: center;

            img {
              width: 21px;
              height: 21px;
              margin-right: 5px;
            }

          }

          span:nth-child(2) {
            font-size: 1.5rem;
          }

        }

        .i-list-con {
          width: 100%;
          overflow-y: scroll;
          padding: .3rem;
          // margin-bottom:0.8rem;
          //天气
          .weather-img {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: $inBlue;
            padding: .2rem 0 0 .8rem;
            text-align: center;

          }

          .weather-info {
            color: $inBlue;

            ul {
              li {
                float: left;
                margin-right: 1rem;
                height: 1.5rem;
                line-height: 1.5rem;
              }
            }
          }

          .firestate {
            width: 85%;
            margin: 1rem auto;
            display: flex;
            align-items: center;

            .state-block1, .state-block2, .state-block3, .state-block4, .state-block5 {
              width: 20%;
              height: .2rem;
            }

            .state-block1 {
              background-color: #4784ff;
            }

            .state-block2 {
              background-color: #25dbcd;
            }

            .state-block3 {
              background-color: #dad028;
            }

            .state-block4 {
              background-color: #fb7d2a;
            }

            .state-block5 {
              background-color: #f04143;
            }

            .state-on {
              height: .6rem;
            }

          }

          //事件列表
          .event-list-search {
            padding: 0 .5rem;
            margin-bottom: 1rem;

          }


          // 清除el折叠样式
          .el-collapse {
            border: none;
            margin: 0;
          }

          .el-collapse-item__header {
            background: none;
            padding: 0;
            height: fit-content !important;
            border-bottom: none;
            line-height: normal !important;
          }

          .el-collapse-item__arrow {
            color: $inBlue;
            position: relative;
            left: -20.5rem;
            margin: 0;
          }

          .el-collapse-item__wrap {
            background: none;
            border-bottom: none;
          }

          .el-collapse-item__content {
            padding-bottom: 0;
          }

          .this-child {
            width: 100% !important;

            .d-l-l-text {
              padding-left: 1.1rem !important;
              width: auto !important;
            }

          }


          .this-con {
            width: 100%;
            padding: 1rem;
            height: 515px;
            overflow-y: scroll;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;

            .this-con-list-info {
              padding-bottom: .5rem;
              float: left;
              color: #6da0c3;
            }

            .this-con-list {
              padding: 2rem 0;
              height: auto;
              float: left;
              border-bottom: 1px solid #094268;

            }

            .this-con-list:first-child {
              padding-top: 0;

            }

            .this-con-list:last-child {
              border-bottom: 0;

            }

            .z-begin {
              text-align: center;
              padding: 5px 10px;
              color: #fff;
              background: #3c84b5;
              border-radius: 5px;
              margin-bottom: 10px;
              margin: 0 auto;
            }

            .z-info-list {
              width: 100%;
              margin-top: 2rem;
              display: flex;

              img {
                border-radius: .3rem;
              }

              .z-info-list-con {
                display: flex;
                flex-direction: column;

                .z-info {
                  width: 100%;
                  // background: $eventBG;
                  margin-top: .5rem;
                  border-radius: .3rem;
                  display: flex;
                  flex-direction: column;
                }
              }
            }

            .el-timeline {
              .el-timeline-item__tail {
                border-left: 2px solid #28567f;
              }

              .el-timeline-item__timestamp {
                color: $inBlue;
              }

              .el-card {
                background: $eventBG;
                border: 1px $barBorder;

                .el-card__body {
                  padding: 1rem;

                }
              }
            }


          }

          .mg-t-8 {
            margin-top: 8px;
          }

          .user-and-time {
            display: flex;
            flex-direction: column;

            span:first-child {
              font-size: .8rem;
              color: #01d1eb;
              font-weight: bolder;
              display: inline-block;
            }

            span:last-child {
              font-size: .8rem;
              color: #6da0c3;
              display: inline-block;
              padding-top: .2rem;
            }

            h6 {
              margin: 0;
            }
          }

        }

        .small-bottom-margin {
          margin-bottom: .2rem !important;
        }
      }
      .forthis1-1{
        height: 776px;
        margin-bottom: .5vh;
        .map-con {
          height: 100% !important;
          position: relative !important;
        }


        .this-title {
          width: 100%;
          font-size: .7rem;
          height: 2vh;
          line-height: 2vh;
          padding: 0rem 0 0 1rem;
          display: flex;
          justify-content: space-between;
          // background-image: -moz-linear-gradient($GradualGreen);
          // background-image: -webkit-linear-gradient($GradualGreen);
          // background-image: linear-gradient($GradualGreen);
          // box-shadow: $shadowTitle;
          .el-date-editor {
            width: 100%;
          }

          .el-input__inner {
            background: $barBgc;
            box-shadow: $shadowTitle;
            height: 1.5rem;
            color: $inBlue;
            border: 1px $barBorder;
          }

          .el-input__inner:hover {
            background: #00335c;
          }

          .el-input__icon {
            line-height: .5rem;
            height: auto;
          }

          i {
            font-size: 1rem;
          }

          span {
            font-family: $fontLED;
            color: $white;
            text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha: 1);
            display: flex;
            align-items: center;

            img {
              width: 21px;
              height: 21px;
              margin-right: 5px;
            }

          }

          span:nth-child(2) {
            font-size: 1.5rem;
          }

        }

        .i-list-con {
          width: 100%;
          overflow-y: scroll;
          padding: .3rem;
          // margin-bottom:0.8rem;
          //天气
          .weather-img {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: $inBlue;
            padding: .2rem 0 0 .8rem;
            text-align: center;

          }

          .weather-info {
            color: $inBlue;

            ul {
              li {
                float: left;
                margin-right: 1rem;
                height: 1.5rem;
                line-height: 1.5rem;
              }
            }
          }

          .firestate {
            width: 85%;
            margin: 1rem auto;
            display: flex;
            align-items: center;

            .state-block1, .state-block2, .state-block3, .state-block4, .state-block5 {
              width: 20%;
              height: .2rem;
            }

            .state-block1 {
              background-color: #4784ff;
            }

            .state-block2 {
              background-color: #25dbcd;
            }

            .state-block3 {
              background-color: #dad028;
            }

            .state-block4 {
              background-color: #fb7d2a;
            }

            .state-block5 {
              background-color: #f04143;
            }

            .state-on {
              height: .6rem;
            }

          }

          //事件列表
          .event-list-search {
            padding: 0 .5rem;
            margin-bottom: 1rem;

          }


          // 清除el折叠样式
          .el-collapse {
            border: none;
            margin: 0;
          }

          .el-collapse-item__header {
            background: none;
            padding: 0;
            height: fit-content !important;
            border-bottom: none;
            line-height: normal !important;
          }

          .el-collapse-item__arrow {
            color: $inBlue;
            position: relative;
            left: -20.5rem;
            margin: 0;
          }

          .el-collapse-item__wrap {
            background: none;
            border-bottom: none;
          }

          .el-collapse-item__content {
            padding-bottom: 0;
          }

          .this-child {
            width: 100% !important;

            .d-l-l-text {
              padding-left: 1.1rem !important;
              width: auto !important;
            }

          }


          .this-con {
            width: 100%;
            padding: 1rem;
            height: 755px;
            overflow-y: scroll;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;

            .this-con-list-info {
              padding-bottom: .5rem;
              float: left;
              color: #6da0c3;
            }

            .this-con-list {
              padding: 2rem 0;
              height: auto;
              float: left;
              border-bottom: 1px solid #094268;

            }

            .this-con-list:first-child {
              padding-top: 0;

            }

            .this-con-list:last-child {
              border-bottom: 0;

            }

            .z-begin {
              text-align: center;
              padding: 5px 10px;
              color: #fff;
              background: #3c84b5;
              border-radius: 5px;
              margin-bottom: 10px;
              margin: 0 auto;
            }

            .z-info-list {
              width: 100%;
              margin-top: 2rem;
              display: flex;

              img {
                border-radius: .3rem;
              }

              .z-info-list-con {
                display: flex;
                flex-direction: column;

                .z-info {
                  width: 100%;
                  // background: $eventBG;
                  margin-top: .5rem;
                  border-radius: .3rem;
                  display: flex;
                  flex-direction: column;
                }
              }
            }

            .el-timeline {
              .el-timeline-item__tail {
                border-left: 2px solid #28567f;
              }

              .el-timeline-item__timestamp {
                color: $inBlue;
              }

              .el-card {
                background: $eventBG;
                border: 1px $barBorder;

                .el-card__body {
                  padding: 1rem;

                }
              }
            }


          }

          .mg-t-8 {
            margin-top: 8px;
          }

          .user-and-time {
            display: flex;
            flex-direction: column;

            span:first-child {
              font-size: .8rem;
              color: #01d1eb;
              font-weight: bolder;
              display: inline-block;
            }

            span:last-child {
              font-size: .8rem;
              color: #6da0c3;
              display: inline-block;
              padding-top: .2rem;
            }

            h6 {
              margin: 0;
            }
          }

        }

        .small-bottom-margin {
          margin-bottom: .2rem !important;
        }
      }
      .forthis2{
        height: 240px;
        margin-bottom: .5vh;
      }
    }

    button {
      padding: 0 .3rem;
      height: 1.5rem;
      background-color: #112543;
      color: $inBlue;
      border: 1px $searchBorder;
    }

    button:hover {
      text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
    }

    .z-info-btm-grp {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .z-info-btm-grp-top {
        display: flex;
        justify-content: space-between;
        padding: .5rem 0;

        .z-info-btm-grp-left {

        }

        .z-info-btm-grp-right {

        }
      }

      .z-info-btm-input {

        width: 100%;
        display: flex;
        flex-direction: column;

        .z-info-btm-input-btn {
          padding: .5rem 0;
          display: flex;
          justify-content: space-between;
        }

        .el-textarea__inner {
          background: $eventBG;
          border: 1px $searchBorder;
          color: $inBlue;
        }
      }
    }

  }

}

// 一体化可视化模板
.visual-con {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient($conBg);
  position: absolute;

  .el-input__inner {
    border: 1px $searchBorder;
    background-color: $searchBG;
    color: $inBlue;
  }

  .map-tip {
    .d-l-con {
      width: 100%;
      box-shadow: none;

      .d-l-l-text {
        width: 100%;
        //white-space: nowrap;

        h4 {
          display: flex;
          color: #04080c;
        }
      }
    }
  }

  //收起展开
  .mascot {
    position: fixed;
    bottom: 4rem;
    right: 20rem;
    z-index: 999;
    cursor: pointer;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: all 0.5s ease-in-out;
  }

  .indent-style {
    -webkit-transform: translateX(19rem) !important;
    transform: translateX(19rem) !important;
    transition: all 0.5s ease-in-out !important;
  }

  .indent-left {
    -webkit-transform: translateX(-23rem) !important;
    transform: translateX(-23rem) !important;
    transition: all 0.5s ease-in-out !important;
  }

  .indent-right {
    -webkit-transform: translateX(20rem) !important;
    transform: translateX(20rem) !important;
    transition: all 0.5s ease-in-out !important;
  }

  .bottom-btn {
    position: absolute;
    right: 100px;
    bottom: 50px;
    width: 10rem;
    height: 7rem;
    // background: url(/static/img/btn-six.695dcd53.png) no-repeat left;
    background-size: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    font-size: 1rem;
    color: $fBlueG;
  }

  .bottom-btn:hover {
    filter: brightness(2.3);
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    transition: all 0.5s ease-in-out;
  }

  .el-dropdown {
    span {
      color: $white;
      width: 100%;
      display: block;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
    }
  }

  .el-form-item {
    margin-bottom: 1rem;
  }

  .visual-body {
    width: 100%;
    display: flex;
    align-items: top;

    .leftbar, .rightbar {
      position: absolute;
      font-size: 14px;
      top: 11vh;
      height: auto;
      display: flex;
      z-index: 1000;
      flex-direction: column;
      overflow-y: scroll;


    }

    .leftbar {
      width: 23rem;
      left: 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      transition: all 0.5s ease-in-out;

    }

    .rightbar {
      width: 19rem;
      right: 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      transition: all 0.5s ease-in-out;

      .right-item1 {
        width: 18rem;
      }

      .right-item2 {
        width: 18rem;
      }

    }

    .rightbar-index {
      width: 36rem !important;
      display: flex;
      flex-direction: row;
      overflow-x: hidden;
    }
  }
}

.event-l-con {
  width: 100%;

  .this-content {
    width: 100%;
    font-size: 1rem;
    line-height: 2rem;
    padding-left: 15px;
    display: flex;
    padding: 1rem 1rem;
    background-image: -moz-linear-gradient($GradualGreen);
    background-image: -webkit-linear-gradient($GradualGreen);
    background-image: linear-gradient($GradualGreen);
    box-shadow: $shadowTitle;
    margin-bottom: 2vh;

    .icon {
      width: 3.2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 3.2rem;
      font-size: 1.8rem;
      border-radius: 100rem;
      text-align: center;
      color: $white;
      border: .2rem $barBorder;
      background: $deepBlue;
    }

    .text-con {
      width: 65%;
      padding-left: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;

      h3 {
        font-weight: bolder;
        align-items: center;
        display: flex;
        justify-content: space-between;

        h4 {
          margin-left: 1rem;
          font-family: $fontLED;
          font-size: 1.5rem;

        }
      }

      .text-con-r {
        display: flex;
        justify-content: space-between;

        .icon-text {
          display: flex;
          font-size: .7;
          color: $fListTitle;
          align-items: center;
          padding: .5rem 0 0 0;

          h5 {
            font-size: .8rem;
            line-height: 1rem;
            margin-right: .3rem;
          }

          h6 {
            font-size: 1rem;
            line-height: 1rem;
            font-family: $fontLED;
            color: $fBlue;
          }
        }

        span {
          font-family: $fontLED;
          color: $fBlueG;
          display: flex;
          align-items: center;

          img {
            width: 21px;
            height: 21px;
            margin-right: 5px;
          }

        }

        span:nth-child(2) {
          font-size: 1.5rem;
        }
      }

    }


  }

  @each $c in $iconColor {
    $i: index($iconColor, $c); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！

    .this-content:nth-child(#{$i}) .icon {
      // 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
      color: $c; // 背景色

      &:hover {
        color: lighten($c, 10%); // hover 后的颜色
      }
    }
  }

  @each $f in $iconColor {
    $i: index($iconColor, $f); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！

    .this-content:nth-child(#{$i}) .text-con h3 {

      // 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
      color: $f; // 背景色

      &:hover {
        color: lighten($f, 10%); // hover 后的颜色
      }
    }
  }

}

.forthis {
  margin-bottom: .5vh;
  // -moz-border-radius-topleft: 0;
  // -moz-border-radius-bottomright: 0;
  // background-color: $barBgc;
  // box-shadow: $barShadow;
  // border: 1px $barBorder;


  .map-con {
    height: 100% !important;
    position: relative !important;
  }


  .this-title {
    width: 100%;
    font-size: .7rem;
    height: 2vh;
    line-height: 2vh;
    padding: 0rem 0 0 1rem;
    display: flex;
    justify-content: space-between;
    // background-image: -moz-linear-gradient($GradualGreen);
    // background-image: -webkit-linear-gradient($GradualGreen);
    // background-image: linear-gradient($GradualGreen);
    // box-shadow: $shadowTitle;
    .el-date-editor {
      width: 100%;
    }

    .el-input__inner {
      background: $barBgc;
      box-shadow: $shadowTitle;
      height: 1.5rem;
      color: $inBlue;
      border: 1px $barBorder;
    }

    .el-input__inner:hover {
      background: #00335c;
    }

    .el-input__icon {
      line-height: .5rem;
      height: auto;
    }

    i {
      font-size: 1rem;
    }

    span {
      font-family: $fontLED;
      color: $white;
      text-shadow: 0 0 15px rgba($color: #1eeb74, $alpha: 1);
      display: flex;
      align-items: center;

      img {
        width: 21px;
        height: 21px;
        margin-right: 5px;
      }

    }

    span:nth-child(2) {
      font-size: 1.5rem;
    }

  }

  .i-list-con {
    width: 100%;
    overflow-y: scroll;
    padding: .3rem;
    // margin-bottom:0.8rem;
    //天气
    .weather-img {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $inBlue;
      padding: .2rem 0 0 .8rem;
      text-align: center;

    }

    .weather-info {
      color: $inBlue;

      ul {
        li {
          float: left;
          margin-right: 1rem;
          height: 1.5rem;
          line-height: 1.5rem;
        }
      }
    }

    .firestate {
      width: 85%;
      margin: 1rem auto;
      display: flex;
      align-items: center;

      .state-block1, .state-block2, .state-block3, .state-block4, .state-block5 {
        width: 20%;
        height: .2rem;
      }

      .state-block1 {
        background-color: #4784ff;
      }

      .state-block2 {
        background-color: #25dbcd;
      }

      .state-block3 {
        background-color: #dad028;
      }

      .state-block4 {
        background-color: #fb7d2a;
      }

      .state-block5 {
        background-color: #f04143;
      }

      .state-on {
        height: .6rem;
      }

    }

    //事件列表
    .event-list-search {
      padding: 0 .5rem;
      margin-bottom: 1rem;

    }


    // 清除el折叠样式
    .el-collapse {
      border: none;
      margin: 0;
    }

    .el-collapse-item__header {
      background: none;
      padding: 0;
      height: fit-content !important;
      border-bottom: none;
      line-height: normal !important;
    }

    .el-collapse-item__arrow {
      color: $inBlue;
      position: relative;
      left: -20.5rem;
      margin: 0;
    }

    .el-collapse-item__wrap {
      background: none;
      border-bottom: none;
    }

    .el-collapse-item__content {
      padding-bottom: 0;
    }

    .this-child {
      width: 100% !important;

      .d-l-l-text {
        padding-left: 1.1rem !important;
        width: auto !important;
      }

    }


    .this-con {
      width: 100%;
      padding: 1rem;
      height: 62vh;
      overflow-y: scroll;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;

      .this-con-list-info {
        padding-bottom: .5rem;
        float: left;
        color: #6da0c3;
      }

      .this-con-list {
        padding: 2rem 0;
        height: auto;
        float: left;
        border-bottom: 1px solid #094268;

      }

      .this-con-list:first-child {
        padding-top: 0;

      }

      .this-con-list:last-child {
        border-bottom: 0;

      }

      .z-begin {
        text-align: center;
        padding: 5px 10px;
        color: #fff;
        background: #3c84b5;
        border-radius: 5px;
        margin-bottom: 10px;
        margin: 0 auto;
      }

      .z-info-list {
        width: 100%;
        margin-top: 2rem;
        display: flex;

        img {
          border-radius: .3rem;
        }

        .z-info-list-con {
          display: flex;
          flex-direction: column;

          .z-info {
            width: 100%;
            // background: $eventBG;
            margin-top: .5rem;
            border-radius: .3rem;
            display: flex;
            flex-direction: column;
          }
        }
      }

      .el-timeline {
        .el-timeline-item__tail {
          border-left: 2px solid #28567f;
        }

        .el-timeline-item__timestamp {
          color: $inBlue;
        }

        .el-card {
          background: $eventBG;
          border: 1px $barBorder;

          .el-card__body {
            padding: 1rem;

          }
        }
      }


    }

    .mg-t-8 {
      margin-top: 8px;
    }

    .user-and-time {
      display: flex;
      flex-direction: column;

      span:first-child {
        font-size: .8rem;
        color: #01d1eb;
        font-weight: bolder;
        display: inline-block;
      }

      span:last-child {
        font-size: .8rem;
        color: #6da0c3;
        display: inline-block;
        padding-top: .2rem;
      }

      h6 {
        margin: 0;
      }
    }

  }

  .small-bottom-margin {
    margin-bottom: .2rem !important;
  }


}

.d-evnet-list-con {
  padding: .5rem .5rem !important;
  align-items: flex-start !important;
}

.sj-collapse {
  width: 100% !important;
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
  padding-left: 1rem;
}

.d-l-con {
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  box-shadow: $shadowList;
  flex-wrap: wrap;
  //数字林业
  .event-count {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: .3rem 0;
    margin-bottom: .5rem;

    .count-number {
      padding: .3rem .5rem;
      border: 2px $countBorder;
      box-shadow: $shadowCount;
      border-radius: .3rem;
      font-weight: bolder;
      font-size: 1.5rem;
      z-index: 1000;
      background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(188, 229, 255, 1)), to(rgba(59, 77, 255, 1)));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  @for $i from 1 through length($iconBg) {
    .icon-con:nth-child(#{length($iconBg)}n+#{$i}) .icon {
      background: nth($iconBg, $i);
    }
  }

  .el-table--border, .el-table--border::after {
    border: 1px $tableBorder;
    background-color: $searchBG
  }

  .el-table--border {
    .el-table--group {
      border: 1px $tableBorder;
    }

    .el-table__cell {
      border-right: 1px $tableBorder;;
    }

  }

  .el-table::before {
    background: $searchBG;
  }

  .el-table {
    background: $searchBG;
    color: $inBlue;

    thead {
    }

    tr {
      background: $searchBG;
    }

    td {
      text-align: center;
    }

    .el-table__header-wrapper {
      th {
        color: $inBlue;
        font-size: .8rem;
      }
    }

    thead.is-group {
      .el-table__cell {
        text-align: center;
        background: $searchBG;
        border-bottom: 1px $tableBorder;
        border-right: 1px $tableBorder;
        padding: 0;
        font-weight: normal;
      }
    }
  }

  .el-table__empty-block {
    min-height: auto;
  }

  .el-table__empty-text {
    line-height: 30px;
  }

  .el-table__header {
    width: auto !important
  }

  .el-table__empty-block {
    width: auto !important
  }

  .el-table__body-wrapper {
    .el-table__body {
      width: auto !important
    }
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: #0f3655;
  }


  .icon-con {
    display: flex;
    margin-bottom: 1rem;
    align-items: center;

    .icon-dot {
      width: 1rem;
      height: 1rem;
    }

    .icon-small {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 1rem;
    }

    .icon-mid {
      width: 2.5rem;
      height: 2.5rem;
      font-size: 1.5rem;
    }

    .icon-large {
      width: 3rem;
      height: 3rem;
      font-size: 2rem;
    }

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: .4rem;
      text-align: center;
      color: $white !important;
      border: .2rem $barBorder;
    }

    h3 {
      font-size: .8rem;
      line-height: 1rem;
      color: $fListTitle;
      margin-top: .5rem;
    }

    .personnel-name {
      h6 {
        font-size: 1rem !important;
      }
    }

    .icon-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: .7;
      color: $fListTitle;
      padding: 0 1.5rem 0 .5rem;

      h5 {
        font-size: .8rem;
        line-height: 1rem;
        margin-right: .3rem;
      }

      h6 {
        font-size: 1.2rem;
        font-family: $fontLED;
        color: $fBlue;
      }
    }

  }


  .el-tag--dark {
    border: 0
  }

  .list-tit {
    color: $fListTitle !important;
    font-size: 0.5rem !important;
    font-weight: normal;
    display: block;
    max-width: 90%;
  }

  .d-l-l-text {
    display: flex;
    align-items: center;
    flex: 1;
    color: $fListTitle;
    padding: .2rem;

    h4 {
      font-size: .7rem;
      margin: 0;

      font-weight: normal;
      display: block;
      max-width: 90%;
      line-height: 1rem;

    }

    h3 {
      padding: .3rem;
    }

    h2 {
      padding-top: .5rem;
    }

    .text-gray {
      color: $textGray;
    }

    .collapse-title {
      padding-left: 1.2rem;
    }

    i {
      margin-right: .6rem;
    }

    .i-small {
      width: .5rem;
      height: .5rem;
      display: inline-block;
      background: #2ee0fb;
    }

    .icon-sxt {
      color: $inBlueHover;
      font-size: 1rem;
      display: inline-block;
      background: none;
    }

  }

  .event-list-img {
    width: 3rem;
    height: 2rem;
    margin-right: .5rem;
  }

  .event-list-text {
    width: 77% !important;
    display: flex;
    align-items: left;
    flex-direction: column !important;

    h3 {
      font-size: .8rem;
      font-weight: bolder;
      margin: 0;
      color: $fListTitle;
      display: block;
      line-height: 1rem;
      padding-bottom: .2rem;

    }

    h4 {
      font-size: .7rem;
      margin: 0;
      display: flex;
      color: $listText;
      font-weight: normal;
      line-height: 1rem;
      padding-bottom: .1rem;
      justify-content: space-between;

      span {
        margin-right: .5rem;
      }

    }

    i {
      margin-right: .6rem;
    }

    .i-small {
      width: .5rem;
      height: .5rem;
      display: inline-block;
      background: #2ee0fb;
    }

    .icon-sxt {
      color: $inBlueHover;
      font-size: 1rem;
      display: inline-block;
      background: none;
    }

  }

  .state-wcl, .state-wyc {
    font-size: 0.7rem !important;
    margin: 0;
    font-weight: normal;
    max-width: 90%;
  }

  .state-wcl {
    color: $state-wcl !important;
  }

  .state-wyc {
    color: $state-wyc !important;
  }

  .d-l-l-count {
    width: 25%;
    font-size: 1.2rem;
    text-align: right;
    font-family: $fontLED;
    color: $fBlueG;
    line-height: 1.2rem;
  }

  //曝光台
  .bgt-state {
    width: 35%;
    padding: 0.3rem 0.5rem;
    border: 2px solid rgba(0, 174, 255, 0.9);
    -webkit-box-shadow: 0 0 0.5rem 0 #00c8ff inset;
    box-shadow: 0 0 0.5rem 0 #00c8ff inset;
    border-radius: 0.3rem;
    font-size: .7rem;
    z-index: 1000;
    display: flex;
    margin-right: .5rem;
    align-content: center;
    justify-content: space-between;
    color: $white;

    .bgt-state-frequency {
      width: 1.2rem;
      height: 1.2rem;
      font-size: 1rem;
      background-color: #1294a0;
      text-align: center;
      line-height: 1.2rem;

    }

    .bgt-state-minute {

    }

  }

  .bgt-info {
    width: 60%;
    display: flex;
    flex-direction: column;
    //事件状态
    //新上报
    .event-state-sb {
      display: flex;
      align-items: center;

      i {
        color: $eventStateColor-sb;
        font-size: 1rem;
        margin-left: -.5rem;
      }

      .event-list-state-sb {
        width: fit-content;
        background-color: $eventStateColor-sb;
        color: $white;
        padding: .4rem;
        margin-left: -.5rem;
        margin-bottom: .2rem;
        border-radius: .2rem;
      }
    }

    //催办
    .event-state-cb {
      display: flex;
      align-items: center;

      i {
        color: $eventStateColor-cb;
        font-size: 1rem;
        margin-left: -.5rem;
      }

      .event-list-state-cb {
        width: fit-content;
        background-color: $eventStateColor-cb;
        color: $white;
        padding: .4rem;
        margin-left: -.5rem;
        margin-bottom: .2rem;
        border-radius: .2rem;
      }
    }

    //签收
    .event-state-qs {
      display: flex;
      align-items: center;

      i {
        color: $eventStateColor-qs;
        font-size: 1rem;
        margin-left: -.5rem;
      }

      .event-list-state-qs {
        width: fit-content;
        background-color: $eventStateColor-qs;
        color: $white;
        padding: .4rem;
        margin-left: -.5rem;
        margin-bottom: .2rem;
        border-radius: .2rem;
      }
    }

    //误报
    .event-state-wb {
      display: flex;
      align-items: center;

      i {
        color: $eventStateColor-wb;
        font-size: 1rem;
        margin-left: -.5rem;
      }

      .event-list-state-wb {
        width: fit-content;
        background-color: $eventStateColor-wb;
        color: $white;
        padding: .4rem;
        margin-left: -.5rem;
        margin-bottom: .2rem;
        border-radius: .2rem;
      }
    }

    //重复
    .event-state-cf {
      display: flex;
      align-items: center;

      i {
        color: $eventStateColor-cf;
        font-size: 1rem;
        margin-left: -.5rem;
      }

      .event-list-state-cf {
        width: fit-content;
        background-color: $eventStateColor-cf;
        color: $white;
        padding: .4rem;
        margin-left: -.5rem;
        margin-bottom: .2rem;
        border-radius: .2rem;
      }
    }

    //办结
    .event-state-bj {
      display: flex;
      align-items: center;

      i {
        color: $eventStateColor-bj;
        font-size: 1rem;
        margin-left: -.5rem;
      }

      .event-list-state-bj {
        width: fit-content;
        background-color: $eventStateColor-bj;
        color: $white;
        padding: .4rem;
        margin-left: -.5rem;
        margin-bottom: .2rem;
        border-radius: .2rem;
      }
    }

    //归档
    .event-state-gd {
      display: flex;
      align-items: center;

      i {
        color: $eventStateColor-gd;
        font-size: 1rem;
        margin-left: -.5rem;
      }

      .event-list-state-gd {
        width: fit-content;
        background-color: $eventStateColor-gd;
        color: $white;
        padding: .4rem;
        margin-left: -.5rem;
        margin-bottom: .2rem;
        border-radius: .2rem;
      }
    }

    //确认
    .event-state-qr {
      display: flex;
      align-items: center;

      i {
        color: $eventStateColor-qr;
        font-size: 1rem;
        margin-left: -.5rem;
      }

      .event-list-state-qr {
        width: fit-content;
        background-color: $eventStateColor-qr;
        color: $white;
        padding:0.25rem 0.4rem;
        margin-left: -.5rem;
        margin-bottom: .2rem;
        border-radius: .2rem;
      }
    }

    .bgt-info-name {
      color: $inBlue;
      font-weight: bolder;
    }

    .bgt-info-place {
      color: $subtitle;

      ul {
        li {
          float: left;
          padding-right: .3rem;
        }
      }
    }

  }

  .bgt-img {
    img {
      margin-right: .5rem;
    }
  }


}

.d-l-con:hover,
.on {
  // background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
  box-shadow: $shadowListHover;

  h4, h3 {
    color: $white;

    span {
      color: $white !important;
    }
  }

  .i-small {
    box-shadow: $shadowListHoverI;
  }

  .icon-sxt {
    color: #fbff0b;
  }

  span {
    color: $white;
  }


}


.d-l-con-icon {
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  // padding: .25rem .5rem;
  flex-wrap: wrap;
  @for $i from 1 through length($iconBg) {
    .icon-con:nth-child(#{length($iconBg)}n+#{$i}) .icon {
      background: nth($iconBg, $i);
    }
  }

  .icon-animal-con-count {
    padding: .5rem 0 !important;
    border: 1px $barBorder;
  }

  .animal-title {
    padding: .1rem !important;
  }

  .icon-con {
    width: 100%;
    display: flex;
    padding: 0.5rem;
    align-items: center;

    .icon-dot {
      width: 1rem;
      height: 1rem;
    }

    .icon-small {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 1rem;
    }

    .icon-normal {
      width: 2.2rem;
      height: 2.2rem;
      font-size: 1.4rem;
    }

    .icon-mid {
      width: 2.5rem;
      height: 2.5rem;
      font-size: 1.5rem;
    }

    .icon-large {
      width: 3rem;
      height: 3rem;
      font-size: 2rem;
    }

    .icon-animal {
      img {
        width: 2.5rem;
        height: 2.5rem;
      }
    }

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: .4rem;
      text-align: center;
      color: $white !important;
      border: .2rem $barBorder;
    }

    h3 {
      font-size: .8rem;
      line-height: 1rem;
      color: $fListTitle;
      margin-top: .5rem;
    }

    .personnel-name {
      h6 {
        font-size: 1rem !important;
      }
    }

    .animal-text {
      padding: 0 !important;

      h5 {
        margin-right: 0 !important;
        margin-top: .2rem !important;
      }
    }

    .icon-animal-text {
      h5 {
        margin-right: 0 !important;
        margin-top: .2rem;
      }
    }

    .icon-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: .7;
      color: $fListTitle;
      padding: 0 .5rem;

      h5 {
        font-size: .6rem;
        line-height: 1rem;
        margin-right: .3rem;
      }

      h6 {
        font-size: 1.2rem;
        font-family: $fontLED;
        color: $fBlue;
      }
    }

    .e-state {
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      display: flex;
      color: $inBlue;
      background: no-repeat center center;
      background-size: cover;
      margin-top: .5rem;
      justify-content: space-around;
    }

  }

  .icon-con:hover, .on {
    box-shadow: $shadowListHover;

    .icon-text {
      h5 {
        color: $white;
      }

      h6 {
        color: $white;
      }
    }

  }


  .el-tag--dark {
    border: 0
  }

  .list-tit {
    color: $fListTitle !important;
    font-size: 0.5rem !important;
    font-weight: normal;
    display: block;
    max-width: 90%;
  }

  .d-l-l-text {
    display: flex;
    align-items: center;
    flex: 1;

    h4 {
      font-size: .7rem;
      margin: 0;
      color: $fListTitle;
      font-weight: normal;
      display: block;
      max-width: 90%;
      line-height: 1rem;

    }

    i {
      margin-right: .6rem;
    }

    .i-small {
      width: .5rem;
      height: .5rem;
      display: inline-block;
      background: #2ee0fb;
    }

    .icon-sxt {
      color: $inBlueHover;
      font-size: 1rem;
      display: inline-block;
      background: none;
    }

  }

  .state-wcl, .state-wyc {
    font-size: 0.7rem !important;
    margin: 0;
    font-weight: normal;
    display: block;
    max-width: 90%;
  }

  .state-wcl {
    color: $state-wcl;
  }

  .state-wyc {
    color: $state-wyc;
  }

  .d-l-l-count {
    width: 25%;
    font-size: 1.2rem;
    text-align: right;
    font-family: $fontLED;
    color: $fBlueG;
    line-height: 1.2rem;
  }


}

//一体化弹层

//覆盖elementUI
.el-popper[x-placement^=bottom] {
  .popper__arrow::after {
    border-bottom-color: #1cefff
  }
}

.el-textarea__inner {
  background: $eventBG;
  border: 1px $searchBorder;
  color: $inBlue;
}

.el-date-picker { //时间选择器
  width: 17.5rem;

  .el-year-table {
    td {
      padding: 3px 3px;

      .cell {
        color: #1c8b8b;
      }

      .cell:hover {
        color: #1aff5a;
        font-weight: bolder;
      }
    }

    td.current:not(.disabled) {
      .cell {
        color: #1aff5a;
        font-weight: bolder;
      }
    }

    td.today {
      .cell {
        color: #2ce3ff;
        font-weight: normal;
      }
    }

  }

  .el-picker-panel__content {
    width: 100%;
    margin: 0;
    padding-bottom: 1rem;
  }

  .el-picker-panel__icon-btn {
    color: #01d1eb;
  }

  .el-date-picker__header-label {
    color: $inBlue;
  }

  .el-date-picker__header--bordered {
    border-bottom: 1px $barBorder
  }
}

.el-picker-panel {
  background: #143650;
  border: 1px solid #2a3a60;
  color: #1a9696;
}

.el-steps--horizontal {
  margin-top: .5rem;
}

.el-step__title.is-process {
  color: #10c0ff !important;
}

.el-dialog:not(.is-fullscreen) {
  margin-top: 5vh !important;
}


.el-select-dropdown__item {
  span {
    padding-left: 1rem;
  }

}

.el-form-item {
  margin-bottom: 1rem;
}

.e-btm-btn {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: flex-end;

  .el-select {
    margin-left: 1rem !important;
  }

  .el-select-dropdown {
    margin-left: 1rem;
    padding-left: 1rem;
  }

  .el-input__inner {
    background: $searchBG;
    border: 1px solid #2a3a60;
    color: #1fb0b0;
  }

  .el-button {
    padding: .8rem 2rem;
    margin-left: 1rem;
  }
}

//切换
.el-tabs__nav-wrap::after {
  background: none !important;
}

.el-tabs__active-bar {
  background: none;
}

.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
  margin-left: 0;
}

.el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 20px;
  margin-right: 0;
}

.el-loading-mask {
  background: none;
}

.el-tabs__item {
  color: #3cd7ef;
  background: $GradualGreen;
  margin-right: 5px;
  color: #3cd7ef;
  background: -webkit-gradient(linear, right top, left top, from(#051d2b), color-stop(#00335c), to(#051d2b));
  background: linear-gradient(to left, #051d2b, #00335c, #051d2b);
}

.el-tabs__item:hover {
  color: #fff;
  background: linear-gradient(to left, #051d2b, #0ba9c8, #051d2b);
  box-shadow: rgba($color: #0ca1c2, $alpha: .8) 0px 0px 15px inset;
}

.el-tabs__item.is-active {
  color: #fff;
  font-size: 15px;
  font-weight: bolder;
  background: linear-gradient(to left, #051d2b, #0ba9c8, #051d2b);
  box-shadow: rgba($color: #0ca1c2, $alpha: .8) 0px 0px 15px inset;
}


.dialog-con::-webkit-scrollbar {
  display: none;
}

.el-dialog {
  background: #04080c;
  box-shadow: $barShadow;
  border: 1px $barBorder;
}

.el-dialog__header {
  padding: 15px 20px !important;
  background-image: -moz-linear-gradient($GradualGreen);
  background-image: -webkit-linear-gradient($GradualGreen);
  background-image: linear-gradient($GradualGreen);
  box-shadow: $shadowTitle;

  .el-dialog__title {
    font-weight: bolder;
    color: #3cd7ef;
  }
}


.el-main {
  background-color: #E9EEF3;
  color: #333;
  height: 100vh;
  padding: 0;

  .ol-attribution ul {
    display: none
  }

  .ol-rotate,
  .ol-attribution,
  .ol-zoom {
    width: -webkit-fit-content;
  }
}


.el-dialog__body {
  padding: 1rem;
}

.el-tree {
  background: none;

}

//下拉菜单
.el-dropdown-menu--medium {
  .el-dropdown-menu__item {
    font-size: 12px !important;
  }
}

//树
.el-tree__empty-text {
  color: #3cd7ef;
}

.el-tree-node__label {
  color: $white;
}

.el-tree-node__content:hover {
  background-color: $inBlue;
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: $inBlue;
}


//外层嵌套
.event-info {
  .event-info-top {
    width: 100%;

    .event-info-top-grp {
      width: 100%;
      display: flex;
      margin-bottom: 1rem;

      .el-input:nth-child(2) {
        margin-left: 1rem;
      }

      .el-button {
        padding: .8rem 2rem;
        margin-left: 1rem;
      }
    }
  }

  .event-info-con {
    width: 100%;
    display: flex;

    .e-left {
      width: 32%;
    }

    .e-center {
      width: 30%;
      margin-left: 1%;

      .img-company {
        width: 100%;
        height: 18.3vh;

        img {
        }
      }
    }

    .e-right {
      margin-left: 1%;
      width: 45%;
    }

    .e-location-left {
      width: 28%;
      // margin-top: 1rem;
    }

    .e-location-right {
      width: 71%;
      margin-left: 1rem;
    }
  }

  .e-btm-btn {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: flex-end;
  }


  .el-dialog:not(.is-fullscreen) {
    margin-top: 5.5vh !important;
  }

}

.bignav {
  white-space: nowrap !important;
}

//超图工具栏
.indexSupermapClass{//首页class
  .leaflet-control {
    display: flex !important;
  }

  .leaflet-draw-toolbar {
    margin-top: 0 !important;
    display: flex !important;
  }

  .leaflet-touch .leaflet-draw-actions {
    left: 0 !important;
    top: -33px !important;
  }

  .leaflet-top {
    top: 89vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .leftflet-toleft {
    -webkit-transform: translateX(-20rem) !important;
    transform: translateX(-20rem) !important;
    transition: all 0.5s ease-in-out !important;
  }
}