ui调整

src/views/nuic/index.vue

@@ -1,10 +1,7 @@
 <template>
 	<div class="nuic background-pink">
-		<div class="logo">
-			<img src="@/assets/images/logo.png" />
-			<span>FiDA</span>
-		</div>
-		<div class="header">
+		<img class="logo" src="@/assets/images/logo-2.png" />
+		<div class="header" v-show="!loading">
 			<div class="close" @click="onClose">
 				<svg-icon name="close-border" size="33" />
 			</div>
@@ -22,7 +19,11 @@
 				/>
 			</div>
 		</div>
-		<component class="view" :is="list[active]" @next="onNext" />
+		<component v-show="!loading" class="view" :is="list[active]" @next="onNext" />
+		<div class="loading" v-show="loading">
+			<img src="@/assets/images/nuic/loading.png" />
+			<p class="tip">{{ $t('Nuic.loadingTip') }}</p>
+		</div>
 	</div>
 </template>
 
@@ -36,6 +37,7 @@
 	const route = useRoute()
 	const active = computed(() => Number(route.query.index || 0))
 	const list = markRaw([nuic1, nuic2, nuic3])
+	const loading = ref(false)
 	const onClose = () => {
 		router.push({ name: 'mainInput' })
 	}
@@ -44,7 +46,10 @@
 		if (index < list.length) {
 			router.push({ query: { index } })
 		} else {
-			router.push({ name: 'mainInput' })
+			loading.value = true
+			setTimeout(() => {
+				router.push({ name: 'mainInput' })
+			}, 1000)
 		}
 	}
 </script>
@@ -61,19 +66,10 @@
 		// justify-content: center;
 		> .logo {
 			position: absolute;
-			top: 3.8rem;
-			left: 3.8rem;
-
-			> img {
-				width: 6rem;
-				height: auto;
-			}
-
-			> span {
-				font-weight: 600;
-				font-size: 3.3rem;
-				font-family: SemiBold;
-			}
+			top: 2.7rem;
+			left: 3.6rem;
+			width: auto;
+			height: 2.4rem;
 		}
 		> .header {
 			margin-top: 5rem;
@@ -151,5 +147,19 @@
 				}
 			}
 		}
+		> .loading {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			background-color: #f8f7f5;
+			> .tip {
+				font-family: Regular;
+				font-size: 3rem;
+				color: #585858;
+			}
+		}
 	}
 </style>