GterForumWeB/src/components/PlateNavigation.vue

<!-- 板块导航 头部 点击板块后的头部导航 -->
<template>
    <router-link class="path-box" to="/allSections">
        <div>论坛</div>
        <span class="path-slash">/</span>
        <div class="oneEllipsis">{{ stairname }}</div>
        <span class="path-slash">/</span>
        <div class="oneEllipsis">{{ subsectionsname }}</div>
    </router-link>
</template>

<script>
export default {
    name: 'PlateNavigation',

    data() {
        return {

        };
    },
    props: ["stairname", "subsectionsname"],
    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>
//路径
.path-box {
    display: flex;
    flex-direction: row;
    height: 1.28rem;
    line-height: 1.28rem;
    margin: 0.2rem 0.35rem 0;
    // padding: 0 0.25rem;
    padding: 0 .4rem;
    border-radius: 1.68rem 1.68rem 0 1.68rem;
    background-color: #fff;
    font-size: 0.32rem;
    -webkit-box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.1);
    position: relative;

    .path-slash {
        color: #D7D7D7;
        font-size: .32rem;
        margin: 0 .18rem;
    }

    div {
        color: #7F7F7F;
        max-width: 2.5rem;

        // &::before {
        // 	content: "/";
        // 	width: 0.2rem;
        // 	padding: 0 0.07rem;
        // 	color: #7F7F7F;
        // }

        &:last-child {
            max-width: 50%;
            color: #000;
            font-weight: bold;
        }

        // &:first-child::before {
        // 	content: "";
        // }
    }

    &::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        border-top: 0.24rem solid rgba(98, 177, 255, 1);
        border-left: 0.24rem solid transparent;
        transform: rotateX(180deg);
        margin: 0 0.09rem 0.09rem 0;
    }

}
</style>