<template>
  <div class="home_mechanism flex flex-col items-center">
		<h4 class="md:w-bodySet mt-16 mb-24 text-28px text-title-color text-center">{{ $t('lang.Consensus') }}</h4>
		<div class="md:w-bodySet flex items-center">
			<p class="text-left text-14px text-article-color mr-16 leading-7">
				{{ $t('lang.ConT1') }}<br/><br/>
				{{ $t('lang.ConT2') }}<br/><br/>
				{{ $t('lang.ConT3') }}</p>
			<img v-show="!enStyle" src="../../assets/images/home/consensus.png" alt="">
			<img v-show="enStyle" src="../../assets/images/home/con-en.png" alt="">
		</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_mechanism {
		height: 900px;
		background-image: url('../../assets/images/home/bg_me.png');
		background-size: 2100px;
		background-repeat: no-repeat;
		background-position-x: 50%;
	}
	.home_mechanism img {
		width: 600px;
	}
</style>