<template>
	<Card title="员工关怀">
		<div class="bottom-left">
			<!-- <div class="list-content">
				<div class="list-detail" v-for="item in list" :key="item.id">
					<div class="detail-pic">
						<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
					</div>
					<div class="detail-text">
						<div class="title">{{ item.title }}</div>
						<div class="time">{{ item.grossTime }}</div>
					</div>
				</div>
			</div> -->
		</div>
	</Card>
</template>
<script lang="ts" setup>
import Card from "@/components/card.vue";
import symbolIcon from "@/assets/images/lineSymbol.png";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
const list = reactive([
	{
		id: 1,
		title: "学习贯彻习近平新时代有中国特色的社会主义思想主题教育深入",
		grossTime: "2023-01-01 12:00:00"
	},
	{
		id: 2,
		title: "学习贯彻习近平新时代中国特色社会主义",
		grossTime: "2023-01-01 12:00:00"
	},
	{
		id: 3,
		title: "新时代中国特色社会主义思想主题教育深入",
		grossTime: "2023-01-01 12:00:00"
	},
	{
		id: 4,
		title: "中国特色社会主义思想主题教育深入",
		grossTime: "2023-01-01 12:00:00"
	},
	{
		id: 5,
		title: "中国特色社会主义思想主题教育深入",
		grossTime: "2023-01-01 12:00:00"
	}
]);
</script>
<style lang="scss" scoped>
.bottom-left {
	width: 100%;
	height: 100%;
	.list-content {
		width: 95%;
		height: 100%;
		margin: 0 2% 0 5%;
		overflow: scroll;
		.list-detail {
			display: flex;
			align-items: center;
			width: 100%;
			height: 20%;
			padding-top: 4%;
			.detail-pic {
				width: 13%;
				height: 100%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.detail-text {
				width: 100%;
				margin-left: 2%;
				.title {
					width: 94%;
					white-space: nowrap; //单行
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 14px;
					color: #ffffff;
				}
				.time {
					margin-top: 2%;
					font-size:12px;
					color: #a1accb;
				}
			}
		}
	}
}
</style>
