<template>
<div class="order">
<div class="order-tabs">
<ul class="clearfix">
<li v-for="(item,index) in tabsList" @click="onAddClass(index)" :class="{'order-active':index==orderNum}">{{item.name}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'order',
data() {
return {
tabsList:[
{name:'全部',num:0},
{name:'待付款',num:1},
{name:'待使用',num:2},
{name:'待评价',num:3},
{name:'退款',num:4},
],
orderNum:0
}
},
methods:{
onAddClass(i){
this.orderNum = i;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.order-active{
border-bottom: 3px solid #1e8beb;
color: #1e8beb;
}
@import '../../common/css/center/order';
</style>