<template>
    <header>
        <section class="container clearfix">
            <div class="login-logo">
                <h1>
                    <router-link :to="toHome">JS transfer</router-link>
                </h1>
            </div>
            <div class="hd-right">
                <ul>
                    <li>
                        <router-link to="/help" target="_blank">帮助中心</router-link>
                    </li>
                    <li v-if="routerPath == 'register'" class="to-login">
                        已有账号？
                        <router-link to="/login">立即登录</router-link>
                    </li>
                    <li v-if="routerPath == 'forget'" class="to-login">
                        返回
                        <router-link to="/login">登录</router-link>
                    </li>
                </ul>
            </div>
        </section>
    </header>
</template>

<script>
export default {
    name: "loginHeader",
    data() {
        return {
            routerPath: "",
            toHome: "/"
        };
    },
    created() {
        this.routerPath = this.$route.name;
        if (this.routerPath === "kyc") {
            this.toHome = "/account";
        } else {
            this.toHome = "/";
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../../assets/styles/common.css";
header {
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    background: #fff;
    width: 100%;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08);
    .container {
        width: 1080px;
        margin: 0 auto;
    }
    .login-logo {
        float: left;
        display: block;
        width: 326px;
        height: 36px;
        margin: 12px 0;
        background-image: url(~assets/images/logo.png);
        background-size: 326px 36px;
        background-repeat: no-repeat;
        background-position: 50%;
        text-indent: -9999px;
        h1 {
            margin: 0;
        }
        a {
            display: block;
            height: 36px;
            line-height: 36px;
            width: 326px;
        }
    }
    .hd-right {
        float: right;
        li {
            float: left;
        }
        a {
            font-size: 18px;
        }
        .to-login {
            margin-left: 20px;
            a {
                font-size: 14px;
                color: #3d86e9;
            }
        }
    }
}
</style>
