zxz

pages/friend/index.vue

@@ -6,7 +6,7 @@
 				<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333"
 					inactive-color="#c4c0c0"></u-tabs>
 			</view>
-			<view class="homeAdd" v-if="current == '0'">
+			<view class="homeAdd" v-if="current == '0'"  @click="show = true">
 				<u-icon custom-prefix="custom-icon" name="filter-2-fill"></u-icon>
 				<span>筛选</span>
 			</view>
@@ -15,6 +15,98 @@
 				<span @click="refreshClick">刷新</span>
 			</view>
 		</view>
+		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="20" close-icon-pos="top-left">
+			<view class="screenTit">
+				<h4>条件筛选</h4>
+				<span>重置</span>
+			</view>
+			<view class="screenCon">
+				<view class="screenCon-row">
+					<span>只看异性</span>
+					<u-switch v-model="checked" active-color="#FF5E5E"></u-switch>
+				</view>
+				<view class="screenCon-item">
+					<view class="screenCon-tit">
+						<span>年龄</span><p>22~32</p>
+					</view>
+					<view class="screenCon-con">
+						<view class="screenCon-slider">
+							<u-slider v-model="value"></u-slider>
+						</view>
+					</view>
+				</view>
+				<view class="screenCon-item">
+					<view class="screenCon-tit">
+						<span>身高</span><p>172~182</p>
+					</view>
+					<view class="screenCon-con">
+						<view class="screenCon-slider">
+							<u-slider v-model="value"></u-slider>
+						</view>
+					</view>
+				</view>
+				<view class="screenCon-item">
+					<view class="screenCon-tit">
+						<span>会员所属工会所在地</span>
+					</view>
+					<view class="screenCon-con">
+						<view class="screenCon-choice">
+							<view class="choice-item active">荆州市</view>
+							<view class="choice-item">荆州区</view>
+							<view class="choice-item">沙市区</view>
+							<view class="choice-item">江陵县</view>
+							<view class="choice-item">公安县</view>
+							<view class="choice-item">松滋市</view>
+							<view class="choice-item">石首市</view>
+							<view class="choice-item">监利市</view>
+							<view class="choice-item">洪湖市</view>
+						</view>
+					</view>
+				</view>
+				<view class="screenCon-item">
+					<view class="screenCon-tit">
+						<span>会员所属工会所在地</span>
+					</view>
+					<view class="screenCon-con">
+						<view class="screenCon-choice">
+							<view class="choice-item active">不限</view>
+							<view class="choice-item">高中及以上</view>
+							<view class="choice-item">大专及以上</view>
+							<view class="choice-item">本科及以上</view>
+							<view class="choice-item">其他</view>
+						</view>
+					</view>
+				</view>
+				<view class="screenCon-item">
+					<view class="screenCon-tit">
+						<span>婚姻状况</span>
+					</view>
+					<view class="screenCon-con">
+						<view class="screenCon-choice">
+							<view class="choice-item active">不限</view>
+							<view class="choice-item">未婚</view>
+							<view class="choice-item">离异</view>
+							<view class="choice-item">丧偶</view>
+						</view>
+					</view>
+				</view>
+				<view class="screenCon-item">
+					<view class="screenCon-tit">
+						<span>子女状况</span>
+					</view>
+					<view class="screenCon-con">
+						<view class="screenCon-choice">
+							<view class="choice-item active">不限</view>
+							<view class="choice-item">无</view>
+							<view class="choice-item">有</view>
+						</view>
+					</view>
+				</view>
+				<view class="screenCon-btn">
+					<u-button type="error" shape="circle" :custom-style="customStyle">确定</u-button>
+				</view>
+			</view>
+		</u-popup>
 
 		<view class="friendList">
 			<view class="friendList-item" v-for="(item ,index) in friendList" :key="item.id" @click="gotoUrl('pages/user/index?id='+item.id)">
@@ -76,6 +168,12 @@
 				}],
 				current: 0,
 				randomList: [],
+				show: false,
+				checked: false,
+				customStyle:{
+					background: '#FF5E5E'
+				},
+				value: 30
 			}
 		},
 		onLoad(op) {
@@ -168,16 +266,95 @@
 	}
 </style>
 <style lang="scss" scoped>
-.navbar-tit{
+	.screenCon-btn{
+		padding: 15px;
+	}
+	.screenCon-slider{
+		height: 24px;
+	}
+	.screenCon-choice{
+		display: flex;
+		flex-wrap: wrap;
+		.choice-item{
+			background-color: #F1F3F4;
+			border-radius: 4px;
+			padding:8px 0;
+			color:#6C6A6A;
+			width: 22%;
+			text-align: center;
+			margin-right: 10px;
+			margin-bottom: 10px;
+		}
+		.active{
+			background-color: #FF5E5E;
+			color:#fff;
+		}
+	}
+	.screenCon-item{
+		padding: 10px 0;
+		.screenCon-tit{
+			display: flex;
+			align-items: center;
+			span{font-size: 16px;}
+			p{font-size: 16px;color:#999;margin-left: 8px;}
+		}
+		.screenCon-con{
+			margin-top: 12px;
+		}
+	}
+	.screenCon-row{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 10px 0;
+		span{
+			font-size: 16px;
+		}
+	}
+	.screenCon{
+		height: 540px;
+		padding: 0 15px;
+		margin-top: 50px;
+	}
+	.screenTit{
+		height: 50px;
+		position:fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		background-color: #fff;
+		z-index: 2;
+		h4{
+			position: absolute;
+			font-weight: normal;
+			left: 50%;
+			top:12px;
+			font-size: 16PX;
+			margin-left: -32px;
+		}
+		span{
+			position: absolute;
+			color:#999;
+			right: 15px;
+			top: 15px;
+		}
+	}
+	
+	.navbar-tit{
 			padding-left:15px;
 			font-size: 24px;
 		}
-	.home-head {
+		.home-head {
 		
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding-right: 15px;
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 44px;
+		z-index: 99;
 		background-color: #FFF;
 
 		.homeAdd {
@@ -191,7 +368,7 @@
 
 	.friendList {
 		padding: 15px;
-
+		margin-top: 40px;
 		.friendList-item {
 			display: flex;
 			background-color: #fff;

pages/friend/personal.vue

@@ -0,0 +1,298 @@
+<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="/static/img/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>

pages/index/index.vue

@@ -125,6 +125,12 @@
 		justify-content: space-between;
 		align-items: center;
 		padding-right: 15px;  
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 44px;
+		background-color: #fff;
+		z-index: 99;
 		.homeAdd{
 			color: #FF5E5E;
 			span{
@@ -134,6 +140,7 @@
 	}
 	.homeWrap{
 		padding:0 15px;
+		margin-top: 44px;
 	}
 	.homeUser{
 		display: flex;

pages/news/index.vue

@@ -1,10 +1,8 @@
 <template>
 	<view>
 		<u-navbar :is-back="false"><view class="navbar-tit">资讯</view></u-navbar>
-		<view class="home-head">
-			<view class="homeTab">
-				<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
-			</view>
+		<view class="homeTab">
+			<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
 		</view>
 		<view class="homeWrap">
 			<u-swiper :list="wrapList" height="300" border-radius="24"></u-swiper>
@@ -159,20 +157,17 @@
 		padding-left:15px;
 		font-size: 24px;
 	}
-	.home-head{
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding-right: 15px;  
-		.homeAdd{
-			color: #FF5E5E;
-			span{
-				margin-left: 3px;
-			}
-		}
+	.homeTab{
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 44px;
+		background-color: #fff;
+		z-index: 99;
 	}
 	.homeWrap{
 		padding:0 15px;
+		margin-top: 40px;
 	}
 	.newsList{
 		padding: 15px;

pages/praise/iPraise.vue

@@ -0,0 +1,137 @@
+<template>
+	<view>
+		<u-navbar :is-back="false" :border-bottom="false"><view class="navbar-tit">我点赞的</view></u-navbar>
+
+		<view class="friendList">
+			<view class="friendList-item">
+				<u-image class="friendList-img" src="/static/img/sexMan.png" height="160" width="160" border-radius="10">
+				</u-image>
+				<view class="friendList-text">
+					<view class="friendList-name">
+						<span>123123</span>
+						<u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
+					</view>
+					<view class="friendList-info">
+						<span>123岁 · 123cm</span>&nbsp;<span>· 132kg</span>
+					</view>
+					<view class="friendList-label">
+						<view class="friendList-label-item">
+							<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
+							<span>123</span>
+						</view>
+						<view class="friendList-label-item">
+							<span>123</span>
+						</view>
+						<view class="friendList-label-item">
+							<span>123</span>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="friendList-item">
+				<u-image class="friendList-img" src="/static/img/sexWoman.png" height="160" width="160" border-radius="10">
+				</u-image>
+				<view class="friendList-text">
+					<view class="friendList-name">
+						<span>123123</span>
+						<u-icon custom-prefix="custom-icon" name="women-line" color="#FF695B"></u-icon>
+					</view>
+					<view class="friendList-info">
+						<span>123岁 · 123cm</span>&nbsp;<span>· 132kg</span>
+					</view>
+					<view class="friendList-label">
+						<view class="friendList-label-item">
+							<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
+							<span>123</span>
+						</view>
+						<view class="friendList-label-item">
+							<span>123</span>
+						</view>
+						<view class="friendList-label-item">
+							<span>123</span>
+						</view>
+					</view>
+				</view>
+			</view>
+			<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#f4f0f0">已经到底了</u-divider>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		
+		methods: {
+			
+		}
+	}
+</script>
+<style>
+	page {
+		background-color: #f4f0f0;
+	}
+</style>
+<style lang="scss" scoped>
+	.navbar-tit{
+			padding-left:15px;
+			font-size: 24px;
+		}
+	
+
+	.friendList {
+		padding: 15px;
+		.friendList-item {
+			display: flex;
+			background-color: #fff;
+			padding: 12px;
+			border-radius: 12px;
+			margin-bottom: 15px;
+
+			.friendList-text {
+				flex: 1;
+				min-width: 0;
+				margin-left: 12px;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				.friendList-name {
+					font-weight: normal;
+
+					span {
+						font-size: 18px;
+						margin-right: 8px;
+					}
+				}
+
+				.friendList-info {
+					color: #999;
+					font-size: 12px;
+				}
+
+				.friendList-label {
+					display: flex;
+					align-items: center;
+
+					.friendList-label-item {
+						background: #F1F3F4;
+						padding: 2px 8px;
+						color: #A2A9B5;
+						border-radius: 4px;
+						font-size: 12px;
+						margin-right: 8px;
+
+						span {
+							margin-left: 3px;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/praise/index.vue

@@ -1,8 +1,59 @@
 <template>
 	<view>
 		<u-navbar :is-back="false" :border-bottom="false"><view class="navbar-tit">点赞</view></u-navbar>
-		<view class="userHead">
-			
+		<view class="praise">
+			<view class="praiseLink">
+				<view class="praiseLink-item" style="">
+					<view class="praiseLink-tit">
+						<h4>我点赞的</h4><span></span>
+					</view>
+				</view>
+				<view class="praiseLink-item praiseLink-bg2">
+					<view class="praiseLink-tit">
+						<h4>谁点赞了我</h4><span>+12</span>
+					</view>
+					<p>55人点赞了我</p>
+				</view>
+			</view>
+			<view class="title">互相点赞联系双方</view>
+			<view class="praiseMain">
+				<view class="praiseMain-item">
+					<view class="praiseMain-tit">恭喜配对成功!</view>
+					<view class="praiseMain-pic">
+						<view class="praiseMain-pic-item">
+							<u-image class="newsList-img" src="/static/img/sexMan.png" height="260" width="260" border-radius="10"></u-image>
+						</view>
+						<view class="praiseMain-heart">
+							<u-icon custom-prefix="custom-icon" name="heart-2-fill" size="36px" color="#fff"></u-icon>
+						</view>
+						<view class="praiseMain-pic-item">
+							<u-image class="newsList-img" src="/static/img/sexWoman.png" height="260" width="260" border-radius="10"></u-image>
+						</view>
+					</view>
+					<view class="praiseMain-pic-text">恭喜！您与「周群青」相互点赞！</view>
+					<view class="praiseMain-btn">
+						<u-button type="error" shape="circle" :custom-style="customStyle">联系Ta</u-button>
+					</view>
+				</view>
+				<view class="praiseMain-item">
+					<view class="praiseMain-tit">恭喜配对成功!</view>
+					<view class="praiseMain-pic">
+						<view class="praiseMain-pic-item">
+							<u-image class="newsList-img" src="/static/img/sexMan.png" height="260" width="260" border-radius="10"></u-image>
+						</view>
+						<view class="praiseMain-heart">
+							<u-icon custom-prefix="custom-icon" name="heart-2-fill" size="36px" color="#fff"></u-icon>
+						</view>
+						<view class="praiseMain-pic-item">
+							<u-image class="newsList-img" src="/static/img/sexWoman.png" height="260" width="260" border-radius="10"></u-image>
+						</view>
+					</view>
+					<view class="praiseMain-pic-text">恭喜！您与「周群青」相互点赞！</view>
+					<view class="praiseMain-btn">
+						<u-button type="error" shape="circle" :custom-style="customStyle">联系Ta</u-button>
+					</view>
+				</view>
+			</view>
 		</view>
  	</view>
 </template>
@@ -11,7 +62,9 @@
 	export default {
 		data() {
 			return {
-
+				customStyle: {
+					background: '#FF5E5E'
+				}, 
 			}
 
 			methods: {
@@ -21,10 +74,98 @@
 		}
 	}
 </script>
-
+<style>
+	page{
+		background-color: #f4f0f0;
+	}
+</style>
 <style lang="scss" scoped>
+	.title{
+		font-size: 16px;
+		margin-bottom: 10px;
+		margin-left: 15px;
+	}
+	.praiseMain{
+		.praiseMain-item{
+			margin: 15px;
+			background-color: #fff;
+			border-radius: 12px;
+			padding: 20px;
+			position: relative;
+		}
+		.praiseMain-heart{
+			height: 60px;
+			width: 60px;
+			background-color: #FF5E5E;
+			position: absolute;
+			border-radius: 50%;
+			top: 95px;
+			left: 50%;
+			margin-left: -30px;
+			z-index: 9;
+			line-height: 60px;
+			text-align: center;
+		}
+		.praiseMain-tit{
+			font-size: 24px;
+			color:#FF5E5E;
+			margin-bottom: 10px;
+			text-align: center;
+		}
+		.praiseMain-pic{
+			display: flex;
+			justify-content: space-between;
+			padding: 0 15px;
+		}
+		.praiseMain-pic-text{
+			font-size: 16px;
+			text-align: center;
+			margin: 15px 0;
+		}
+		.praiseMain-btn{
+			padding: 0 15px;
+		}
+	}
 	.navbar-tit{
 		padding-left:15px;
 		font-size: 24px;
 	}
+	.praiseLink{
+		margin: 16px;
+		display: flex;
+		justify-content: space-between;
+		.praiseLink-item{
+			height: 80px;
+			background:url(../../static/img/listbg.png) no-repeat #fff right bottom;
+			background-size:65px 45px;
+			flex: 0.47;
+			padding: 20px;
+			border-radius: 12px;
+			.praiseLink-tit{
+				display: flex;
+				align-items: center;
+				span{
+					font-size: 12px;
+					color:#fff;
+					background-color: #FF5E5E ;
+					padding: 0 4px;
+					border-radius: 4px;
+					margin-left: 5px;
+				}
+				h4{
+					font-size: 16px;
+					font-weight: normal;
+				}
+			}
+			p{
+				color:#999;
+				font-size: 12px;
+				margin-top: 3px;
+			}
+		}
+		.praiseLink-bg2{
+			background:url(../../static/img/listbg2.png) no-repeat #fff right bottom;
+			background-size:65px 45px;
+		}
+	}
 </style>

pages/praise/praiseMe.vue

@@ -0,0 +1,150 @@
+<template>
+	<view>
+		<u-navbar :is-back="false" :border-bottom="false"><view class="navbar-tit">谁点赞了我</view></u-navbar>
+
+		<view class="friendList">
+			<view class="friendList-item">
+				<view class="friendList-new">
+					new
+				</view>
+				<u-image class="friendList-img" src="/static/img/sexMan.png" height="160" width="160" border-radius="10">
+				</u-image>
+				<view class="friendList-text">
+					<view class="friendList-name">
+						<span>123123</span>
+						<u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
+					</view>
+					<view class="friendList-info">
+						<span>123岁 · 123cm</span>&nbsp;<span>· 132kg</span>
+					</view>
+					<view class="friendList-label">
+						<view class="friendList-label-item">
+							<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
+							<span>123</span>
+						</view>
+						<view class="friendList-label-item">
+							<span>123</span>
+						</view>
+						<view class="friendList-label-item">
+							<span>123</span>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="friendList-item">
+				<u-image class="friendList-img" src="/static/img/sexWoman.png" height="160" width="160" border-radius="10">
+				</u-image>
+				<view class="friendList-text">
+					<view class="friendList-name">
+						<span>123123</span>
+						<u-icon custom-prefix="custom-icon" name="women-line" color="#FF695B"></u-icon>
+					</view>
+					<view class="friendList-info">
+						<span>123岁 · 123cm</span>&nbsp;<span>· 132kg</span>
+					</view>
+					<view class="friendList-label">
+						<view class="friendList-label-item">
+							<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
+							<span>123</span>
+						</view>
+						<view class="friendList-label-item">
+							<span>123</span>
+						</view>
+						<view class="friendList-label-item">
+							<span>123</span>
+						</view>
+					</view>
+				</view>
+			</view>
+			<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#f4f0f0">已经到底了</u-divider>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		
+		methods: {
+			
+		}
+	}
+</script>
+<style>
+	page {
+		background-color: #f4f0f0;
+	}
+</style>
+<style lang="scss" scoped>
+	.navbar-tit{
+			padding-left:15px;
+			font-size: 24px;
+		}
+	
+
+	.friendList {
+		padding: 15px;
+		.friendList-item {
+			display: flex;
+			background-color: #fff;
+			padding: 12px;
+			border-radius: 12px;
+			margin-bottom: 15px;
+			position: relative;
+			.friendList-new{
+				position: absolute;
+				right: 0;
+				top: 0;
+				background-color: #FF4F3F;
+				border-radius: 0 12px 0 8px;
+				color:#fff;
+				font-size: 12px;
+				padding:1px 5px;
+			}
+			.friendList-text {
+				flex: 1;
+				min-width: 0;
+				margin-left: 12px;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				.friendList-name {
+					font-weight: normal;
+
+					span {
+						font-size: 18px;
+						margin-right: 8px;
+					}
+				}
+
+				.friendList-info {
+					color: #999;
+					font-size: 12px;
+				}
+
+				.friendList-label {
+					display: flex;
+					align-items: center;
+
+					.friendList-label-item {
+						background: #F1F3F4;
+						padding: 2px 8px;
+						color: #A2A9B5;
+						border-radius: 4px;
+						font-size: 12px;
+						margin-right: 8px;
+
+						span {
+							margin-left: 3px;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/user/index.vue

@@ -2,7 +2,85 @@
 	<view>
 		<u-navbar :is-back="false" :border-bottom="false"><view class="navbar-tit">我的</view></u-navbar>
 		<view class="userHead">
-			
+			<view class="userHead-left">
+				<view class="userHead-name">
+					<h2>孙祺芮</h2>
+					<view class="userHead-icon">
+						<u-icon custom-prefix="custom-icon" name="shield-user-fill" color="#fff"></u-icon>
+						<span>认证会员</span>
+					</view>
+				</view>
+				<p>查看/编辑个人资料</p>
+			</view>
+			<u-avatar src="/static/img/sexMan.png" size="120"></u-avatar>
+		</view>
+		<view class="user-data">
+			<view class="user-data-tit">
+				<h2>完善个人资料</h2><u-icon custom-prefix="custom-icon" name="youjiantou" color="#B3B3B3"></u-icon>
+			</view>
+			<p>添加您的个人资料、相亲简历和择偶条件，可以提高相亲成功率哦~</p>
+			<u-line-progress active-color="#2979ff" :percent="70" height="8" :show-percent="false"></u-line-progress>
+		</view>
+		<view class="user-cell">
+			<view class="user-cell-item">
+				<view class="user-cell-l">
+					<u-icon custom-prefix="custom-icon" name="folder-user-fill" color="#FF695B" size="40"></u-icon>
+					<h4>公开我的资料</h4>
+				</view>
+				<view class="user-cell-r">
+					<u-switch v-model="checked"></u-switch>
+				</view>
+			</view>
+			<view class="user-cell-item">
+				<view class="user-cell-l">
+					<u-icon custom-prefix="custom-icon" name="smartphone-fill" color="#FF695B" size="40"></u-icon>
+					<h4>更换手机号</h4>
+				</view>
+				<view class="user-cell-r">
+					<span>155****1234</span>
+					<u-icon custom-prefix="custom-icon" name="youjiantou" color="#B3B3B3"></u-icon>
+				</view>
+			</view>
+			<view class="user-cell-item">
+				<view class="user-cell-l">
+					<u-icon custom-prefix="custom-icon" name="customer-service-fill" color="#FF695B" size="40"></u-icon>
+					<h4>联系客服</h4>
+				</view>
+				<view class="user-cell-r">
+					<span>0716-8123456</span>
+					<u-icon custom-prefix="custom-icon" name="youjiantou" color="#B3B3B3"></u-icon>
+				</view>
+			</view>
+			<view class="user-cell-item">
+				<view class="user-cell-l">
+					<u-icon custom-prefix="custom-icon" name="information-fill" color="#FF695B" size="40"></u-icon>
+					<h4>服务条款</h4>
+				</view>
+				<view class="user-cell-r">
+					<span></span>
+					<u-icon custom-prefix="custom-icon" name="youjiantou" color="#B3B3B3"></u-icon>
+				</view>
+			</view>
+			<view class="user-cell-item">
+				<view class="user-cell-l">
+					<u-icon custom-prefix="custom-icon" name="spam-3-fill" color="#FF695B" size="40"></u-icon>
+					<h4>注销账号</h4>
+				</view>
+				<view class="user-cell-r">
+					<p>注销后将无法使用该账号登录小程序</p>
+					<u-icon custom-prefix="custom-icon" name="youjiantou" color="#B3B3B3"></u-icon>
+				</view>
+			</view>
+			<view class="user-cell-item">
+				<view class="user-cell-l">
+					<u-icon custom-prefix="custom-icon" name="logout-box-r-fill" color="#FF695B" size="40"></u-icon>
+					<h4>退出</h4>
+				</view>
+				<view class="user-cell-r">
+					<span></span>
+					<u-icon custom-prefix="custom-icon" name="youjiantou" color="#B3B3B3"></u-icon>
+				</view>
+			</view>
 		</view>
  	</view>
 </template>
@@ -11,7 +89,7 @@
 	export default {
 		data() {
 			return {
-
+				checked: false,
 			}
 
 			methods: {
@@ -27,4 +105,82 @@
 		padding-left:15px;
 		font-size: 24px;
 	}
+	.userHead{
+		display: flex;
+		justify-content: space-between;
+		padding: 20px 15px;
+		.userHead-left{
+			.userHead-name{
+				display: flex;
+				align-items: center;
+				h2{
+					font-size: 20px;
+					font-weight: normal;
+				}
+				.userHead-icon{
+					display: flex;
+					align-items: center;
+					background-color: #4E8DF6;
+					padding: 2px 6px;
+					border-radius: 8px;
+					margin-left: 20px;
+					span{
+						color:#fff;
+						font-size: 12px;
+						margin-left: 3px;
+					}
+				}
+			}
+			p{
+				color:#847777;
+				margin-top: 8px;
+			}
+		}
+		
+	}
+	.user-data{
+		margin: 15px;
+		box-shadow: 0 0 6px 0 rgba(132,119,119,0.3);
+		padding: 12px 16px;
+		.user-data-tit{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			h2{
+				font-weight: normal;
+				font-size: 16px;
+			}
+		}
+		p{
+			color:#999;
+			margin: 10px 0;
+		}
+	}
+	.user-cell-item{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 14px 16px;
+		.user-cell-l{
+			display: flex;
+			align-items: center;
+			h4{
+				font-weight: normal;
+				margin-left: 8px;
+			}
+		}
+		.user-cell-r{
+			display: flex;
+			align-items: center;
+			span{
+				color:#978E8E;
+				margin-right: 4px;
+			}
+			p{
+				font-size: 12px;
+				color:#978E8E;
+				margin-right: 4px;
+			}
+		}
+	}
 </style>