Appearance

On this page

CardList 动态卡片列表 ​

此样式用于带滚动条或者分页的卡片列表

默认样式 ​

小型灭火器小型灭火器
220个
防火服
1,220套
应急灯
2,021个
破墙锤
120个
干粉灭火器
22个
救生衣
1,008套
防汛车辆
20辆
救生圈
1,200个
指挥车
22辆
雨衣
1,008套
雨伞
1,220个
水泵车
120辆
展开查看
vue
<template>
    <div class="biz-card-list">
        <div class="item" v-for="item in list" :key="item.label">
            <div class="top">{{ item.label }}</div>
            <div class="down">{{ item.value }}</div>
        </div>
    </div>
</template>

<script setup>
const list = [
    { label: '小型灭火器', value: '220个' },
    { label: '防火服', value: '1,220套' },
    { label: '应急灯', value: '2,021个' },
    { label: '破墙锤', value: '120个' },
    { label: '干粉灭火器', value: '22个' },
    { label: '救生衣', value: '1,008套' },
    { label: '防汛车辆', value: '20辆' },
    { label: '救生圈', value: '1,200个' },
    { label: '指挥车', value: '22辆' },
    { label: '雨衣', value: '1,008套' },
    { label: '雨伞', value: '1,220个' },
    { label: '水泵车', value: '120辆' },
];
</script>

<style></style>

调整布局 ​

小型灭火器小型灭火器
220个
防火服
1,220套
应急灯
2,021个
破墙锤
120个
干粉灭火器
22个
救生衣
1,008套
防汛车辆
20辆
救生圈
1,200个
展开查看
vue
<template>
    <div class="biz-card-list" style="--columns: 4; --gap: var(--gap-lg);">
        <div class="item" v-for="item in list" :key="item.label">
            <div class="top">{{ item.label }}</div>
            <div class="down">{{ item.value }}</div>
        </div>
    </div>
</template>

<script setup>
const list = [
    { label: '小型灭火器', value: '220个' },
    { label: '防火服', value: '1,220套' },
    { label: '应急灯', value: '2,021个' },
    { label: '破墙锤', value: '120个' },
    { label: '干粉灭火器', value: '22个' },
    { label: '救生衣', value: '1,008套' },
    { label: '防汛车辆', value: '20辆' },
    { label: '救生圈', value: '1,200个' },
];
</script>

<style></style>

配合分页器 ​

小型灭火器小型灭火器
220个
防火服
1,220套
应急灯
2,021个
破墙锤
120个
  • 1
  • 2
  • 3
  • 4
  • 5
展开查看
vue
<template>
    <div class="example pageListDemo">
        <div class="biz-card-list" style="--columns: 2;">
            <div class="item" v-for="item in list" :key="item.label">
                <div class="top">{{ item.label }}</div>
                <div class="down">{{ item.value }}</div>
            </div>
        </div>
        <!-- 这个是element3的分页组件，仅在文档环境用，项目使用需做调整 -->
        <el-pagination class="page" layout="prev, pager, next" :total="50" />
    </div>
</template>

<script setup>
const list = [
    { label: '小型灭火器', value: '220个' },
    { label: '防火服', value: '1,220套' },
    { label: '应急灯', value: '2,021个' },
    { label: '破墙锤', value: '120个' },
];
</script>

<style lang="scss">
.pageListDemo {
    display: flex;
    flex-direction: column;
    align-items: center;
    .biz-card-list {
        width: 100%;
    }
    .page {
        margin-top: 10px;
    }
}
</style>

自定义样式参数 ​

变量名称描述默认值
columns控制每行显示列数,等同于grid-template-columns3
rows控制要显示的行数,等同于grid-template-rows0
gap间距，等同于grid-gapcalc(4 * 1rem / 16)