<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>
vue-简单实现一个tabs标签页,自定义样式!
猜你喜欢
转载自blog.csdn.net/qq_44890362/article/details/132036096
今日推荐
周排行