<template>
	<div>
		<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="" stretch="true">
							<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: 57.8vh;background-color:black;"></div>
				</div>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				eventLocationVisible: false,
				input1: '',
				input2: '',
				activeName:'event'

			}
		},
		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%;
		padding: 0 3rem;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		z-index: 100000;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
		background-size: cover;
		overflow: hidden;

		.btm-m-con {
			position: relative;
			color: $inBlue;
			font-size: .5rem;
			padding: 1rem 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;

			i {
				font-size: 1rem;
				color: $inBlue;
				text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
				margin-right: 0.2rem;
			}
		}

		.btm-m-con:hover {
			text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
			filter: brightness(2.3);
			-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>
