UI

src/components/vBottomMenu.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="btm-box">
-		<img class="light"  src="../assets/images/integrated/btm-light.png"/>
+		<img class="light" src="../assets/images/integrated/btm-light.png" />
 
 		<div class="btm-left" :class="btmTipIndent">
 			<div class="btm-left-tip">
@@ -21,7 +21,7 @@
 			<div class="btm-left-tip">
 				<div class="btm-left-block btm-left-state-c6"></div>填报
 			</div>
-			<div class="btm-legend" @click="btmIndent" >
+			<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>
@@ -29,7 +29,7 @@
 		</div>
 		<div class="bottom-menu-normal">
 			<div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con"
-				@click.stop="showDialog(fastMenu.click)" >
+				@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"
@@ -38,69 +38,134 @@
 						<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;"
+						<!-- 	<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>
 					<!-- 林斑 -->
 					<div v-if="showBanChild && fastMenu.click == 'forestban'" class="nav-child">
 						<div class="forestban">
-						 <div class="forestban-con">
-							  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+							<div class="forestban-con">
+								<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
 						 </div>
-						 <div class="forestban-right">
-							   <el-input
-							     placeholder="请输入内容"
-							     prefix-icon="el-icon-search"
-							     v-model="searchFB">
-							   </el-input>
-							    <el-checkbox-group v-model="checkList" >
-							       <el-checkbox label="复选框 A"></el-checkbox>
-							       <el-checkbox label="复选框 B"></el-checkbox>
-							       <el-checkbox label="复选框 C"></el-checkbox>
-							    </el-checkbox-group>
+							<div class="forestban-right">
+								<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchFB">
+							 </el-input>
+								<el-checkbox-group v-model="checkList">
+									<el-checkbox label="复选框 A"></el-checkbox>
+									<el-checkbox label="复选框 B"></el-checkbox>
+									<el-checkbox label="复选框 C"></el-checkbox>
+								</el-checkbox-group>
 						 </div>
-					  	 <el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
-					  	 	@click.stop="closeBanChild"></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="closeBanChild"></el-button>
 						</div>
 					</div>
 					<!-- 林场 -->
 					<div v-if="showChangChild && fastMenu.click == 'forestchang'" class="nav-child">
 						<div class="forestban">
-						 <div class="forestban-con">
-							  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
-						 </div>
-						 <div class="forestban-right">
-							   <el-input
-							     placeholder="请输入内容"
-							     prefix-icon="el-icon-search"
-							     v-model="searchFB">
-							   </el-input>
-							    <el-checkbox-group v-model="checkList" >
-							       <el-checkbox label="复选框 A"></el-checkbox>
-							       <el-checkbox label="复选框 B"></el-checkbox>
-							       <el-checkbox label="复选框 C"></el-checkbox>
-							    </el-checkbox-group>
-						 </div>
-					  	 <el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
-					  	 	@click.stop="closeChangChild"></el-button>
+							<div class="forestban-con">
+								<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+							</div>
+							<div class="forestban-right">
+								<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchFB">
+								</el-input>
+								<el-checkbox-group v-model="checkList">
+									<el-checkbox label="复选框 A"></el-checkbox>
+									<el-checkbox label="复选框 B"></el-checkbox>
+									<el-checkbox label="复选框 C"></el-checkbox>
+								</el-checkbox-group>
+							</div>
+							<el-button type="danger" icon="el-icon-close"
+								style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
+								@click.stop="closeChangChild"></el-button>
 						</div>
 					</div>
 				</a>
 
 			</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 type="primary" >
-			  <el-button size="small" icon="el-icon-bell">警报</el-button>
+		<div class="btm-right">
+			<el-popover placement="top" trigger="click">
+				<div class="btm-r-pop-info">
+					<div class="btm-r-pop-info-box" v-for="(item,index) in 3">
+						<div class="btm-r-pop-info-tit">
+							<h3>火险任务</h3>
+						</div>
+						<div class="btm-r-pop-info-con">
+							<div class="btm-r-pop-info-list">
+								<div class="btm-r-pop-info-list-name">标题</div>
+								<div class="btm-r-pop-info-list-text">四平阿斯利康大姐夫啊路上的风景可丽金啊水电分离家</div>
+							</div>
+							<div class="btm-r-pop-info-list">
+								<div class="btm-r-pop-info-list-name">发起人</div>
+								<div class="btm-r-pop-info-list-text">张三</div>
+							</div>
+							<div class="btm-r-pop-info-list">
+								<div class="btm-r-pop-info-list-name">发起时间</div>
+								<div class="btm-r-pop-info-list-text">2022-09-05 12:12:15</div>
+							</div>
+							<div class="btm-r-pop-info-list">
+								<div class="btm-r-pop-info-list-name">关联事件</div>
+								<div class="btm-r-pop-info-list-text">啊萨杜拉副科级啊萨杜拉副科级</div>
+							</div>
+						</div>
+						<div class="btm-r-pop-info-btm">
+							<el-link type="success">查看详情</el-link>
+							<div class="btm-r-pop-info-btm-btn">
+								<el-button type="danger">拒绝</el-button>
+						 	<el-button type="primary">领取</el-button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<el-badge :value="12" slot="reference">
+					<el-button size="small" icon="el-icon-bank-card">任务</el-button>
+				</el-badge>
+			</el-popover>
+			<el-popover placement="top" trigger="click">
+				<div class="btm-r-pop-info">
+					<div class="btm-r-pop-info-box" v-for="(item,index) in 3">
+						<div class="btm-r-pop-info-tit">
+							<h3>火险任务</h3>
+						</div>
+						<div class="btm-r-pop-info-con">
+							<div class="btm-r-pop-info-list">
+								<div class="btm-r-pop-info-list-name">标题</div>
+								<div class="btm-r-pop-info-list-text">四平阿斯利康大姐夫啊路上的风景可丽金啊水电分离家</div>
+							</div>
+							<div class="btm-r-pop-info-list">
+								<div class="btm-r-pop-info-list-name">发起人</div>
+								<div class="btm-r-pop-info-list-text">张三</div>
+							</div>
+							<div class="btm-r-pop-info-list">
+								<div class="btm-r-pop-info-list-name">发起时间</div>
+								<div class="btm-r-pop-info-list-text">2022-09-05 12:12:15</div>
+							</div>
+							<div class="btm-r-pop-info-list">
+								<div class="btm-r-pop-info-list-name">关联事件</div>
+								<div class="btm-r-pop-info-list-text">啊萨杜拉副科级啊萨杜拉副科级</div>
+							</div>
+						</div>
+						<div class="btm-r-pop-info-btm">
+							<el-link type="success">查看详情</el-link>
+							<div class="btm-r-pop-info-btm-btn">
+								<el-button type="danger">拒绝</el-button>
+						 	<el-button type="primary">领取</el-button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<el-badge :value="3"  slot="reference">
+					<el-button size="small" icon="el-icon-chat-line-round">消息</el-button>
+				</el-badge>
+			</el-popover>
+			
+			<el-badge 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" @click="refresh">刷新</el-button>
+			<el-badge type="warning">
+				<el-button size="small" icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
 			</el-badge>
 		</div>
 	</div>
@@ -110,11 +175,11 @@
 	export default {
 		data() {
 			return {
-				btmTipIndent:'',//图例收起弹出
+				btmTipIndent: '', //图例收起弹出
 				eventLocationVisible: false,
 				showChild: false,
-				showBanChild: false,//林斑
-				showChangChild:false,//林场
+				showBanChild: false, //林斑
+				showChangChild: false, //林场
 				fastMenu: [{
 						name: '事件定位',
 						icon: 'iconfont sj-icon-sjdw',
@@ -147,87 +212,86 @@
 						click: 'TVWall'
 					}
 				],
-				    data: [{
-				          label: '一级 1',
-				          children: [{
-				            label: '二级 1-1',
-				            children: [{
-				              label: '三级 1-1-1'
-				            }]
-				          }]
-				        }, {
-				          label: '一级 2',
-				          children: [{
-				            label: '二级 2-1',
-				            children: [{
-				              label: '三级 2-1-1'
-				            }]
-				          }, {
-				            label: '二级 2-2',
-				            children: [{
-				              label: '三级 2-2-1'
-				            }]
-				          }]
-				        }, {
-				          label: '一级 3',
-				          children: [{
-				            label: '二级 3-1',
-				            children: [{
-				              label: '三级 3-1-1'
-				            }]
-				          }, {
-				            label: '二级 3-2',
-				            children: [{
-				              label: '三级 3-2-1'
-				            }]
-				          }]
-				        }],
-	
-				        defaultProps: {
-				          children: 'children',
-				          label: 'label'
-				        },
-					    checkList:[],//默认选择
-						searchFB: '',
-						btmCurrent:''
+				data: [{
+					label: '一级 1',
+					children: [{
+						label: '二级 1-1',
+						children: [{
+							label: '三级 1-1-1'
+						}]
+					}]
+				}, {
+					label: '一级 2',
+					children: [{
+						label: '二级 2-1',
+						children: [{
+							label: '三级 2-1-1'
+						}]
+					}, {
+						label: '二级 2-2',
+						children: [{
+							label: '三级 2-2-1'
+						}]
+					}]
+				}, {
+					label: '一级 3',
+					children: [{
+						label: '二级 3-1',
+						children: [{
+							label: '三级 3-1-1'
+						}]
+					}, {
+						label: '二级 3-2',
+						children: [{
+							label: '三级 3-2-1'
+						}]
+					}]
+				}],
+
+				defaultProps: {
+					children: 'children',
+					label: 'label'
+				},
+				checkList: [], //默认选择
+				searchFB: '',
+				btmCurrent: ''
 			}
 		},
 		methods: {
-			 handleNodeClick(data) {
-			        console.log(data);
-			      },
-      refresh(){
-        window.location.reload();
-      },
+			handleNodeClick(data) {
+			 console.log(data);
+			},
+			refresh() {
+				window.location.reload();
+			},
 			showDialog(click) {
 				window.showDialog(click)
 			},
 			choseLayerSwitching(url) {
 				window.choseLayerSwitching(url);
 			},
-			forestban(){
+			forestban() {
 				window.forestban();
 				console.log('林班')
 			},
-			forestchang(){
+			forestchang() {
 				window.forestchang();
 				console.log('林场')
 			},
-			closeBanChild(){
+			closeBanChild() {
 				this.showBanChild = false
 				this.checkList = []
 			},
-			closeChangChild(){
+			closeChangChild() {
 				this.showChangChild = false
 				this.checkList = []
 			},
 			//图例收起弹出
-			btmIndent(){
-			    if(this.btmTipIndent == ''){
-					this.btmTipIndent='btm-tip-to-right'
-				}
-				else if(this.btmTipIndent == 'btm-tip-to-right'){
-					this.btmTipIndent=''
+			btmIndent() {
+				if (this.btmTipIndent == '') {
+					this.btmTipIndent = 'btm-tip-to-right'
+				} else if (this.btmTipIndent == 'btm-tip-to-right') {
+					this.btmTipIndent = ''
 				}
 			}
 		}
@@ -247,40 +311,45 @@
 		height: 2.5rem;
 		display: flex;
 		align-items: center;
-		.light{
+
+		.light {
 			position: absolute;
 			top: -.5rem;
 		}
 
-		.btm-left{
+		.btm-left {
 			position: absolute;
 			font-size: .7rem;
 			height: 2rem;
 			line-height: 2rem;
-			border: 1px $searchBorder ;
-			border-left:none ;
+			border: 1px $searchBorder;
+			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{
+			transform: translateX(-24rem) !important;
+			transition: all 0.5s ease-in-out !important;
+
+			.btm-legend {
 				height: 2rem;
 				text-align: center;
 				color: $inBlue;
-				padding:0 .5rem;
+				padding: 0 .5rem;
 				cursor: pointer;
 
 			}
-			.btm-legend:hover{
-				background-color:$tipHover;
+
+			.btm-legend:hover {
+				background-color: $tipHover;
 				color: $white;
 			}
-			.btm-left-tip{
+
+			.btm-left-tip {
 				display: flex;
 				align-items: center;
 				margin: 0 .5rem;
-				.btm-left-block{
+
+				.btm-left-block {
 					width: 1rem;
 					height: 1rem;
 					margin-right: .3rem;
@@ -288,22 +357,28 @@
 
 
 				}
-				.btm-left-state-c1{
+
+				.btm-left-state-c1 {
 					background-color: $eventStateColor-xsb;
 				}
-				.btm-left-state-c2{
+
+				.btm-left-state-c2 {
 					background-color: $eventStateColor-cb;
 				}
-				.btm-left-state-c3{
+
+				.btm-left-state-c3 {
 					background-color: $eventStateColor-yqs;
 				}
-				.btm-left-state-c4{
+
+				.btm-left-state-c4 {
 					background-color: $eventStateColor-ld;
 				}
-				.btm-left-state-c5{
+
+				.btm-left-state-c5 {
 					background-color: $eventStateColor-bj;
 				}
-				.btm-left-state-c6{
+
+				.btm-left-state-c6 {
 					background-color: $eventStateColor-tb;
 				}
 
@@ -311,10 +386,11 @@
 			}
 
 		}
-		.btm-tip-to-right{
+
+		.btm-tip-to-right {
 			-webkit-transform: translateX(0) !important;
-			transform: translateX(0)  !important;
-			transition: all 0.5s ease-in-out  !important;
+			transform: translateX(0) !important;
+			transition: all 0.5s ease-in-out !important;
 		}
 
 		.bottom-menu-normal {
@@ -371,27 +447,33 @@
 					.nav-child-btn {
 						padding: .2rem;
 					}
-					.forestban{
+
+					.forestban {
 						display: flex;
-						.forestban-con{
+
+						.forestban-con {
 							width: 10rem;
 							height: 20rem;
 							overflow-y: scroll;
 							border: 1px solid rgba(51, 70, 127, 0.7);
 						}
-						.forestban-right{
+
+						.forestban-right {
 							width: 15rem;
 							height: 20rem;
 							overflow-y: scroll;
 							padding: 0 1rem;
-							.el-checkbox-group{
+
+							.el-checkbox-group {
 								display: flex;
 								flex-direction: column;
-								label{
+
+								label {
 									padding: .4rem 0;
 								}
-								.el-checkbox{
-									color:$white;
+
+								.el-checkbox {
+									color: $white;
 								}
 							}
 						}
@@ -400,12 +482,14 @@
 				}
 			}
 
-			.btm-m-con:hover, .on {
+			.btm-m-con:hover,
+			.on {
 				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{
+
+				.nav-child {
 					text-shadow: none !important;
 				}
 
@@ -417,17 +501,19 @@
 
 		}
 
-		.btm-right{
+		.btm-right {
 			position: absolute;
 			font-size: .7rem;
 			height: 2rem;
 			display: flex;
 			right: 1rem;
 			align-items: center;
-			.el-badge{
+
+			.el-badge {
 				display: flex !important;
 				margin-left: 1.5rem;
-				button{
+
+				button {
 					padding: 0 .3rem;
 					height: 1.5rem;
 					background-color: #112543;
@@ -436,11 +522,13 @@
 				}
 
 			}
-			.el-badge:hover{
+
+			.el-badge:hover {
 				-webkit-transform: translateX(0.1rem);
 				transform: translateX(0.1rem);
 				transition: all 0.2s ease-in-out;
-				button{
+
+				button {
 					text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
 				}
 
@@ -448,4 +536,73 @@
 		}
 
 	}
+	.btm-r-pop-info {
+	    display: flex;
+		width: 35rem;
+		flex-direction: column;
+		max-height: 85vh;
+		min-height: fit-content;
+		overflow-y: scroll;
+		padding: 1rem;
+		.btm-r-pop-info-box:hover{
+			box-shadow: $shadowListHover;
+			color: $inBlue;
+			border: 1px $countBorder;
+		}
+			
+		.btm-r-pop-info-box{
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			background-color: $deepBG;
+			padding: .5rem;
+			border-radius: .5rem;
+			color: $inBlue;
+			border: 1px $searchBorder;
+			margin-bottom: 1rem;
+			.btm-r-pop-info-tit {
+				display: flex;
+				padding: .5rem;
+				h3{
+					font-weight: bolder;
+				}
+				
+			}
+			
+			.btm-r-pop-info-con {
+				padding: .5rem;
+				display: flex;
+				flex-direction: column;
+				border-top: 1px $searchBorder;
+				border-bottom: 1px $searchBorder;
+				.btm-r-pop-info-list {
+					display: flex;
+					padding:.3rem 0;
+					.btm-r-pop-info-list-name {
+						width: 3.6rem;
+						text-align: right;
+						margin-right: 1rem;
+					}
+			
+					.btm-r-pop-info-list-text {
+						
+					}
+				}
+			}
+			
+			.btm-r-pop-info-btm {
+				padding: .5rem;
+				display: flex;
+				justify-content: space-between;
+				.btm-r-pop-info-btm-btn {
+					button{
+						padding: .5rem;
+					}
+				}
+			}
+		}
+		
+	
+	}
+	
 </style>