<template>
  <div class="home_banner relative w-full overflow-hidden">
		<div class="banner_content md:w-bodySet">
			<img src="../../assets/images/home/bg_t_2.png" style="width:1021px;height:923px; position:absolute; left: 404px;top:-307px;"  alt="">
			<img class="mb-7 w-52" src="@/assets/images/home/ycc.png" alt="YCC" >
			<div class="flex mb-5">
				<p class="text-4xl" style="color: #3D5EE9">
					<span
						class="mr-5"
						style="color: #FFA457"
						:class="{'block': enStyle, 'inline-block': !enStyle, 'tracking-widest': !enStyle}">{{ $t('lang.YUANLIAN') }}</span>
					{{ $t('lang.title') }}
				</p>
			</div>
			<p class="text-left mb-8 text-28px text-footer-color font-light" :style="{'letter-spacing': enStyle ? 'normal' : '8px'}">{{ $t('lang.bannerDesc') }}</p>
			<div v-show="!enStyle" class="qrcode_box flex justify-evenly items-center mb-28">
				<div class="qrcode_item flex flex-col items-center">
					<img src="@/assets/images/home/wx2.png" alt="">
					<p class="text-xs font_9 pl-0.5">微信群:chain-vc (发 ycc100 进群)</p>
				</div>
				<div class="qrcode_item flex flex-col items-center">
					<img src="@/assets/images/home/qq.png" alt="">
					<p class="text-xs font_9 pl-0.5">QQ:1683656222 (扫一扫联系客服)</p>
				</div>
				<div class="qrcode_item flex flex-col items-center">
					<img src="@/assets/images/home/wx1.png" alt="">
					<p class="text-xs font_9 pl-0.5">微信:yuanliankefu (扫一扫联系客服)</p>
				</div>
			</div>
			<p class="text-28px text-left text-title-color" :style="{'marginTop': enStyle ? '242px' : ''}">{{ $t('lang.whatIs') }}</p>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import lang from '@/mixin/lang'
export default Vue.extend({
	mixins: [lang],
})
</script>

<style scoped>
	.home_banner {
		/* width: 1200px; */
		height: 798px;
		position: relative;
	}
	.banner_content {
		/* width: 1200px; */
		position: absolute;
		top: 220px;
		left: 50%;
		transform: translateX(-50%);
	}
	.qrcode_box {
		width: 320px;
		height: 130px;
		background: rgba(79, 138, 255, 10%);
		border-radius: 5px;
	}
	.qrcode_item {
		width: 105px;
	}
	.qrcode_item img {
		width: 70px;
		height: 70px;
		margin-bottom: 3px;
	}
	.font_9 {
		color: #546AA8;
	}
</style>