xinjiangMiniProgram/pages/tabbar/mine/mine.vue

<template>
	<view class="content">
		<view class="padding">
			<view class="userInfo flex" @click="$goPage('/pages/subPage/login/login')">
				<view class="avatar">
					<!-- <image src="../../../static/images/homebanner3.png" mode=""></image> -->
				</view>
				<view class="name">登录/注册</view>
			</view>
			
			<view class="card">
				<view class="li flex-b" v-for="(item,index) in configList" :key="index">
					<view class="text">{{ item.text }}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="li flex-b" >
					<button type="default" open-type="contact" class="cotact">联系客服</button>
					<view class="text">联系客服</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

		</view>
	</view>
</template>

<script >
 export default {
	 data() {
		 return {
			 configList: [
				 {text: '用户协议', url: ''},
				 {text: '隐私政策', url: ''},
			 ]
		 }
	 }
 }
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
		background: url('../../../static/images/minebg.png') #F5F5F5 no-repeat;
		background-size: 100% 552rpx;
		min-height: 100vh;
		
	  .userInfo {
		  padding: 200rpx 0 40rpx 0;
		  
	    .avatar {
			width: 114rpx;
			height: 114rpx;
			background: url('../../../static/images/avatar.png') #F5F5F5 no-repeat;
			background-size: 100% 100%;
			border-radius: 50%;
			overflow: hidden;
	    }
	
	    .name {
			margin-left: 30rpx;
			font-size: 34rpx;
			font-weight: 700;
			color: #fff;
	    }
	  }
	
	  .card {
		  background: #FFFFFF;
		  border-radius: 14rpx;
		  padding: 0 30rpx;
	    .li {
			width: 100%;
			height: 108rpx;
			border-bottom: 1px solid #EFEFEF;
			position: relative;
			.cotact {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				opacity: 0;
			}
			&:last-child {
				border: none;
			}
	      .text {
			font-size: 28rpx;
	      }
	
	      u-icon {
	
	      }
	    }
	  }
	}
</style>