proginn-frontend/components/skill_cert_header/skill_cert_header.vue

<template>
<div class="skill-cert-header">
    <div class="page-title">
        <span class="text">{{title}}</span>
        <span class="cert-status">{{isCert ? '已认证':'未认证'}}</span>
    </div>
    <div class="divider"></div>
</div>
</template>

<script>
export default {
    name: "skill_cert_header",
    props: {
        title: {
            type: String,
            default: ''
        },
        isCert: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style lang="scss" scoped>
.skill-cert-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;

    .page-title {
        width: 100%;
        position: relative;
        height: 75px;

        .text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
            font-weight: 600;
            color: #222222;
            text-align: center;
        }

        .cert-status {
            position: absolute;
            width: 61px;
            height: 30px;
            opacity: 0.8;
            background: #efefef;
            border-radius: 4px;

            font-size: 13px;
            font-family: PingFangSC, PingFangSC-Regular, sans-serif;
            font-weight: 400;
            text-align: center;
            color: #666666;
            line-height: 30px;
            right: 0;
            top: 22px;
        }
    }

    .divider {
        width: 100%;
        height: 2px;
        border: 1px solid rgba(0, 0, 0, 0.06);
    }
}
</style>