daiTc.vue

<style>
</style>
<template>
    <div class="d-p-10">
        <div class="d-tc">
            <div class="tc-title">
                <div>标题-default</div>
                <div style="float: right;">右侧功能</div>
            </div>
            <div class="tc-cont">内容</div>
        </div>
        <div class="d-tc-small d-mt-10">
            <div class="tc-title">
                <div>标题-small</div>
            </div>
            <div class="tc-cont">内容</div>
        </div>
        <div class="d-tc-mini d-mt-10">
            <div class="tc-title">
                <div>标题-small</div>
            </div>
            <div class="tc-cont">内容</div>
        </div>
        <dai-tc title="组件方式" class="d-mt-10">内容</dai-tc>
        <dai-tc title="组件方式" class="d-mt-10" size="small">
            <template #title-right>右侧内容</template>
            <div>内容</div>
        </dai-tc>
        <div class="d-box d-mt-10">
            <div class="d-tab d-box-flex">
                <div class="d-tab-bar">
                    <div class="d-tab-tab d-tab-tab-active">TAB1</div>
                    <div class="d-tab-tab">TAB2</div>
                </div>
                <div class="d-tab-cont">内容</div>
            </div>
            <div class="d-tab-small d-box-flex d-ml-10">
                <div class="d-tab-bar">
                    <div class="d-tab-tab d-tab-tab-active">TAB1</div>
                    <div class="d-tab-tab">TAB2</div>
                </div>
                <div class="d-tab-cont">内容</div>
            </div>
            <div class="d-tab-mini d-box-flex d-ml-10">
                <div class="d-tab-bar">
                    <div class="d-tab-tab d-tab-tab-active">TAB1</div>
                    <div class="d-tab-tab">TAB2</div>
                </div>
                <div class="d-tab-cont">内容</div>
            </div>
            <div class="d-tab-mini d-box-flex d-ml-10">
                <div class="d-tab-bar">
                    <div class="d-tab-tab d-tab-tab-active">TAB1</div>
                    <div class="d-tab-tab">TAB2</div>
                </div>
                <div class="d-tab-cont">内容</div>
                <div class="d-tab-bar-hr">
                    <div class="d-tab-tab d-tab-tab-active">TAB1</div>
                    <div class="d-tab-tab">TAB2</div>
                </div>
                <div class="d-tab-cont">内容</div>
            </div>
        </div>
        <div class="d-box  d-mt-10">
            <Tabs value="name1" class="d-iview-tabs d-box-flex d-iview-tabs-border">
                <TabPane label="标签一" name="name1">标签一的内容</TabPane>
                <TabPane label="标签二" name="name2">标签二的内容</TabPane>
                <TabPane label="标签三" name="name3">标签三的内容</TabPane>
                <TabPane label="标签一" name="name4">标签一的内容</TabPane>
                <TabPane label="标签二" name="name5">标签二的内容</TabPane>
                <TabPane label="标签三" name="name6">标签三的内容</TabPane>
                <TabPane label="标签一" name="name7">标签一的内容</TabPane>
            </Tabs>
            <Tabs value="name1" class="d-iview-tabs-small d-box-flex d-ml-10">
                <TabPane label="标签一" name="name1">标签一的内容</TabPane>
                <TabPane label="标签二" name="name2">标签二的内容</TabPane>
                <TabPane label="标签三" name="name3">标签三的内容</TabPane>
                <TabPane label="标签一" name="name4">标签一的内容</TabPane>
                <TabPane label="标签二" name="name5">标签二的内容</TabPane>
                <TabPane label="标签三" name="name6">标签三的内容</TabPane>
                <TabPane label="标签一" name="name7">标签一的内容</TabPane>
            </Tabs>
            <Tabs value="name1" class="d-iview-tabs-mini d-box-flex d-ml-10">
                <TabPane label="标签一" name="name1">标签一的内容</TabPane>
                <TabPane label="标签二" name="name2">标签二的内容</TabPane>
                <TabPane label="标签三" name="name3">标签三的内容</TabPane>
                <TabPane label="标签一" name="name4">标签一的内容</TabPane>
                <TabPane label="标签二" name="name5">标签二的内容</TabPane>
                <TabPane label="标签三" name="name6">标签三的内容</TabPane>
                <TabPane label="标签一" name="name7">标签一的内容</TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
export default {};
</script>