121 lines
3.3 KiB
Vue
121 lines
3.3 KiB
Vue
<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> |