blindDate/pages/index/index.vue

<template>
	<view>
		<!-- 头部搜索框 -->
		<view class="head-bar">
			<view class="lf-flex search" @click="$url('/pages/userList/userList?name=搜索')">
				<text class="lf-iconfont icon-linedesign-12 lf-font-30 lf-m-l-20"></text>
				<view class="lf-m-l-10 lf-font-24">搜索</view>
			</view>
			<view class="botton" @click="$url('/pages/signIn/signIn')">签到</view>
		</view>
		<!-- 上墙部分 -->
		<view class="up-the-wall">
			<view class="lf-row-between">
				<view class="lf-font-32 lf-color-black">最新上墙</view>
				<view class="lf-color-999" @click="$url('/pages/wallMember/wallMember')">
					<text class="lf-font-28">查看全部</text>
					<text class="lf-iconfont icon-xiangyou"></text>
				</view>
			</view>
			<scroll-view class="scroll-bar" :scroll-x="true">
				<view class="lf-flex">
					<view class="user-item" @click="$url('/pages/upTheWall/upTheWall')">
						<lf-image class="add-icon" src="../../static/images/add_icon.png"></lf-image>
						<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">我要上墙</view>
					</view>
					<view class="user-item" v-for="item in 6" :key="item">
						<image class="avatar" src="@/static/logo.png"></image>
						<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">编号 73949</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<self-line />
		<!-- 推荐单身 -->
		<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" @click="$url('/pages/userList/userList?name=最新')">
					<text class="lf-font-28">最新</text>
					<text class="lf-iconfont icon-xiangyou"></text>
				</view>
			</view>
			<lf-user-list></lf-user-list>
		</view>
		<!-- 加载 -->
		<view class="loading-more">
			<text 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 {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-bar{
		width: 750rpx;
		height: max-content;
		padding: 21rpx 32rpx;
		display: flex;
		justify-content: space-between;
		.search{
			width: 530rpx;
			height: 62rpx;
			background: #F7F7F7;
			border-radius: 32rpx;
			color: #999999;
		}
		.botton{
			width: 140rpx;
			height: 62rpx;
			background: #F7F7F7;
			border-radius: 32rpx;
			text-align: center;
			line-height: 62rpx;
			color: #222222;
		}
	}
	
	.up-the-wall{
		width: 750rpx;
		height: max-content;
		padding: 21rpx 32rpx 0;
		.scroll-bar{
			width: 100%;
			height: 164rpx;
			padding: 30rpx 0;
			.user-item{
				width: 136rpx;
				margin-right: 40rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				&:last-child{
					margin-right: 0rpx;
				}
			}
			.add-icon{
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}
			.avatar{
				width: 110rpx;
				height: 110rpx;
				border: 5rpx solid #E21196;
				border-radius: 50%;
				box-sizing: border-box;
			}
		}
	}
</style>