默认:
在type="card"基础上修改elementui原有样式
<!-- tab页 -->
<template>
<div class="asset-detail-tabs">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="基本信息" name="1">
<!-- <img width="1340px" src="../../../public/images/a1 (3).png" alt=""> -->
</el-tab-pane>
<el-tab-pane label="字段详情" name="2">
<!-- <img width="1340px" src="../../../public/images/a1 (1).png" alt=""> -->
</el-tab-pane>
<el-tab-pane label="数据样例" name="3">
<!-- <img width="1340px" src="../../../public/images/a1 (4).png" alt=""> -->
</el-tab-pane>
<el-tab-pane label="数据质量" name="4">
<!-- <img width="1340px" @click="changeShow" v-if="!show" src="../../../public/images/a1 (2).png" alt=""> -->
<!-- <img @click="changeShow" v-if="show" src="../../../public/images/a1 (5).png" alt=""> -->
</el-tab-pane>
<el-tab-pane label="数据血缘" name="5">
<!-- <img width="1340px" src="../../../public/images/dd.png" alt=""> -->
</el-tab-pane>
<el-tab-pane label="数据指标" name="6">
<!-- <img width="1340px" src="../../../public/images/dd.png" alt=""> -->
</el-tab-pane>
<el-tab-pane label="数据报表" name="7">
<!-- <img width="1340px" src="../../../public/images/dd.png" alt=""> -->
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeName: '1'
}
},
}
</script>
<style>
.asset-detail-tabs {
min-height: 400px;
margin: 20px 0px;
background-color: #fff;
//修改tab-item样式
>>> .el-tabs__item {
width: 166px;
height: 47px;
line-height: 47px;
text-align: center;
font-size: 16px;
font-weight: bold;
}
// 修改nav背景色
>>>.el-tabs__nav-scroll {
background-color: #ECEEF3;
}
//去除顶部线
>>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: none;
}
//内容区
>>> .el-tabs__content {
padding: 10px;
}
//选中时样式设置
>>> .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
background-color: rgba(255, 255, 255, 100);
color: rgba(97, 154, 241, 100);
}
}
</style>