适配语言

src/views/nuic/nuic-1.vue

@@ -1,16 +1,12 @@
 <template>
 	<div class="nuic-1">
 		<img src="@/assets/images/nuic/nuic-1-bg.png" />
-		<p class="hi">Hi, Aaa.</p>
-		<p class="title">Help Fiphant discover the <b>'YOU'</b> in your space.</p>
-		<p class="tip">
-			Let's set up your profile. A few quick details will help Fiphant understand
-			<br />
-			your needs and find exactly what you're looking for.
-		</p>
+		<p class="hi">{{ $t('Nuic.hiName', { name: 'Aaa' }) }}</p>
+		<p class="title" v-html="$t('Nuic.nuic1Title')"></p>
+		<p class="tip" v-html="$t('Nuic.nuic1Tip')"></p>
 		<div class="btns">
-			<button class="next" @click="emit('next')">Let’s go, Fiphant!</button>
-			<button class="skip" @click="onSkip">Skip</button>
+			<button class="next" @click="emit('next')">{{ $t('Nuic.letsGo') }}</button>
+			<button class="skip" @click="onSkip">{{ $t('Nuic.skip') }}</button>
 		</div>
 	</div>
 </template>
@@ -41,7 +37,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 2rem;
-			> b {
+			&::v-deep > b {
 				font-size: 4.8rem;
 			}
 		}

src/views/nuic/nuic-2.vue

@@ -1,21 +1,20 @@
 <template>
 	<div class="nuic-2">
-		<!-- <img src="@/assets/images/nuic/nuic-1-bg.png" /> -->
-		<p class="title">What's your dream <b>home vibe</b> ?</p>
+		<p class="title" v-html="$t('Nuic.nuic2Title')"></p>
 		<div class="list">
 			<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
 				<img :src="v.url" draggable="false" />
 				<div class="active" v-show="v.active">
-					<span>Constructivism</span>
+					<span>这是一段文字</span>
 				</div>
 			</div>
 		</div>
 		<div class="btns">
 			<button class="more" @click="onLoadMore">
-				<span>Load more</span>
+				<span>{{ $t('Nuic.loadMore') }}</span>
 				<div><svg-icon name="refresh-single" size="24" /></div>
 			</button>
-			<button class="next" @click="emit('next')">Next</button>
+			<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
 		</div>
 	</div>
 </template>
@@ -35,9 +34,7 @@
 		{ id: 7, url: '/image/nuic/style-7.png', active: false },
 		{ id: 8, url: '/image/nuic/style-8.png', active: false }
 	])
-	const onLoadMore = () => {
-
-	}
+	const onLoadMore = () => {}
 </script>
 
 <style lang="less" scoped>
@@ -46,7 +43,7 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 6rem;
-			> b {
+			&::v-deep > b {
 				font-size: 4.8rem;
 			}
 		}
@@ -97,10 +94,9 @@
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				>span{
+				> span {
 					margin-right: 1.2rem;
 				}
-				
 			}
 		}
 	}

src/views/nuic/nuic-3.vue

@@ -1,21 +1,21 @@
 <template>
 	<div class="nuic-3">
-		<p class="title"><b>Where</b> are you based? What do you <b>do</b> ?</p>
+		<p class="title" v-html="$t('Nuic.nuic3Title')"></p>
 
 		<div class="select-item">
-			<div class="title">Based in</div>
+			<div class="title">{{ $t('Nuic.basedIn') }}</div>
 			<el-select v-model="data.based">
 				<el-option v-for="v in data.basedList" :key="v.value" :label="v.label" :value="v.value" />
 			</el-select>
 		</div>
 		<div class="select-item">
-			<div class="title">Role</div>
+			<div class="title">{{ $t('Nuic.role') }}</div>
 			<el-select v-model="data.role">
 				<el-option v-for="v in data.roleList" :key="v.value" :label="v.label" :value="v.value" />
 			</el-select>
 		</div>
 		<div class="btns">
-			<button class="next" @click="emit('next')">All set!</button>
+			<button class="next" @click="emit('next')">{{ $t('Nuic.allSet') }}</button>
 		</div>
 	</div>
 </template>