From 4aa9ab0913cb2dce64533bed8407478dee0eae9d Mon Sep 17 00:00:00 2001
From: mason369 <1960638223@qq.com>
Date: Fri, 20 Jan 2023 15:25:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=9D=A2=E5=8C=85=E5=B1=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: JDSA Ling <70191651+LingASDJ@users.noreply.github.com>
---
 src/components/Crumb.vue | 31 ++++++++++++++++++++++++++-----
 src/views/Details.vue    |  2 +-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/Crumb.vue b/src/components/Crumb.vue
index 2c62797..2b59297 100644
--- a/src/components/Crumb.vue
+++ b/src/components/Crumb.vue
@@ -1,13 +1,34 @@
 <template>
-    <div>
-    面包屑
-    </div>
+	<div class="crumb">
+		<span>
+			<span
+				:style="{ color: index === nav.length - 1 ? '#333' : '#999' }"
+				v-for="(item, index) in nav"
+				:key="index"
+			>
+				{{ item.name }}
+				<i v-if="index != nav.length - 1">/</i>
+			</span>
+		</span>
+	</div>
 </template>
 
 <script>
-export default {}
+export default {
+	name : "Crumb",
+	props: ["nav"],
+	data() {
+		return {};
+	}
+};
 </script>
 
 <style lang="scss" scoped>
-
+.crumb {
+	font-size: 14px;
+	margin: 10px 0;
+	i {
+		margin: 0 5px;
+	}
+}
 </style>
diff --git a/src/views/Details.vue b/src/views/Details.vue
index 2ac7947..6ad4c0f 100644
--- a/src/views/Details.vue
+++ b/src/views/Details.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="details wrap">
-		<Crumb></Crumb>
+		<Crumb :nav="nav"></Crumb>
 		<main>
 			<div class="content">
 				<div class="l">