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>  <img src="../img/jiantou_54.jpg"/>  </li>
<li>  <img src="../img/jiantou_54.jpg"/>  </li>
<li>  <img src="../img/jiantou_54.jpg"/>  岁月杂志</li>
<li>  <img src="../img/jiantou_54.jpg"/>  七宝酒业</li>
<li id="left_th">  <img src="../img/jiantou_54.jpg"/>  筑浪网络</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>
   密码 : <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> <img src="../img/jiantou_54.jpg"/> 地产</li>
<li> <img src="../img/jiantou_54.jpg"/> 酒业</li>
<li> <img src="../img/jiantou_54.jpg"/> 传媒</li>
<li> <img src="../img/jiantou_54.jpg"/> 影业</li>
<li> <img src="../img/jiantou_54.jpg"/> 餐饮</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>