huangjinming/cebg-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
huangjinming 2023-03-09 15:17:51 +08:00
parent d1e65962bd
commit b612c03e5d
3 changed files with 67 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/about/VisionMission.vue
View File

@ -41,25 +41,25 @@
</div>
<div class="card-list">
<div class="card-item">
<div class="card-bg">
<div class="cardbg">
<img src="@/assets/img/about/card-bg.png" alt="" />
</div>
<Grid9Panel class="grid"></Grid9Panel>
</div>
<div class="card-item">
<div class="card-bg">
<div class="cardbg">
<img src="@/assets/img/about/card-bg.png" alt="" />
</div>
<Grid9Panel class="grid"></Grid9Panel>
</div>
<div class="card-item">
<div class="card-bg">
<div class="cardbg">
<img src="@/assets/img/about/card-bg.png" alt="" />
</div>
<Grid9Panel class="grid"></Grid9Panel>
</div>
<div class="card-item">
<div class="card-bg">
<div class="cardbg">
<img src="@/assets/img/about/card-bg.png" alt="" />
</div>
<Grid9Panel class="grid"></Grid9Panel>
@ -208,11 +208,12 @@ function handleScroll() {
background: rgba(236, 46, 91, 1);
border-radius: 12px;
height: 456px;
.card-bg {
.cardbg {
position: absolute;
left: 30px;
top: 40px;
animation: myfirstcarddf 0.5s both ease-in-out 1 forwards;
// left: 30px;
// top: 40px;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation: myfirstcard2 0.5s 1 alternate forwards;
border-radius: 12px;
img {
width: 100%;
@ -222,8 +223,17 @@ function handleScroll() {
}
}
}
.card-item:hover {
.card-item:hover .cardbg {
border-radius: 12px;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation: myfirstcard1 0.5s 1 alternate forwards;
img {
border-radius: 12px;
opacity: 0.3;
filter: blur(3px);
}
}
}
}
}
@ -235,21 +245,13 @@ function handleScroll() {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation: myfirstnone 0.5s alternate 1 forwards;
}
.card-item:hover{
transform: scale(1.019)translate(0px,-15px);
.card-item:hover {
transform: scale(1.019) translate(0px, -15px);
}
.card-item:hover .grid {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation: myfirst 0.5s alternate 1 forwards;
}
.card-item:hover .card-bg {
border-radius: 12px;
animation: myfirstcarddf 0.5s ease-out alternate 1 forwards;
img{
border-radius: 12px;
}
}
@keyframes myfirst {
0% {
@ -267,33 +269,32 @@ function handleScroll() {
height: 96px;
}
}
@keyframes myfirstcarddf {
@keyframes myfirstcard1 {
0% {
transform: translate(0px, 0px);
left: 30px;
top: 40px;
width: 270px;
height: 270px;
}
100% {
transform: translate(-30px, -40px);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0.3;
}
}
@keyframes myfirstcard {
@keyframes myfirstcard2 {
100% {
left: 30px;
top: 40px;
width: 270px;
height: 270px;
}
0% {
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
100% {
left: 30px !important;
top: 40px !important;
width: 270px !important;
height: 270px !important;
}
}
</style>

2
src/components/home/TabBar.vue
View File

@ -7,7 +7,7 @@
:class="{ active: index === activeTab }"
@click="handactiveTab(index)"
>
<div><img class="icon" :src="getTabIcon(index)" alt="Tab" /></div>
<div><img :class="icon" :src="getTabIcon(index)" alt="Tab" /></div>
<div class="text">{{ tab }}</div>
</div>
</div>

34
src/components/layout/index.vue
View File

@ -1,14 +1,42 @@
<template>
<div>
<NavBar></NavBar>
<router-view></router-view>
<Transition class="fade">
<router-view v-slot="{ Component }">
<transition name="fade">
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
</Transition>
<FooterBar></FooterBar>
</div>
</template>
<script setup>
import NavBar from "./NavBar.vue";
import FooterBar from "./FooterBar.vue";
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.fade-enter-from,
.fade-leave-to {
/*定义进入开始和离开结束的透明度为0*/
opacity: 0;
}
.fade-leave-to {
transform: translateX(20px);
}
.fade-enter-to {
transform: translateX(-20px);
}
.fade-enter-to,
.fade-leave-from {
/*定义进入结束和离开开始的透明度为1*/
opacity: 1;
}
.fade-leave-active,
.fade-enter-active {
transition: all 0.32s ease-out;
}
</style>