<template>
  <div id="app">
            <vheader></vheader>
            <el-container class="content">
                <el-row>
                  <el-col :span="21" ><div id="box" ref="box" class="grid-content bg-purple" v-on:mouseenter.native="enter" v-on:mouseleave.native="leave" >
                    <div class="newsitem" v-for="(item,i) in listImg" :key="this" >
                        <img :src="item.imgSrc" :alt="item.imgSrc" width="100%" height="100%">
                    </div>
                  </div>
                  </el-col>
                  <el-col :span="3"><div class="grid-content bg-purple-light">廠商推薦</div></el-col>
                </el-row>
            </el-container>
  </div>
</template>

<script>
import vheader from '@/components/vheader/vheader'
export default {
   components:{
    vheader
   },
   created(){
       let box = this.$refs.box;
       this.initswiper();
   },
   methods:{
       initswiper(){
           clearInterval(this.timer)
           this.timer=setInterval(()=>{
                var l=box.offsetLeft+10;
                if(l>=0){
                    l=-box.clientWidth/2;
                }
                box.style.left=l+"px";
            },500);
           },
     enter(){
         console.log(1111)
         clearInterval(this.timer);
     },
     leave(){
         console.log(222)
         this.initswiper()
     }
   },
   data(){
       return {
           timer:null,
           listImg:[
                {
                    imgSrc:'src/components/swiper/1.jpg',
                    text:"1111111"
                },
                {
                    imgSrc:'src/components/swiper/2.jpg',
                    text:"22222"

                },
                {
                    
                    imgSrc:'src/components/swiper/3.jpg',text:"3333333"
                },
                {
                    
                    imgSrc:'src/components/swiper/4.jpg',text:"44444444444"
                },
                {
                    imgSrc:'src/components/swiper/1.jpg',
                    text:"1111111"
                },
                {
                    imgSrc:'src/components/swiper/2.jpg',
                    text:"22222"

                },
                {
                    
                    imgSrc:'src/components/swiper/3.jpg',text:"3333333"
                },
                {
                    
                    imgSrc:'src/components/swiper/4.jpg',text:"44444444444"
                }
                ]
       }
   }
}
</script>

<style scoped>
    .content{
        height: 160px;
    }
    .el-row{
        width: 100%;
        height: 100%;
    }
    .el-col{
        height: 100%;
        padding: 10px;
        background: #666;
        position: relative;
        overflow: hidden;
    }
    .grid-content{
        width: 200%;
        position: absolute;
        height: 140px;
        left: 10px;
        top: 10px;
        overflow: hidden;
    }
    .newsitem{
        width: 12%!important;
        margin-right: 10px;
        float: left;
        overflow: hidden;
        margin-bottom: 10px;
        cursor: pointer;
    }
</style>