Skip to content

Y
ycc-website
Commit 89a38181 authored by chenqikuai's avatar chenqikuai
1 Browse files
Options

feat: 新增首页动画

parent f49072a7
Show whitespace changes
Inline Side-by-side
Showing with 334 additions and 77 deletions
src/App.vue
View file @ 89a38181
......@@ -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
View file @ 89a38181
......@@ -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
View file @ 89a38181
<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
View file @ 89a38181
<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
View file @ 89a38181
<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
View file @ 89a38181
......@@ -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
View file @ 89a38181
......@@ -35,5 +35,6 @@ export default Vue.extend({
<style scoped>
.ycc_container {
min-width: 1200px;
overflow: hidden;
}
</style>
src/views/pc/Home.vue
View file @ 89a38181
<template>
<div class="home flex flex-col justify-content">
<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="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: -549px;
right: -1073px;
"
/>
</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>
<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>
<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">
<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">
<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">
<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">
<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>
<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">
......@@ -44,56 +83,129 @@
</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">
<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">
<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">
<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="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="">
<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="">
<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="">
<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="">
<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="">
<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="">
<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>
......@@ -102,21 +214,22 @@
</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 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: {
......@@ -126,7 +239,7 @@ export default Vue.extend({
Mechanism,
Integral,
Scene,
Tooltip
Tooltip,
},
created() {
window.addEventListener('scroll', () => {
......@@ -141,37 +254,37 @@ export default Vue.extend({
watch: {
$route(n) {
this.useEn = n.query?.lang === 'en'
}
}
});
},
},
})
</script>
<style>
.ant-tooltip-inner {
.ant-tooltip-inner {
background: rgba(255, 255, 255, 1);
color: #2545CB;
}
.ant-tooltip-arrow::before {
color: #2545cb;
}
.ant-tooltip-arrow::before {
background: rgba(255, 255, 255, 1);
}
}
</style>
<style scoped>
.home_link {
.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 {
}
/* .links li a img {
width: 190px;
} */
/* .links li:nth-of-type(-n+3) {
/* .links li:nth-of-type(-n+3) {
margin-right: 12px;
} */
/* .home-footer {
/* .home-footer {
height: 80px;
line-height: 80px;
}
......
src/views/pc/blockChainBrowser.vue
View file @ 89a38181
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment