zhgdlarge/src/components/setVideoDialog.vue

<template>
	<div class="setvideodialog" v-if="dialogInfo.showDialog">
		<div class="listdetail">
			<div class="dialog-content-more">
				<div class="dialog-title">
					<img src="@/assets/images/titleIcon.png" alt="" />
					<div class="title-text">
						<i>{{ dialogInfo.postData?.title }}</i>
					</div>
					<div class="close-icon" @click="closeDialog">
						<el-icon>
							<Close />
						</el-icon>
					</div>
				</div>
				<div class="contont-video" style="color: #fff; font-size: 24px">
					<div class="video-list" v-for="item in dialogInfo.videoUploadList" :key="item.id">
						<div>{{ item.title }}：</div>
						<el-upload
							ref="upload"
							class="upload-demo"
							action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
							:limit="1"
							:on-exceed="handleExceed"
							:auto-upload="false"
						>
							<template #trigger>
								<el-button type="primary">
									<span class="videoupload">上传</span>
									<el-icon color="#fff" :size="24" class="no-inherit">
										<UploadFilled />
									</el-icon>
								</el-button>
							</template>
						</el-upload>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import { genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";

const dialogInfo = reactive({
	showDialog: false,
	postData: {} as any,
	videoUploadList: [
		{
			id: 1,
			title: "周一"
		},
		{
			id: 2,
			title: "周二"
		},
		{
			id: 3,
			title: "周三"
		},
		{
			id: 4,
			title: "周四"
		},
		{
			id: 5,
			title: "周五"
		},
		{
			id: 6,
			title: "周六"
		},
		{
			id: 7,
			title: "周日"
		}
	]
});
const closeDialog = () => {
	dialogInfo.showDialog = false;
	dialogInfo.postData = {};
};
function openDialog(obj: any) {
	dialogInfo.postData = obj;
	dialogInfo.showDialog = true;
}

const upload = ref<UploadInstance>();

const handleExceed: UploadProps["onExceed"] = files => {
	upload.value!.clearFiles();
	const file = files[0] as UploadRawFile;
	file.uid = genFileId();
	upload.value!.handleStart(file);
};

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
	openDialog
});
onMounted(async () => {});
</script>

<style lang="scss" scoped>
.setvideodialog {
	position: absolute;
	width: 70%;
	height: 60%;
	right: 3%;
	top: 5%;
	background: rgba(7, 28, 49, 0.5);
	z-index: 100;

	.dialog-content {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 21%;
		width: 70%;
		height: 60%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}

	.dialog-content-show {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 1%;
		width: 70%;
		height: 98%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}

	.listdetail {
		position: absolute;
		// box-sizing: border-box;
		// padding: 1%;
		// right: 3%;
		// top: 5%;
		width: 100%;
		height: 100%;
		background: rgba(8, 31, 63, 0.7);
		z-index: 21;

		.dialog-content-more {
			// position: absolute;
			// box-sizing: border-box;
			// padding: 1%;
			// left: 15%;
			// top: 21%;
			width: 100%;
			height: 100%;
			background: url("@/assets/images/overviewScreen/card-content.png") no-repeat;
			background-size: 100% 100%;
			z-index: 21;
		}

		.contont-video {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10px;
			.video-list {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 15px;
				margin-top: 30px;
				font-weight: bold;
				.no-inherit {
					margin-left: 8px;
				}
				.upload-demo {
					width: 45%;
				}
				:deep(.el-upload-list),
				:deep(.el-upload-list__item) {
					margin: 0;
				}
				:deep(.el-upload-list__item-info) {
					width: 100%;
				}
				:deep(.el-button.el-button--primary.el-button--default) {
					padding: 10px 15px;
					height: 40px;
				}

				:deep(.videoupload) {
					font-size: 20px;
				}
			}
		}
	}

	.dialog-content,
	.dialog-content-show,
	.dialog-content-more {
		position: relative;

		.political-outlook {
			height: 100%;
		}

		.dialog-article {
			height: 95%;
		}

		.close-icon {
			// position: absolute;
			// right: 3%;
			// top: 3%;
			cursor: pointer;
			color: #ffffff;
			font-size: 18px;
		}

		.dialog-title {
			color: #ffffff;
			font-weight: bold;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
			display: flex;
			align-items: center;
			margin: 0 20px;
			padding-top: 10px;

			.title-time {
				font-size: 30px;
				color: #f34234;
				position: absolute;
				top: 3%;
				left: 50%;
				transform: translateX(-50%);
			}

			.title-img {
				width: 3%;
				height: 3%;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.title-text {
				margin-left: 1%;
				margin-right: auto;
			}
		}
	}
}

.notoDta {
	top: 73%;
	width: 12%;
	left: 44%;
	position: absolute;

	img {
		width: 40%;
		margin: 5% 30%;
	}

	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>