aida_front/src/views/SellerDashboard/index.vue

<template>
	<div class="seller-dashboard-index">
		<div class="nav">
			<div
				v-for="v in list"
				:key="v.path"
				:class="{ active: v.path === activePath }"
				@click="handleClick(v.path)"
			>
				<div class="icon"><svg-icon :name="v.icon" size="20" /></div>
				<span class="layer">{{ v.layer }}</span>
			</div>
		</div>

		<div class="view">
			<router-view></router-view>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed } from "vue"
	import { useRoute, useRouter } from "vue-router"
	const route = useRoute()
	const router = useRouter()
	const list = ref([
		{
			icon: "seller-brandProfile",
			layer: "Brand Profile",
			path: "/home/seller/brandProfile"
		},
		{
			icon: "seller-myListings",
			layer: "My Listings",
			path: "/home/seller/myListings"
		},
		{
			icon: "seller-myOrders",
			layer: "My Orders",
			path: "/home/seller/myOrders"
		},
		{
			icon: "seller-settings",
			layer: "Settings",
			path: "/home/seller/settings"
		}
	])
	const activePath = computed(() => route.path)
	const handleClick = (path) => {
		if (path === activePath.value) return
		router.push(path)
	}
</script>
<style scoped lang="less">
	.seller-dashboard-index {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		> .nav {
			width: 100%;
			display: flex;
			align-items: center;
			gap: 3.6rem;
			> div {
				width: 18rem;
				height: 6rem;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				cursor: pointer;
				> .icon {
					margin-right: 1rem;
					color: #b0b0b0;
				}
				> .layer {
					font-size: 2rem;
					color: #999999;
				}
				&.active {
					> .icon,
					> .layer {
						color: #000;
					}
					&::after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 0.4rem;
						background-color: #000;
					}
				}
			}
		}
		> .view {
			margin-top: 4rem;
			flex: 1;
		}
	}
</style>