uni-app 图文显示（上图下文)

<template>
	<view class="com-tu-dec-page">
		<view class="demo" v-for="(item,index) in arrList" :key="index">
			<view class="view-box">
				<image :src="item.url"  class="demoimg"></image>
			</view>
		        <text  class="dec">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrList:[
					{url:"http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp",name:"京东超市"},
					{url:"http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/39401/17/2391/5859/5cc06fcfE2ad40668/28cda0a571b4a576.png.webp",name:"京东数码"},
					{url:"http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp",name:"京东超市"},
					{url:"http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/39401/17/2391/5859/5cc06fcfE2ad40668/28cda0a571b4a576.png.webp",name:"京东数码"},
					{url:"http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp",name:"京东超市"},
				]
			};
		}
	}
</script>

<style scoped>
	.com-tu-dec-page{
		display: flex;
	/* 你会发现  图片并没有水平  等间距分布 */
    	        justify-content: space-around;
	text-align: center;
	margin: 20upx auto;

	}
	
		
	.view-box{
		width: 90upx;
		height: 90upx;
		/* 图片等间距分布 */
		margin: auto;
	}
	.demoimg{
		width: 90upx;
		height: 90upx;
	}
	
	.dec{
	       font-size: 18upx;
	}

</style>