aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
lzp
2026-03-03 15:39:54 +08:00
parent 76afe1022f
commit b3b7ce2f2a
15 changed files with 141 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/views/home/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="bg bg-1">
<div class="bg bg-1" :class="{ animation: isAnimation }">
<div class="topright"></div>
<div class="bottomleft"></div>
</div>
<div class="bg bg-2">
<div class="bg bg-2" :class="{ animation: isAnimation }">
<div class="bottom-1"></div>
<div class="bottom-2"></div>
<div class="bottom-3"></div>
@@ -24,17 +24,23 @@
import LeftNav from './left-nav.vue'
import TopNav from './top-nav.vue'
import setting from './setting/index.vue'
import { useUserInfoStore } from '@/stores'
import { useUserInfoStore, useGlobalStore } from '@/stores'
import FlowCanvas from '@/components/Canvas/FlowCanvas/index.vue'
import myEvent from '@/utils/myEvent'
const userInfoStore = useUserInfoStore()
const globalStore = useGlobalStore()
userInfoStore.getUserInfo()
const isAnimation = computed(() => globalStore.state.homeAnimation)
const flowCanvasRef = ref(null)
const openFlowCanvas = (config) => {
flowCanvasRef.value.open(config)
}
myEvent.add('openFlowCanvas', openFlowCanvas)
onMounted(() => {
setTimeout(() => {
globalStore.setHomeAnimation(false)
}, 1000)
})
onUnmounted(() => {
myEvent.remove('openFlowCanvas', openFlowCanvas)
})
@@ -66,10 +72,15 @@
.bg-1 {
z-index: -1;
background: #f8f7f5;
animation: opacity-in 0.5s ease-in-out 1 both;
&.animation {
animation: opacity-in 0.5s ease-in-out 1 both;
}
}
.bg-2 {
animation: z-index-10to-1 0.5s ease-in-out 1 both;
z-index: -1;
&.animation {
animation: z-index-10to-1 0.5s ease-in-out 1 both;
}
}
.bg {
position: absolute;
@@ -115,7 +126,6 @@
transform: rotate(-25.36deg);
}
> .bottom-1 {
animation: bottom-1 0.5s ease-in-out 1 both;
background: linear-gradient(
87.58deg,
rgba(241, 193, 145, 0.8) 23.02%,
@@ -126,10 +136,14 @@
);
filter: blur(13.17rem);
transform: matrix(-1, 0.03, -0.05, -1, 0, 0);
width: 138.014rem;
height: 29.323rem;
left: 32.123rem;
bottom: -21rem;
transform: translate(0, 0);
}
> .bottom-2 {
animation: bottom-2 0.5s ease-in-out 1 both;
background: conic-gradient(
from 94.36deg at 71.77% 41.01%,
rgba(242, 171, 180, 0.2) 0deg,
@@ -140,9 +154,14 @@
);
filter: blur(12.927rem);
transform: matrix(-0.05, 1, -1, -0.03, 0, 0);
width: 42.215rem;
height: 98.009rem;
left: 150rem;
bottom: -65rem;
transform: translate(0, 0);
}
> .bottom-3 {
animation: bottom-3 0.5s ease-in-out 1 both;
background: linear-gradient(
130.72deg,
rgba(242, 171, 180, 0.24) 29.52%,
@@ -153,7 +172,25 @@
);
filter: blur(11.5411rem);
transform: matrix(-0.26, -0.97, 0.99, -0.15, 0, 0);
width: 51.936rem;
height: 97.139rem;
left: 40rem;
bottom: -65rem;
transform: translate(0, 0);
}
&.animation {
> .bottom-1 {
animation: bottom-1 0.5s ease-in-out 1 both;
}
> .bottom-2 {
animation: bottom-2 0.5s ease-in-out 1 both;
}
> .bottom-3 {
animation: bottom-3 0.5s ease-in-out 1 both;
}
}
@keyframes bottom-1 {
0% {
width: 15rem;