UI

src/assets/styles/base.scss

@@ -12,6 +12,7 @@ $deepBlue:#0b293a;
 $listText:#1a7988;
 $textGray:#ccc;
 $grayBlue:#5685a0;
+$tipHover:#2082ba;
 
 
 

src/components/vBottomMenu.vue

@@ -1,7 +1,8 @@
 <template>
 	<div class="btm-box">
 		<img class="light"  src="../assets/images/integrated/btm-light.png"/>
-		<div class="btm-left">
+		
+		<div class="btm-left" :class="btmTipIndent">
 			<div class="btm-left-tip">
 				<div class="btm-left-block btm-left-state-c1"></div>新上报
 			</div>
@@ -20,6 +21,11 @@
 			<div class="btm-left-tip">
 				<div class="btm-left-block btm-left-state-c6"></div>填报
 			</div>
+			<div class="btm-legend" @click="btmIndent" >
+				<span>图例</span>
+				<i class="el-icon-caret-right" v-if="this.btmTipIndent !== 'btm-tip-to-right'"></i>
+				<i class="el-icon-caret-left" v-if="this.btmTipIndent == 'btm-tip-to-right'"></i>
+			</div>
 		</div>
 		<div class="bottom-menu-normal">
 			<div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con"
@@ -39,6 +45,20 @@
 
 			</div>
 		</div>
+		<div  class="btm-right">
+			<el-badge :value="12" >
+			  <el-button size="small" icon="el-icon-bank-card">任务</el-button>
+			</el-badge>
+			<el-badge :value="3" >
+			  <el-button size="small" icon="el-icon-chat-line-round">消息</el-button>
+			</el-badge>
+			<el-badge :value="1"  type="primary" >
+			  <el-button size="small" icon="el-icon-bell">警报</el-button>
+			</el-badge>
+			<el-badge   type="warning">
+			  <el-button size="small" icon="el-icon-refresh-right">刷新</el-button>
+			</el-badge>
+		</div>
 	</div>
 </template>
 
@@ -46,6 +66,7 @@
 	export default {
 		data() {
 			return {
+				btmTipIndent:'',//图例收起弹出
 				eventLocationVisible: false,
 				showChild: false,
 				fastMenu: [{
@@ -89,6 +110,15 @@
 			choseLayerSwitching(url) {
 				window.choseLayerSwitching(url);
 			},
+			//图例收起弹出
+			btmIndent(){
+			    if(this.btmTipIndent == ''){
+					this.btmTipIndent='btm-tip-to-right'
+				}
+				else if(this.btmTipIndent == 'btm-tip-to-right'){
+					this.btmTipIndent=''
+				}
+			}
 		}
 	}
 </script>
@@ -111,6 +141,7 @@
 		}
 		
 		.btm-left{
+			position: absolute;
 			font-size: .7rem;
 			height: 2rem;
 			line-height: 2rem;
@@ -118,6 +149,21 @@
 			border-left:none ;
 			color: $inBlue;
 			display: flex;
+			-webkit-transform: translateX(-24rem) !important;
+			transform: translateX(-24rem)  !important;
+			transition: all 0.5s ease-in-out  !important;
+			.btm-legend{
+				height: 2rem;
+				text-align: center;
+				color: $inBlue;
+				padding:0 .5rem;
+				cursor: pointer;
+				
+			}
+			.btm-legend:hover{
+				background-color:$tipHover;
+				color: $white;
+			}
 			.btm-left-tip{
 				display: flex;
 				align-items: center;
@@ -148,10 +194,15 @@
 				.btm-left-state-c6{
 					background-color: $eventStateColor-tb;
 				}
-			
+				
+				
 			}
 			
-			
+		}
+		.btm-tip-to-right{
+			-webkit-transform: translateX(0) !important;
+			transform: translateX(0)  !important;
+			transition: all 0.5s ease-in-out  !important;
 		}
 
 		.bottom-menu-normal {
@@ -173,7 +224,7 @@
 				position: relative;
 				color: $inBlue;
 				font-size: .5rem;
-				padding: .6rem 1.5rem;
+				padding: .6rem 1rem;
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -224,7 +275,35 @@
 
 		}
         
-		
+		.btm-right{
+			position: absolute;
+			font-size: .7rem;
+			height: 2rem;
+			display: flex;
+			right: 1rem;
+			align-items: center;
+			.el-badge{
+				display: flex !important;
+				margin-left: 1.5rem;
+				button{
+					padding: 0 .3rem;
+					height: 1.5rem;
+					background-color: #112543;
+					color: $inBlue;
+					border: 1px $searchBorder;
+				}
+				
+			}
+			.el-badge:hover{
+				-webkit-transform: translateX(0.1rem);
+				transform: translateX(0.1rem);
+				transition: all 0.2s ease-in-out;
+				button{
+					text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
+				}
+				
+			}
+		}
 
 	}
 </style>