<template> <div class="container"> <div class="tabBox"> <div v-for="(item, index) in tabList" :key="index" class="tab" :class="{ active: index === activeIndex }" @click="activeIndex = index" > {{ item.label }} </div> </div> </div> </template> <script> export default { data() { return { activeIndex: 0, tabList: [ { label: "精选好物", }, { label: "炫酷动漫", }, { label: "贺岁影院", }, ], }; }, }; </script> <style lang="scss" scoped> .tabBox { display: flex; justify-content: space-evenly; height: 100px; line-height: 90px; margin: 0 20px; font-size: 28px; border-radius: 10px; box-shadow: 0 4px 5px rgba(200, 200, 200, 0.3); color: #333; background-color: #fff; position: relative; z-index: 9; .tab { margin: 0 20px; position: relative; cursor: pointer; } .active { &::after { content: ""; width: 40px; height: 4px; transform: translate(-50%); background-color: #27ba9b; position: absolute; left: 50%; bottom: 24px; } } } .container { margin: 30px; } </style>