<template>
	<div class="special-finance-item flex">
		<div class="dot"></div>
		<div class="flex-1 container">
			<div class="time">{{ item.date || '' }}</div>
			<div class="content">
				{{ item.info || '' }}
			</div>
			<div class="tag-list flex flex-wrap">
				<div v-for="(it, i) in tag" :key="i" class="tag-item flex items-center">
					<img src="/" alt="" />
					<span>{{ it.name }}</span>
					<div class="lead" v-if="it.isLead">Lead</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			tag: [],
		}
	},
	methods: {},
}
</script>

<style scoped lang="scss">
.special-finance-item {
	border-bottom: 1px solid #E2E8F0;
	gap: 14px;
	margin-bottom: 50px;
	.dot {
		width: 8px;
		height: 8px;
		background-color: #7B61FF;
		border-radius: 50%;
		margin-top: 8px;
	}
	.container {
		padding-bottom: 50px;
		.time {
			font-size: 16px;
			color: #7B61FF;
			font-family: 'Poppins-Medium';
			margin-bottom: 22px;
		}
		.content {
			color: #64748B;
			font-size: 20px;
			font-family: 'Poppins-Medium';
			margin-bottom: 20px;
		}
		.tag-list {
			gap: 30px;
			.tag-item {
				position: relative;
				border-radius: 12px;
				border: 1px solid #E2E8F0;
				padding: 10px;
				gap: 4px;
				img {
					width: 12px;
					height: 12px;
				}
				span {
					font-size: 14px;
					color: #64748B;
					font-family: 'Poppins-Regular';
					line-height: 14px;
				}
				.lead {
					padding: 0 4px;
					border-radius: 8px;
					background-color: #6ae7ee;
					color: #ffffff;
					position: absolute;
					right: 0;
					font-size: 9px;
					top: -10px;
				}
			}
		}
	}
}
</style>
