blindDate/pages/my/editInfo.vue

<template>
	<view class="lf-w-100 lf-h-100">
		<view class="edit-head">
			<view>
				<image src="../../static/logo.png" mode="aspectFill" style="width: 150rpx;height: 150rpx;border-radius: 10rpx;"></image>
			</view>
			<view class="lf-font-32 lf-color-222">
				点击上传形象照
			</view>
			<view class="lf-font-28 lf-color-777 lf-p-l-32 lf-p-r-32">
				确保个人形象照片为本人清晰正脸照，一张良好的形象照更能吸引到别人哦
			</view>
		</view>
		<view class="edit-tag">
			<view class="lf-row-between lf-w-100 lf-m-b-30">
				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">为什么要实名认证</view>
				<view class="lf-font-28 lf-color-777">去编辑<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
			</view>
			<view class="lf-color-777 lf-font-28">
				为给大家创建一个真实安全的优质的脱单环境，确保会员真诚相亲，每个都是人工审核
			</view>
		</view>
		<view class="edit-tag edit-tag1">
			<view class="lf-row-between lf-w-100 lf-m-b-30">
				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">基本资料</view>
				<view class="lf-font-28 lf-color-777">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
			</view>
			<view class="lf-color-777 lf-font-28 tag-content">
				<view class="personal-tag">其他省市</view>
				<view class="personal-tag">未婚</view>
				<view class="personal-tag">180cm</view>
				<view class="personal-tag">70kg</view>
			</view>
		</view>
		<view class="edit-tag edit-tag1">
			<view class="lf-row-between lf-w-100 lf-m-b-30">
				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">工作经济家庭</view>
				<view class="lf-font-28 lf-color-777">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
			</view>
			<view class="lf-color-777 lf-font-28 tag-content">
				<view class="personal-tag">已购车无贷款</view>
				<view class="personal-tag">本科</view>
				<view class="personal-tag">6万-8万</view>
			</view>
		</view>
		<view class="edit-tag edit-tag1">
			<view class="lf-row-between lf-w-100 lf-m-b-30">
				<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">择偶要求</view>
				<view class="lf-font-28 lf-color-777">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
			</view>
			<view class="lf-color-777 lf-font-28 tag-content">
				<view class="personal-tag">未婚</view>
				<view class="personal-tag">180cm</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5; 
	}
	.tag-content {
		width: 686rpx;
		flex-wrap: wrap;
		display: flex;
	}
	
	.edit-tag1 {
		height: 100%!important;
	}
	
	.personal-tag {
		width: max-content;
		padding: 8rpx 25rpx;
		height: 55rpx;
		border-radius: 28rpx;
		border: 1rpx solid #E21196;
		color: #E21196;
		font-size: 28rpx;
		margin-right: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		&:nth-child(4n) {
			margin-right: 0;
		}
		&:nth-child(n + 5) {
			margin-top: 20rpx;
		}
	}
	
	.edit-head {
		background-color: white;
		height: 400rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.edit-tag {
		width: 686rpx;
		height: 215rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx auto;
		display: flex;
		flex-direction: column;
		/* justify-content: space-around; */
		padding: 30rpx;
	}
	
	.edit-tag1 {
		height: 190rpx!important;
	}
	
	.authen-title {
		position: relative;
	}
	
	.authen-title::after {
		content: '';
		position: absolute;
		left: 0;
		top: 8rpx;
		width: 8rpx;
		height: 30rpx;
		background: #E21196;
		border-radius: 4rpx;
	}
</style>