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>

        <div class="cert-status-success" v-if="freework_level>0">
            <div class="cert-status-success-tag">已认证</div>
            <p class="cert-status-tips">可继续认证</p>
        </div>
        <span v-else class="cert-status">未认证</span>
    </div>
    <div class="divider"></div>
</div>
</template>

<script>
export default {
    name: "skill_cert_header",
    props: {
        title: {
            type: String,
            default: ''
        },
        freework_level: {
            type: Number,
            default: 0
        },
    }
}
</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;
        }

        .cert-status-success-tag{
            // position: absolute;
            width: 61px;
            height: 30px;
            line-height: 30px;
            opacity: 0.8;
            background: #308eff;
            color: #fff;
            border-radius: 4px;

            font-size: 13px;
            font-family: PingFangSC, PingFangSC-Regular, sans-serif;
            font-weight: 400;
            text-align: center;
            margin-bottom: 10px;
        }

        .cert-status-success {
            position: absolute;
            right: 0;
            top: 22px;
            .cert-status-tips {
                line-height: 1;
                font-size: 6px;
                color: #666666;
            }
        }

    }

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