sport_pc/.svn/pristine/c1/c1323fb180fdc71941b7838693111301158a2016.svn-base

<template>
	<div id="NavSlide" class=" row allAlignment center">
        <div class="nav-div">
            <nav>
                <div class="column center img-div " v-for="(item,$index) in arr" :key="item.id"  @click="toggle($index)">
                    <img v-if="active != $index " class="img-box" :src="item.url" >
                    <img v-if="active == $index " class="img-box" :src="item.url1" >
                    <span :class="{active:$index==active}">{{item.titel}}</span>
                </div>
            </nav>
        </div>
	</div>
</template>
<script>
import '../css/index.css';
	export default {
        name:'ActivitySlider',
		data(){
			return {
                active:0,
                arr:[
                  {
                     url:require('../assets/st-imges/football.png'),
                     url1:require('../assets/st-imges/footballChoose.png'),
                     titel:'足球',
                     id:'0',
                  },
                  {
                     url:require('../assets/st-imges/basketball.png'),
                     url1:require('../assets/st-imges/basketballChoose.png'),
                     titel:'篮球',
                     id:'1',
                  },
                  {
                     url:require('../assets/st-imges/tennis.png'),
                     url1:require('../assets/st-imges/tennisChoose.png'),
                     titel:'棒球',
                     id:'2',
                  },
                  {
                     url:require('../assets/st-imges/baseball.png'),
                     url1:require('../assets/st-imges/baseballChoose.png'),
                     titel:'网球',
                     id:'3',
                  },
                ],
            }
		},
		methods:{
                toggle:function(index){
					//激活样式
					this.active=index;
					console.log(index)
                }
        }
	}


</script>

<style>
	
#NavSlide{
   padding: 0 0.3rem;
   height: 1.50rem;
   background: #F8F8F8;
}
.nav-div{
  width: 6.28rem;
}
.img-icon{
    width: 0.24rem;
    height: 0.4rem;
}
.img-box{
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 0.30rem;
    
}
.img-div{
    height:1.50rem;
}
#NavSlide nav{
    /* padding: 0 0.43rem; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: middle;
    -ms-flex-align: middle;
    align-items: middle;
    overflow-x: auto;
    background-color: #F8F8F8;
    -webkit-overflow-scrolling: touch;
    
}
#NavSlide div{
    text-align: center;
    font-size: 0.16rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    /* padding:0 0.1rem;
    margin:0 0.05rem; */
    color: #000000;

}
span.active{
    color: #FD8F26;
}
</style>