59 lines
1.8 KiB
Vue
59 lines
1.8 KiB
Vue
<style>
|
|
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
|
|
height: 120px;
|
|
margin-top: -16px;
|
|
}
|
|
|
|
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
|
|
background: #fff;
|
|
padding: 16px;
|
|
}
|
|
|
|
.demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
|
|
border-color: #fff;
|
|
}
|
|
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
|
|
border-radius: 0;
|
|
background: #fff;
|
|
}
|
|
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
|
|
border-top: 1px solid #3399ff;
|
|
}
|
|
.demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #3399ff;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
<template>
|
|
<Row :gutter="32">
|
|
<i-col span="12" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;">
|
|
<Tabs type="card">
|
|
<Tab-pane label="标签一">标签一的内容</Tab-pane>
|
|
<Tab-pane label="标签二">标签二的内容</Tab-pane>
|
|
<Tab-pane label="标签三">标签三的内容</Tab-pane>
|
|
</Tabs>
|
|
</i-col>
|
|
<i-col span="12" class="demo-tabs-style2">
|
|
<Tabs type="card">
|
|
<Tab-pane label="标签一">标签一的内容</Tab-pane>
|
|
<Tab-pane label="标签二">标签二的内容</Tab-pane>
|
|
<Tab-pane label="标签三">标签三的内容</Tab-pane>
|
|
</Tabs>
|
|
</i-col>
|
|
</Row>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
|
|
}
|
|
</script>
|