<template>
	<Card title="征地管理">
		<div class="bottom-left">
			<el-scrollbar class="list-content">
				<div class="list-detail" v-for="item in memberCareList" :key="item.id">
					<div class="detail-text">
						<div class="title" :title="item.title">{{ item.title || " " }}</div>
						<div class="time">{{ item.createDate || " " }}</div>
					</div>
				</div>
			</el-scrollbar>
			<div class="notoDta" v-if="memberCareList.length == 0">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</div>
	</Card>
</template>
<script lang="ts" setup>
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import { GlobalStore } from "@/stores";
import { getPartyBuildingGuidancePage } from "@/api/modules/guidancePartyBuilding";
const store = GlobalStore();
const memberCareList = ref({} as any);
//获取党建新闻
const getMemberCareList = () => {
	getPartyBuildingGuidancePage({
		projectSn: store.sn,
		pageNo: 1,
		pageSize: 10,
		type: 1
	}).then((res: any) => {
		console.log("获取征地管理", res);
		if (res.success) {
			memberCareList.value = res.result.records;
		}
	});
};

onMounted(() => {
	getMemberCareList();
});
</script>
<style lang="scss" scoped>
.bottom-left {
	width: 100%;
	height: 100%;
	position: relative;

	.notoDta {
		top: 10%;
		width: 50%;
		left: 25%;
		position: absolute;

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

		p {
			color: #fff;
			font-size: calc(100vw * 14 / 1920);
			margin: -6% 37%;
		}
	}

	.list-content {
		width: 95%;
		height: 100%;
		margin: 0 2% 0 5%;

		.list-detail {
			display: flex;
			align-items: center;
			width: 100%;
			height: 20%;
			padding-top: 4%;

			.detail-pic {
				width: 60px;
				/* 设置容器的宽度 */
				height: 40px;

				/* 设置容器的高度 */
				// overflow: hidden; /* 防止图片溢出容器 */
				img {
					width: 100%;
					height: 100%;
				}
			}

			.detail-text {
				// width: 85%;
				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>
