JP-ChargeTeam51/pages/user/dataSet.vue

<template>
	<view>
		<ujp-navbar title="个人资料"></ujp-navbar>
		
		<!-- 个人信息 -->
		<view class="userCell">
			<view class="title">
				个人信息
			</view>
			<!-- 头像 -->
			<view class="userCell-item" >
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user" ><img style="visibility: middle;;" src="../../assets/img/account-circle-fill.svg" alt=""></text>
					<p>头像</p>
				</view>
				<view class="userCell-content">
					<view class="value">
					  
					  		<u-avatar class="avatar" :src="src" size="80">
								<img src="" alt="">
								
							</u-avatar>
							<view class="box">
								<img class="camera" src="../../assets/img/camera-fill.svg" alt="">
							</view>
							

					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
			<!-- 昵称 -->
		<view class="userCell-item" >
			<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
				<text class="user" ><img style="visibility: middle;;" src="../../assets/img/edit-box-fill.svg" alt=""></text>
				<p>昵称</p>
			</view>
			<view class="userCell-content" @click="show=true">
				<view class="value black">
					萌萌哒
				</view>
				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
			</view>
		</view>
		<!-- 生日 -->	
			<view class="userCell-item" >
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user" ><img style="visibility: middle;;" src="../../assets/img/cake-2-fill.svg" alt=""></text>
					<p>生日</p>
				</view>
				<view class="userCell-content">
					<view class="value">
						请选择
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
			
			
		</view>
		<u-line color="#F2F2F2 100%" length="87.2%" margin="8px auto 0" />
		<!-- 账户与安全 -->
		<view class="userCell">
			<view class="title">
				账户与安全
			</view>
			<!-- 更换手机号 -->
			<view class="userCell-item" >
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user" ><img style="visibility: middle;;" src="../../assets/img/smartphone-fill.svg" alt=""></text>
					<p>更换手机号</p>
				</view>
				<view class="userCell-content">
					<view class="value black">
						139****9333
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
			<!-- 实名认证 -->
		<view class="userCell-item" >
			<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
				<text class="user" ><img style="visibility: middle;;" src="../../assets/img/shield-user-fill.svg" alt=""></text>
				<p>实名认证</p>
			</view>
			<view class="userCell-content">
				<view class="value">
					未实名
				</view>
				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
			</view>
		</view>	
		</view>
		<u-line color="#F2F2F2 100%" length="87.2%" margin="8px auto 0" />
		<!-- 更多操作 -->
		<view class="userCell">
			<view class="title">
				更多操作
			</view>
			<!-- 车辆信息 -->
			<view class="userCell-item" >
				<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
					<text class="user" ><img style="visibility: middle;;" src="../../assets/img/car-fill (1).svg" alt=""></text>
					<p>车辆信息</p>
				</view>
				<view class="userCell-content">
					<view class="value">
						未绑定
					</view>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
				</view>
			</view>
			<!-- 长辈模式 -->
		<view class="userCell-item" >
			<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
				<text class="user" ><img style="visibility: middle;;" src="../../assets/img/zoom-in-fill.svg" alt=""></text>
				<p>长辈模式</p>
			</view>
			<view class="userCell-content">
				<view class="value">
					
					<view class="text black">
						字体更多 看得清
					</view>
					
					<u-switch v-model="checked" active-color="#00E266" ></u-switch>
				</view>
				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
			</view>
		</view>	
		<!-- 注销账号 -->
		<view class="userCell-item" >
			<view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
				<text class="user" ><img style="visibility: middle;;" src="../../assets/img/spam-3-fill.svg" alt=""></text>
				<p>注销账号</p>
			</view>
			<view class="userCell-content">
				<view class="value black" style="font-size: 14px;">
					注销后无法恢复，请谨慎操作
				</view>
				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
			</view>
		</view>
		</view>
		
		
		
		<view class="exit">
			退出账号
		</view>
		
		<!-- 遮罩层 -->
		<u-mask :show="show" @click="show = false" :zoom='false'>
			<view class="warp">
						<view class="rect" @tap.stop>
							<p>修改昵称</p>
							
								<textarea name="" id="" cols="30" rows="10">
									
							
								
							</textarea>
							<img class="canc" src="../../assets/img/md-cancel Copy@3x.png" alt="">
							<u-button type="success">保存</u-button>
						</view>
					</view>
		</u-mask>
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				checked:false,
				src: '',
				show: true
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
		padding-bottom: 67px;
	}
	.userCell{
		.user{
			
			img{
				vertical-align: middle;
			}
		}
		.title{
			padding: 24px 20px 8px 20px;
			font-size: 18px;
			color: rgba(16, 16, 16, 100);
		}
		
		
		.userCell-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16px;
			
			.userCell-title{
				font-size: 16px;
				display: flex;
				p{
					margin-left: 8px;
					font-size: 16px;
					line-height: 28px;
					color: #333333;
				}
			}
			.userCell-content{
				display: flex;
				color: rgba(153, 153, 153, 100);
				font-size: 16px;
				line-height: 20px;
				
			}
			.value{
				display: flex;
				.text{
					line-height: 28px;
				}
				.circle{
					width: 40px;
					height: 40px;
				}
				.u-avatar{
					position: absolute;
				}
				.camera{
					width: 20px;
					height: 20px;
					
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					z-index: 9999;
					
				}
				.box{
					border-radius: 999px;
					height: 40px;
					width: 40px;
					position: relative;
					background: url(@/assets/img/circle.png);
					background-repeat: no-repeat;
					background-position: 30% 10%;
					background-size: cover;
				}
				
			}
			.u-switch{
				width: 48px;
				height: 24px;
				vertical-align: middle;
				margin-left: 8px;
			}
		    /deep/.u-switch__node{
				width: 24px !important;
				height: 24px !important;
			}
			
			span{
				color:#999;
				
			}
			.add{
				color:#999;
			}
			.black{
				color: #666666;
			}
		}
	}

.exit{
	color: rgba(238, 49, 56, 100);
	font-size: 16px;
	text-align: center;
	margin-top: 10px;
}
.warp {
		
		position: fixed;
		left: 0;
		bottom: 0;
		
		width: 100%;
	}

	.rect {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding: 24px 0;
		p{
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			line-height: 24px;
			padding:0 24px;
		}
		textarea{
			width: 87.2%;
			border-radius: 8px;
			background-color: rgba(229, 231, 234, 100);
			margin: 12px auto 0;
			height: 44px;
			line-height: 44px !important;
			padding: 0 8px;
			position: relative;
		}
		.canc{
			width: 20px;
			height: 20px;
			position: absolute;
			top: 70px;
			right: 7vw;
		}
		.u-btn{
			width: 89.2%;
			color: rgba(255, 255, 255, 100);
			font-size: 18px;
			border-radius: 8px;
			margin-top: 24px;
			z-index: 99999;
		}
	}


</style>