Show.vue

<template>
  <div class="home">
      <el-header class="headers">
		  <span class="title">实事分析展示</span>
	  </el-header>
      <el-container>
        <el-main class="mainDiv">
			<div class="topDiv">
				<div class="videoCon">
					<!-- 加入视频 -->
				</div>
				<div class="imgCon">
					<div class="imgDiv">
							<!-- 加入img 100% -->
					</div>
					<div class="textDiv">
						<p>抓拍时间：2019年10月29日 17:01:47</p>
						<p>抓拍地点：丰豪东路与北清路交叉口</p>
						<p>车牌号码：京B123456</p>
						<p>车辆类型：小轿车</p>
						<p>车身颜色：白色</p>
						<p>违法类型：占用公交车道年</p>
					</div>
				</div>
			</div>
			<div class="bottomDiv">
				<!-- 循环生成lDiv -->
				<div class="lDiv">
					<div class="leftImg">
						<!-- 加入img 100% -->
					</div>
					<div class="rightDiv">
						<p>抓拍时间：2019年10月29日 17:01:47</p>
						<p>抓拍地点：丰豪东路与北清路交叉口</p>
						<p>车牌号码：京B123456</p>
						<p>车辆类型：小轿车</p>
						<p>车身颜色：白色</p>
						<p>违法类型：占用公交车道年</p>
					</div>
					<div style="clear: both;"></div>
				</div>
				
				<div class="lDiv">
					<div class="leftImg">
						<!-- 加入img 100% -->
					</div>
					<div class="rightDiv">
						<p>抓拍时间：2019年10月29日 17:01:47</p>
						<p>抓拍地点：丰豪东路与北清路交叉口</p>
						<p>车牌号码：京B123456</p>
						<p>车辆类型：小轿车</p>
						<p>车身颜色：白色</p>
						<p>违法类型：占用公交车道年</p>
					</div>
					<div style="clear: both;"></div>
				</div>
				
				<div class="lDiv">
					<div class="leftImg">
						<!-- 加入img 100% -->
					</div>
					<div class="rightDiv">
						<p>抓拍时间：2019年10月29日 17:01:47</p>
						<p>抓拍地点：丰豪东路与北清路交叉口</p>
						<p>车牌号码：京B123456</p>
						<p>车辆类型：小轿车</p>
						<p>车身颜色：白色</p>
						<p>违法类型：占用公交车道年</p>
					</div>
					<div style="clear: both;"></div>
				</div>
				
				<div style="clear: both;"></div>
			</div>
		</el-main>
      </el-container>
  </div>
</template>

<script>
// import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  data(){
	  return{
		    isCollapse: false,
			conHeight:0
	  };
  },
  created(){
  },
  mounted(){
  },
  components: {
    // HelloWorld
  },
  methods:{}
};
</script>
<style scoped="scoped" lang="scss">
	.headers{
		line-height: 60px;
	}
	.title{
		font-size:24px;
		font-family:MicrosoftYaHeiUI;
		color:rgba(255,255,255,1);
		-webkit-background-clip:text;
	}
	.videoCon{
		flex:1212;
		height:682px;
		background: red;
		margin-right: 12px;
	}
	.imgCon{
		background: #FFFFFF;
		padding: 12px;
		flex:644;
	}
	.imgDiv{
		width:100%;
		height:360px;
		background:rgba(216,216,216,1);
	}
	.lDiv{
		margin-right: 12px;
		flex: 1;
		display: flex;
	}
	.lDiv:nth-last-of-type(2){
		margin: 0;
	}
	.rightDiv{
		flex:226;
		border:1px solid rgba(229,229,229,1);
		border-left: none;
		color: #555555;
		font-size: 12px;
		padding-top: 8px;
		float: left;
	}
	.rightDiv p{
		margin: 10px 0;
		margin-left: 10px;
	}
	.textDiv{
		height:286px;
		border:1px solid rgba(229,229,229,1);
		color: #555555;
		font-size:22px;
		padding-top: 12px;
	}
	.textDiv p{
		margin: 14px 0;
		margin-left: 37px;
	}
	.bottomDiv{
		padding: 7px;
		background: #FFFFFF;
		display: flex;
		flex-flow: row nowrap;
	}
	.leftImg{
		flex: 390;
		height: 186px;
		background: #d8d8d8;
		float: left;
	}
	.topDiv{
		margin-bottom: 8px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.mainDiv{
		padding: 8px;
	}
	@media screen and (max-width: 1366px) {
		.topDiv{
			margin-bottom: 5px;
		}
		.mainDiv{
			padding: 5px 40px;
		}
	   .videoCon{
			flex:1212;
			height:446.78px;
			margin-right: 12px;
	   }
	   .imgDiv{
		   height: 237.46px;
	   }
	   .textDiv{
		   height: 171px;
		   font-size: 16px;
		   padding-top: 4px;
		   padding-bottom: 9px;
	   }
	   .textDiv p{
	       margin: 7px 0;
	       margin-left: 37px;
	   }
	   .leftImg{
		   height: 143px;
	   }
	   .rightDiv p {
	       margin: -1px 0;
	       margin-left: 7px;
	   }
	   .rightDiv{
		   padding-top: 0px;
	   }
	}
	@media (min-height:1080px){
		.headers{
			line-height: 120px!important;
			height: 120px!important;
		}
		.title{
			font-size:40px;
			font-family:MicrosoftYaHeiUI;
			color:rgba(255,255,255,1);
			-webkit-background-clip:text;
		}
		.mainDiv{
			padding-top: 20px;
		}
		.topDiv{
			margin-bottom: 16px;
		}
	}
</style>