feat: 新增首页动画

src/App.vue

@@ -39,4 +39,17 @@ export default Vue.extend({
   font-weight: 400;
   color: #1f3470;
 }
+
+.slide-in-enter-active {
+  transition: all .3s ease;
+}
+.slide-in-leave-active {
+  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+.slide-in-enter, .slide-fade-leave-to
+/* .slide-in-leave-active for below version 2.1.8 */ {
+  transform: translateX(10px);
+  opacity: 0;
+}
+
 </style>

src/components/pc/BlockChainBrowser/ChainOverview/ChainCard.vue

@@ -5,12 +5,12 @@
       v-for="(item, index) in msgList"
       :key="index"
     >
-      <img :src="item.icon" class="w-8 h-8" alt="" />
+      <img :src="item.icon" style="width: 52px; height: 52px;" alt="" />
       <div>
         <div class="text-text-color font-normal">
           {{ item.title }}
         </div>
-        <div class="text-title-color text-xl font-bold">
+        <div class="text-title-color font-bold" style="font-size: 32px;">
           {{ item.number }}
         </div>
       </div>
@@ -34,18 +34,18 @@ export default Vue.extend({
 </script>
 <style scoped>
 .card {
-  width: 250px;
-  height: 313px;
+  width: 400px;
+  height: 500px;
   background: #ffffff;
   box-shadow: 0px 9px 25px 0px rgba(31, 52, 112, 0.14);
-  border-radius: 25px;
-  padding-top: 20px;
+  border-radius: 40px;
+  padding-top: 30px;
 }
 .item {
-  height: 69px;
+  height: 110px;
   padding-left: 19px;
 }
 .item img {
-  margin-right: 13px;
+  margin-right: 20px;
 }
 </style>

src/components/pc/BlockChainBrowser/ChainSearch.vue

 <template>
-  <div class="search flex items-center shadow-shadow1">
+  <div class="search flex items-center shadow-shadow1 overflow-hidden">
     <input
       type="text"
       :value="value"
@@ -12,7 +12,7 @@
       @click="!loading && searchResult(value)"
       v-loading="loading"
     >
-      {{$t('lang.search')}}
+      {{ $t('lang.search') }}
     </div>
   </div>
 </template>

src/components/pc/BlockChainBrowser/ChainTitle.vue

 <template>
   <div>
-    <div class="flex">
+    <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">
-      {{$t('lang.yccBlockChainBrowser')}}
+    <div
+      class="text-lightBlue title relative z-10 chain-title-txt mt-4 text-center"
+    >
+      {{ $t('lang.yccBlockChainBrowser') }}
     </div>
   </div>
 </template>
@@ -23,14 +25,32 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.yc {
-  position: relative;
+.chain-title-img {
+  animation-name: fadeIn;
+  animation-duration: 2s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+  opacity: 0;
   z-index: 4;
-  margin-right: 4px;
 }
+.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;
 }

src/components/pc/banner.vue

 <template>
-  <div class="home_banner relative w-full">
+  <div class="home_banner relative w-full overflow-hidden">
 		<div class="banner_content md:w-bodySet">
+			<img src="../../assets/images/home/bg_t_2.png" style="width:1021px;height:923px; position:absolute; left: 404px;top:-307px;"  alt="">
 			<img class="mb-7 w-52" src="@/assets/images/home/ycc.png" alt="YCC" >
 			<div class="flex mb-5">
 				<p class="text-4xl" style="color: #3D5EE9">
@@ -43,10 +44,6 @@ export default Vue.extend({
 	.home_banner {
 		/* width: 1200px; */
 		height: 798px;
-		background-image: url('../../assets/images/home/bg_t.png');
-		background-size: cover;
-		background-repeat: no-repeat;
-		background-position-x: 50%;
 		position: relative;
 	}
 	.banner_content {

src/layout/MainPage/Header.vue

@@ -18,6 +18,9 @@
             :to="{ path: '/home', query: { lang: $route.query.lang } }"
             tag="li"
             class="pl-5 pr-5 cursor-pointer relative"
+            :class="{
+              ' text-white': $route.path === '/blockChainBrowser' && isTop,
+            }"
           >
             {{ $t('lang.home') }}
             <span
@@ -27,6 +30,10 @@
           </router-link>
           <li class="pl-5 pr-5 cursor-pointer">
             <a
+              :class="{
+                ' text-white': $route.path === '/blockChainBrowser' && isTop,
+              }"
+              class="transition-none"
               :href="
                 iconType === 'zh-CN'
                   ? 'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/zh.pdf'
@@ -40,6 +47,9 @@
           <router-link
             :to="{ path: '/newsList', query: { lang: $route.query.lang } }"
             tag="li"
+            :class="{
+              ' text-white': $route.path === '/blockChainBrowser' && isTop,
+            }"
             class="pl-5 pr-5 cursor-pointer relative"
           >
             {{ $t('lang.news') }}
@@ -57,6 +67,9 @@
             }"
             tag="li"
             class="pl-5 pr-5 cursor-pointer relative"
+            :class="{
+              ' text-white': $route.path === '/blockChainBrowser' && isTop,
+            }"
           >
             {{ $t('lang.blockChainBrowser') }}
             <span
@@ -67,6 +80,9 @@
                 $route.path === '/tradeHash'
               "
               class="absolute block w-7 h-1 bg-active rounded-2xl left-1/2 -bottom-2 transform -translate-x-1/2"
+              :class="{
+                ' bg-white': $route.path === '/blockChainBrowser' && isTop,
+              }"
             ></span>
           </router-link>
         </ul>

src/layout/MainPage/index.vue

@@ -35,5 +35,6 @@ export default Vue.extend({
 <style scoped>
 .ycc_container {
   min-width: 1200px;
+  overflow: hidden;
 }
 </style>

src/views/pc/blockChainBrowser.vue

 <template>
   <div class="mx-auto md:w-bodySet blockChain min-w-1200 relative flow-root">
+    <img
+      :src="ccImg"
+      alt=""
+      class="ccImg"
+      style="
+        width: 1920px;
+        height: 1265px;
+        position: absolute;
+        top: -549px;
+        right: -1073px;
+      "
+    />
+    <div class="stone"></div>
     <ChainCard :msgList="msgList" class="chainCard"></ChainCard>
-    <ChainTitle />
+    <ChainTitle class="chain-title" />
+    <div class="blue-card"></div>
     <chain-search
+      class="chain-search"
       style="width: 600px;"
       :value="value"
       :setValue="setValue"
       :clickSearch="clickSearch"
     />
-    <div class="rect-block"></div>
     <ChainOverview :totalTx="totalTx" />
     <div class="flex justify-between mt-14" style="margin-bottom: 60px;">
       <latest-block :latestBlocks="latestBlocks"></latest-block>
@@ -25,7 +39,7 @@ import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
 import ChainOverview from '@/components/pc/BlockChainBrowser/ChainOverview/index.vue'
 import LatestBlock from '@/components/pc/BlockChainBrowser/LatestBlock/index.vue'
 import LatestTx from '@/components/pc/BlockChainBrowser/LatestTx/index.vue'
-
+import ccImg from '@/assets/images/blockChainBrowser/cc-image.png'
 import blockChainBrowserMixin from '@/mixin/blockChainBrowser'
 
 export default VueTypedMixins(blockChainBrowserMixin).extend({
@@ -37,6 +51,11 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
     LatestBlock,
     LatestTx,
   },
+  data() {
+    return {
+      ccImg,
+    }
+  },
 })
 </script>
 
@@ -44,8 +63,86 @@ export default VueTypedMixins(blockChainBrowserMixin).extend({
 .blockChain {
   padding-top: 64px;
 }
+.ccImg {
+  animation-name: rotate;
+  animation-fill-mode: forwards;
+  animation-duration: 0.7s;
+  animation-delay: 0.4s;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(90deg);
+  }
+}
 .chainCard {
-  position: relative;
-  z-index: 1;
+  position: absolute;
+  z-index: 2;
+  top: 102px;
+  animation-name: slideIn;
+  animation-duration: 0.7s;
+  animation-timing-function: ease-out;
+}
+.chain-title {
+  position: absolute;
+  top: 172px;
+  left: 575px;
+}
+.chain-search {
+  position: absolute;
+  top: 472px;
+  left: 572px;
+  animation-name: fadeIn;
+  animation-duration: 1s;
+  animation-timing-function: ease-out;
+  animation-delay: 0.5s;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+.stone {
+  height: 832px;
+}
+.blue-card {
+  position: absolute;
+  top: 0px;
+  left: 197px;
+  width: 600px;
+  height: 840px;
+  background: #2545cb;
+  animation-name: slideDown;
+  animation-duration: 0.7s;
+  animation-timing-function: ease-out;
+}
+</style>
+<style>
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 </style>