xinkeaboard/xinkeaboard-web/components/MemberTitle.vue

<template>
    <div class="member_title_breadcrumb">
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="line-height: 40px;font-size: 10px;"
            >
            <el-breadcrumb-item :to="{path:'/member/home'}" replace>{{L['首页']}}</el-breadcrumb-item>
            <!-- <el-breadcrumb-item :to="{path:'/member/home'}" replace>{{L['个人中心']}}</el-breadcrumb-item> -->
            <el-breadcrumb-item v-if="!memberPath">{{memberTitle}}</el-breadcrumb-item>
            <el-breadcrumb-item v-else :to="{path:memberPath}" replace>{{memberTitle}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{memberTitleS}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script setup>
import {ElBreadcrumb,ElBreadcrumbItem} from "element-plus";
import { getCurLanguage } from '@/composables/common.js';
const L = getCurLanguage();
defineProps(["memberTitle","memberPath","memberTitleS"]);
</script>
<style lang="scss">
@import "@/assets/style/theme.scss";
.member_title_breadcrumb{
    padding-left: 20px;
   
    background: $colorK;
    .el-breadcrumb__item{
        font-weight: 400;
        font-size: 12px;
        color: #282E30;
        height: 46px;
        line-height: 46px;
    }
    .el-breadcrumb__inner {
        color: $colorMain !important;
        font-weight: 700!important;
    }
    .is-link{
        color: #282E30 !important;
        font-weight: 400!important;
        &:hover{
            color: $colorMain !important;
            font-weight: 700!important;
        }
    }
}

</style>