CocoClass-help/components/Header.vue

<template>
    <div class="header">
        <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 {
    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 10%;
    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 {
        color: rgba(46, 90, 168, 1);
    }
}
</style>