vue-简单实现一个tabs标签页，自定义样式！

<template>
	<div class="tabContent">
		<div class="tabs">
				<div class="tabs-header">
					<div class="tabs-nav" v-bind:class="{ 'tabs-nav-selected': activeTab === index }" v-for="(tab, index) in tabs" @click="handleTabClick(index)" :key="index">
						{
   
   { tab }}
					</div>
				</div>
				<div class="tabs-content">
						<div v-show="activeTab == 0">0</break-search></div>
						<div v-show="activeTab == 1">1</admin-unit></div>
						<div v-show="activeTab == 2">2</fault-type></div>
						<div v-show="activeTab == 3">3</device-rate></div>
						<div v-show="activeTab == 4">4</fault-detail></div>
				</div>
  	</div>

	</div>
</template>

<script>
  export default {
    data() {
      return {
			activeTab: 0,
      tabs: ['0', '1', '2','3','4'], 
      };
    },
    methods: {
			handleTabClick(index) {
				this.activeTab = index
			}
    }
  };
</script>

<style lang="scss" scoped>
.tabContent{
	width: 100%;
	background: #eff0f5;
  margin: 0 auto;
}
</style>
<style scoped>
.tabs {
  display: flex;
  flex-direction: column;
	padding: 1% 0.8%;
}

.tabs-header {
  display: flex;
  padding: 0.06rem 0 0 0.08rem;
	background: linear-gradient(to right, #3078eb, #01c0ff);
	border-radius: 7px 7px 0 0;
}

.tabs-nav {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
	font-size: 0.08rem;
	padding: 0.06rem 0.2rem;
  cursor: pointer;
	border-radius: 3px 3px 0 0;
	margin: 0 0.02rem;
	background-color: rgba(255, 255, 255, 0.6);
	color: #ffffff;
	font-weight: 700;
}

.tabs-nav-selected {
  background-color: #ffffff;
	color: #3078eb;
}

.tabs-content {
	width: 100%;
	height: 4rem;
	background: #ffffff;
  padding: 10px;
	color: black;
	border-radius:0 0 7px 7px ;
}

</style>