123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- <template>
- <div class="header-container" :class="{'offset':isOffset||fixTop}">
- <div class="inner-container">
- <img class="brand" :src="isOffset?require('../assets/logo-rev.png'):require('../assets/mainLogo.png')"/>
- <ul class="header-tab">
- <li class="header-tab-item" :class="{'active':$route.path==='/index'}" @click="$router.push('/index')">首页</li>
- <li class="header-tab-item" :class="{'active':$route.path==='/proxy-apply'} " @click="$router.push('/proxy-apply')"><i class="badge">HOT</i>申请代理</li>
- </ul>
- <div class="log-box" v-if="!isLogin">
- <p class="register">注册</p>
- <p class="divider">|</p>
- <p class="login">登录</p>
- </div>
- <div class="logged-box" v-else>
- <div class="username"><i class="iconfont icon"></i> {{loginAccount}} </div>
- <div class="logout"><i class="iconfont icon"></i>退出</div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "headerComponent",
- props:['fixTop','isLogin','loginAccount'],
- data(){
- return{
- isTopped:this.fixTop,
- isOffset:false,
- }
- },
- mounted(){
- this.isOffset=this.isTopped||false;
- if(this.isTopped){
- return;
- }
- window.addEventListener('scroll',this.scrollListener)
- },
- methods:{
- scrollListener(e){
- this.isOffset=!!window.pageYOffset;
- // console.log(window.pageYOffset);
- }
- }
- }
- </script>
- <style scoped lang="less">
- @import "../assets/less/_variable.less";
- .header-container{
- transition: all 0.25s ease;
- position: fixed;
- width: 100%;
- height: 80px;
- background-color: rgba(0, 0, 0, 0.2);
- z-index: 9;
- &.topped{
- position: relative!important;
- }
- }
- .badge{
- position: absolute;
- background-color: #ff4e00;
- color: #fff;
- display: block;
- width: 38px;
- height: 18px;
- line-height: 18px;
- font-size: 12px;
- border-radius: 2px;
- top: 8px;
- right: 0;
- &:after{
- content: "";
- width: 0;
- height: 0;
- position: absolute;
- /*z-index: -1;*/
- bottom: 0;
- left: 30%;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 14px solid #ff4e00;
- margin-bottom: -8px;
- transform: rotate(30deg);
- }
- }
- .inner-container{
- position: relative;
- width: 1200px;
- margin: 0 auto;
- display: flex;
- flex-direction: row;
- & .logged-box{
- position: absolute;
- right: 0;
- top:0;
- /*float: right;*/
- color:white;
- display: flex;
- align-items: center;
- height: 80px;
- font-size: 14px;
- & .icon{
- font-size: 20px;
- color: #999;
- padding-right: 5px;
- }
- & .username{
- margin-right: 10px;
- }
- & .logout{
- cursor: pointer;
- }
- }
- & .log-box{
- position: absolute;
- right: 0;
- top:0;
- /*float: right;*/
- color:white;
- display: flex;
- width: 84px;
- align-items: center;
- height: 80px;
- font-size: 14px;
- & .register{
- color: #008be0;
- }
- & .divider{
- color:#3290cf;
- margin: 0 5px;
- }
- }
- & .brand{
- position: absolute;
- width: 100px;
- height: 33px;
- top: 50%;
- transform: translateY(-50%);
- }
- & .header-tab{
- margin-left: 135px;
- display: flex;
- flex-direction: row;
- & .header-tab-item{
- position: relative;
- font-size: 14px;
- width: 100px;
- height: 80px;
- line-height: 80px;
- cursor: pointer;
- color: white;
- &.active{
- color: @primaryBlue;
- background-color: white;
- }
- }
- }
- }
- .header-container.offset{
- & .logged-box{
- color:black;
- }
- background-color: white;
- & .header-tab .header-tab-item {
- color: black;
- &.active {
- background-color: @primaryBlue;
- color: white;
- }
- }
- }
- </style>
|