111

src/views/SellerDashboard/seller-header.vue

@@ -0,0 +1,95 @@
+<template>
+	<div class="seller-header">
+		<div class="back" @click="() => router.back()">
+			<svg-icon name="seller-back" size="24" />
+		</div>
+		<div class="content">
+			<span class="title" v-show="title">{{ title }}</span>
+			<span class="tip" v-show="tip">{{ tip }}</span>
+			<div class="breadcrumbs" v-show="breadcrumbs.length > 0">
+				<template v-for="(v, i) in breadcrumbs" :key="i">
+					<span
+						class="title"
+						:class="{
+							last: i === breadcrumbs.length - 1
+						}"
+						@click="() => router.push({ name: v.name })"
+						>{{ v.title }}</span
+					>
+					<span class="icon" v-show="i < breadcrumbs.length - 1">
+						<svg-icon name="seller-arrow_right_solid" size="10" />
+					</span>
+				</template>
+			</div>
+		</div>
+		<div class="right">
+			<slot name="right"></slot>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref, computed } from "vue"
+	import { useRoute, useRouter } from "vue-router"
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ""
+		},
+		tip: {
+			type: String,
+			default: ""
+		},
+		breadcrumbs: {
+			type: Array, // { title: string, name: string }
+			default: () => []
+		}
+	})
+	const route = useRoute()
+	const router = useRouter()
+</script>
+<style scoped lang="less">
+	.seller-header {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: 2.4rem;
+		> .back {
+			width: 5rem;
+			height: 5rem;
+			border-radius: 1.2rem;
+			border: 1px solid #d7d7d7;
+			cursor: pointer;
+		}
+		> .content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			> .title {
+				line-height: 130%;
+				font-size: 2.4rem;
+				color: #000;
+			}
+			> .tip {
+				font-family: "pingfang_medium";
+				font-size: 1.4rem;
+				line-height: 150%;
+				color: #888;
+			}
+			> .breadcrumbs {
+				display: flex;
+				align-items: center;
+				gap: 1rem;
+				> .title {
+					font-family: "pingfang_regular";
+					color: #999;
+					font-size: 1.4rem;
+					cursor: pointer;
+					&:not(.last) {
+						text-decoration: underline;
+					}
+				}
+			}
+		}
+	}
+</style>