setInterval在Vue2.0路由和@import导入css导致页面间css覆盖的bug修复

<template>
 <div id="app">
 <div class="imagboxMain" @mouseover="stopMove" @mouseout="moveOn"> 
<ul>
<li><img src="../img/banner0.jpg"/></li>
<li><img src="../img/banner1.jpg"/></li>
<li><img src="../img/banner2.jpg"/></li>
<li><img src="../img/banner3.jpg"/></li>
</ul>
</div>
<!--底部-->
<div class="footer">
<!--左边-->
<div class="left">
<!--左上-->
<div class="left_top">
<div class="left_one"></div>
<div class="left_two">
<img src="../img/index_38.jpg" />
</div>
<div class="left_three">
<ul> 
<li>&nbsp;&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;&nbsp;</li>
<li>&nbsp;&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;&nbsp;</li>
<li>&nbsp;&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;&nbsp;岁月杂志</li>
<li>&nbsp;&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;&nbsp;七宝酒业</li>
<li id="left_th">&nbsp;&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;&nbsp;筑浪网络</li>
</ul>
</div>
<!--左下-->
<div class="left_bottom">
<div class="left_bottom_top"></div>
<div class="left_bottom_mid">
<div class="username">
用户名 : <input type="text" name="use"/>
</br>
&nbsp;&nbsp;&nbsp;密码 : <input type="text" name="code"/>
</div>
<div class="go"></div>
   <!--忘记密码-->
    </div>
   <a href="">忘记密码</a>
       <a href="">新用户注册</a>
       </div>
   </div>
   </div>
<!--中间-->
<div class="mid">
<div class="mid_one"></div>
<div class="mid_two">
<img class="index_40" src="../img/index_40.jpg" />
<img class="index_42" src="../img/index_42.jpg" />
</div>
       <ul>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
       </ul>
       <div class="medio">
        <img class="medio_left" src="../img/index_61.jpg" />
        <img class="medio_right" src="../img/index_62.jpg" />
       </div>
</div>
<!--下面-->
<div class="right">
   <div class="right_one">
   </div>
<div class="right_two">
<img class="index_36" src="../img/p_36.jpg" />
<img class="index_42" src="../img/index_42.jpg" />
</div>

<div class="display_imag">
<div class="right_th">
<div class="right_three">
<img src="../img/s0911.gif" />
<img src="../img/s0912.gif" />
<img src="../img/s0922.gif" />
</div>

<div class="right_four">
<ul>
<li>&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;地产</li>
<li>&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;酒业</li>
<li>&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;传媒</li>
<li>&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;影业</li>
<li>&nbsp;<img src="../img/jiantou_54.jpg"/>&nbsp;餐饮</li>
</ul>
<img class="right-1" src="../img/index_68.jpg" />
</div>
      </div>
  </div>
</div>
 </div> 
 </div>
</template>
<script>  
export default{ 
 data(){
  return{ 
    timer: null
  };
 },
methods:{ 
stopMove:function(){
clearInterval(this.timer); 
},
moveOn:function(){
this.timer = setInterval(()=>{
let l = $(".imagboxMain ul")[0].offsetLeft;
      if(l==-2982){
       $(".imagboxMain ul").css('left', 0+'px');
      }else{
       $(".imagboxMain ul").css('left', l-994+'px');
      }
},1000);
} 

},

//由于setInterval函数属于全局对象window,此页面的定时器在路由页面，也会执行，采取钩子函数mounted运行定时器，beforeDestroy去除定时器

mounted:function(){ 

this.moveOn();  
},
beforeDestroy:function(){
        this.stopMove();
}

} 
</script>
<style scoped>
 /*@import url("../css/main-index.css");*/
.imagboxMain{
width: 994px;
height: 238px;
border: 3px solid #ccc;
 
margin: 10px auto; 
position: relative;
overflow: hidden;
}
.imagboxMain ul{
position: absolute;
width: 3976px;
height: 238px;
top: 0;
left: 0;
}
.imagboxMain ul li{
width: 994px;
height: 238px;
float: left;
}
.imagboxMain ul li img{
width: 100%;
height: 100%;
}


   
.footer{
width: 1000px;
height: 372px;
display: block;
margin: 0 auto;
border: 2px solid lightgrey;


}
.left{
width:270px;
height:370px;
display: block;
margin: 0 0 0 5px ;


float: left;
}


.left_top{
width:260px;
height:147px;
display: block;
margin: 0 0 0 5px ;
}


.left_one{
background-image: url(../img/index_37.jpg);
background-repeat: repeat;
width: 260px;
height: 2px;
}


.left_two{
width: 260px;
height:30px;
background-color:#e7e7e9 ;
}


.left_two img{
display: block;
margin-left: 10px;
}


.left_three{
width:260px ;
height: 115px;
background-image:url(../img/index_46.jpg);
/*overflow: hidden;*/
}
.left_three li{
border-bottom: 1px solid black;
line-height: 23px;
font-size: 13px;
text-align: 0 center;
}




#left_th{
border-bottom:none ;
}


.left_bottom{
width: 260px;
height: 130px;
  border:1px solid lightgrey;
border-radius: 5px;
display: block;
margin-top:10px;
}


.left_bottom_top{
width: 260px;
height: 31px;
background-image: url(../img/index_59.jpg);

}




.left_bottom_mid{
width: 260px;
height: 60px;
display: block;
margin: 0 auto ;
}
.username{
height: 60px;
font-size:12px ;
line-height: 2;
display: block;
float: left;
margin:6px 0 0 5px;
}
input{
width: 80px;
border: 1px solid black;}

.go{
width: 74px;
height:45px ;
background-image: url(../img/index_66.jpg);
  display: block;
  float: right;
  margin: 7.5px 10px;
}


/*为什么a标签自动靠右*/
.left_bottom a{
font-size:12px ;
color: black;
text-decoration: none;
}


.mid{
width: 365px;
height: 370px;
display: block;
margin-left:5px;
float: left;
}


.mid_one{
background-image: url(../img/index_37.jpg);
background-repeat: repeat;
width: 360px;
height: 2px;
}


.mid_two{
width: 360px;
height:30px;
background-color:#e7e7e9 ;
}


.index_40{
display: block;
margin-left: 10px;
float: left;
}

.index_42{
display: block;
float: right;
margin-right: 10px;
}


.mid li{
width: 360px;
height: 30px;
border-bottom: 2px dotted black;
}


.medio{
width: 360px;
height: 110px;
display: block;
margin: 0 auto;
}
.medio_left{
display: block;
float: left;
margin:10px 0 0 10px ;
}


.medio_right{
display: block;
float: right;
margin:10px 10px 0 0;
}


.right{
width: 320px;
height: 370px;
display: block;
float: left;
margin-left: 10px;
}
.right_one{
background-image: url(../img/index_37.jpg);
background-repeat: repeat;
width: 320px;
height: 2px;
}
.right_two{
width: 320px;
height:30px;
background-color:#e7e7e9 ;
}
.index_36{
display: block;
margin-left: 10px;
float: left;
}


.display_imag{
width:320px;
height:335px;
display: block;
margin: 0 auto;
}


.right_th{
width:320px;
height:320px;
display: block;
margin: 0 auto;
}


.right_three{
width:135px;
height:320px;
display: block;
float: left;
}


.right_three img{
display: block;
margin-top:10px ;
}


.right_four{
width:175px;
height:320px;
display: block;
float: left;
}


.right_four li{
line-height: 31px;
font-size: 14px;
text-align: 0 center;
background-image: url(../img/index_51.jpg);
background-repeat: no-repeat;
display: block;
margin-top:10px ;
}
.right-1{
display: block;
margin-top:20px ;
} 
</style>