blindDate/pages/userList/userList.vue

<template>
	<view>
		<view class="head">
			<button class="sign-in-btn" @click="$url('/pages/signIn/signIn')">签到</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>