JT-CIM/src/views/Map3d/components/znjk.vue

<script setup>
	import videofarm1 from '@/assets/video/videofarm1.mp4';
	import videofarm2 from '@/assets/video/videofarm2.mp4';
	import nongye from '@/assets/images/farm.jpg';
	import nongye2 from '@/assets/images/farm2.jpg';
</script>
<template>
	<!-- <div class="main">
		<video :src="videofarm1" class="video"></video>
	</div> -->
	<div class="block text-center" m="t-4">
		<el-carousel trigger="click" height="200px" indicator-position="outside" :autoplay="false">
			<el-carousel-item v-for="item in videoList" :key="item">
				<div style="height: 50rem;width: 100%;text-align: center;position: absolute;margin-top: -1rem;">{{item.label}}</div>
				<video :src="item.url" class="video11" autoplay controls loop></video>
			</el-carousel-item>
		</el-carousel>
	</div>
	<!-- <el-carousel :interval="2000" height="100%">
		<el-carousel-item v-for="item in videoList" :key="item">
		</el-carousel-item>
	</el-carousel> -->
</template>

<script>
	export default {
		data() {
			return {
				videoList: [{
					url: videofarm1,
					imgurl: nongye,
					label:"一号摄像头"
				}, {
					url: videofarm2,
					imgurl: nongye2,
					label:"二号摄像头"
				}, {
					url: videofarm1,
					imgurl: nongye,
					label:"三号摄像头"
				}, {
					url: videofarm2,
					imgurl: nongye2,
					label:"四号摄像头"
				}]
			}
		},
		methods: {

		},
		mounted() {

		}
	}
</script>

<style scoped>
	.block{
		margin: 10rem 10rem 0 10rem;
	}
	
	.demonstration {
	  color: var(--el-text-color-secondary);
	}
	
	.el-carousel__item h3 {
	  color: #475669;
	  opacity: 0.75;
	  line-height: 150px;
	  margin: 0;
	  text-align: center;
	}
	.video11{
		margin: 0 5%;
		width: 90%;
		height:100%;
	}
	
	.el-carousel__item:nth-child(2n) {
	  /* background-color: #99a9bf; */
	}
	
	.el-carousel__item:nth-child(2n + 1) {
	  /* background-color: #d3dce6; */
	}
</style>