UI

src/assets/styles/base.scss

@@ -22,6 +22,8 @@ rgba($color: #061b27, $alpha: .8);
 $conBg:180deg, rgba($color: #0f162c, $alpha: 1) , 
 rgba($color: #040b1f, $alpha: 1);
 
+$btmMemu:180deg, rgba($color: #0d1620, $alpha: 1) , 
+rgba($color: #020f2a, $alpha: 1);
 
 //内阴影
 $shadowList: 0 0 1rem 0 rgba($color: #0b1b25, $alpha:.8);
@@ -56,6 +58,12 @@ $eventStateColor-xsb:#11b57e;
 $eventStateColor-yqr:#f18425;
 $eventStateColor-ywc:#9179f1;
 
+$eventStateColor-cb:#e63b4a;
+$eventStateColor-yqs:#015bff;
+$eventStateColor-ld:#fe6d02;
+$eventStateColor-bj:#30cb2e;
+$eventStateColor-tb:#7835f2;
+
 //日历状态
 $date-state1:#2abc65;
 $date-state2:#e68d3f;

src/components/vBottomMenu.vue

@@ -1,16 +1,43 @@
 <template>
-	<div class="bottom-menu-normal">
-		<div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con"
-			@click.stop="showDialog(fastMenu.click)">
-			<a><i :class="fastMenu.icon"></i>{{fastMenu.name}}
-				<div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
-					<el-button type="primary" @click.stop="choseLayerSwitching('http://121.37.83.100:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo')" class="nav-child-btn" plain>铁东</el-button>
-					<el-button type="primary" @click.stop="choseLayerSwitching('http://121.37.83.100:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo')" class="nav-child-btn" plain>铁西</el-button>
-<!--					<el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"-->
-<!--						@click.stop="closeChild"></el-button>-->
-				</div>
-			</a>
+	<div class="btm-box">
+		<img class="light"  src="../assets/images/integrated/btm-light.png"/>
+		<div class="btm-left">
+			<div class="btm-left-tip">
+				<div class="btm-left-block btm-left-state-c1"></div>新上报
+			</div>
+			<div class="btm-left-tip">
+				<div class="btm-left-block btm-left-state-c2"></div>催办
+			</div>
+			<div class="btm-left-tip">
+				<div class="btm-left-block btm-left-state-c3"></div>已签收
+			</div>
+			<div class="btm-left-tip">
+				<div class="btm-left-block btm-left-state-c4"></div>联动
+			</div>
+			<div class="btm-left-tip">
+				<div class="btm-left-block btm-left-state-c5"></div>办结
+			</div>
+			<div class="btm-left-tip">
+				<div class="btm-left-block btm-left-state-c6"></div>填报
+			</div>
+		</div>
+		<div class="bottom-menu-normal">
+			<div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con"
+				@click.stop="showDialog(fastMenu.click)">
+				<a><i :class="fastMenu.icon"></i>{{fastMenu.name}}
+					<div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
+						<el-button type="primary"
+							@click.stop="choseLayerSwitching('http://121.37.83.100:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo')"
+							class="nav-child-btn" plain>铁东</el-button>
+						<el-button type="primary"
+							@click.stop="choseLayerSwitching('http://121.37.83.100:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo')"
+							class="nav-child-btn" plain>铁西</el-button>
+						<!--					<el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"-->
+						<!--						@click.stop="closeChild"></el-button>-->
+					</div>
+				</a>
 
+			</div>
 		</div>
 	</div>
 </template>
@@ -41,7 +68,7 @@
 						icon: 'iconfont sj-icon-lbzy',
 						click: ''
 					},
-					
+
 					{
 						name: '林场',
 						icon: 'iconfont sj-icon-lczy',
@@ -59,8 +86,8 @@
 			showDialog(click) {
 				window.showDialog(click)
 			},
-      choseLayerSwitching(url) {
-        window.choseLayerSwitching(url);
+			choseLayerSwitching(url) {
+				window.choseLayerSwitching(url);
 			},
 		}
 	}
@@ -68,73 +95,135 @@
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';
-
-	.bottom-menu-normal {
-		max-width: 90%;
-		padding: 0 3rem;
+    
+	.btm-box {
+		width: 100%;
+		height: auto;
+		background: linear-gradient($btmMemu);
 		position: absolute;
-		left: 50%;
-		transform: translateX(-50%);
 		bottom: 0;
-		z-index: 999;
-		border-radius: 5px;
+		height: 2.5rem;
 		display: flex;
-		justify-content: center;
 		align-items: center;
-		background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
-		background-size: cover;
-
-		.btm-m-con {
-			position: relative;
+		.light{
+			position: absolute;
+			top: -.5rem;
+		}
+		
+		.btm-left{
+			font-size: .7rem;
+			height: 2rem;
+			line-height: 2rem;
+			border: 1px $searchBorder ;
+			border-left:none ;
 			color: $inBlue;
-			font-size: .5rem;
-			padding: 1rem 1.5rem;
 			display: flex;
-			align-items: center;
+			.btm-left-tip{
+				display: flex;
+				align-items: center;
+				margin: 0 .5rem;
+				.btm-left-block{
+					width: 1rem;
+					height: 1rem;
+					margin-right: .3rem;
+					border-radius: .2rem;
+					
+				}
+				.btm-left-state-c1{
+					background-color: $eventStateColor-xsb;
+				}
+				.btm-left-state-c2{
+					background-color: $eventStateColor-cb;
+				}
+				.btm-left-state-c3{
+					background-color: $eventStateColor-yqs;
+				}
+				.btm-left-state-c4{
+					background-color: $eventStateColor-ld;
+				}
+				.btm-left-state-c5{
+					background-color: $eventStateColor-bj;
+				}
+				.btm-left-state-c6{
+					background-color: $eventStateColor-tb;
+				}
+			
+			}
+			
+			
+		}
+
+		.bottom-menu-normal {
+			max-width: 70%;
+			padding: 0 3rem;
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 0;
+			z-index: 999;
+			border-radius: 5px;
+			display: flex;
 			justify-content: center;
-			-webkit-transform: translateY(0);
-			transform: translateY(0);
-			transition: all 0.2s ease-in-out;
-			cursor: pointer;
-			white-space: nowrap;
+			align-items: center;
+			// background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
+			// background-size: cover;
 
-			i {
-				font-size: 1rem;
+			.btm-m-con {
+				position: relative;
 				color: $inBlue;
-				text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
-				margin-right: 0.2rem;
-			}
+				font-size: .5rem;
+				padding: .6rem 1.5rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				-webkit-transform: translateY(0);
+				transform: translateY(0);
+				transition: all 0.2s ease-in-out;
+				cursor: pointer;
+				white-space: nowrap;
 
-			.nav-child {
-				position: absolute;
-				top: -3.3rem;
-				border: 1px solid saddlebrown;
-				padding: .5rem;
-				-moz-border-radius-topleft: 0;
-				-moz-border-radius-bottomright: 0;
-				background-color: $barBgc;
-				box-shadow: $barShadow;
-				border: 1px $barBorder;
-				left: 50%;
-				transform: translateX(-50%);
-				.nav-child-btn{
-					padding: .2rem;
+				i {
+					font-size: 1rem;
+					color: $inBlue;
+					text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
+					margin-right: 0.2rem;
 				}
 
-			}
-		}
+				.nav-child {
+					position: absolute;
+					top: -3.3rem;
+					border: 1px solid saddlebrown;
+					padding: .5rem;
+					-moz-border-radius-topleft: 0;
+					-moz-border-radius-bottomright: 0;
+					background-color: $barBgc;
+					box-shadow: $barShadow;
+					border: 1px $barBorder;
+					left: 50%;
+					transform: translateX(-50%);
 
-		.btm-m-con:hover {
-			text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
-			-webkit-transform: translateX(0.2rem);
-			transform: translateX(0.2rem);
-			transition: all 0.2s ease-in-out;
+					.nav-child-btn {
+						padding: .2rem;
+					}
+
+				}
+			}
 
-			i {
-				color: $inBlueHover;
+			.btm-m-con:hover {
 				text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
+				-webkit-transform: translateX(0.2rem);
+				transform: translateX(0.2rem);
+				transition: all 0.2s ease-in-out;
+
+				i {
+					color: $inBlueHover;
+					text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
+				}
 			}
+
 		}
+        
+		
 
 	}
 </style>