ui调整

src/views/canvas/components/card.vue

@@ -0,0 +1,153 @@
+<template>
+	<div class="card">
+		<div class="header">
+			<svg-icon :name="currentComponent.type" color="#fff" />
+			<span>{{ currentComponent.title }}</span>
+			<div class="add" @click="emit('add')"><svg-icon name="add" size="14" /></div>
+		</div>
+		<div class="body">
+			<component :is="currentComponent.component" ref="componentRef" />
+		</div>
+		<div class="footer">
+			<button @click="onGenerateClick">
+				<svg-icon name="xingxing" size="16" />
+				<span>Generate</span>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	import ToRealStyle from './cards/to-real-style.vue'
+	import SceneComposition from './cards/scene-composition.vue'
+	const components = [
+		{
+			type: 'to-real-style',
+			title: 'To Real Style',
+			component: ToRealStyle
+		},
+		{
+			type: 'scene-composition',
+			title: 'Scene Composition',
+			component: SceneComposition
+		},
+		{
+			type: 'color-palette',
+			title: 'Color Palette',
+			component: SceneComposition
+		},
+		{
+			type: 'to-video',
+			title: 'To Video',
+			component: SceneComposition
+		},
+		{
+			type: 'to-3d-model',
+			title: 'To 3D Model',
+			component: SceneComposition
+		},
+		{
+			type: 'add-print',
+			title: 'Add Print',
+			component: SceneComposition
+		},
+		{
+			type: 'edit-material',
+			title: 'Edit Material',
+			component: SceneComposition
+		}
+	]
+	const emit = defineEmits(['add', 'generate'])
+	const props = defineProps({
+		type: {
+			type: String,
+			default: 'to-real-style'
+		}
+	})
+	const currentComponent = computed(() => {
+		return components.find((item) => item.type === props.type)
+	})
+	const componentRef = ref(null)
+	const onGenerateClick = () => {
+		const data = { ...componentRef.value.data }
+		console.log(data)
+		emit('generate')
+	}
+</script>
+
+<style lang="less" scoped>
+	.card {
+		width: 25rem;
+		height: auto;
+		--border-radius: 1.6rem;
+		border-radius: var(--border-radius);
+		background-color: #fff;
+		> .header {
+			border-radius: var(--border-radius) var(--border-radius) 0 0;
+			height: 5rem;
+			background: #ff7a51;
+			display: flex;
+			align-items: center;
+			padding-left: 1.6rem;
+			position: relative;
+			> .c-svg {
+				width: auto;
+				height: auto;
+				margin-right: 0.6rem;
+			}
+			> span {
+				font-family: Semibold;
+				font-size: 1.6rem;
+				color: #fff;
+			}
+			> .add {
+				position: absolute;
+				width: 3.2rem;
+				height: 3.2rem;
+				border: 0.2rem solid #fff;
+				bottom: -1.6rem;
+				right: -1.6rem;
+				background-color: #ed8936;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: #fff;
+				font-size: 2.5rem;
+				box-shadow: 0 0.8rem 2rem 0 #71809633;
+				cursor: pointer;
+			}
+		}
+		> .body {
+			padding: 1.6rem 1.3rem;
+		}
+		> .footer {
+			margin-bottom: 1.6rem;
+			display: flex;
+			flex-direction: row-reverse;
+			padding: 0 1.3rem;
+			> button {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 11rem;
+				height: 2.8rem;
+				border-radius: 0.5rem;
+				background-color: #fffcf4;
+				border: 1px solid #ffcf90;
+				font-size: 1.2rem;
+				font-family: SemiBold;
+				cursor: pointer;
+				&:active {
+					opacity: 0.5;
+				}
+				> .c-svg {
+					width: auto;
+					height: auto;
+					margin-right: 0.4rem;
+				}
+			}
+		}
+	}
+</style>

src/views/canvas/components/cards/scene-composition.vue

@@ -0,0 +1,22 @@
+<template>
+	<!-- 场景构图 -->
+	<div class="scene-composition"></div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const globalStore = useGlobalStore()
+	onMounted(() => {
+		globalStore.setHomeLeftNavCollapse(true)
+	})
+</script>
+
+<style lang="less" scoped>
+	.scene-composition {
+		width: 100%;
+	}
+</style>

src/views/canvas/components/cards/to-real-style.vue

@@ -0,0 +1,39 @@
+<template>
+	<!-- 转换为真实图 -->
+	<div class="to-real-style">
+		<my-textarea v-model="data.prompt" />
+		<pixel-ratio-selection v-model="data.pixelRatio" />
+		<upload-file v-model="data.file" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, reactive, onMounted, defineExpose } from 'vue'
+	import myTextarea from '../my-textarea.vue'
+	import pixelRatioSelection from '../pixel-ratio-selection.vue'
+	import uploadFile from '../upload-file.vue'
+	import { useGlobalStore } from '@/stores'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const globalStore = useGlobalStore()
+	onMounted(() => {
+		globalStore.setHomeLeftNavCollapse(true)
+	})
+	const data = reactive({
+		prompt: '123123',
+		pixelRatio: '1:1',
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-real-style {
+		width: 100%;
+		> * {
+			margin-bottom: 1rem;
+		}
+	}
+</style>

src/views/canvas/components/my-textarea.vue

@@ -0,0 +1,84 @@
+<template>
+	<div class="my-textarea">
+		<textarea
+			:placeholder="placeholder"
+			:value="modelValue"
+			@input="onInput"
+			@change="onChange"
+		></textarea>
+		<div class="bths">
+			<button><svg-icon name="mobang" size="10" /></button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	const emit = defineEmits(['update:modelValue', 'input', 'change'])
+	const props = defineProps({
+		modelValue: { type: String },
+		placeholder: {
+			type: String,
+			default: 'Enter the scene you want to describe...'
+		}
+	})
+	const onInput = (e) => {
+		const value = e.target.value
+		emit('update:modelValue', value)
+		emit('input', value)
+	}
+	const onChange = (e) => {
+		emit('change', e.target.value)
+	}
+</script>
+
+<style lang="less" scoped>
+	.my-textarea {
+		width: 100%;
+		height: 11.5rem;
+		border: 0.1rem solid #e4e4e7;
+		border-radius: 1rem;
+		padding: 1rem 0.5rem;
+		display: flex;
+		flex-direction: column;
+		> textarea {
+			padding: 0 0.5rem;
+			width: 100%;
+			flex: 1;
+			border: none;
+			outline: none;
+			resize: none;
+			font-family: Medium;
+			font-size: 1rem;
+			color: #333;
+			&::placeholder {
+				color: #c9c9c9;
+			}
+			&::-webkit-scrollbar {
+				width: 0.4rem;
+			}
+			&::-webkit-scrollbar-thumb {
+				border-radius: 0.4rem;
+				background: rgba(0, 0, 0, 0.2);
+			}
+			&::-webkit-scrollbar-track {
+				border-radius: 0.4rem;
+				background: rgba(0, 0, 0, 0.1);
+			}
+		}
+		> .bths {
+			padding: 0.5rem 0.5rem 0;
+			> button {
+				width: 2rem;
+				height: 2rem;
+				padding: 0;
+				border-radius: 0.4rem;
+				background-color: #f0f0f0;
+				border: 1px solid #e4e4e7;
+				&:active {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+</style>

src/views/canvas/components/pixel-ratio-selection.vue

@@ -0,0 +1,67 @@
+<template>
+	<div class="pixel-ratio-selection">
+		<div
+			v-for="v in list"
+			:key="v"
+			:class="{ active: v === modelValue }"
+			@click="onChange(v)"
+			:style="{ '--w': v.split(':')[0], '--h': v.split(':')[1] }"
+		>
+			{{ v }}
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, defineExpose } from 'vue'
+	const emit = defineEmits(['update:modelValue', 'change'])
+	const props = defineProps({
+		modelValue: { type: String },
+		list: {
+			type: Array,
+			default: () => ['1:1', '4:3', '3:4', '16:9']
+		}
+	})
+	const data = reactive({})
+	const onChange = (v) => {
+		emit('update:modelValue', v)
+		emit('change', v)
+	}
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.pixel-ratio-selection {
+		width: 100%;
+		height: 3.4rem;
+		border-radius: 0.6rem;
+		background-color: #f0f0f0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 1.7rem;
+		> div {
+			text-align: center;
+			font-size: 1.2rem;
+			color: #7c7c7c;
+			height: 2.1rem;
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&.active {
+				border-radius: 0.4rem;
+				background-color: #fff;
+			}
+			&::before {
+				content: '';
+				border-radius: 0.1rem;
+				border: 0.1rem solid #7c7c7c;
+				width: calc(var(--w) / max(var(--w), var(--h)) * 1rem);
+				height: calc(var(--h) / max(var(--w), var(--h)) * 1rem);
+				margin-right: 0.4rem;
+				box-sizing: border-box;
+			}
+		}
+	}
+</style>

src/views/canvas/components/upload-file.vue

@@ -0,0 +1,59 @@
+<template>
+	<div class="upload-file">
+		<div class="icon"><svg-icon name="upload" size="17" /></div>
+		<span class="txt">Upload your files</span>
+		<button class="btn">Select File</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, defineExpose } from 'vue'
+	const emit = defineEmits(['update:modelValue', 'change'])
+	const props = defineProps({
+		modelValue: { type: String },
+		list: {
+			type: Array,
+			default: () => ['1:1', '4:3', '3:4', '16:9']
+		}
+	})
+	const data = reactive({})
+	const onChange = (v) => {
+		emit('update:modelValue', v)
+		emit('change', v)
+	}
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.upload-file {
+		width: 100%;
+		height: 9.9rem;
+		border-radius: 1rem;
+		background-color: #f0f0f0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		// padding: 0 1.7rem;
+		> .txt {
+			margin-top: 0.6rem;
+			margin-bottom: 0.8rem;
+			font-size: 0.8rem;
+			color: #7c7c7c;
+		}
+		> button {
+			box-shadow: 0px 0.75px 0px 0px #00000005;
+			min-width: 3.9rem;
+			height: 1.3rem;
+			border-radius: 0.23rem;
+			background-color: #fff;
+			font-size: 0.6rem;
+			color: #000;
+			border: 0.05rem solid #d9d9d9;
+			cursor: pointer;
+			&:active {
+				opacity: 0.6;
+			}
+		}
+	}
+</style>

src/views/canvas/index.vue

@@ -0,0 +1,35 @@
+<template>
+	<div class="canvas">
+		<card type="to-real-style" />
+		<card type="scene-composition" />
+		<card type="color-palette" />
+		<card type="to-video" />
+		<card type="to-3d-model" />
+		<card type="add-print" />
+		<card type="edit-material" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import card from './components/card.vue'
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const globalStore = useGlobalStore()
+	onMounted(() => {
+		globalStore.setHomeLeftNavCollapse(true)
+	})
+</script>
+
+<style lang="less" scoped>
+	.canvas {
+		background-color: #fcf8f1;
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		padding: 2rem;
+		gap: 2rem;
+	}
+</style>

src/views/home/left-nav.vue

@@ -15,6 +15,10 @@
 			<span class="icon"><svg-icon name="home" size="24" /></span>
 			<span class="title" v-show="!isCollapse">{{ $t('Home.home') }}</span>
 		</div> -->
+		<div class="menu-item" @click="onCanvas">
+			<!-- <span class="icon"><svg-icon name="home" size="24" /></span> -->
+			<span class="title">画布</span>
+		</div>
 		<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
 			<span class="icon"><svg-icon name="history" size="24" /></span>
 			<span class="title" v-show="!isCollapse">{{ $t('Home.history') }}</span>
@@ -103,6 +107,9 @@
 	const onHome = () => {
 		console.log('onHome')
 	}
+	const onCanvas = () => {
+		router.push({ name: 'canvas' })
+	}
 	const onHistory = () => {
 		showHistory.value = !showHistory.value
 	}
@@ -112,7 +119,6 @@
 	const onRenameHistoryItem = (item: any) => {
 		// const index = historyList.value.findIndex((i: any) => i.id == item.id)
 		// if (index != -1) {
-
 		// }
 	}
 	const onDeleteHistoryItem = (item: any) => {
@@ -247,7 +253,7 @@
 						white-space: nowrap;
 						overflow: hidden;
 					}
-					>.icon{
+					> .icon {
 						width: 2.5rem;
 						height: 2.5rem;
 					}

src/views/home/top-nav.vue

@@ -68,7 +68,7 @@
 			height: 4.3rem;
 			margin-right: 1rem;
 			background-color: rgba(255, 252, 244, 1);
-			border: 1px solid rgba(233, 121, 60, 1);
+			border: 1px solid #FFCF90;
 			border-radius: 0.8rem;
 			> .credits {
 				flex: 1;
@@ -78,7 +78,7 @@
 			> .link {
 				height: 100%;
 				width: 0;
-				border-right: 1px solid rgba(233, 121, 60, 1);
+				border-right: 1px solid #FFCF90;
 			}
 			> .icon {
 				cursor: pointer;

src/views/login/css/style.css

@@ -3,7 +3,6 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  padding: 2.5rem;
   display: flex;
   user-select: none;
 }
@@ -19,18 +18,14 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 2rem;
 }
 .register > .left > .logo,
 .login > .left > .logo {
   position: absolute;
-  top: 2.4rem;
-  left: 4.2rem;
-}
-.register > .left > .logo > img,
-.login > .left > .logo > img {
-  width: 6rem;
-  height: auto;
+  top: 3.2rem;
+  left: 3.8rem;
+  width: auto;
+  height: 2.5rem;
 }
 .register > .left > .logo > span,
 .login > .left > .logo > span {
@@ -40,22 +35,26 @@
 }
 .register > .right,
 .login > .right {
-  width: 90rem;
+  width: 99rem;
   min-width: 600px;
   display: flex;
   flex-direction: column;
+  background-image: url('@/assets/images/login/right-bg.png');
+  background-size: auto 100%;
+  background-position: left center;
+  background-repeat: no-repeat;
 }
 .register > .right > .top,
 .login > .right > .top {
   display: flex;
-  padding: 0 3rem;
+  padding: 3rem 0 0 3rem;
 }
 .register > .right > .top > .back,
 .login > .right > .top > .back {
   width: 5rem;
   height: 5rem;
   border-radius: 1.2rem;
-  border: 0.25rem solid #dfdfdf;
+  border: 0.25rem solid #252727;
   background-color: transparent;
   cursor: pointer;
 }
@@ -71,8 +70,8 @@
 }
 .register > .right > .box > img,
 .login > .right > .box > img {
-  width: 11rem;
-  height: auto;
+  width: auto;
+  height: 12rem;
   margin-top: 2rem;
 }
 .register > .right > .box > .visible-code,
@@ -83,17 +82,17 @@
 .register > .right > .box > .title,
 .login > .right > .box > .title {
   font-weight: 600;
-  font-size: 7rem;
+  font-size: 6.1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #252727;
-  margin-top: 1.7rem;
 }
-.register > .right > .box > .title > img,
-.login > .right > .box > .title > img {
-  width: auto;
-  height: 9.8rem;
+.register > .right > .box > .title::v-deep > *,
+.login > .right > .box > .title::v-deep > * {
+  margin-left: 1rem;
+  font-family: LBold;
+  margin-bottom: -1rem;
 }
 .register > .right > .box > .tip,
 .login > .right > .box > .tip {
@@ -101,7 +100,7 @@
   font-family: Regular;
   font-size: 1.8rem;
   color: #666;
-  margin-top: 0.4rem;
+  margin-top: 0.5rem;
 }
 .register > .right > .box > .el-form,
 .login > .right > .box > .el-form {

src/views/login/index.vue

@@ -1,10 +1,15 @@
 <template>
-	<div class="index background-pink">
+	<div class="index">
 		<div class="header">
+			<span class="tip">{{ $t('AlphaVersion') }}</span>
+			<img src="@/assets/images/logo-1.png" class="logo" />
 			<p class="split"></p>
 			<button class="login" @click="onLogin">{{ $t('Login.login') }}</button>
 			<button class="register" @click="onRegister">{{ $t('Login.signUp') }}</button>
 		</div>
+		<img src="@/assets/images/login/index-title.png" class="title" draggable="false" />
+		<img src="@/assets/images/login/index-zhuangshi.png" class="zhuangshi" draggable="false" />
+		<div class="tip">{{ $t('Login.indexTip') }}</div>
 	</div>
 </template>
 
@@ -26,6 +31,9 @@
 		height: 100%;
 		overflow: hidden;
 		position: relative;
+		background-image: url('@/assets/images/login/index-bg.png');
+		background-size: cover;
+		background-position: center;
 		> .header {
 			position: absolute;
 			top: 3rem;
@@ -33,7 +41,22 @@
 			width: 100%;
 			display: flex;
 			justify-content: center;
-			align-items: center;
+			// align-items: center;
+			> .tip {
+				position: absolute;
+				width: 100%;
+				top: 0;
+				left: 0;
+				font-size: 3rem;
+				text-align: center;
+				font-family: Regular;
+				color: #fff;
+			}
+			> .logo {
+				width: auto;
+				height: 2.5rem;
+				margin-left: 3.8rem;
+			}
 			> .split {
 				margin: 0 auto;
 			}
@@ -47,18 +70,43 @@
 				font-size: 2.2rem;
 				font-weight: 600;
 				font-family: SemiBold;
+				border: 0.2rem solid #fff;
 				&:active {
 					opacity: 0.8;
 				}
 			}
 			> .login {
-				background-color: #ff7a51;
-				color: #fff;
+				background-color: #fff;
+				color: #713e1f;
 			}
 			> .register {
-				background-color: #fff;
-				color: #232323;
+				background-color: transparent;
+				color: #ffffff;
+				backdrop-filter: blur(10px);
 			}
 		}
+		> .zhuangshi,
+		> .title,
+		> .tip {
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+		> .title {
+			width: 55%;
+			height: auto;
+			top: 20.5rem;
+		}
+		> .zhuangshi {
+			width: 21.5rem;
+			height: auto;
+			bottom: 13.4rem;
+		}
+		> .tip {
+			font-size: 2.8rem;
+			font-family: Regular;
+			color: #fff;
+			bottom: 8rem;
+		}
 	}
 </style>

src/views/login/less/style.less

@@ -3,7 +3,6 @@
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
-	padding: 2.5rem;
 	display: flex;
 	user-select: none;
 
@@ -17,18 +16,14 @@
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
-			border-radius: 2rem;
 		}
 
 		>.logo {
 			position: absolute;
-			top: 2.4rem;
-			left: 4.2rem;
-
-			>img {
-				width: 6rem;
-				height: auto;
-			}
+			top: 3.2rem;
+			left: 3.8rem;
+			width: auto;
+			height: 2.5rem;
 
 			>span {
 				font-weight: 600;
@@ -39,20 +34,24 @@
 	}
 
 	>.right {
-		width: 90rem;
+		width: 99rem;
 		min-width: 600px;
 		display: flex;
 		flex-direction: column;
+		background-image: url('@/assets/images/login/right-bg.png');
+		background-size: auto 100%;
+		background-position: left center;
+		background-repeat: no-repeat;
 
 		>.top {
 			display: flex;
-			padding: 0 3rem;
+			padding: 3rem 0 0 3rem;
 
 			>.back {
 				width: 5rem;
 				height: 5rem;
 				border-radius: 1.2rem;
-				border: 0.25rem solid rgba(223, 223, 223, 1);
+				border: 0.25rem solid #252727;
 				background-color: transparent;
 				cursor: pointer;
 			}
@@ -68,8 +67,8 @@
 			align-items: center;
 
 			>img {
-				width: 11rem;
-				height: auto;
+				width: auto;
+				height: 12rem;
 				margin-top: 2rem;
 			}
 
@@ -80,26 +79,25 @@
 
 			>.title {
 				font-weight: 600;
-				font-size: 7rem;
+				font-size: 6.1rem;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				color: #252727;
-				margin-top: 1.7rem;
 
-				>img {
-					width: auto;
-					height: 9.8rem;
+				&::v-deep>* {
+					margin-left: 1rem;
+					font-family: LBold;
+					margin-bottom: -1rem;
 				}
 			}
 
 			>.tip {
 				font-weight: 400;
 				font-family: Regular;
-				// font-style: Regular;
 				font-size: 1.8rem;
 				color: #666;
-				margin-top: 0.4rem;
+				margin-top: 0.5rem;
 			}
 
 			>.el-form {

src/views/login/login.vue

@@ -2,10 +2,7 @@
 	<div class="login">
 		<div class="left">
 			<img class="bg" src="@/assets/images/login/left-bg.png" />
-			<div class="logo">
-				<img src="@/assets/images/logo.png" />
-				<span>FiDA</span>
-			</div>
+			<img class="logo" src="@/assets/images/logo-1.png" />
 		</div>
 		<div class="right">
 			<div class="top">
@@ -16,10 +13,7 @@
 			<div class="box">
 				<img src="@/assets/images/login/elephant.png" />
 				<template v-if="!isVisible">
-					<div class="title">
-						<span>{{ $t('Login.loginTo') }}</span>
-						<img src="@/assets/images/logo-2.png" />
-					</div>
+					<div class="title" v-html="$t('Login.loginTo')"></div>
 					<div class="tip">{{ $t('Login.loginTitle') }}</div>
 					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
 						<el-form-item :label="$t('Login.email')" prop="email">

src/views/login/register.vue

@@ -2,10 +2,7 @@
 	<div class="register">
 		<div class="left">
 			<img class="bg" src="@/assets/images/login/left-bg.png" />
-			<div class="logo">
-				<img src="@/assets/images/logo.png" />
-				<span>FiDA</span>
-			</div>
+			<img class="logo" src="@/assets/images/logo-1.png" />
 		</div>
 		<div class="right">
 			<div class="top">
@@ -16,14 +13,15 @@
 			<div class="box">
 				<img src="@/assets/images/login/elephant.png" />
 				<template v-if="!isVisible">
-					<div class="title">
-						<span>{{ $t('Login.registerFor') }}</span>
-						<img src="@/assets/images/logo-2.png" />
-					</div>
+					<div class="title" v-html="$t('Login.signUpFor')"></div>
 					<div class="tip">{{ $t('Login.registerTip') }}</div>
 					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
 						<el-form-item :label="$t('Login.name')" prop="name">
-							<el-input name="name" v-model="formData.name" :placeholder="$t('Login.enterName')" />
+							<el-input
+								name="name"
+								v-model="formData.name"
+								:placeholder="$t('Login.enterName')"
+							/>
 						</el-form-item>
 						<el-form-item :label="$t('Login.password')" prop="password">
 							<el-input
@@ -47,7 +45,9 @@
 							</el-checkbox>
 						</el-form-item>
 						<el-form-item>
-							<el-button class="submit" type="primary" @click="onSubmit">{{ $t('Login.register') }}</el-button>
+							<el-button class="submit" type="primary" @click="onSubmit">{{
+								$t('Login.register')
+							}}</el-button>
 						</el-form-item>
 					</el-form>
 					<div class="tip-2" v-html="$t('Login.havenAccountToLogin')"></div>

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>

src/views/nuic/nuic-1.vue

@@ -39,8 +39,7 @@
 			margin-bottom: 2rem;
 			&::v-deep > b {
 				font-size: 4.8rem;
-				font-family: Migra-Extrabold;
-				font-style: italic;
+				font-family: MBold;
 			}
 		}
 		> .tip {

src/views/nuic/nuic-2.vue

@@ -10,11 +10,11 @@
 			</div>
 		</div>
 		<div class="btns">
+			<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
 			<button class="more" @click="onLoadMore">
 				<span>{{ $t('Nuic.loadMore') }}</span>
 				<div><svg-icon name="refresh-single" size="24" /></div>
 			</button>
-			<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
 		</div>
 	</div>
 </template>
@@ -45,8 +45,7 @@
 			margin-bottom: 6rem;
 			&::v-deep > b {
 				font-size: 4.8rem;
-				font-family: Migra-Extrabold;
-				font-style: italic;
+				font-family: MBold;
 			}
 		}
 		> .list {

src/views/nuic/nuic-3.vue

@@ -63,8 +63,7 @@
 			margin-bottom: 9.8rem;
 			&::v-deep > b {
 				font-size: 4.8rem;
-				font-family: Migra-Extrabold;
-				font-style: italic;
+				font-family: MBold;
 			}
 		}
 		> .select-item {
@@ -72,12 +71,11 @@
 			width: 50rem;
 			text-align: left;
 			> .title {
-				margin-bottom: 3rem;
+				margin-bottom: 1.5rem;
 				font-size: 3.6rem;
 				font-weight: 800;
 				color: #252727;
-				font-family: Migra-Extrabold;
-				font-style: italic;
+				font-family: LBold;
 			}
 			> .el-select {
 				width: 100%;