<template>
  <div>
    <div class="flex chain-title-img relative">
      <img :src="yc" alt="" style="width: 222px; height: 147px;" class="yc" />
      <img :src="cc" alt="" style="with: 214px; height: 147px;" class="cc" />
    </div>
    <div
      class="text-lightBlue title relative z-10 chain-title-txt mt-4 text-center"
    >
      {{ $t('lang.yccBlockChainBrowser') }}
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      yc: require('@/assets/images/blockChainBrowser/home/yc.png'),
      cc: require('@/assets/images/blockChainBrowser/home/cc.png'),
    }
  },
})
</script>

<style scoped>
.chain-title-img {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 4;
}
.chain-title-txt {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
  opacity: 0;
  z-index: 4;
}

.cc {
  z-index: 4;
}
.yc {
  position: relative;
  margin-right: 4px;
  z-index: 4;
}
.title {
  font-size: 53px;
}
</style>
