<template>
  <div class="home flex flex-col justify-content relative">
    <div
      class="mx-auto md:w-bodySet min-w-1200 flow-root absolute transform -translate-x-1/2 left-1/2"
      style="padding-top: 64px;"
    >
      <img
        :src="ccImg"
        alt=""
        class="ccImg"
        style="
          position: absolute;
          width: 1920px;
          height: 1265px;
          top: -658px;
          right: -631px;
        "
      />
    </div>
    <banner :enStyle="useEn"></banner>
    <explain :enStyle="useEn"></explain>
    <home-feature :enStyle="useEn"></home-feature>
    <mechanism :enStyle="useEn"></mechanism>
    <integral :enStyle="useEn"></integral>
    <scene :enStyle="useEn"></scene>
    <div class="flex justify-center home_link">
      <div class="md:w-bodySet">
        <h4 class="mt-16 mb-4 text-28px text-title-color text-center mb-12">
          {{ $t('lang.LINK') }}
        </h4>
        <div>
          <h4 class="text-lg mb-8 text-text-color text-center">
            {{ $t('lang.platform') }}
          </h4>
          <ul class="links flex justify-center items-center">
            <li class="w-48 mr-3">
              <a href="http://www.hadax.com/" target="_blank">
                <img
                  class="w-full"
                  src="@/assets/images/home/hadax.png"
                  alt="hadax"
                />
              </a>
            </li>
            <li class="w-48 mr-3">
              <a href="https://www.hitbtc.com/" target="_blank">
                <img
                  class="w-full"
                  src="@/assets/images/home/hitbtc.png"
                  alt="hitbtc"
                />
              </a>
            </li>
            <li class="w-48 mr-3">
              <a href="http://www.hotbit.io/" target="_blank">
                <img
                  class="w-full"
                  src="@/assets/images/home/hotbit.png"
                  alt="hotbit"
                />
              </a>
            </li>
            <li class="w-48">
              <a href="https://www.zhaobi.site/" target="_blank">
                <img
                  class="w-full"
                  src="@/assets/images/home/zhaobi.png"
                  alt="zhaobi"
                />
              </a>
            </li>
          </ul>
        </div>
        <div class="mb-12">
          <h4 class="text-lg mt-12 mb-8 text-text-color text-center">
            {{ $t('lang.partner') }}
          </h4>
          <ul class="links flex justify-center items-center">
            <!-- <li>
              <a href="https://guodunc.cn/TFP/mall/index.aspx" target="_blank">
                <img src="@/assets/images/home/guodun.png" alt="guodun">
              </a>
            </li> -->
            <li class="w-48 mr-3">
              <a href="https://www.feixiaohao.com/" target="_blank">
                <img
                  class="w-full"
                  src="@/assets/images/home/feixiaohao.png"
                  alt="feixiaohao"
                />
              </a>
            </li>
            <li class="w-48 mr-3">
              <a href="https://www.mytokencap.com/" target="_blank">
                <img
                  class="w-full"
                  src="@/assets/images/home/mytoken.png"
                  alt="mytoken"
                />
              </a>
            </li>
            <li class="w-48">
              <a href="https://bitgo.cc/" target="_blank">
                <img
                  class="w-full"
                  src="@/assets/images/home/bitgo.png"
                  alt="bitgo"
                />
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div
      class="w-full flex justify-center fixed bottom-0 left-0"
      :class="{
        'bg-footer-color': !isStyleChange,
        'bg-bgfootercolor': isStyleChange,
      }"
      style="z-index: 110;"
    >
      <div class="h-20 md:w-bodySet flex justify-center items-center">
        <div class="flex-shrink-0 mr-24 w-10">
          <a href="https://t.me/yccorg" target="_blank">
            <img
              class="w-full"
              v-show="!isStyleChange"
              src="@/assets/images/footer/shadow.png"
              alt=""
            />
            <img
              class="w-full"
              v-show="isStyleChange"
              src="@/assets/images/footer/shadow2.png"
              alt=""
            />
          </a>
        </div>
        <div class="flex-shrink-0 mr-24 w-10">
          <Tooltip title="邮箱: business@yuan.org" placement="top">
            <img
              v-show="!isStyleChange"
              class="cursor-pointer w-full"
              src="@/assets/images/footer/email.png"
              alt=""
            />
            <img
              v-show="isStyleChange"
              class="cursor-pointer w-full"
              src="@/assets/images/footer/email2.png"
              alt=""
            />
          </Tooltip>
        </div>
        <div class="flex-shrink-0 mr-24 w-10">
          <Tooltip placement="top">
            <template slot="title">
              <img
                class="cursor-pointer"
                src="@/assets/images/footer/wx-footer.png"
                alt=""
              />
            </template>
            <img
              v-show="!isStyleChange"
              class="cursor-pointer w-full"
              src="@/assets/images/footer/weixin.png"
              alt=""
            />
            <img
              v-show="isStyleChange"
              class="cursor-pointer w-full"
              src="@/assets/images/footer/weixin2.png"
              alt=""
            />
          </Tooltip>
        </div>
        <div class="flex-shrink-0 mr-24 w-10">
          <a href="https://twitter.com/yuanchain" target="_blank">
            <img
              v-show="!isStyleChange"
              class="w-full"
              src="@/assets/images/footer/twitter.png"
              alt=""
            />
            <img
              v-show="isStyleChange"
              class="w-full"
              src="@/assets/images/footer/twitter2.png"
              alt=""
            />
          </a>
        </div>
        <div class="flex-shrink-0 w-10">
          <a href="https://medium.com/@yuanchain" target="_blank">
            <img
              v-show="!isStyleChange"
              class="w-full"
              src="@/assets/images/footer/mail.png"
              alt=""
            />
            <img
              v-show="isStyleChange"
              class="w-full"
              src="@/assets/images/footer/mail2.png"
              alt=""
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Banner from '@/components/pc/banner.vue'
import Explain from '@/components/pc/explain.vue'
import HomeFeature from '@/components/pc/homeFeature.vue'
import Mechanism from '@/components/pc/mechanism.vue'
import Integral from '@/components/pc/integral.vue'
import Scene from '@/components/pc/scene.vue'
import { Tooltip } from 'ant-design-vue'
import ccImg from '@/assets/images/blockChainBrowser/cc-image.png'
export default Vue.extend({
  name: 'Home',
  data() {
    return {
      isStyleChange: true,
      useEn: false,
      ccImg,
    }
  },
  components: {
    Banner,
    Explain,
    HomeFeature,
    Mechanism,
    Integral,
    Scene,
    Tooltip,
  },
  created() {
    window.addEventListener('scroll', () => {
      const scrollHeight = window.scrollY
      if (scrollHeight > 4140) {
        this.isStyleChange = false
      } else {
        this.isStyleChange = true
      }
    })
  },
  watch: {
    $route(n) {
      this.useEn = n.query?.lang === 'en'
    },
  },
})
</script>

<style>
.ant-tooltip-inner {
  background: rgba(255, 255, 255, 1);
  color: #2545cb;
}
.ant-tooltip-arrow::before {
  background: rgba(255, 255, 255, 1);
}
</style>

<style scoped>
.home_link {
  width: 100%;
  height: 740px;
  background-image: url('../../assets/images/home/link.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 50%;
}
/* .links li a img {
    width: 190px;
  } */
/* .links li:nth-of-type(-n+3) {
    margin-right: 12px;
  } */
/* .home-footer {
    height: 80px;
    line-height: 80px;
  }
  .home-footer>div {
    flex-shrink: 0;
  }
  .home-footer>div:nth-of-type(-n+4) {
    margin-right: 106px;
  }
  .home-footer>div img {
    width: 40px;
  }
  .bg-normal-color {
    background: rgb(250, 251, 252);
  } */
</style>
