<!DOCTYPE html>
<template>
<a-list :grid="{ gutter: 16, column: 5 }" :data-source="data"
:pagination="pagination"
>
<a-list-item slot="renderItem" slot-scope="item, index">
<a-card>
<img
slot="cover"
alt="example"
:src="item.pic"
/>
<a-card-meta :title="item.title" description="">
<a-avatar
slot="avatar"
src="https://image.baidu.com/search/down?tn=download&ipn=dwnl&word=download&ie=utf8&fr=result&url=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fimage.biaobaiju.com%252Fuploads%252F20190610%252F15%252F1560153490-EzgSvwNeqf.jpg%26refer%3Dhttp%253A%252F%252Fimage.biaobaiju.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1629630396%26t%3Dbcfc9eac347594a2337da3ab684b62cd&thumburl=https%3A%2F%2Fimg2.baidu.com%2Fit%2Fu%3D2338624799%2C4080183967%26fm%3D26%26fmt%3Dauto%26gp%3D0.jpg"
/>
</a-card-meta>
</a-card>
</a-list-item>
</a-list>
</template>
<script>
const data = [
{
title: '小红书',
pic: require('@/assets/sisredbook.jpg'),
},
{
title: '斗罗大陆',
pic:require('@/assets/sisredbook.jpg'),
},
{
title: '斗破苍穹',
pic:require('@/assets/sisredbook.jpg'),
},
{
title: '一念永恒',
pic:require('@/assets/sisredbook.jpg'),
},
{
title: '一念永恒1',
pic:require('@/assets/sisredbook.jpg'),
},
{
title: '一念永恒2',
pic:require('@/assets/sisredbook.jpg'),
},
{
title: '一念永恒3',
pic:require('@/assets/sisredbook.jpg'),
},
];
export default {
data() {
return {
data,
pagination: {
onChange: page => {
console.log(page);
},
pageSize: 20,
},
};
},
};
</script>
<style></style>