<template>
  <div class="home flex flex-col justify-content" style="padding-top: 44px">
    <div class="w-full m-header flex flex-col items-center">
      <div class="mt-7"><img src="@/assets/images/mobile/ycc.png" width="107" alt=""></div>
      <p class="text-18px tracking-wider mt-4 font-semibold px-2 text-center" :class="{'leading-5': enStyle, 'mb-2': !enStyle, 'mb-1': enStyle}" style="color: #3D5EE9"><span class="mr-3" :class="enStyle ? 'block' : 'inline-block'" style="color: #FFA457">{{ $t('lang.YUANLIAN') }}</span>{{ $t('lang.title') }}</p>
      <p class="text-14px text-footer-color font-light tracking-widest" :class="{'leading-5': enStyle}">{{ $t('lang.bannerDesc') }}</p>
    </div>
    <wx-bar :init-show="showWx" v-on:changeShow="setShow"></wx-bar>
    <m-explain></m-explain>
    <m-feature></m-feature>
    <m-mechanism></m-mechanism>
    <m-integral></m-integral>
    <m-scene></m-scene>
    <m-link></m-link>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import WxBar from '@/components/mobile/wx-bar.vue'
import MExplain from '@/components/mobile/m-explain.vue'
import MFeature from '@/components/mobile/m-feature.vue'
import MMechanism from '@/components/mobile/m-mechanism.vue'
import MIntegral from '@/components/mobile/m-integral.vue'
import MScene from '@/components/mobile/m-scene.vue'
import MLink from '@/components/mobile/m-link.vue'
import lang from '@/mixin/lang'
export default Vue.extend({
  name: 'Home',
  mixins: [lang],
  components: {
    WxBar,
    MExplain,
    MFeature,
    MMechanism,
    MIntegral,
    MScene,
    MLink
  },
  data() {
    return {
      showWx: true
    }
  },
  methods: {
    setShow(v: boolean) {
      this.showWx = v
    }
  }
});
</script>

<style>
</style>

<style scoped>
  .m-header {
    height: 382px;
    background-image: url('../../assets/images/mobile/bg-h.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-y: bottom;
  }
</style>
