<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);
}
},
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>
<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>