<template>
<div class="container">
<div class="primary">
<div
class="item"
v-for="(item, index) in categoryList"
:key="item.id"
:class="{ active: index === activeIndex }"
@click="activeIndex = index"
>
{{ item.label }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: 0,
categoryList: [
{
label: "精选好物",
},
{
label: "炫酷动漫",
},
{
label: "贺岁影院",
},
],
};
},
};
</script>
<style lang="scss" scoped>
.primary {
overflow: hidden;
width: 180px;
flex: none;
background-color: #f6f6f6;
.item {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 96px;
font-size: 26px;
color: #595c63;
position: relative;
&::after {
content: "";
position: absolute;
left: 42px;
bottom: 0;
width: 96px;
border-top: 1px solid #e3e4e7;
}
}
.active {
background-color: #fff;
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 8px;
height: 100%;
background-color: #27ba9b;
}
}
}
// 移除最后一项和高亮项的灰色线条
.primary .item:last-child::after,
.primary .active::after {
display: none;
}
.container {
margin: 30px;
}
</style>