jp-xqjy/pages/friend/personal.vue

<template>
	<view>
		<u-navbar :border-bottom="false" :background="navbarBg" back-icon-color="#fff"></u-navbar>
		<view class="personal">
			<view class="personalHead">
				<u-image width="100%" height="375px" src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp-xqjy/user2.jpg"></u-image>
			</view>
			<view class="personal-main">
				<view class="personal-name">
					<span>周群青</span>
					<u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
				</view>
				<view class="personal-space">
					<view class="personal-info">
						<span>23岁 · 173cm · 75kg</span>
					</view>
					<view class="personal-address">
						<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
						<span>荆州市</span>
					</view>
				</view>
				<view class="personal-att">
					<view class="personal-att-text">
						<h2>荆州市总工会</h2>
						<view class="u-flex">
							<p>实名认证用户</p>
							<u-icon custom-prefix="custom-icon" name="check-line"></u-icon>
						</view>
					</view>
					<u-image width="60px" height="60px" src="/static/img/personal-att.png"></u-image>
				</view>
				<view class="personal-item">
					<view class="personal-tit">
						<u-icon custom-prefix="custom-icon" name="account-box-line" color="#FF5E5E" size="20px"></u-icon>
						<span>个人资料</span>
					</view>
					<view class="personal-con">
						<view class="personal-col">
							<p>会员号</p>
							<h4>N0.0001</h4>
						</view>
						<view class="personal-col">
							<p>学历</p>
							<h4>大学本科</h4>
						</view>
						<view class="personal-col">
							<p>行业</p>
							<h4>IT/互联网</h4>
						</view>
						<view class="personal-col">
							<p>职业</p>
							<h4>软件工程师</h4>
						</view>
						<view class="personal-col">
							<p>月薪</p>
							<h4>4500~6000</h4>
						</view>
						<view class="personal-col">
							<p>住房状况</p>
							<h4>结婚时购房</h4>
						</view>
						<view class="personal-col">
							<p>婚姻状况</p>
							<h4>未婚</h4>
						</view>
						<view class="personal-col">
							<p>子女状况</p>
							<h4>无</h4>
						</view>
						<view class="personal-col">
							<p>出生地</p>
							<h4>荆州市沙市区</h4>
						</view>
						<view class="personal-col">
							<p>现工作所在地</p>
							<h4>荆州市沙市区</h4>
						</view>
						<view class="personal-row">
							<p>现工作所在地</p>
							<view class="personal-label">
								<span>摄影</span>
								<span>烹饪</span>
								<span>健身</span>
								<span>打游戏</span>
							</view>
						</view>
					</view>
				</view>
				<view class="personal-item">
					<view class="personal-tit">
						<u-icon custom-prefix="custom-icon" name="file-list-3-line" color="#FF5E5E" size="20px"></u-icon>
						<span>自我评价</span>
					</view>
					<view class="personal-con">
						<view class="personal-text">
							憧憬“执子之手与子偕老的美好爱情”，对感情忠诚专一，有强烈的责任感，有担当也有一颗浪漫之心。热爱生活，一直相信美好的生活是靠勤奋的双手奋斗出来的，对生活的态度一直是不求飞黄腾达，但求衣食无忧，追求真实平淡。平日爱好书法、运动、电影。对父母孝顺，对家庭懂得家和万事兴。事业上不怕吃苦，兢兢业业，有上进心。
						</view>
					</view>
				</view>
				<view class="personal-item">
					<view class="personal-tit">
						<u-icon custom-prefix="custom-icon" name="chat-heart-line" color="#FF5E5E" size="20px"></u-icon>
						<span>择偶标准</span>
					</view>
					<view class="personal-con">
						<view class="personal-col">
							<p>年龄范围</p>
							<h4>25~30</h4>
						</view>
						<view class="personal-col">
							<p>月薪</p>
							<h4>不限</h4>
						</view>
						<view class="personal-col">
							<p>学历</p>
							<h4>不限</h4>
						</view>
						<view class="personal-col">
							<p>职业</p>
							<h4>不限</h4>
						</view>
						<view class="personal-row">
							<p>现工作所在地</p>
							<h4>荆州市沙市区北京路阿萨德阿斯</h4>
						</view>
						<view class="personal-row">
							<p>其他要求</p>
							<h4>阿萨德阿萨德阿斯</h4>
						</view>
					</view>
				</view>
				<view class="personal-btn">
					<u-button type="error" shape="circle" :custom-style="customStyle">
						<span>赞Ta</span>
						<u-icon custom-prefix="custom-icon" name="thumb-up-line"></u-icon>
					</u-button>
				</view>
			</view>
		</view>
 	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarBg: {
					background: 'none'
				},
				customStyle: {
					background: '#FF5E5E'
				}, 
			}

			methods: {
				
			}

		}
	}
</script>

<style lang="scss" scoped>
	.personal{
		margin-top: -44px;
	}
	.personal-main{
		background-color: #fff;
		border-radius:12px 12px 0 0;
		margin-top: -12px;
		padding: 15px;
		position: relative;
		z-index: 99;
	}
	.personal-name{
		display: flex;
		align-items: center;
		span{
			font-size: 20px;
			margin-right: 5px;
		}
	}
	.personal-space{
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
		.personal-info{
			span{color:#444953;}
		}
		.personal-address{
			background-color: #F1F3F4;
			padding: 4px 12px;
			border-radius: 4px;
			color:#444953;
			span{
				margin-left: 3px;
			}
		}
	}
	.personal-att{
		 background-color: #F1F3F4;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 padding: 16px;
		 margin: 20px 0;
		 border-radius: 12px;
		 .personal-att-text{
			 h2{
				 font-size: 20px;
				 font-weight: normal;
				 color:#555;
				 margin-bottom: 4px;
			 }
			 .u-flex{
				 color:#27B148;
				 p{
					 margin-right: 3px;
				 }
			 }
		 }
	}
	.personal-item{
		margin-top: 24px;
		.personal-tit{
			display: flex;
			align-items: center;
			span{
				font-size: 16px;
				margin-left: 4px;
			}
		}
		.personal-con{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.personal-col{
				width: 48%;
				border-radius: 4px;
				background-color: #F1F3F4 ;
				padding: 12px 16px;
				margin-top: 10px;
				
				p{
					color:#999;
					font-size: 12px;
				}
				h4{
					font-size: 16px;
					font-weight: normal;
					margin-top: 4px;
				}
			}
			.personal-row{
				border-radius: 4px;
				background-color: #F1F3F4 ;
				padding: 12px 16px;
				margin-top: 10px;
				width: 100%;
				p{
					color:#999;
					font-size: 12px;
				}
				h4{
					font-size: 16px;
					font-weight: normal;
					margin-top: 4px;
				}
				.personal-label{
					display: flex;
					margin-top: 10px;
					flex-wrap: wrap;
					span{
						margin-right: 8px;
						background-color: #FFC1BC ;
						padding: 4px 10px;
						border-radius: 4px;
						font-size: 12px;
						margin-bottom: 10px;
					}
				}
			}
			.personal-text{
				border-radius: 4px;
				padding: 16px;
				background-color: #F1F3F4;
				margin-top: 10px;
				line-height: 24px;
			}
		}
	}
	.personal-btn{
		padding: 15px;
		span{
			margin-right: 5px;
		}
	}
</style>