头尾多语言

src/components/down-menu.vue

@@ -25,7 +25,7 @@
 		> .title {
 			margin: 0 14px;
 			color: #fff;
-			font-size: 15px;
+			font-size: 14px;
 			text-decoration: none;
 			line-height: 37px;
 			display: inline-block;

src/components/main-footer.vue

@@ -1,11 +1,16 @@
 <template>
 	<footer class="main-footer">
 		<div class="left">
-			<span>©2025 Code-Create Limited</span>
+			<span>{{
+				$t('MainFooter.Copyright', {
+					year: new Date().getFullYear(),
+					name: 'Code-Create'
+				})
+			}}</span>
 		</div>
 		<div class="right">
 			<div v-for="item in nav" :key="item.path">
-				<router-link class="link" :to="item.path">{{ item.name }}</router-link>
+				<router-link class="link" :to="item.path">{{ $t(item.name) }}</router-link>
 			</div>
 		</div>
 	</footer>
@@ -14,19 +19,19 @@
 	import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
 	const nav = ref([
 		{
-			name: 'Privacy Policy',
+			name: 'MainFooter.PrivacyPolicy',
 			path: '/privacy-policy'
 		},
 		{
-			name: 'Terms of Use',
+			name: 'MainFooter.TermsOfUse',
 			path: '/terms-of-use'
 		},
 		{
-			name: 'Disclaimer',
+			name: 'MainFooter.Disclaimer',
 			path: '/disclaimer'
 		},
 		{
-			name: 'Site Map',
+			name: 'MainFooter.SiteMap',
 			path: '/site-map'
 		}
 	])

src/components/main-header.vue

@@ -3,15 +3,14 @@
 		<a href="/" class="logo"><img src="../assets/logo-full.png" alt="code-create" /></a>
 		<div class="center-nav">
 			<div class="nav-item" v-for="item in navList" :key="item.name">
-				<down-menu :title="item.name" v-if="item.children">
+				<down-menu :title="$t(item.name)" v-if="item.children">
-					<router-link :to="child.path" v-for="child in item.children" :key="child.path">
+					<router-link :to="child.path" v-for="child in item.children" :key="child.name">
 						{{ $t(child.name) }}
 					</router-link>
 				</down-menu>
-				<router-link class="link hover-bottom-animation" :to="item.path" v-else>
+				<router-link class="link hover-bottom-animation" :to="item.path" v-else>{{
-					{{ $t(item.name) }}
+					$t(item.name)
-					<span v-show="item.children" class="iconfont icon-arrow-down-bold"></span>
+				}}</router-link>
-				</router-link>
 			</div>
 		</div>
 		<div class="right">
@@ -21,14 +20,19 @@
 					:to="`/${item.value}`"
 					v-for="item in langList"
 					:key="item.value"
+					v-show="item.value !== locale"
 				>
 					{{ item.label }}
 				</router-link>
 			</down-menu>
-			<span class="">
+			<router-link class="link" to="/my-account">
-				<span class="iconfont icon-wode"></span>
+				<span class="iconfont icon-tubiao-"></span>
-				<span>My Account</span>
+				<span>{{ $t('MainHeader.LoginOrSignin') }}</span>
-			</span>
+			</router-link>
+			<router-link class="link" to="/my-account">
+				<span class="iconfont icon-tubiao-"></span>
+				<span>{{ $t('MainHeader.MyAccount') }}</span>
+			</router-link>
 		</div>
 	</header>
 </template>
@@ -66,47 +70,47 @@
 			path: '/'
 		},
 		{
-			name: 'About Us',
+			name: 'MainHeader.AboutUs',
 			path: '/about-us'
 		},
 		{
-			name: 'Our Solutions',
+			name: 'MainHeader.OurSolutions',
 			path: '',
 			children: [
 				{
-					name: 'AiDA 3.1',
+					name: 'MainHeader.AiDA31',
 					path: '/aida'
 				},
 				{
-					name: 'Mixi',
+					name: 'MainHeader.Mixi',
 					path: '/mixi'
 				}
 			]
 		},
 		{
-			name: 'Communities',
+			name: 'MainHeader.Communities',
 			path: '',
 			children: [
 				{
-					name: 'Events',
+					name: 'MainHeader.Events',
 					path: '/events'
 				},
 				{
-					name: 'User Stories',
+					name: 'MainHeader.UserStories',
 					path: '/user-stories'
 				},
 				{
-					name: 'Help Centre',
+					name: 'MainHeader.HelpCentre',
 					path: '/help-centre'
 				}
 			]
 		},
 		{
-			name: 'Media',
+			name: 'MainHeader.Media',
 			path: '/media'
 		},
 		{
-			name: 'Contact Us',
+			name: 'MainHeader.ContactUs',
 			path: '/contact-us'
 		}
 	])
@@ -142,19 +146,14 @@
 			justify-content: center;
 			> .nav-item {
 				position: relative;
+				&:deep(> .down-menu > .title),
 				> .link {
 					margin: 0 14px;
 					color: #fff;
-					font-size: 15px;
+					font-size: 14px;
 					text-decoration: none;
 					line-height: 37px;
 					display: inline-block;
-
-					> .iconfont {
-						opacity: 0.5;
-						font-size: 10px;
-						margin-left: 5px;
-					}
 				}
 				> .child {
 					position: absolute;
@@ -201,14 +200,23 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			> span {
+			> .link {
 				margin: 0 14px;
 				color: #fff;
-				font-size: 15px;
+				font-size: 14px;
 				text-decoration: none;
 				line-height: 37px;
 				display: inline-block;
-				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				&:hover {
+					opacity: 0.8;
+				}
+				> .iconfont {
+					margin-right: 5px;
+					font-size: 22px;
+				}
 			}
 		}
 	}

src/lang/en.ts

@@ -1,5 +1,24 @@
 export default {
 	MainHeader: {
 		Home: 'Home',
+		AboutUs: 'About Us',
+		OurSolutions: 'Our Solutions',
+		AiDA31: 'AiDA 3.1',
+		Mixi: 'Mixi',
+		Communities: 'Communities',
+		Events: 'Events',
+		UserStories: 'User Stories',
+		HelpCentre: 'Help Centre',
+		Media: 'Media',
+		ContactUs: 'Contact Us',
+		MyAccount: 'My Account',
+		LoginOrSignin: 'Log in / Sign in',
+	},
+	MainFooter: {
+		Copyright: '©{year} {name} Limited',
+		PrivacyPolicy: 'Privacy Policy',
+		TermsOfUse: 'Terms of Use',
+		Disclaimer: 'Disclaimer',
+		SiteMap: 'Site Map',
 	}
 }

src/lang/zh-cn.ts

@@ -1,5 +1,24 @@
 export default {
 	MainHeader: {
 		Home: '首页',
+		AboutUs: '关于我们',
+		OurSolutions: '我们的产品',
+		AiDA31: 'AiDA 3.1',
+		Mixi: 'Mixi',
+		Communities: '社区',
+		Events: '活动',
+		UserStories: '使用者故事',
+		HelpCentre: '支援中心',
+		Media: '媒体报道',
+		ContactUs: '联系我们',
+		MyAccount: '我的账户',
+		LoginOrSignin: '登入 / 注册',
+	},
+	MainFooter: {
+		Copyright: '©{year} {name} 有限公司',
+		PrivacyPolicy: '隐私政策',
+		TermsOfUse: '使用条款',
+		Disclaimer: '免责声明',
+		SiteMap: '网站地图',
 	}
 }

src/lang/zh-tw.ts

@@ -1,5 +1,24 @@
 export default {
 	MainHeader: {
 		Home: '首頁',
+		AboutUs: '關於我們',
+		OurSolutions: '我們的產品',
+		AiDA31: 'AiDA 3.1',
+		Mixi: 'Mixi',
+		Communities: '社區',
+		Events: '活動',
+		UserStories: '使用者故事',
+		HelpCentre: '支援中心',
+		Media: '媒體報導',
+		ContactUs: '聯絡我們',
+		MyAccount: '我的帳號',
+		LoginOrSignin: '登錄 / 登冊',
+	},
+	MainFooter: {
+		Copyright: '©{year} {name} 有限公司',
+		PrivacyPolicy: '私隱政策',
+		TermsOfUse: '使用條款',
+		Disclaimer: '免責聲明',
+		SiteMap: '網站地圖',
 	}
 }