<template>
    <header>

        <div class="logo-wrap gd flex justify-between align-center ">
            <router-link to="/Bi002.page" class="logo gd-1"></router-link>
            <div class="flex justify-end  gd-2 logo-btn">
                <div class=" header-btn">
                    <p class="btn-img1"></p>
                    <a href="/">사용설명서</a>
                </div>
                <div class=" header-btn">
                    <p class="btn-img3"></p>
                    <a href="/">박정현님</a>
                </div>
                <div class=" header-btn">
                    <p class="btn-img2"></p>
                    <a href="/">로그아웃</a>
                </div>
              
              
            </div>
        </div>
    </header>

</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

    },
    mounted() {
    }
}
</script>

<style scoped>
.topheader {
    background-color: var(--headergray);
    padding: 2px 30px;
}

.topheader p,
.topheader button {
    padding: 0.1% 0;
    color: var(--white);
    font-size: 1.4rem;
}

.header-btn {
    width: 50px;
    height: 50px;
    background-color: var(--white);
    border-radius: 5px;
    text-align: center;
    margin-left: 2%;
    padding: 3% 0;
    box-shadow: 1px 1px 5px #00000031;

}

.header-btn p {
    margin: 0 auto;
    width: 20px;
    height: 20px;
    background-size: contain;
}
</style>