You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.5 KiB
69 lines
1.5 KiB
1 year ago
|
<template>
|
||
|
|
<ElTabs type="card" v-bind="$attrs" class="CardTabs" v-on="$listeners">
|
||
|
|
<ElTabPane :label="item.label" :name="item.key" :index="item.key" v-for="item in panels" :key="item.key" />
|
||
|
|
</ElTabs>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'CardTabs',
|
||
|
|
props: {
|
||
|
|
/**
|
||
|
|
* {key: string; label: string; disabled?: boolean;}[]
|
||
|
|
*/
|
||
|
|
panels: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.CardTabs {
|
||
|
|
::v-deep {
|
||
|
|
.el-tabs__header {
|
||
|
|
margin: 0;
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
.el-tabs__nav-wrap {
|
||
|
|
border-top: 1px solid #016D90;
|
||
|
|
border-bottom: 1px solid #016D90;
|
||
|
|
background-color: rgba(19, 39, 47, 0.3);
|
||
|
|
|
||
|
|
.el-tabs__nav {
|
||
|
|
border-radius: 0;
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
.el-tabs__item {
|
||
|
|
height: 34px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #FFFFFF;
|
||
|
|
line-height: 30px;
|
||
|
|
border: 0;
|
||
|
|
border-right: 1px solid #016D90;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
border-left: 1px solid #016D90;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-active {
|
||
|
|
background: #133242 linear-gradient(180deg, #005C79 0%, #009BCC 100%);
|
||
|
|
color: #fff !important;
|
||
|
|
border-right: 0;
|
||
|
|
border-left: 0;
|
||
|
|
|
||
|
|
// &+.el-tabs__item {
|
||
|
|
// border-right: 0;
|
||
|
|
// border-left: 0;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|