Contract/src/views/Home.vue

<template>
	<section class="home-ctnr">
		<mytitle msg="区块链合同" flag=""></mytitle>
		<section class="home-box">
			<ul>
				<li v-for="item in lists" :key="item.id">
					<img :src="item.src">
					<p>{{ item.name }}</p>
				</li>
			</ul>
		</section>
		<tabbar></tabbar>
	</section>
</template>

<script type="text/javascript">
	import tabbar from '../components/Tabbar.vue'
	import mytitle from '../components/Title.vue'
	export default{
		data(){
			return {
				lists:[
					{
						id: "1",
						name: "上传合同",
						src: require("../assets/img/上传合同.png")
					},
					{
						id: "2",
						name: "模板创建",
						src: require("../assets/img/模板创建.png")
					},
					{
						id: "3",
						name: "草稿箱(0)",
						src: require("../assets/img/草稿箱.png")
					},
					{
						id: "4",
						name: "待修改(0)",
						src: require("../assets/img/待修改.png")
					},
					{
						id: "5",
						name: "待签署(0)",
						src: require("../assets/img/待签署.png")
					},
					{
						id: "6",
						name: "已签署(0)",
						src: require("../assets/img/已签署.png")
					},
					{
						id: "7",
						name: "已生效(0)",
						src: require("../assets/img/已生效.png")
					},
					{
						id: "8",
						name: "已失效(0)",
						src: require("../assets/img/已失效.png")
					},
				]
			}
		},
		components:{
			tabbar,
			mytitle
		}
	}
</script>
<style type="text/css">
	.home-ctnr{
		background-color: #60c0ff;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		.home-box{
			background-color: #fff;
			width: 8.795309rem;
			height: 14rem;
			margin: 0.199893rem auto;
			border-radius: 15px;/*no*/
			li{
				float: left;
				width: 4.397655rem;
				height: 3.464819rem;
				font-size: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-bottom: 1px solid #ececec;
				&:nth-child(odd){
					border-right: 1px solid #ececec;
				}
				&:nth-child(7){
					border-bottom: 0px;
				}
				&:nth-child(8){
					border-bottom: 0px;
				}
				img{
					width: 1.599147rem;
					height:1.599147rem;
				}
				p{
					font-size: 0.373134rem;
				}
			}

		}
	}
	
</style>