CocoClass-help/components/HelpHeader.vue

<template>
    <div class="header_help">
        <div>
            <img src="@/assets/img/logo.png" alt="">
            <router-link to="/helps" class="help">帮助文档</router-link>
        </div>

        <a href="//cloud.cocorobo.cn">
            <span>CocoClass</span>
        </a>

    </div>
</template>

<script>
</script>
<style lang="less" scoped>
.header_help {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: rgba(46, 90, 168, 1);
    font-size: 16px;
    font-weight: 600;
    // padding: 5px;
    height:53px;
    line-height:53px;
    border-bottom: 1px solid #eee;

    div {
        display: flex;
        flex-direction: row;
        align-items: center;

        img {
            margin-right: 10px;
            
        }
    }

    .help {
        vertical-align: middle
    }

    span {
        border: 2px solid rgba(46, 90, 168, 1);
        padding: 4px 12px;
        border-radius: 100px;
    }

    a {
        display:inline-block;
        color: rgba(46, 90, 168, 1);
        padding-left:10px;
        border-left:1px solid #eee;
    }
}
</style>