contract/src/views/index.vue

<template>
	<div class="home">
		<div class="home-both">
		<h4>区块链合同</h4>
		<div class="home-table">
			<table>
				<tr v-for="item in content">
					<td><img :src="item.pictureone"><p>{{item.fontone}}</p></td>
					<td><img :src="item.picturetwo"><p>{{item.fonttwo}}</p></td>
				</tr>
			</table>
		</div>
	</div>
	</div>
</template>
<script>
	export default{
           data(){
           		return{
                      content:[
                      {
                      	pictureone:require('../assets/img/drawable-mdpi/sendcontant.png'),
                      	fontone:'上传合同',
                      	picturetwo:require('../assets/img/drawable-mdpi/build.png'),
                      	fonttwo:'模板创建'
                      },
                     {
                     	pictureone:require('../assets/img/drawable-mdpi/Draftbox.png'),
                     	fontone:'草稿箱(0)',
                      	picturetwo:require('../assets/img/drawable-mdpi/modify.png'),
                      	fonttwo:'待修改(0)'
                      },
                     {
                     	pictureone:require('../assets/img/drawable-mdpi/signed.png'),
                     	fontone:'待签署(0)',
                      	picturetwo:require('../assets/img/drawable-mdpi/Asigned.png'),
                      	fonttwo:'已签署(0)'
                      },
                      {
                      	pictureone:require('../assets/img/drawable-mdpi/effect.png'),
                      	fontone:'已生效(0)',
                      	picturetwo:require('../assets/img/drawable-mdpi/failure.png'),
                      	fonttwo:'已失效(0)'
                      }
                     ]
           		}
           }
	}
</script>
<style scoped>
	.home{
		.home-both{
			width: 100%;
			background: #60c0ff;
			padding-bottom: 0.416667rem;
			h4{
				text-align: center;
				color: #fff;
				font-size: 0.472222rem;
				padding: 0.541667rem 0;
			}
			.home-table{				
				width: 9.166667rem;
				border-radius: 0.238889rem;				
				margin: 0 auto;
				margin-bottom: 0.416667rem;
				table{
				width: 100%;
				height: 13.888889rem;
				background: #fff;
				margin: 0 auto;
				border-collapse: collapse;
				text-align: center;
				vertical-align: center;
				border-radius: 0.238889rem;			
				td{
					width: 50%;
					height: 25%;
					/*border: 1px solid #ececec;*/
					img{
						width: 1.919444rem;
						height: 1.988889rem;
					}
					p{
						font-size: 0.388889rem;
						color: #666;
					}
				}
				td:nth-of-type(odd){
                    border-right: 1px solid #ececec;
                    border-bottom: 1px solid #ececec;
				}
				td:nth-of-type(even){
					border-bottom: 1px solid #ececec;
				}
				tr:nth-of-type(4){
					td{
						border-bottom: 0;
					}
				}
			    }
			}
			
		}
	}
</style>