UI

src/assets/styles/base.scss

@@ -1263,6 +1263,22 @@ div::-webkit-scrollbar {
 
 //外层嵌套
   .event-info {
+	.event-info-top{
+		width: 100%;
+		.event-info-top-grp{
+			width: 50%;
+			display: flex;
+			.el-input{
+				margin-right: 1rem;
+				.el-input__inner{
+					background: #071927;
+					border: 1px solid #2a3a60;
+					color: #1fb0b0;
+				}
+			}
+		}
+	}
+	
     .event-info-con{
 		width: 100%;
 		display: flex;
@@ -1282,12 +1298,21 @@ div::-webkit-scrollbar {
 			margin-left: 1%;
 			width: 45%;
 		}
+		.e-location-left{
+			width: 28%;
+			margin-top: 1rem;
+		}
+		.e-location-right{
+			width: 71%;
+			margin-top: 1rem;
+			margin-left: 1rem;
+		}
 	}
 	.e-btm-btn{
 		width: 100%;
 		height: 3rem;
 		display: flex;
-		justify-content: flex-end
+		justify-content: flex-end;
 	}
 
 

src/components/eventLocation.vue

@@ -1,10 +1,54 @@
 <template>
 	<div>
-    <el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%">
-      <div style="position:absolute; right: 0;top:60px; width:40%;">
-		  
-      </div>
-    </el-dialog>
+		<el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%">
+			<div class="event-info">
+				<div class="event-info-top">
+					<el-form>
+						<div class="event-info-top-grp">
+							<el-input placeholder="输入经度" v-model="input1" clearable>
+							</el-input>
+							<el-input placeholder="输入纬度" v-model="input2" clearable>
+							</el-input>
+							<el-button type="success" @click="" size="mini">定位</el-button>
+						</div>
+					</el-form>
+				</div>
+				<div class="event-info-con">
+					<div class="e-location-left">
+						<el-tabs v-model="activeName" @tab-click="handleClick">
+							<el-tab-pane label="事件" name="event">
+								<div class="forthis">
+									<div class="i-list-con overflow-y" style="height: 50vh;">
+										<div class="d-l-con d-evnet-list-con" v-for="(item,index) in 10">
+											<!-- <img :src="" v-if="item.picturePath!=null&&item.picturePath!=''" class="event-list-img"> -->
+											<img src="@/assets/images/visual/img-sample.png" class="event-list-img">
+											<div class="event-list-text">
+						  				    <h3>山东良凤江爱仕达六块腹肌</h3>
+											</div>
+										</div>
+									</div>
+								</div>
+							</el-tab-pane>
+							<el-tab-pane label="探头" name="monitor">
+								<div class="forthis">
+								  <div class="i-list-con overflow-y" style="height: 50vh;">
+										<span v-for="(item,index) in 10">
+											<div class="d-l-con" @click="">
+												<div class="d-l-l-text">
+													<i class="iconfont sj-icon-jkzx icon-sxt"></i>
+													<h4>爱仕达asdasd</h4>
+												</div>
+											</div>
+										</span>
+								  </div>
+								</div>
+							</el-tab-pane>
+						</el-tabs>
+					</div>
+					<div class="e-location-right" style="height: 50vh;background-color: blue;"></div>
+				</div>
+			</div>
+		</el-dialog>
 	</div>
 
 </template>
@@ -13,19 +57,26 @@
 	export default {
 		data() {
 			return {
-        eventLocationVisible:false
+				eventLocationVisible: false,
+				input1: '',
+				input2: '',
+				activeName:'event'
+
+			}
+		},
+		methods: {
+			showEventLocation() {
+				this.eventLocationVisible = true
 			}
-	},
-    methods:{
-      showEventLocation(){
-        this.eventLocationVisible=true
-      }
-    }
+		}
 	}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';
+	.el-dialog:not(.is-fullscreen){
+		margin-top: 5.5vh !important;
+	}
 
 	.bottom-menu-normal {
 		max-width: 90%;
@@ -46,16 +97,16 @@
 		.btm-m-con {
 			position: relative;
 			color: $inBlue;
-			font-size:.5rem;
-			padding: 1rem 1.5rem ;
+			font-size: .5rem;
+			padding: 1rem 1.5rem;
 			display: flex;
 			align-items: center;
-			justify-content:center;
+			justify-content: center;
 			-webkit-transform: translateY(0);
 			transform: translateY(0);
 			transition: all 0.2s ease-in-out;
 			cursor: pointer;
-			white-space:nowrap;
+			white-space: nowrap;
 
 			i {
 				font-size: 1rem;