<template>
    <div class="fullHeight">
        <div class="home_title flex">
            <div class="title_l flex">
                <img v-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="icon" />
                <span>{{$t('message.homeLayout.title')}}</span>
            </div>
            <div class="title_c flex_space_b">
                <div v-for="item in navigationList" :key="item.id">
                    <p :class="checked==item.id && 'checkedColor'" @click="()=>{checked = item.id}">{{item.name}}</p>
                    <p></p>
                </div>
            </div>
            <div class="title_r">
                <el-button class="login_btn" size='small' type='primary' @click="loginBtn">
                    {{$t('message.homeLayout.login')}}
                </el-button>
                <el-button class="signIn_btn" size='small' plain @click="signInBtn">
                    {{$t('message.homeLayout.register')}}
                </el-button>
            </div>
        </div>
        <!-- <div></div> -->
    </div>
</template>
<script>
    export default {
        name: 'Home',
        data() {
            return {
                navigationList: this.$t('message.homeLayout.navigationList')/*[
                    {name: '首页', id: 1},
                    {name: '产品', id: 2},
                    {name: '案例', id: 3},
                    {name: '服务', id: 4},
                    {name: '合作', id: 5},
                ]*/,
                checked: 1,
                LOGO_white:LOGO_white
            }
        },
        mounted() {
            
        },
        methods: {
            loginBtn() {
                this.$router.push({path: '/login'})
            },
            signInBtn() {
                // this.$router.push({path: '/sign'})
                this.$router.push({name: '注册'})
            }
        },
    }
</script>
<style lang="less" scoped>
    .flex {
        display: flex;
        align-items: center;
    }

    .flex_space_b {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .home_title {
        box-sizing: border-box;
        padding: 0 65px 0 23px;
        background: @--bg-color-primary;
        height: 61px;
    }

    .checkedColor {
        color: @--color-primary;
    }

    .title_l {
        flex-grow: 3;
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 0;

        .icon {
            margin-right: 14px;
            width: auto;
            height: 25px;
        }
    }

    .title_c {
        flex-grow: 6;
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #FEFFFF;
        letter-spacing: 0;
        cursor: pointer;
    }

    .title_r {
        flex-grow: 8;
        text-align: right;
    }

    .signIn_btn {
        background: none;
        border: 1px solid @--color-primary-deep;
        border-radius: 3px;
        color: #FFFFFF;
    }

    .signIn_btn:hover {
        background: none;
    }
</style>