hbt-training-ui/src/components/header.component.vue

<template>
<div class="header-box">
    <div class="logo">
      <img src="~@/assets/img/logo.png" alt="">
      <div>{{currentPage.label}}</div>
    </div>
    <div class="nav-box" :style="{width:currentPage.children.length<=5?currentPage.children.length*180+'px':5*180+'px'}" v-if="currentPage.children.length>1" @mouseenter="showArrow=true" @mouseleave="showArrow=false">
        <div class="arrow left el-icon-caret-left" v-if="currentPage.children.length>5 && navLeft<0 && showArrow" @click.stop="moveNav(false)"></div>
        <div class="arrow right el-icon-caret-right"  v-if="currentPage.children.length>5 && navLeft > -180 * (currentPage.children.length-5) && showArrow" @click.stop="moveNav(true)"></div>
        <div class="nav-block" ref="navList">
            <div class="nav-btn" :class="{active:item.value === currentNav}" v-for="(item,index) in currentPage.children" :key="index">
                <span  @click="selectNav(item)">{{item.label}}</span>
            </div>

        </div>
    </div>
    <div class="info-box">
        <div class="info-block action-box">
            <hbt-svg name="hide" v-if="showContent" @click="toggleDrawer"></hbt-svg>
            <hbt-svg name="show" v-else  @click="toggleDrawer"></hbt-svg>
            <hbt-svg name="fullScreen" @click="fullScreen"></hbt-svg>
        </div>
        <div class="info-block">
            <hbt-svg name="speed"></hbt-svg>
            <span>多云</span>
            <span>21℃</span>
        </div>
        <div class="info-block">
            <hbt-svg name="speed"></hbt-svg>
            <span>5m/s</span>
        </div>
        <div class="info-block time-box">
            {{currentTime}}
        </div>
        <div class="info-block date-box">
            <p>{{weekForMart[currentWeek]}}</p>
            <p>{{currentDate}}</p>
        </div>
    </div>
</div>

</template>
<script lang="ts">
import {Component,Emit,PropSync,Vue} from 'vue-property-decorator';
import moment from "moment"
import pageListData from "@/mock/nav"
import screenfull from 'screenfull'
@Component
export default class HeaderComponent extends Vue {
    public currentTime = moment().format("HH:mm:ss");
    public currentDate = moment().format("YYYY.MM.DD");
    public currentWeek = moment().isoWeekday();
    public weekForMart  = ["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
    public timer;
    public showPageList = false;
    public pageList = pageListData;
    public currentPage = JSON.parse(localStorage.getItem("currentPage") as any) || this.pageList[0];
    public currentNav = localStorage.getItem("currentNav") || this.currentPage.children[0].value;
    public showArrow = false;

    public showContent = true;

    public navLeft = 0;


    @Emit("onNavChanged")
    public navChange(){
        //
        return this.currentNav
    }
    @Emit("onDrawer")
    public drawerChange(){
        return this.showContent
    }

    public fullScreen(){
        screenfull.toggle()
    }

    public toggleDrawer(){
        this.showContent = !this.showContent;
        this.drawerChange()
    }

    public togglePageList(){
        this.showPageList = !this.showPageList;
    }
    public selectPage(data){
        this.currentPage = data;
        localStorage.setItem("currentPage",JSON.stringify(data))
        this.currentNav = data.value;
        localStorage.setItem("currentNav",data.value)
        this.navChange()
        this.showPageList = false;
        this.navLeft = 0;
        const el = this.$refs.navList as any;
        if(el){
         el.style.left = 0;
        }
    }

    public selectNav(data){
        this.currentNav = data.value;
        localStorage.setItem("currentNav",data.value)
        this.navChange()
    }

    public moveNav(isAfter:boolean){
        const el = this.$refs.navList as any;
        if(isAfter){
            el.style.left = (this.navLeft - 180) + "px";
            this.navLeft = this.navLeft - 180;
        }else{
            el.style.left = (this.navLeft + 180) + "px";
            this.navLeft = this.navLeft + 180;
        }
    }
    created(){
        this.timer = setInterval(()=>{
            this.currentTime = moment().format("HH:mm:ss")
            this.currentDate = moment().format("YYYY.MM.DD")
            this.currentWeek = moment().isoWeekday();
        },1000)
    }

    mounted(){
        this.navChange()
    }
    beforeDestory(){
        clearInterval(this.timer);
        this.timer = null;
        localStorage.removeItem("currentPage")
        localStorage.removeItem("currentNav")
    }

}
</script>
<style lang="scss" scoped>
.header-box{
    width: 100%;
    height: 60px;
    display: flex;
    padding: 0 50px;
    justify-content: space-between;
    pointer-events: auto;
    white-space: nowrap;
    flex-wrap: wrap;
    .logo{
         font-family: "Microsoft Yahei",serif;
        //font-family: "logo";
        font-size: 28px;
        height: 28px;
        line-height: 100%;
        display: flex;
        align-self: center;
       img{
         position: relative;
         top: 3px;
         margin-right: 10px;
       }
    }
    .nav-box{
        width: 900px;
        margin-top: 12px;
        height: 40px;
        justify-self: center;
        position: relative;
        overflow: hidden;
        .arrow{
            position: absolute;
            font-size: 26px;
            cursor: pointer;
            left:-0;
            top: 0;
            z-index: 10;
            &.right{
                left:auto;
                right: -0;
            }

        }
        .nav-block{
            display: inline-flex;
            position: relative;
        }
        .nav-btn{
            width: 180px;
            text-align: center;
            font-size: 24px;
            line-height: 100%;
            height: 24px;
            white-space: nowrap;
            position: relative;
            cursor: pointer;
            &.active{
                color:#7FB0FF
            }
            &.active::before,&:hover::after{
                width: 100%;
                height: 3px;
                content: "";
                position: absolute;
                left: 0;
                bottom: -14px;
                background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 47%, rgba(255,255,255,0) 100%);
                border-radius: 0px 0px 0px 0px;
            }

        }


    }
    .info-box{
        display: inline-flex;
        margin-top: 10px;
        font-size: 14px;
        align-items: center;
        height: 33px;
        .info-block{
            margin-left: 15px;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            &:first-child{
                margin-left: 0;
            }
            span{
                padding-right: 5px;
            }
            &.action-box{
                svg{
                    margin-left: 15px;
                    margin-right: 0;
                    cursor: pointer;
                    &:first-child{
                        margin-left: 0;
                    }
                    &:hover{
                        color:#7FB0FF
                    }
                }
            }
            &.time-box{
                font-family: number;
                font-size: 26px;
            }
            &.date-box{
                width: 80px;
                flex-wrap: wrap;
                font-size: 15px;
                p{
                    font-family: number;
                    width: 100%;
                    line-height: 16px;
                    &:first-child{
                        font-size: 12px;
                    }
                }
            }
        }
        svg{
            display: inline-flex;
            font-size: 20px;
            margin-right: 5px;
        }
    }
}
</style>