模块

一列

页面标题

页面标题

详情

...

<template>
    <div class="care-module" style="height: 500px;">
        <div class="care-module__header">
            <div class="care-pagetitle">
                <div class="care-pagetitle__content">
                    页面标题
                </div>
            </div>
        </div>
        <div class="care-module__content">
            <div class="care-module__card">
                <div class="care-pagetitle">
                    <div class="care-pagetitle__content">
                        页面标题
                    </div>
                    <div class="care-pagetitle__operations">
                        详情<i class="care-icon-arrow-right-small"></i>
                    </div>
                </div>
                <div>
                    ...
                </div>
            </div>
        </div>
    </div>
</template>

显示代码 复制代码 复制代码

2列/3列等宽

页面标题

页面标题

详情

...

页面标题

详情

...

页面标题

页面标题

详情

...

页面标题

详情

...

页面标题

详情

...

<template>
    <div class="care-module" style="height: 500px;">
        <div class="care-module__header">
            <div class="care-pagetitle">
                <div class="care-pagetitle__content">
                    页面标题
                </div>
            </div>
        </div>
        <div class="care-module__content">
            <t-row :gutter="16">
                <t-col :span="6">
                    <div class="care-module__card">
                        <div class="care-pagetitle">
                            <div class="care-pagetitle__content">
                                页面标题
                            </div>
                            <div class="care-pagetitle__operations">
                                详情<i class="care-icon-arrow-right-small"></i>
                            </div>
                        </div>
                        <div>
                            ...
                        </div>
                    </div>
                </t-col>
                <t-col :span="6">
                    <div class="care-module__card">
                        <div class="care-pagetitle">
                            <div class="care-pagetitle__content">
                                页面标题
                            </div>
                            <div class="care-pagetitle__operations">
                                详情<i class="care-icon-arrow-right-small"></i>
                            </div>
                        </div>
                        <div>
                            ...
                        </div>
                    </div>
                </t-col>
            </t-row>
        </div>
    </div>
    <br/>
    <div class="care-module" style="height: 500px;">
        <div class="care-module__header">
            <div class="care-pagetitle">
                <div class="care-pagetitle__content">
                    页面标题
                </div>
            </div>
        </div>
        <div class="care-module__content">
            <t-row :gutter="16">
                <t-col :span="4">
                    <div class="care-module__card">
                        <div class="care-pagetitle">
                            <div class="care-pagetitle__content">
                                页面标题
                            </div>
                            <div class="care-pagetitle__operations">
                                详情<i class="care-icon-arrow-right-small"></i>
                            </div>
                        </div>
                        <div>
                            ...
                        </div>
                    </div>
                </t-col>
                <t-col :span="4">
                    <div class="care-module__card">
                        <div class="care-pagetitle">
                            <div class="care-pagetitle__content">
                                页面标题
                            </div>
                            <div class="care-pagetitle__operations">
                                详情<i class="care-icon-arrow-right-small"></i>
                            </div>
                        </div>
                        <div>
                            ...
                        </div>
                    </div>
                </t-col>
                <t-col :span="4">
                    <div class="care-module__card">
                        <div class="care-pagetitle">
                            <div class="care-pagetitle__content">
                                页面标题
                            </div>
                            <div class="care-pagetitle__operations">
                                详情<i class="care-icon-arrow-right-small"></i>
                            </div>
                        </div>
                        <div>
                            ...
                        </div>
                    </div>
                </t-col>
            </t-row>
        </div>
    </div>
</template>

显示代码 复制代码 复制代码

左宽/右宽

页面标题

页面标题

详情

...

页面标题

详情

...

<template>
    <div class="care-module" style="height: 500px;">
        <div class="care-module__header">
            <div class="care-pagetitle">
                <div class="care-pagetitle__content">
                    页面标题
                </div>
            </div>
        </div>
        <div class="care-module__content">
            <t-row :gutter="16">
                <t-col :span="8">
                    <div class="care-module__card">
                        <div class="care-pagetitle">
                            <div class="care-pagetitle__content">
                                页面标题
                            </div>
                            <div class="care-pagetitle__operations">
                                详情<i class="care-icon-arrow-right-small"></i>
                            </div>
                        </div>
                        <div>
                            ...
                        </div>
                    </div>
                </t-col>
                <t-col :span="4">
                    <div class="care-module__card">
                        <div class="care-pagetitle">
                            <div class="care-pagetitle__content">
                                页面标题
                            </div>
                            <div class="care-pagetitle__operations">
                                详情<i class="care-icon-arrow-right-small"></i>
                            </div>
                        </div>
                        <div>
                            ...
                        </div>
                    </div>
                </t-col>
            </t-row>
        </div>
    </div>
</template>

显示代码 复制代码 复制代码