<template>
    <div class="header">
        <div class="logo-all">
            <img class="logo" src="../../assets/logo/logo.png">
            <span class="HeaderWord">HelloGithub</span>
        </div>

        <el-menu :default-active="$route.path" class="el-menu" mode="horizontal"
                 active-text-color="#42b983"
                 router>
            <el-menu-item class="menu-item" index="/home"><i class="el-icon-s-home" style="color: #13ce66"></i>首 页</el-menu-item>
            <el-menu-item class="menu-item" index="/monthly"><i class="el-icon-s-claim" style="color: #00b2ff"></i>月 刊</el-menu-item>
            <el-menu-item class="menu-item" index="/ranking"><i class="el-icon-trophy" style="color: #ffca00"></i>榜 单
            </el-menu-item>
            <el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
        </el-menu>
        <SearchInput class="HeaderInput"></SearchInput>
        <el-button v-if="this.$route.path!=='/paper'" class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
        <el-button v-if="this.$route.path ==='/paper'" class="HeaderSubmitBtn" type="primary" round icon="el-icon-edit">发布文章</el-button>
    </div>
</template>

<script>
import SearchInput from "@/components/Home/SearchInput.vue";

export default {
    name: "HeaderComponent",
    components: {SearchInput},
    data() {
        return {}
    }
}
</script>

<style scoped>
/*适用于小屏幕，手持设备*/
/*@media(orientation: portrait){*/
/*    .logo-all {*/
/*        height: 20px;*/
/*        width: 10vw;*/
/*        display: flex;*/
/*        align-items: center;*/
/*        background-color: #ff4949;*/
/*        margin-left:1vw;*/
/*    }*/
/*    .logo {*/
/*        width: 20px;*/
/*        height: 20px;*/
/*        border-radius: 6px;*/
/*    }*/
/*    .HeaderWord{*/
/*        cursor: pointer;*/
/*        margin-left: 5px;*/
/*        font-size: 80%;*/
/*        font-weight: bold;*/
/*        font-family:'楷体';*/
/*    }*/
/*    .header {*/
/*        display: flex;*/
/*        flex-direction: row;*/
/*        align-items: center;*/
/*        !*justify-content: space-evenly;*!*/
/*    }*/
/*    .el-menu {*/
/*        font-weight: bold;*/
/*        font-size: 5px;*/
/*        display: flex;*/
/*        justify-content: space-evenly;*/
/*        width: 10vw;*/
/*    }*/
/*    .menu-item {*/
/*        width: 2vw;*/
/*        font-size:2px;*/
/*    }*/
/*    .HeaderInput{*/
/*        width:15vw;*/
/*        font-size:1px;*/
/*    }*/
/*    .HeaderSubmitBtn{*/

/*    }*/
/*}*/

@media(orientation: landscape){
    .logo-all {
        height: 60px;
        width: 12vw;
        display: flex;
        align-items: center;
    }
    .logo {
        width: 30px;
        height: 30px;
        border-radius: 50px;
    }
    .HeaderWord{
        cursor: pointer;
        margin-left: 5px;
        font-size: 150%;
        font-weight: bold;
        font-family:'楷体';
    }
    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }
    .el-menu {
        font-weight: bold;
        font-size: 18px;
        display: flex;
        justify-content: space-evenly;
        width: 30vw;
    }
    .menu-item {
        width: 6vw;
    }
}

</style>