<template>
  <div>
    <div class="flex relative">
      <!-- <img :src="yc" alt="" style="width: 222px; height: 147px;" class="yc" />
      <div style="width: 214px; height: 147px;" class="relative">
        <img
          :src="cc"
          alt=""
          style="width: 214px; height: 147px;"
          class="cc absolute top-0"
        />
      </div> -->
    </div>
    <div
      class="
        text-lightBlue
        title
        relative
        z-10
        chain-title-txt
        mt-40
        text-center
      "
    >
      {{ $t("lang.blockChain") }}{{ $t("lang.browser") }}
    </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>
.yc {
  position: relative;

  animation-name: slideUp2;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
  opacity: 0;

  z-index: 6;
}
.cc {
  position: relative;
  animation-name: slideIn;
  animation-duration: 1.5s;
  animation-delay: 1.4s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  margin-left: -100px;
  opacity: 0;
  z-index: 4;
}
.chain-title-txt {
  animation-name: slideUp2;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.7s;
  opacity: 0;
  z-index: 6;
}

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