<template>
	<div class="integral flex flex-col items-center">
		<div class="md:w-bodySet">
			<h4 class=" mt-16 mb-4 text-3xl text-title-color">一键发积分</h4>
			<p class="text-lg text-text-color">快速安全</p>
			<div class="flex justify-center mt-44 relative">
				<img src="@/assets/images/home/integral.png" width="960" alt="">
				<div class="absolute flex flex-col justify-center items-center tag_1">
					<img src="@/assets/images/h-integral/i1.png" width="30" alt="">
					<p class="text-16px text-article-color mt-1">1.输入企业名称</p>
				</div>
				<div class="absolute flex flex-col justify-center items-center tag_2">
					<p class="text-16px text-article-color mb-1">2.自动生成/输入积分简称</p>
					<img src="@/assets/images/h-integral/i2.png" width="30" alt="">
				</div>
				<div class="absolute flex flex-col justify-center items-center tag_3">
					<img src="@/assets/images/h-integral/i3.png" width="30" alt="">
					<p class="text-16px text-article-color mt-1">3.系统审核无重名</p>
				</div>
				<div class="absolute flex flex-col justify-center items-center tag_4">
					<img src="@/assets/images/h-integral/i4.png" width="30" alt="">
					<p class="text-16px text-article-color mt-1">4.支付发行费用</p>
				</div>
				<div class="absolute flex flex-col justify-center items-center tag_5">
					<img src="@/assets/images/h-integral/i5.png" width="30" alt="">
					<p class="text-16px text-article-color mt-1">5.积分进入钱包</p>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.integral {
		height: 730px;
		background-image: url('../assets/images/h-integral/bg_int.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: 50%;
	}
	.tag_1 {
		top: 35px;
		left: 292px;
	}
	.tag_1::after {
		content: '';
		display: block;
		width: 1px;
		height: 26px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%);
	}
	.tag_2 {
		top: -85px;
		left: 542px;
	}
	.tag_2::after {
		content: '';
		display: block;
		width: 1px;
		height: 32px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		bottom: -28px;
		left: 50%;
		transform: translateX(-50%);
	}
	.tag_3 {
		top: 35px;
		left: 847px;
	}
	.tag_3::after {
		content: '';
		display: block;
		width: 1px;
		height: 26px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%);
	}
	.tag_4 {
		top: 194px;
		left: 717px;
	}
	.tag_4::after {
		content: '';
		display: block;
		width: 1px;
		height: 26px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%);
	}
	.tag_5 {
		top: 194px;
		left: 436px;
	}
	.tag_5::after {
		content: '';
		display: block;
		width: 1px;
		height: 26px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%);
	}
</style>