aaa

src/components/main-header.vue

@@ -1,86 +1,90 @@
 <template>
 	<header class="main-header" v-scroll-progress>
-		<img class="logo" src="../assets/logo-full.png" alt="code-create" />
+		<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.path">
-				<router-link class="link" :to="item.path" v-if="item.path">
-					{{ item.name }}
-				</router-link>
-				<span v-else class="link">{{ item.name }}</span>
-				<div
-					class="child"
-					v-if="item.children && item.children.length > 0"
-				>
-					<router-link
-						class="child-link"
-						:to="child.path"
-						v-for="child in item.children"
-						:key="child.path"
-					>
+			<div class="nav-item" v-for="item in navList" :key="item.name">
+				<down-menu :title="item.name" v-if="item.children">
+					<router-link :to="child.path" v-for="child in item.children" :key="child.path">
 						{{ child.name }}
 					</router-link>
-				</div>
+				</down-menu>
+				<router-link class="link hover-bottom-animation" :to="item.path" v-else>
+					{{ item.name }}
+					<span v-show="item.children" class="iconfont icon-arrow-down-bold"></span>
+				</router-link>
 			</div>
 		</div>
 		<div class="right">
-			<span>English</span>
-			<span>My Account</span>
+			<down-menu title="English">
+				<router-link class="link" to="/">English</router-link>
+				<router-link class="link" to="/zh-cn">简体中文</router-link>
+				<router-link class="link" to="/zh-tw">繁體中文</router-link>
+			</down-menu>
+			<span class="">
+				<span class="iconfont icon-wode"></span>
+				<span>My Account</span>
+			</span>
 		</div>
 	</header>
 </template>
 <script setup lang="ts">
-	import { ref, onMounted, onUnmounted } from "vue";
-	import { useRoute } from "vue-router";
-	const route = useRoute();
-	console.log(route);
+	import { ref, onMounted, onUnmounted, computed } from 'vue'
+	import DownMenu from './down-menu.vue'
+
+	import { useRoute } from 'vue-router'
+	const route = useRoute()
+	console.log(route)
+
 	const navList = ref([
 		{
-			name: "Home",
-			path: "/",
+			name: 'Home',
+			path: '/'
 		},
 		{
-			name: "About Us",
-			path: "/about-us",
+			name: 'About Us',
+			path: '/about-us'
 		},
 		{
-			name: "Our Solutions",
+			name: 'Our Solutions',
+			path: '',
 			children: [
 				{
-					name: "AiDA 3.1",
-					path: "/aida",
+					name: 'AiDA 3.1',
+					path: '/aida'
 				},
 				{
-					name: "Mixi",
-					path: "/mixi",
-				},
-			],
+					name: 'Mixi',
+					path: '/mixi'
+				}
+			]
 		},
 		{
-			name: "Communities",
+			name: 'Communities',
+			path: '',
 			children: [
 				{
-					name: "Events",
-					path: "/events",
+					name: 'Events',
+					path: '/events'
 				},
 				{
-					name: "User Stories",
-					path: "/user-stories",
+					name: 'User Stories',
+					path: '/user-stories'
 				},
 				{
-					name: "Help Centre",
-					path: "/help-centre",
-				},
-			],
+					name: 'Help Centre',
+					path: '/help-centre'
+				}
+			]
 		},
 		{
-			name: "Media",
-			path: "/media",
+			name: 'Media',
+			path: '/media'
 		},
 		{
-			name: "Contact Us",
-			path: "/contact-us",
-		},
-	]);
+			name: 'Contact Us',
+			path: '/contact-us'
+		}
+	])
 </script>
 <style lang="less" scoped>
 	.main-header {
@@ -102,6 +106,10 @@
 		> .logo {
 			height: 100%;
 			width: auto;
+			img {
+				width: auto;
+				height: 100%;
+			}
 		}
 		> .center-nav {
 			display: flex;
@@ -116,27 +124,11 @@
 					text-decoration: none;
 					line-height: 37px;
 					display: inline-block;
-					position: relative;
-					cursor: pointer;
-					&::before {
-						content: "";
-						position: absolute;
-						height: 2px;
-						width: 0;
-						right: 0;
-						left: auto;
-						bottom: 0;
-						transition: width 0.2s ease-in-out;
-						-webkit-transition: width 0.2s ease-in-out;
-						background-color: #fff;
-					}
-					&:hover::before {
-						width: 100%;
-						left: 0;
-						right: auto;
-					}
-					&.router-link-exact-active:before {
-						width: 100%;
+
+					> .iconfont {
+						opacity: 0.5;
+						font-size: 10px;
+						margin-left: 5px;
 					}
 				}
 				> .child {