卖家入口

src/views/HomeMain.vue

@@ -373,6 +373,15 @@
                   <i class="fi fi-rs-notebook"></i>
                   <span class="select_item_des">{{ $t('Header.ViewOrders') }}</span>
                 </div>
+                <div class="select_item" @click="onBecomeSeller">
+                  <span class="icon"><svg-icon name="seller-sellerIndex" /></span>
+                  <span class="select_item_des">Become a Seller</span>
+                </div>
+                <div class="select_item" @click="onSellerDashboard">
+                  <span class="icon"><svg-icon name="seller-sellerIndex" /></span>
+                  <span class="select_item_des">Seller Dashboard</span>
+				  <a-badge :dot="true"></a-badge>
+                </div>
                 <router-link
                   class="select_item"
                   v-if="userDetail.systemList.indexOf(3) >= 0"
@@ -1245,6 +1254,12 @@ export default defineComponent({
       let payOrder = this.$refs.payOrder
       payOrder.init()
     },
+	onBecomeSeller(){
+		this.$router.push({ name: 'becomeSeller' })
+	},
+	onSellerDashboard(){
+		this.$router.push({ name: 'brandProfile' })
+	},
     //教程
     getTutorial() {
       let url = 'https://aida-user-manual-chinese.super.site/'

src/views/SellerDashboard/becomeSeller.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="become-seller"></div>
+</template>
+
+<script setup>
+	import { ref, computed } from "vue"
+	import { useRoute, useRouter } from "vue-router"
+	const route = useRoute()
+	const router = useRouter()
+
+	const activePath = computed(() => route.path)
+</script>
+<style scoped lang="less">
+	.become-seller {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+	}
+</style>

src/views/SellerDashboard/index.vue

@@ -1,6 +1,16 @@
 <template>
 	<div class="seller-dashboard-index">
-		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>
@@ -8,7 +18,38 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<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 {
@@ -18,7 +59,46 @@
 		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;
 		}
 	}