<template>
<div class="smart_nav" :class="{'fixedTop':fixedTop}">
<!--<div class="smart_nav" :style="{'position':fixedHeight,'top':'top','zIndex':'zIndex'}">-->
<ul class="smart_nav_con">
<li class="fl smart_nav_right" :class="colorHover==0?'smart_index':'a_white'"><a class="white a_color" href="#smart_summarize" @mouseenter="spanHover(0)">产品概述</a></li>
<li class="fl smart_nav_right" :class="colorHover==1?'smart_index':'a_white'"><a href="#smart_advance" @mouseenter="spanHover(1)">产品优势</a></li>
<li class="fl smart_nav_right" :class="colorHover==2?'smart_index':'a_white'"><a href="#smart_help" @mouseenter="spanHover(2)">帮助文档</a></li>
<li class="fl" :class="colorHover==3?'smart_index':'a_white'"><a href="#smart_example" @mouseenter="spanHover(3)">客户案例</a></li>
<li class="span" :style="{'left':left}"></li>
</ul>
</div>
</template>
<script>
export default{
data(){
return{
left:0,
colorHover:0,
fixedTop:false,
// fixedHeight:'relative',
// top:0,
// zIndex:'0'
}
},
components:{
websiteHead,
websiteFoot,
goTop
},
methods:{
spanHover:function(index){
this.left = index *300 +'px';
this.colorHover=index;
},
needScroll:function(){
let scrollt=document.documentElement.scrollTop+document.body.scrollTop;
//console.log(scrollt)
if(scrollt>595){
this.fixedTop=true
}else{
this.fixedTop=false
}
// if(scrollt>595){
// this.fixedHeight='fixed';
// this.top=0;
// this.zIndex=10
// }else{
// this.fixedHeight='relative';
// this.top=0;
// this.zIndex=0
// }
}
}
,mounted(){
window.addEventListener('scroll', this.needScroll); //滚动事件监听
}
}
</script>
<style>
.smart_nav{
width:100%;
height:54px;
background:#414b5a;
position:relative;
}
.smart_nav_con{
width:1200px;
height:54px;
margin:0 auto;
font-size:14px;
color:#fff;
position: relative;
}
.smart_nav_con li{
width:300px;
text-align: center;
line-height:54px;
}
.smart_nav_con .smart_index .a_white{
color:#fff;
}
.smart_nav_con .smart_index .a_color{
color:#00a0e9;
}
.smart_nav_con li a{
color:#fff;
}
.smart_nav_con .smart_index a{
color:#00a0e9;
}
.smart_nav_con li{
line-height:54px;
}
/*蓝线*/
.smart_nav_con .span{
position:absolute;
bottom:0;
display:block;
width:36px;
border-bottom: 4px solid #00A0E9;
margin-left:128px;
transition:all 0.5s;
}
/*定位的样式*/
.fixedTop{
position: fixed;
left: 0;
top: 0;
z-index:2;
}
</style>
