<template>
	<div class="home_feature flex flex-col justify-center items-center">
		<h4 class="md:w-bodySet mt-16 mb-32 text-center text-28px text-title-color">{{ $t('lang.Feature') }}</h4>
		<div class="md:w-bodySet h-full flex justify-between -pr-2">
			<div>
				<div class="feature_item h-50 flex flex-row-reverse">
					<img class="ml-3" src="@/assets/images/home/f1.png" alt="灵活">
					<div>
						<h4 class="h-12 text-lg text-right line_48 text-title-color">{{ $t('lang.flexible') }}</h4>
						<p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.FText') }}</p>
					</div>
				</div>
				<div class="feature_item h-56 flex flex-row-reverse">
					<img class="ml-3" src="@/assets/images/home/f2.png" alt="跨链">
					<div>
						<h4 class="h-12 text-lg text-right line_48 text-title-color">{{ $t('lang.cross') }}</h4>
						<p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.CText') }}</p>
					</div>
				</div>
				<div class="feature_item h-56 flex flex-row-reverse">
					<img class="ml-3" src="@/assets/images/home/f3.png" alt="低延时">
					<div>
						<h4 class="h-12 text-lg text-right line_48 text-title-color">{{ $t('lang.latency') }}</h4>
						<p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.LText') }}</p>
					</div>
				</div>
				<div class="feature_item flex flex-row-reverse">
					<img class="ml-3" src="@/assets/images/home/f4.png" alt="高并发">
					<div>
						<h4 class="h-12 text-lg text-right line_48 text-title-color">{{ $t('lang.concurrency') }}</h4>
						<p class="text-14px text-right leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.CCText') }}</p>
					</div>
				</div>
			</div>
			<div>
				<div class="feature_item h-50 flex">
					<img class="mr-3" src="@/assets/images/home/f5.png" alt="异构">
					<div>
						<h4 class="h-12 text-lg text-left line_48 text-title-color">{{ $t('lang.heterogeneous') }}</h4>
						<p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.HeText') }}</p>
					</div>
				</div>
				<div class="feature_item h-56 flex">
					<img class="mr-3" src="@/assets/images/home/f6.png" alt="安全">
					<div>
						<h4 class="h-12 text-lg text-left line_48 text-title-color">{{ $t('lang.security') }}</h4>
						<p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.SecText') }}</p>
					</div>
				</div>
				<div class="feature_item h-56 flex">
					<img class="mr-3" src="@/assets/images/home/f7.png" alt="绿色">
					<div>
						<h4 class="h-12 text-lg text-left line_48 text-title-color">{{ $t('lang.environment') }}</h4>
						<p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.EnvText') }}</p>
					</div>
				</div>
				<div class="feature_item flex">
					<img class="mr-3" src="@/assets/images/home/f8.png" alt="计费">
					<div>
						<h4 class="h-12 text-lg text-left line_48 text-title-color">{{ $t('lang.fund') }}</h4>
						<p class="text-14px text-left leading-6 text-article-color" :class="{'leading-normal': enStyle}">{{ $t('lang.FundText') }}</p>
					</div>
				</div>
			</div>
		</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_feature {
		height: 1091px;
		background-image: url(../../assets/images/home/bg_fea.png);
		background-position-x: 50%;
		background-size: 2100px;
		background-repeat: no-repeat;
	}
	.line_48 {
		line-height: 48px;
	}
	.feature_item img {
		width: 52px;
		height: 52px;
	}
	.feature_item h4 {
		color: #22356C;
	}
	.feature_item p {
		width: 252px;
	}
</style>