fix

src/views/home/index.vue

@@ -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;

src/views/nuic/index.vue

@@ -32,11 +32,13 @@
 
 <script setup lang="ts">
 	import { computed, ref, markRaw } from 'vue'
+	import { useGlobalStore } from '@/stores'
 	import { UpdateUserProfile } from '@/api/user'
 	import nuic1 from './nuic-1.vue'
 	import nuic2 from './nuic-2.vue'
 	import nuic3 from './nuic-3.vue'
 	import { useRouter, useRoute } from 'vue-router'
+	const globalStore = useGlobalStore()
 	const router = useRouter()
 	const route = useRoute()
 	const active = computed(() => Number(route.query.index || 0))
@@ -69,6 +71,7 @@
 		UpdateUserProfile(data)
 			.then((res) => {
 				if (!res) return (loading.value = false)
+				globalStore.setHomeAnimation(true)
 				const time = stime - Date.now() + 3000
 				setTimeout(() => {
 					router.push({ name: 'mainInput' })

src/views/nuic/nuic-1.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="nuic-1">
 		<img src="@/assets/images/nuic/nuic-1-bg.png" />
-		<p class="hi">{{ $t('Nuic.hiName', { name: 'Aaa' }) }}</p>
+		<p class="hi">{{ $t('Nuic.hiName', { name }) }}</p>
 		<p class="title" v-html="$t('Nuic.nuic1Title')"></p>
 		<p class="tip" v-html="$t('Nuic.nuic1Tip')"></p>
 		<div class="btns">
@@ -13,9 +13,12 @@
 
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
+	import { useUserInfoStore } from '@/stores'
 	import { useRouter } from 'vue-router'
+	const userInfoStore = useUserInfoStore()
 	const router = useRouter()
 	const emit = defineEmits(['next'])
+	const name = computed(() => userInfoStore.state.userInfo?.username || '')
 	const onSkip = () => {
 		router.push({ name: 'mainInput' })
 	}