<template>
	<div class="matrix">
		<h-matrix
			:dataSource="data"
			:matrix="8"
			bordered
		>
			<div class="h-matrix-item" slot="renderMatrix" slot-scope="item, index">
				<div class="h-matrix-item-view">
					<img src="https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png" >
				</div>
				<div class="h-matrix-item-name">{{item.name}}</div>
			</div>
		</h-matrix>
	</div>
</template>

<script>
	export default {
		name: 'matrix',
		data() {
			return {
				data: [
					{ name: '阿里巴巴' },
					{ name: '腾讯' },
					{ name: '京东' },
					{ name: '亚马逊' },
					{ name: 'Google' },
					{ name: 'Apple' },
					{ name: '紫光阁' },
					{ name: '东方明珠' },
					{ name: '楼兰' },
					{ name: '小鸡啄米糊' },
				]
			}
		}
	}
</script>

<style lang="scss">
	.matrix {
		.h-matrix-8 {
			.h-matrix-item-view {
				width: 93px;
				height: 72px;
			}
		}
	}
</style>