UI

src/assets/styles/base.scss

@@ -18,6 +18,9 @@ $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);
@@ -25,6 +28,7 @@ $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;
@@ -35,6 +39,7 @@ $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);
 //icon
 $iconBg:#f5ad1b,#58b35d,#0FA2FF,#da8ec5,#78bfc2,#a28e52,#ff6063,#96bd5b,#f5ad1b,#da8ec5,#5f89ce,#78bfc2,#bec278,#f07779;
 $iconColor:#32e583,#f5ad1b,#da8ec5,#5f89ce,#78bfc2,#bec278,#f07779;
@@ -186,12 +191,30 @@ div::-webkit-scrollbar {
 .h-10{
 	height: 10vh;
 }
+.h-13{
+	height: 13vh;
+}
+.h-14{
+	height: 14vh;
+}
+.h-15{
+	height: 15vh;
+}
 .h-16{
 	height: 16vh;
 }
 .h-19{
 	height: 19.5vh;
 }
+.h-21{
+	height: 21vh;
+}
+.h-25{
+	height: 25vh;
+}
+.h-28{
+	height: 28vh;
+}
 .h-30{
 		height: 29vh;
 }
@@ -208,6 +231,9 @@ div::-webkit-scrollbar {
 .h-26{
 	height: 25vh !important;
 }
+.h-28{
+	height: 28vh !important;
+}
 .h-40 {
 		height: 39vh;
 }
@@ -258,7 +284,7 @@ div::-webkit-scrollbar {
 	width: 10rem !important;
 }
 .flex-d{
-	flex-direction: column;
+	flex-direction: column !important;
 }
 .a-item{
 	align-items: center;
@@ -364,7 +390,7 @@ div::-webkit-scrollbar {
 		height: 100%;
 		margin: 0 auto;
 		overflow: hidden;
-		background: #020406;
+		background: linear-gradient($conBg);
 		position: absolute;
 		
 		.map-tip{
@@ -483,6 +509,18 @@ div::-webkit-scrollbar {
 				-webkit-transform: translateX(0);
 				transform: translateX(0);
 				transition: all 0.5s ease-in-out;
+			    .right-item1{
+					width: 16rem;
+				}
+				.right-item2{
+					width: 18rem;
+				}
+				
+			}
+			.rightbar-index{
+				width: 34.5rem !important;
+				display: flex;
+				flex-direction: row;
 			}
 		}
 }
@@ -615,7 +653,7 @@ div::-webkit-scrollbar {
 
 			}
 .forthis {
-				margin-bottom: 2vh;
+				margin-bottom: .5vh;
 				// -moz-border-radius-topleft: 0;
 				// -moz-border-radius-bottomright: 0;
 				// background-color: $barBgc;
@@ -692,7 +730,7 @@ div::-webkit-scrollbar {
 					// 清除el折叠样式
 					.el-collapse{
 						border: none;
-						margin: 1rem 0;
+						margin: 0;
 					}
 					.el-collapse-item__header{
 						background: none;
@@ -703,8 +741,9 @@ div::-webkit-scrollbar {
 					}
 					.el-collapse-item__arrow{
 						color: $inBlue;
-						position: absolute;
-						left: .9rem;
+						position: relative;
+						left: -20.5rem;
+						margin: 0;
 					}
 					.el-collapse-item__wrap{
 						background: none;
@@ -822,6 +861,9 @@ div::-webkit-scrollbar {
 					}
 
 				}
+				.small-bottom-margin{
+					margin-bottom: .2rem !important;
+				}
 
 
 			}
@@ -831,8 +873,9 @@ div::-webkit-scrollbar {
 			}
 			.sj-collapse{
 				width: 100% !important;
-				// padding-top:.6rem !important;
-				// padding-bottom:.6rem !important;
+				padding-top:.3rem !important;
+				padding-bottom:.3rem !important;
+				padding-left: 1rem;
 			}
 			.d-l-con {
 				font-size: .7rem;
@@ -842,6 +885,26 @@ div::-webkit-scrollbar {
 				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);
@@ -1251,6 +1314,17 @@ div::-webkit-scrollbar {
 							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{