Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create

src/assets/css/style.css

@@ -154,3 +154,28 @@ button[custom="black-box"] {
   --button-click-color: #fff;
   --button-font-size: 1.6rem;
 }
+.hover-bottom-animation {
+  position: relative;
+  cursor: pointer;
+}
+.hover-bottom-animation::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-bottom-animation:hover::before {
+  width: 100%;
+  left: 0;
+  right: auto;
+}
+.hover-bottom-animation.active:before,
+.hover-bottom-animation.router-link-exact-active:before {
+  width: 100%;
+}

src/assets/css/style.less

@@ -15,12 +15,19 @@ p {
 * {
 	box-sizing: border-box;
 }
-h1, h2, h3, h4, h5, h6, .products-title{
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.products-title {
 	font-family: Poppins, sans-serif;
-    font-weight: 600;
+	font-weight: 600;
-    letter-spacing: 2px;
+	letter-spacing: 2px;
-    color: #222222;
+	color: #222222;
-    text-transform: capitalize;
+	text-transform: capitalize;
 }
 
 @keyframes loading {
@@ -175,4 +182,33 @@ button[custom="black-box"] {
 	--button-click-bgcolor: #979797;
 	--button-click-color: #fff;
 	--button-font-size: 1.6rem;
+}
+
+.hover-bottom-animation {
+	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;
+	}
+
+	&.active:before,
+	&.router-link-exact-active:before {
+		width: 100%;
+	}
 }

src/components/back-top.vue

@@ -7,7 +7,7 @@
 					transition: 'stroke-dashoffset 10ms linear',
 					strokeDasharray: `${progress}, ${max}`,
 					stroke: '#222',
-					strokeWidth: 4,
+					strokeWidth: 4
 				}"
 				fill="none"
 			></path>
@@ -21,11 +21,11 @@
 	const max = ref(98 * Math.PI);
 	const progress = ref(0);
 	const handleScroll = (e: number) => {
-		progress.value = (e / 100) * max.value;
+		progress.value = (e / 100) * max.value
-	};
+	}
 	const handleClick = () => {
-		document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
+		document.documentElement.scrollTo({ top: 0, behavior: 'smooth' })
-	};
+	}
 </script>
 <style scoped lang="less">
 	.back-top {
@@ -52,6 +52,20 @@
 				transition: stroke-dashoffset 10ms linear;
 			}
 		}
+		&:hover > .iconfont {
+			animation: animArrow 1s infinite;
+		}
+		@keyframes animArrow {
+			0% {
+				transform: rotate(0deg);
+			}
+			50% {
+				transform: translateY(-3px);
+			}
+			100% {
+				transform: rotate(0deg);
+			}
+		}
 
 		animation: back-top-hidden 0.2s linear both;
 		&.active {

src/components/down-menu.vue

@@ -0,0 +1,100 @@
+<template>
+	<div class="down-menu">
+		<div class="title hover-bottom-animation" to="#">
+			{{ title }}
+			<span class="iconfont icon-arrow-down-bold"></span>
+		</div>
+		<div class="child">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted, onUnmounted } from 'vue'
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		}
+	})
+</script>
+<style scoped lang="less">
+	.down-menu {
+		position: relative;
+		> .title {
+			margin: 0 14px;
+			color: #fff;
+			font-size: 15px;
+			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:not(.parent):before {
+				width: 100%;
+			}
+			> .iconfont {
+				opacity: 0.5;
+				font-size: 10px;
+				margin-left: 5px;
+			}
+		}
+		> .child {
+			position: absolute;
+			bottom: 0;
+			visibility: hidden;
+			width: 250px;
+			height: auto;
+			padding: 10px 0;
+			box-sizing: border-box;
+			border: 1px solid #e1e1e1;
+			background-color: #fff;
+			display: flex;
+			flex-direction: column;
+			transform: translateY(calc(100% + 5px));
+			> * {
+				display: inline-block;
+				padding: 10px 15px;
+				color: #000;
+				font-size: 15px;
+				text-decoration: none;
+				text-align: left;
+				&:hover {
+					opacity: 0.5;
+				}
+			}
+		}
+		&:hover > .child {
+			animation: child-show 0.2s linear both;
+		}
+		@keyframes child-show {
+			0% {
+				visibility: hidden;
+				// opacity: 0;
+			}
+			100% {
+				// opacity: 1;
+				transform: translateY(100%);
+				visibility: visible;
+			}
+		}
+	}
+</style>

src/components/main-footer.vue

@@ -1,13 +1,78 @@
-<script setup lang="ts">
-defineExpose({})
-</script>
 <template>
-	<header class="header">
+	<footer class="main-footer">
-	
+		<div class="left">
-	</header>
+			<span>©2025 Code-Create Limited</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>
+			</div>
+		</div>
+	</footer>
 </template>
+<script setup lang="ts">
+	import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
+	const nav = ref([
+		{
+			name: 'Privacy Policy',
+			path: '/privacy-policy'
+		},
+		{
+			name: 'Terms of Use',
+			path: '/terms-of-use'
+		},
+		{
+			name: 'Disclaimer',
+			path: '/disclaimer'
+		},
+		{
+			name: 'Site Map',
+			path: '/site-map'
+		}
+	])
+</script>
 <style lang="less" scoped>
-	.header{
+	.main-footer {
-		position: relative;
+		width: 100%;
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 15px 0;
+		min-height: 140px;
+		display: flex;
+		justify-content: space-between;
+		font-family: Poppins, sans-serif;
+		> .left {
+			font-size: 13px;
+			font-weight: normal;
+			line-height: 24px;
+			color: #000000b3;
+		}
+		> .right {
+			display: flex;
+			align-items: flex-start;
+			> div {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding-left: 20px;
+				border-left: 1px solid #0a0a0a;
+				margin-left: 20px;
+				&:first-child {
+					border-left: none;
+					padding-left: 0;
+					margin-left: 0;
+				}
+				> .link {
+					font-weight: 400;
+					font-size: 12px;
+					transition: all 0.2s ease-out;
+					box-sizing: border-box;
+					box-shadow: none;
+					text-decoration: none;
+					display: inline-block;
+					color: #0a0a0a;
+				}
+			}
+		}
 	}
 </style>

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">
+			<div class="nav-item" v-for="item in navList" :key="item.name">
-				<router-link class="link" :to="item.path" v-if="item.path">
+				<down-menu :title="item.name" v-if="item.children">
-					{{ item.name }}
+					<router-link :to="child.path" v-for="child in item.children" :key="child.path">
-				</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"
-					>
 						{{ 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>
+			<down-menu title="English">
-			<span>My Account</span>
+				<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 } from "vue";
+	import { ref, onMounted, onUnmounted, computed } from 'vue'
-	import { useRoute } from "vue-router";
+	import DownMenu from './down-menu.vue'
-	const route = useRoute();
+
-	console.log(route);
+	import { useRoute } from 'vue-router'
+	const route = useRoute()
+	console.log(route)
+
 	const navList = ref([
 		{
-			name: "Home",
+			name: 'Home',
-			path: "/",
+			path: '/'
 		},
 		{
-			name: "About Us",
+			name: 'About Us',
-			path: "/about-us",
+			path: '/about-us'
 		},
 		{
-			name: "Our Solutions",
+			name: 'Our Solutions',
+			path: '',
 			children: [
 				{
-					name: "AiDA 3.1",
+					name: 'AiDA 3.1',
-					path: "/aida",
+					path: '/aida'
 				},
 				{
-					name: "Mixi",
+					name: 'Mixi',
-					path: "/mixi",
+					path: '/mixi'
-				},
+				}
-			],
+			]
 		},
 		{
-			name: "Communities",
+			name: 'Communities',
+			path: '',
 			children: [
 				{
-					name: "Events",
+					name: 'Events',
-					path: "/events",
+					path: '/events'
 				},
 				{
-					name: "User Stories",
+					name: 'User Stories',
-					path: "/user-stories",
+					path: '/user-stories'
 				},
 				{
-					name: "Help Centre",
+					name: 'Help Centre',
-					path: "/help-centre",
+					path: '/help-centre'
-				},
+				}
-			],
+			]
 		},
 		{
-			name: "Media",
+			name: 'Media',
-			path: "/media",
+			path: '/media'
 		},
 		{
-			name: "Contact Us",
+			name: 'Contact Us',
-			path: "/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;
+					> .iconfont {
-					&::before {
+						opacity: 0.5;
-						content: "";
+						font-size: 10px;
-						position: absolute;
+						margin-left: 5px;
-						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%;
 					}
 				}
 				> .child {

src/directives/custom-animation.js

@@ -40,7 +40,6 @@ const T = {
 	rotateZ: 'rotate-z',
 	opacity_s: 'opacity-s',
 	opacity: 'opacity',
-	once: 'once',
 }
 const types = Object.values(T)
 const typesStr = types.map(v => `[${v}]`).join(',')

src/routes.ts

@@ -6,12 +6,11 @@ import ProductsView from './pages/ProductsView.vue'
 
 export const routes: RouteRecordRaw[] = [
 	{
-		path: '/:lang?',
+		path: '/:lang(en|zh-cn|zh-tw)?',
 		children: [
 			{
 				path: '',
 				component: HomeView,
-				alias: ['/:lang?', '/:lang?/home']
 			},
 			{
 				path: 'about',
@@ -35,3 +34,4 @@ export const routes: RouteRecordRaw[] = [
 		]
 	}
 ]
+