contract/src/views/myself.vue

<template>
	<div class="myself">
		<div class="myself-both">
			<div class="top">
				<img src="../assets/img/drawable-mdpi/userimg.png" class="one">
				<h3>用户名</h3>
				<p>15866668888</p>
				<p>已实名</p>
				<p><span>切换身份</span></p>
			</div>
			<div class="content" v-for="item in list">
				<router-link :to="item.routes">
				<img :src="item.src">
				<p>{{item.font}}</p>
				</router-link>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				list:[
				{
					src:require('../assets/img/drawable-mdpi/self.png'),
					font:'个人认证',
					routes:'/self'
				},
				{
					src:require('../assets/img/drawable-mdpi/business.png'),
					font:'企业认证',
					routes:'/enterprise'
				},
				{
					src:require('../assets/img/drawable-mdpi/sign.png'),
					font:'我的签名',
					routes:'/sign'
				},
				{
					src:require('../assets/img/drawable-mdpi/safe.png'),
					font:'安全设置',
					routes:'/safe'
				},
				],
			}
		},
		mounted(){

		},
		methods:{

		}
	}
</script>
<style scoped>
	.myself{
		width: 100%;
		height: 100%;
		background: #60c0ff;
		.myself-both{
			padding:1.041667rem 0.416667rem;
			.top{
                width: 100%;
                background: #fff;
                text-align: center;
                border-radius: 10px;
                height: 4.722222rem;
                .one{
                	float: left;
                	margin-top: -0.8rem;
                	margin-left: 3.6rem;
                	margin-bottom: 0.1rem;
                }
                h3{
                	clear: both;
                	font-size: 0.472222rem;
									color: #333333;
                }
                p:nth-of-type(1){
                	clear: both;
                	font-size: 0.333333rem;
									color: #808080;
                }
                p:nth-of-type(2){
                	clear: both;
                	width: 1.805556rem;
									height: 0.694444rem;
									line-height: 0.694444rem;
									background-color: #60c0ff;
									border-radius: 0.347222rem;
									font-size: 0.388889rem;
									color: #ffffff;
									margin: 0.236111rem auto;
                }
                p:nth-of-type(3){
                	clear: both;
                	margin-top: 0.4rem;
                	font-size: 0.388889rem;
					color: #60c0ff;
					position: relative;
					span{
						display: inline-block;
					    /*margin-top: -0.1rem ;*/
					}
					span::after{
						content: "";
						width: 0.522222rem;
						height: 0.536111rem;
						position:absolute;
						top: 0%;
						content: url(../assets/img/drawable-mdpi/change.png);
					}
                }
			}
			.content{
				width: 4.444444rem;
				height: 4.027778rem;
				background-color: #ffffff;
				border-radius: 10px;
				margin-top: 0.416667rem;				
				text-align: center;
				float: left;
				p{
					font-size: 0.388889rem;
					color: #666666;
					margin-top: -0.5rem;
				}
			}
			.content:nth-of-type(even){
				margin-right: 0.277778rem;
			}
		}
	}
</style>