129 lines
2.8 KiB
Vue
129 lines
2.8 KiB
Vue
<template>
|
|
<div class="header-wrap">
|
|
<div class="left-text">Smart construction site</div>
|
|
<div class="nav-list">
|
|
<div class="nav-item" :class="{'nav-active': pageIndex == 1}" @click="changeNav(1)">集团中心</div>
|
|
<div class="nav-item right-nav" :class="{'nav-active': pageIndex == 2}" >视频中心</div>
|
|
</div>
|
|
<div class="right-box">
|
|
<span>{{nowDate}}</span>
|
|
<div class="close-btn" @click="closeFn">
|
|
<img src="./../../../assets/images/bigScreen/icon-close.png">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment';
|
|
export default {
|
|
naem: "headers",
|
|
data(){
|
|
return{
|
|
pageIndex: 1,
|
|
nowDate: '',
|
|
timer: null
|
|
}
|
|
},
|
|
mounted(){
|
|
this.timer = setInterval(()=>{
|
|
let date = new Date()
|
|
this.nowDate = moment(date).format('YYYY年MM月DD日 HH:mm:ss')
|
|
},1000)
|
|
},
|
|
beforeDestroy(){
|
|
this.timer = null
|
|
},
|
|
methods: {
|
|
changeNav(val){
|
|
this.pageIndex = val
|
|
this.$emit('changeType', val)
|
|
},
|
|
closeFn(){
|
|
window.close();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.header-wrap{
|
|
width: 100%;
|
|
height: 50px;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
background: url("./../../../assets/images/bigScreen/header-bg.png") center no-repeat;
|
|
background-size: 100%;
|
|
.left-text{
|
|
color: #02FBE2;
|
|
position: absolute;
|
|
left: 48px;
|
|
line-height: 32px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
.nav-list{
|
|
color: #fff;
|
|
font-size: 16px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
height: 40px;
|
|
width: 35%;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.nav-item{
|
|
padding: 0 40px;
|
|
height: 40px;
|
|
line-height: 36px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.nav-active{
|
|
color: #02FBE2;
|
|
}
|
|
.nav-active::after{
|
|
content: "";
|
|
border-bottom: 1px dashed rgba(2, 251, 226, 1);
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 50%;
|
|
height: 11px;
|
|
display: block;
|
|
width: 73px;
|
|
transform: translateX(-50%);
|
|
background: linear-gradient(to top, rgba(2, 251, 226,0.7), rgba(2, 251, 226,0));
|
|
}
|
|
.right-box{
|
|
color: #02FBE2;
|
|
line-height: 32px;
|
|
font-size: 10px;
|
|
display: flex;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
span{
|
|
margin-right: 16px;
|
|
}
|
|
.close-btn{
|
|
margin-left: 70px;
|
|
margin-right: 12px;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 10px;
|
|
cursor: pointer;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |