97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<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%;
|
|
min-height: 6rem;
|
|
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>
|