<template>
<div class="tab">
<div class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'active':index == activeIndex}" @click="changeTab(index)">
<div class="item">
{{item.title}}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'tabIndex',
props: {
tabList: {
type: Array,
default: () => [{
title: '已完成',
},
{
title: '未完成',
},
{
title: '已结束',
},
]
}
},
data() {
return {
activeIndex: 0,
}
},
methods: {
changeTab(index) {
this.activeIndex = index;
this.$emit('click', index);
}
},
}
</script>
<style lang="scss" scoped>
.tab {
display: flex;
justify-content: space-around;
.tab-item {
background-color: #eee;
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0 10px;
border-radius: 10px 10px 0 0;
position: relative;
transform: perspective(30px) rotateX(10deg);
.item {
transform: perspective(30px) rotateX(-10deg);
margin-top: 5px;
}
}
$w:30px;
$w1:29px;
$actColor:#0056f5;
.tab-item::after,
.tab-item::before {
position: absolute;
content: '';
width: $w;
height: $w;
bottom: 0;
background-color: #eee;
border: none;
}
.tab-item::after {
right: -$w1;
background: radial-gradient(circle at 100% 0, transparent $w, #eee $w);
}
.tab-item::before {
left: -$w;
background: radial-gradient(circle at 0 0, transparent $w, #eee $w);
}
.active {
z-index: 10;
&::after {
background: radial-gradient(circle at 100% 0, transparent $w, $actColor $w);
}
&::before {
background: radial-gradient(circle at 0 0, transparent $w, $actColor $w);
}
background-color: $actColor;
color: #fff;
}
}
</style>
