<template>
	<Card title="党员风采">
		<div class="bottom-center">
			<div class="party-member">
				<div class="member-content" v-for="item in list" :key="item.id">
					<div class="name">
						<i>{{ item.name }}</i>
					</div>
					<div class="photo">
						<img :src="driverPhoto" alt="" />
					</div>
					<div class="introduce">{{ item.introduce }}</div>
				</div>
			</div>
		</div>
	</Card>
</template>
<script lang="ts" setup>
import Card from "@/components/card.vue";
import driverPhoto from "@/assets/images/towerCraneMonitoring/driverPhoto.png";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
const list = reactive([
	{
		id: 1,
		name: "宋小秋",
		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
	},
	{
		id: 2,
		name: "黄磊",
		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
	},
	{
		id: 3,
		name: "郭莎莎",
		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
	},
	{
		id: 4,
		name: "方洪鑫",
		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
	},
	{
		id: 5,
		name: "郑欣敏",
		introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
	}
]);
</script>
<style lang="scss" scoped>
.bottom-center {
	width: 100%;
	height: 100%;
	.party-member {
		height: 100%;
		padding: 0 4%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.member-content {
			width: 17%;
			height: 100%;
			margin-top: 5%;
			.name {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 70%;
				height: 12%;
				font-family: OPPOSans-Regular, OPPOSans;
				margin: auto;
				background: url("@/assets/images/smartPartyBuilding/nameBg.png") no-repeat;
				background-size: 100% 100%;
				font-size: 14px;
				color: #ffffff;
			}
			.photo {
				width: 70%;
				height: 50%;
				margin: auto;
				margin-top: 3%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.introduce {
				width: 100%;
				margin-top: 8%;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				background: url("@/assets/images/smartPartyBuilding/textBg.png") no-repeat;
				background-size: 100% 100%;
				font-size: 1px;
				color: #a0b8e5;
				text-align: center;
			}
		}
	}
}
</style>
