Project_yhfu/src/assets/styles/base.scss

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

//颜色
$white:#fff;
$inBlue:#2bacf7;
$subtitle:#638395;
$inBlueHover:#07ffc1;
$inYellow:#ffd014;
$deepBlue:#0b293a;
$listText:#1a7988;
$textGray:#ccc;
$grayBlue:#5685a0;



//渐变
$GradualGreen:180deg, rgba($color: #091e36, $alpha: .8) , 
rgba($color: #061b27, $alpha: .8);

$conBg:180deg, rgba($color: #0f162c, $alpha: 1) , 
rgba($color: #040b1f, $alpha: 1);


//内阴影
$shadowList: 0 0 1rem 0 rgba($color: #0b1b25, $alpha:.8);
$shadowTitle: 0 -0.2rem .5rem 0.3rem rgba($color: #19db3f, $alpha: .09) inset;
$shadowListHover:rgba($color: #0567c2, $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: #387ee7, $alpha:.8) inset;
$shadowCount: 0 0 .5rem 0 rgba($color: #00c8ff, $alpha:1) inset;

//可视化 数字林业
$fBlue:#03c6e2;
$fBlueHover:#07ffc1;
$fBlueG:#0bf3f7;
$fListTitle:#2bacf7;
$barBgc: rgba($color: #051520, $alpha: .9);
$barShadow: rgba($color: #033551, $alpha: .5) 0px 0px 18px inset;
$barBorder: solid rgba($color: #134040, $alpha: .7);
$tableBorder: solid rgba($color: #288686, $alpha: .7);
$countBorder: solid rgba($color: #00aeff, $alpha: .9);
$searchBorder: solid rgba($color: #33467f, $alpha: 1);
$searchBG:#191e2d;

//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;

//公共
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;
}

.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;
}
.h-20{
	height: 20vh;
}
.h-21{
	height: 21vh;
}
.h-22{
	height: 22vh;
}
.h-25{
	height: 25vh;
}
.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-35 {
		height: 34vh;
}
.h-32{
		height: 31.6vh;
}
.h-39 {
		height: 39vh;
}

.h-40 {
		height: 40vh;
}
.h-43{
		height: 42vh;
}
.h-51{
	height: 51vh;
}
.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;
}
.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;
}

.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;
			}
}

// 一体化可视化模板
.visual-con {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		overflow: hidden;
		background: linear-gradient($conBg);
		position: absolute;
		
		.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(-20rem) !important;
			transform: translateX(-20rem)  !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: 10vh;
				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: 19rem;
				}
				.right-item2{
					width: 18rem;
				}
				
			}
			.rightbar-index{
				width: 34.5rem !important;
				display: flex;
				flex-direction: row;
			}
		}
}
.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-input__inner{
							border: 1px $searchBorder;
							background-color: $searchBG;
							color: $inBlue;
						}
					}
				
					
					// 清除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: 1rem;
							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 {
								width: 85%;
								display: flex;
								flex-direction: column;
								margin-left: 1rem;

								.z-info {
									padding: 1rem;
									background: #102a3c;
									margin-top: 1rem;
									border-radius: .3rem;
									display: flex;
									flex-direction: column;
								}
							}
						}
					}

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

					.user-and-time {
						display: flex;
						align-items: center;

						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;
							margin-left: 1rem;
							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:#071927
				}
				.el-table--border{
					.el-table--group{
						border: 1px $tableBorder;
					}
					.el-table__cell{
						border-right: 1px $tableBorder; ;
					}
					
				}
				.el-table::before {
					background:  #071927;
				}
				.el-table {
					background:  #071927;
					color:$inBlue;
					thead{
					}
					tr{
						background:#071927 ;
					}
					td{
						text-align: center;
					}
					.el-table__header-wrapper{
						th{
							color:$inBlue;
							font-size: .8rem;
						}
					}
					thead.is-group{
						.el-table__cell{
							text-align: center;
							background: #071927;
							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{
					display: flex;
					flex-direction: column;
					
					.bgt-info-name{
						color: $inBlue;
						font-weight: bolder;
					}
					.bgt-info-place{
						color: $subtitle;
						ul{
							li{
								float: left;
								padding-right: .3rem;
							}
						}
					}
				}
				
			

			}
			.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-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: 15vh !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: #071927;
							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: 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;
	}

	.el-tabs__item:hover {
	  color: #fff;
	  background: linear-gradient(to left, #051d2b, #006ec8, #051d2b);
	  box-shadow: rgba($color: #0567c2, $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, #006ec8, #051d2b);
	  box-shadow: rgba($color: #0567c2, $alpha: .8) 0px 0px 15px inset;
	}


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

  .el-dialog {
    background: #04080c;
    box-shadow: rgba($color: #033551, $alpha: 1.0) 0px 0px 18px inset;
	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: #fff;
  }

//外层嵌套
  .event-info {
	.event-info-top{
		width: 100%;
		.event-info-top-grp{
			width: 50%;
			display: flex;
		    .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-top: 1.3rem;
			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;
  }

//超图工具栏
.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;
}