[完成] 最新交友用户列表

pages.json

@@ -45,6 +45,12 @@
 				"navigationBarBackgroundColor": "#FE3EA5",
 				"navigationBarTextStyle": "white"
 			}
+		},
+		{
+			"path": "pages/userList/userList",
+			"style": {
+				"navigationBarTitleText": "相亲交友"
+			}
 		}
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -36,7 +36,7 @@
 		<view>
 			<view class="lf-row-between lf-p-30 lf-p-32 lf-p-b-20">
 				<view class="lf-font-32 lf-color-black">推荐单身</view>
-				<view class="lf-color-999">
+				<view class="lf-color-999" @click="$url('/pages/userList/userList')">
 					<text class="lf-font-28">最新</text>
 					<u-icon name="arrow-right"></u-icon>
 				</view>

pages/userList/userList.vue

@@ -0,0 +1,121 @@
+<template>
+	<view>
+		<view class="head">
+			<button class="sign-in-btn">签到</button>
+			<view class="filter-item" @click="show_filter = true">
+				<text>女生</text>
+				<text class="lf-iconfont icon-iconfront-"></text>
+			</view>
+			<view class="filter-item" @click="show_filter = true">
+				<text>年龄</text>
+				<text class="lf-iconfont icon-iconfront-"></text>
+			</view>
+			<view class="filter-item" @click="show_filter = true">
+				<text>学历</text>
+				<text class="lf-iconfont icon-iconfront-"></text>
+			</view>
+			<view class="filter-item" @click="show_filter = true">
+				<text>搜索</text>
+				<text class="lf-iconfont icon-iconfront-"></text>
+			</view>
+			<view class="filter-modal" v-if="show_filter" @click="show_filter = false">
+				<view class="filter-content">
+					<view @click="show_filter = false">不限</view>
+					<view @click="show_filter = false">20~25岁</view>
+					<view @click="show_filter = false">25~30岁</view>
+					<view @click="show_filter = false">30~35岁</view>
+					<view @click="show_filter = false">35~40岁</view>
+					<view @click="show_filter = false">40~45岁</view>
+					<view @click="show_filter = false">45岁以上</view>
+				</view>
+			</view>
+		</view>
+		<view style="height: 104rpx;"></view>
+		<lf-user-list></lf-user-list>
+		<!-- 加载 -->
+		<view class="loading-more">
+			<text>没有更多数据啦~</text>
+		</view>
+		<!-- 回到顶部 -->
+		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
+	</view>
+</template>
+
+<script>
+	import lfUserList from '@/components/lf-userList/lf-userList.vue'
+	export default {
+		components: { lfUserList },
+		data(){
+			return {
+				show_filter: false
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.head{
+		width: 750rpx;
+		height: 102rpx;
+		border-bottom: 1rpx solid #e5e5e5;
+		position: fixed;
+		background-color: #FFFFFF;
+		z-index: 9;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 32rpx;
+		box-sizing: border-box;
+		.sign-in-btn{
+			margin: 0;
+			width: 140rpx;
+			height: 62rpx;
+			background-color: #FCF7FA;
+			border: 1rpx solid #E21196;
+			border-radius: 10rpx;
+			font-size: 28rpx;
+			color: #E21196;
+			line-height: 60rpx;
+		}
+		.filter-item{
+			width: 100rpx;
+			height: 62rpx;
+			line-height: 62rpx;
+			text-align: right;
+			font-size: 28rpx;
+			color: #222222;
+		}
+		.filter-modal{
+			position: absolute;
+			z-index: 7;
+			background-color: rgba(0,0,0,0.5);
+			top: 103rpx;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			width: 100vw;
+			height: calc(100vh - 103rpx);
+			.filter-content{
+				position: absolute;
+				width: 100%;
+				height: 300rpx;
+				background-color: #FFFFFF;
+				left: 0;
+				z-index: 14;
+				overflow-y: scroll;
+				padding-left: 32rpx;
+				view{
+					height: 60rpx;
+					border-bottom: 1rpx solid #e5e5e5;
+					line-height: 60rpx;
+				}
+			}
+		}
+	}
+</style>