zhgdlarge/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue

<template>
	<div class="leftTop" v-if="projectData">
		<Card title="宣传视频">
			<div class="videoBox">
				<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue";
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: null
});
// 项目信息
const projectData = ref(null as any);

watch(
	() => props.projectData,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
		}
	}
);
const BASEURL = import.meta.env.VITE_API_URL;
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	.videoBox {
		width: 100%;
		height: 100%;
		background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
		background-size: 100% 100%;
		.videos {
			width: 78%;
			height: 92%;
			margin: 3% 11%;
		}
	}
}
::v-deep .h-card .content {
	background: none;
}
</style>