<template>
  <div class="home_banner relative">
		<div class="banner_content md:w-bodySet">
			<img class="mb-7" src="../assets/images/home/ycc.png" alt="YCC" width="215">
			<div class="flex mb-5">
				<p class="text-4xl" style="color: #3D5EE9"><span class="inline-block mr-5" style="color: #FFA457">原链</span>企业级区块链SaaS平台</p>
			</div>
			<p class="text-left mb-8 text-28px text-footer-color">让世界没有难做的链</p>
			<div class="qrcode_box flex justify-evenly items-center mb-28">
				<div class="qrcode_item flex flex-col">
					<img src="../assets/images/home/wx2.png" alt="">
					<p class="font_9">微信群:chain-vc（发 ycc100进群）</p>
				</div>
				<div class="qrcode_item flex flex-col">
					<img src="../assets/images/home/qq.png" alt="">
					<p class="font_9">QQ号:1683656222（扫一扫联系客服）</p>
				</div>
				<div class="qrcode_item flex flex-col">
					<img src="../assets/images/home/wx1.png" alt="">
					<p class="font_9">微信号:kuangfuwu（扫一扫联系客服）</p>
				</div>
			</div>
			<p class="text-28px text-left text-title-color">什么是原链？</p>
		</div>
	</div>
</template>

<style scoped>
	.home_banner {
		/* width: 1250px; */
		height: 798px;
		background-image: url('../assets/images/home/bg_t.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: 50%;
		position: relative;
	}
	.banner_content {
		/* width: 1250px; */
		position: absolute;
		top: 220px;
		left: 50%;
		transform: translateX(-50%);
	}
	.qrcode_box {
		width: 280px;
		height: 116px;
		background: rgba(79, 138, 255, 10%);
		border-radius: 5px;
	}
	.qrcode_item {
		width: 60px;
	}
	.qrcode_item img {
		width: 60px;
		height: 60px;
		margin-bottom: 3px;
	}
	.font_9 {
		width: 230%;
		height: 16px;
		color: #546AA8;
    transform-origin: 0 0;
    transform: scale(0.5);
	}
</style>