<template>
	<div class="expose-plat-form">
		<div class="expose-left">
			<div class="left-top">
				<img style="width: 40%;height: 100%;object-fit: cover;" src="@/assets/images/warn_bj2.png" alt="">
				<div style="width: 60%;">
					<div class="top-title">甘肃烟草局重大安全隐患</div>
					<div class="top-content">员工张文行车中未系安全带,未戴安全帽,未穿反光衣,在开车中抽烟，并接打电话</div>
				</div>
			</div>
			<div class="left-bottom">
				<img class="left-bottom-img" v-for="item in 5" :key="item" src="@/assets/images/warn_bj2.png" alt="">
			</div>
		</div>
		<div class="expose-right">
			<div class="right-top">
				<img style="width: 40%;height: 100%;object-fit: cover;" src="@/assets/images/yinHbg.png" alt="">
				<div style="width: 60%;">
					<div class="top-title">先进典型案例</div>
					<div class="top-content">员工李明在工作中，认真负责，积极主动，表现优异，被评为优秀员工</div>
				</div>
			</div>
			<div class="right-bottom">
				<img class="right-bottom-img" v-for="item in 5" :key="item" src="@/assets/images/yinHbg.png" alt="">
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getApi, postApi } from "@/api/tobAcco_api.js";



const getTableData = () => {
	console.log('getTableData');
	// postApi('/dutyBook/tzgg/getTodoTaskList', {}).then(res => {
	// 	console.log('res: ', res);
	// 	listData.value = res.data
	// })
	// listData.value = [
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '未超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// 	{todoName: '水库管理中心关于开展安全应急救护，等培训的通知',personName: '张三',time:'2024-09-09',statusName: '已超期'},
	// ]
}
onMounted(() => {
	// setTimeItems()
	getTableData()
})
</script>

<style lang="scss" scoped>
.expose-plat-form {
	display: flex;
	// border: 1px solid #ccc;
	justify-content: space-between;
	height: calc(100% - 57px);

	.expose-left,
	.expose-right {
		width: calc(50% - 5px);
		height: 100%;
		padding: 10px;
		background-color: #F7F7F7;
		border: 1px solid #21B97E;

		.left-top,
		.right-top {
			display: flex;
			align-items: center;
			gap: 10px;
			height: 110px;

			.top-title {
				font-size: 15px;
				font-weight: bold;
				color: #000;
			}

			.top-content {
				font-size: 13px;
				color: #666;
			}
		}

		.left-bottom,
		.right-bottom {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 10px;

			.left-bottom-img,
			.right-bottom-img {
				height: 95px;
				width: calc(33.33% - 7px);
				object-fit: cover;
			}
		}
	}

}
</style>