<!-- 内容index界面 -->
<template>
<div class="feature-content">
<div class="tabs">
<Tabs @on-click="chooseContentTab">
<TabPane label="1用户" name="registeredMember"></TabPane>
<TabPane label="2用户" name="happyMember"></TabPane>
<TabPane label="3访问" name="totalNumber"></TabPane>
<TabPane label="4平台" name="accessPlatform"></TabPane>
</Tabs>
</div>
<div class="content-wrapper">
<component :is="showComponents"></component>
</div>
</div>
</template>
<script>
import registeredMember from '@/components/tabs/othertab/registeredMember'
import happyMember from '@/components/tabs/othertab/happyMember'
import totalNumber from '@/components/tabs/othertab/totalNumber'
import accessPlatform from '@/components/tabs/othertab/accessPlatform'
export default {
data() {
return {
showComponents: "registeredMember",
chooseTabValue: "registeredMember" // 默认选中的Tab值
};
},
methods: {
chooseContentTab(name) {
this.chooseTabValue = name;
this.showComponents = name;
}
},
components: {
registeredMember,
happyMember,
totalNumber,
accessPlatform,
agriculture,
occupation
}
};
</script>
<style lang="less">
.feature-content {
padding: 0.5em 2em;
height: 100%;
display: flex;
flex-direction: column;
.ivu-tabs-ink-bar{
background-color:transparent;
background: url('../../assets/tab_selected.png') no-repeat;
background-size: 100% 100%;
height: 100%;
}
.tabs {
height: 20%;
.ivu-tabs-nav .ivu-tabs-tab-active{
color: #fff;
}
.ivu-tabs-bar {
margin-bottom: 0;
border: 0;
color: #fff;
.ivu-tabs-nav-wrap {
margin: 0;
}
.ivu-tabs-nav .ivu-tabs-tab {
font-size: 1em;
width: 15%;
height: 40px;
background: rgba(42, 60, 111, 0.4);
border-radius: 0px 0px 10px 10px;
}
}
}
.content-wrapper {
height: 74%;
margin-top: 1%;
flex: 1;
}
}
</style>