blindDate/pages/my/index.vue

<template>
	<view class="lf-w-100 lf-h-100">
		<view class="head-top">
			<view class="lf-row-between pic-top">
				<view class="lf-row-round">
					<view>
						<!-- <lf-image style="width: 160rpx;height: 160rpx;" src="../../static/logo.png"></lf-image> -->
						<image src="../../static/logo.png" mode="widthFix" class="head-pic"></image>
					</view>
					<view class="head-left">
						<view class="head-name">编号：73894 <u-icon name="arrow-right lf-m-l-20"></u-icon></view>
						<view class="head-text">资料审核中</view>
					</view>
				</view>
				<view class="lf-bg-white span-btn1">
					获得红线
				</view>
			</view>
			<view class="lf-row-between" style="height: 98rpx;padding: 0 32rpx;">
				<view class="lf-row-round lf-flex-column">
					<view class="lf-font-32 lf-color-white">0</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">红线</view>
				</view>
				<view class="lf-row-round lf-flex-column">
					<view class="lf-font-32 lf-color-white">5</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">桃花</view>
				</view>
				<view class="lf-row-round lf-flex-column">
					<view class="lf-font-32 lf-color-white">0</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">谁看过我</view>
				</view>
				<view class="lf-row-round lf-flex-column">
					<view class="lf-font-32 lf-color-white">0</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">谁收藏我</view>
				</view>
				<view class="lf-row-round lf-flex-column">
					<view class="lf-font-32 lf-color-white">70%</view>
					<view class="lf-font-24 lf-color-white lf-p-t-20">资料完整</view>
				</view>
			</view>
			<view class="head-top-wrap lf-w-100 lf-h-100">
				<view class="lf-w-100 tips-wrap">
					<view class="tips">
						<view class="lf-row-round lf-w-100 lf-h-100 lf-p-b-12">
							<view class="lf-color-white lf-font-28">VIP会员｜拥有专属权益</view>
							<view class="lf-bg-white span-btn">
								了解详情
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="adv">
			<view>
				<image src="../../static/logo.png" mode="widthFix" class="adv-pic"></image>
			</view>
			<view class="adv-content">
				<view class="lf-color-222 lf-font-32 lf-m-b-15">
					专属服务定制
				</view>
				<view class="lf-color-777">促成您和心仪对象线下见面 <u-icon class="lf-m-l-20" name="arrow-right"></u-icon></view>
			</view>
		</view>
		
		<view class="classify lf-m-t-30">
			<view class="card" v-for="(item,index) in list" @click="$url(item.path)">
				<view>
					<u-icon class="classify-icon" :name="item.icon"></u-icon>
				</view>
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{name: '我的红娘',icon:'github-circle-fill',path: '/pages/my/exclusive-match'},
					{name: '实名认证',icon:'email'},
					{name: '我的收藏',icon:'qzone'},
					{name: '我的动态',icon:'moments'},
					{name: '福利中心',icon:'red-packet'},
					{name: '公众号',icon:'google-circle-fill'},
					{name: '联系客服',icon:'kefu-ermai'},
					{name: '设置',icon:'setting'}
				]
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.head-top {
		width: 100%;
		height: 562rpx;
		/* background-color: red; */
	}
	
	.head-top-wrap {
		width: 100%;
		height: 656rpx;
		/* z-index: -1; */
		overflow: hidden;
		position: relative;
	}

	.head-top::after {
		content: '';
		width: 100%;
		height: 525rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		border-radius: 0 586px 586px/0 0 200rpx 200rpx;
		background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
	}
	
	.tips-wrap {
		overflow: hidden;
		height: 656rpx;
		border-radius: 0 586px 586px/0 0 200rpx 200rpx;
		position: absolute;
		top: -494rpx;
	}
	
	.tips {
		width: 686rpx;
		height: 121rpx;
		background-color: #314177;
		border-radius: 20rpx;
		position: relative;
		bottom: -536rpx;
		left: 0;
		margin: 0 auto;
	}
	
	.span-btn {
		border-radius: 25rpx;
		width: 149rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #314177;
	}
	
	.head-pic {
		width: 160rpx;
		height: 160rpx;
		border: 5rpx solid #FFFFFF;
		border-radius: 50%;
	}
	
	.adv-pic {
		width: 135rpx;
		height: 135rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}
	
	.head-text {
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 400;
		line-height: 40rpx;
	}
	
	.pic-top {
		padding: 48rpx 32rpx 40rpx 48rpx;
	}
	
	.span-btn1 {
		border-radius: 25rpx;
		width: 149rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #E21196;
		font-weight: 400;
		line-height: 33rpx;
	}
	
	.head-name {
		font-weight: 500;
		color: #FFFFFF;
		line-height: 45rpx;
		letter-spacing: 1rpx;
		font-size: 32rpx;
	}
	
	.head-left {
		padding: 20rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.adv {
		width: 686rpx;
		height: 195rpx;
		background-color: white;
		border-radius: 20rpx;
		margin: 0 auto;
		display: flex;
		padding: 0 0 0 30rpx;
		/* justify-content: space-around; */
		align-items: center;
	}
	
	.adv-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.classify {
		width: 686rpx;
		display: flex;
		background-color: white;
		border-radius: 20rpx;
		margin: 0 auto;
		flex-wrap: wrap;
		padding: 38rpx 30rpx;
	}
	.card {
		width: 116rpx;
		height: 116rpx;
		text-align: center;
		position: relative;
		overflow: hidden;
		margin-right: 54rpx;
		// margin-bottom: 68rpx;
		&:nth-child(4n) {
			margin-right: 0;
		}
		&:nth-child(n + 5) {
			margin-top: 68rpx;
		}
	}
	.classify-icon {
		height: 45rpx;
		width: 45rpx;
		font-size: 45rpx;
		margin-bottom: 27rpx;
	}
</style>