<template>
  
      <div class="feed-tab-wrapper ">
          <ul class="feed-tab">
              <li   :class="{active:active==index?'active':'',active1:active1==index?'active1':''}" label="精选 猜你喜欢" @click="active=index" @mouseenter="active1=index" @mouseleave="active1=null" aria-selected="true" v-for="(item,index) in tabs" :key="index">
                    <div class="feed-tab__item-title">
                      <span class="feed-tab__item-title-text">{{item.jingxuan}}</span>
                    </div>
                    <div class="feed-tab__item-desc">{{item.cainixihuan}}</div>
                    <div class="feed-tab__item-gap" v-if='xiaoshi!=index'  ></div>
                </li>
              
            </ul>
        </div>
  
</template>

<script>
export default {
    name:'tuijian',
    data(){
        return{
            xiaoshi:5,
            active:0,
            active1:null,
            
            tabs:[
                {
                jingxuan:'精选',
                cainixihuan:'猜你喜欢',
                },
                {
                jingxuan:'智能先锋',
                cainixihuan:'大电器城',
                },
                {
                jingxuan:'居家优品',
                cainixihuan:'品质生活',
                },
                {
                jingxuan:'超市百货',
                cainixihuan:'百货生鲜',
                },
                {
                jingxuan:'时尚达人',
                cainixihuan:'美妆穿搭',
                },
                {
                jingxuan:'进口好物',
                cainixihuan:'京东国际',
                },
                
            ],
            
            
        }
    },
    methods:{
        
        
    },
    mounted:{
        // if(this.xiangtong == 'active'){
        //     active1=null;
        // }
    }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.feed-tab-wrapper {
    background: #fff;
    margin: 0 auto ;
    
    /* position: relative; */
    /* top: 70px;
    left: 12.5%; */
    width:74% ;
    padding-top: 10px;
}
.feed-tab-wrapper .feed-tab {
    height: 60px;
    margin-left: 12px;
   
}
 .feed-tab-wrapper li {
    list-style: none;
}
 .feed-tab-wrapper li {
    position: relative;
    float: left;
    width: 150px;
    height: 60px;
    text-align: center;
    cursor: pointer;
}
.active .feed-tab__item-title-text {
    background: #e1251b;
    color: #fff!important;
    width: 70px;
    height: 27px;
    display: inline-block;
    border-radius: 50px;
    padding: 0 5px;
}
.active .feed-tab__item-desc {
    color: #e1251b;
}
.active1 .feed-tab__item-desc {
    color: #e1251b;
}
.active1 .feed-tab__item-title-text {
    color: #e1251b;
}
.feed-tab__item-desc {
    color: #999;
    font-size: 14px;
}
.feed-tab__item-title {
    color: #333;
    font-size: 16px;
    font-weight: 700;
    line-height: 27px;
}
.feed-tab__item-gap {
    position: absolute;
    right: 0;
    top: 0;
    height: 40px;
    margin: 10px 0;
    width: 1px;
    background: #dfdfdf;
   
}

</style>