初始化

src/views/404.vue

@@ -0,0 +1,21 @@
+<template>
+	<div class="view-404">
+		<p>404 Not Found</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+</script>
+
+<style lang="less">
+	.view-404 {
+		text-align: center;
+		> p {
+			margin-top: 5rem;
+			font-weight: bold;
+			font-size: 3rem;
+			color: #0094ff;
+		}
+	}
+</style>

src/views/main-header.vue

@@ -0,0 +1,143 @@
+<template>
+	<div class="main-header" id="main-header">
+		<div class="left">
+			<img class="logo" src="@/assets/images/logo.png" alt="" />
+		</div>
+		<div class="center">
+			<div
+				v-for="v in navList1"
+				:key="v.path"
+				class="nav-item"
+				:class="{ active: activePath === v.path }"
+				@click="onNavItemClick(v.path)"
+			>
+				<span>{{ v.name }}</span>
+			</div>
+		</div>
+		<div class="right">
+			<div
+				class="icon"
+				v-for="v in navList2"
+				:key="v.path"
+				:class="{ active: activePath === v.path }"
+				@click="onNavItemClick(v.path)"
+			>
+				<svg-icon :name="activePath === v.path ? v.active_icon : v.icon" size="22" />
+			</div>
+			<div class="login">Login</div>
+			<div class="profile"></div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const activePath = computed(() => route.path)
+	const navList1 = ref([
+		{
+			name: 'Home',
+			path: '/'
+		},
+		{
+			name: 'Collection Story',
+			path: '/collection-story'
+		},
+		{
+			name: 'Brand',
+			path: '/brand'
+		},
+		{
+			name: 'Digital Item',
+			path: '/digital-item'
+		}
+	])
+	const navList2 = ref([
+		{
+			icon: 'cart_0',
+			active_icon: 'cart_1',
+			path: '/cart'
+		},
+		{
+			icon: 'user_0',
+			active_icon: 'user_1',
+			path: '/user'
+		}
+	])
+	const onNavItemClick = (path: string) => {
+		if (path === activePath.value) return
+		router.push(path)
+	}
+</script>
+
+<style lang="less">
+	#main-header {
+		height: 8rem;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+		background: #ffffff;
+		padding: 0 9rem;
+		border-bottom: 0.1rem solid #c4c4c4;
+		> .left {
+			> .logo {
+				width: auto;
+				height: 4rem;
+			}
+		}
+		> .right {
+			> .icon {
+				width: 2.4rem;
+				height: 2.4rem;
+				cursor: pointer;
+			}
+			> .profile {
+				width: 4rem;
+				height: 4rem;
+				border-radius: 50%;
+				background: #f5f5f5;
+				cursor: pointer;
+			}
+		}
+		> .center,
+		> .right {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 2.6rem;
+		}
+
+		> .center {
+			position: absolute;
+			height: 80%;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			> .nav-item {
+				height: 100%;
+				user-select: none;
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				> span {
+					padding: 0 1rem;
+					line-height: 2.4rem;
+					font-size: 1.6rem;
+					color: #232323;
+					border-bottom: 0.1rem solid transparent;
+					font-family: Kaisei Opti;
+				}
+				&.active {
+					> span {
+						border-bottom-color: #232323;
+						font-weight: 700;
+					}
+				}
+			}
+		}
+	}
+</style>