[完成] 首页UI

[完成] 封装用户列表组件

components/lf-userList/lf-userList.vue

@@ -0,0 +1,76 @@
+<template>
+	<view class="content" :style="padding ? 'padding: 0rpx 32rpx' : 'padding: 0rpx'">
+		<view class="list" v-for="(item, index) in list" :key="index">
+			<lf-image class="avatar" src="@/static/logo.png"></lf-image>
+			<view class="info">
+				<view class="lf-flex-1">
+					<text>编号：83927</text>
+					<u-icon name="tags" class="lf-m-l-10"></u-icon>
+				</view>
+				<view class="lf-flex-1 lf-m-t-16">24岁·牛·180cm·本科·未婚</view>
+				<view class="lf-flex-1 lf-m-t-16">自有公司·金融/证券/保险·50万以上</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'lf-userList',
+		props: {
+			padding: {
+				type: Boolean, // 是否显示列表距离页面的边距
+				default: true
+			},
+			list: {
+				type: Array,
+				default: function(){
+					return [1,2,3,4,5,6,7,8,9,10]
+					// return [1]
+				}
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 100%;
+		height: max-content;
+		box-sizing: border-box;
+		.list{
+			padding: 30rpx 0;
+			border-bottom: 1rpx solid #E5E5E5;
+			display: flex;
+			width: 100%;
+			height: max-content;
+			.avatar{
+				width: 150rpx;
+				height: 150rpx;
+				border-radius: 10rpx;
+				margin-right: 15rpx;
+				background-color: #EEEEEE;
+			}
+			.info{
+				flex: auto;
+				min-height: 150rpx;
+				max-width: 522rpx;
+				display: flex;
+				align-content: space-between;
+				flex-wrap: wrap;
+				flex-direction: column;
+			}
+		}
+	}
+</style>

components/self-line/self-line.vue

@@ -0,0 +1,16 @@
+<template>
+	<view class="bg-gray1 h-20" />
+</template>
+
+<script>
+</script>
+
+<style>
+	.h-20 {
+	    height: 20rpx;
+	}
+	.bg-gray1 {
+		background-color: #F6F6F6;
+		color: #333333;
+	}
+</style>

main.js

@@ -24,6 +24,10 @@ Vue.prototype.$http = $http;
 // 将无数据组件注入全局
 import lfNocontent from '@/components/lf-nocontent/lf-nocontent.vue';
 Vue.component('lf-nocontent', lfNocontent);
+// 页面分割
+import selfLine from '@/components/self-line/self-line.vue';
+Vue.component('self-line', selfLine);
+
 
 const app = new Vue({
     ...App

pages.json

@@ -6,7 +6,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "领峰UI",
+				"navigationBarTitleText": "相亲交友",
 				"enablePullDownRefresh": true
 			}
 		},
@@ -20,7 +20,7 @@
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "领峰UI",
+		"navigationBarTitleText": "相亲交友",
 		"navigationBarBackgroundColor": "#FFFFFF",
 		"backgroundColor": "#F8F8F8"
 	},

pages/index/index.vue

@@ -1,41 +1,123 @@
 <template>
-	<view class="lf-row-center lf-flex-column">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+	<view>
+		<!-- 头部搜索框 -->
+		<view class="head-bar">
+			<view class="lf-flex search">
+				<u-icon name="search" class="lf-font-30 lf-m-l-20"></u-icon>
+				<view class="lf-m-l-10 lf-font-24">搜索</view>
+			</view>
+			<view class="botton">签到</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">
+					<text class="lf-font-28">查看全部</text>
+					<u-icon name="arrow-right"></u-icon>
+				</view>
+			</view>
+			<scroll-view class="scroll-bar" :scroll-x="true">
+				<view class="lf-flex">
+					<view class="user-item">
+						<!-- <lf-image class="avatar" src="@/static/logo.png"></lf-image> -->
+						<image class="add-icon" src="@/static/logo.png"></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">
+					<text class="lf-font-28">最新</text>
+					<u-icon name="arrow-right"></u-icon>
+				</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 {
-				title: 'Hello Leadfyy UI'
+				
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-	
-	.text-area {
+	.head-bar{
+		width: 750rpx;
+		height: max-content;
+		padding: 21rpx 32rpx;
 		display: flex;
-		justify-content: center;
+		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;
+		}
 	}
 	
-	.title {
-		font-size: 36rpx;
-		background-image: linear-gradient(135deg, red, blue);
-		background-clip: text;
-		color: transparent;
+	.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: 96rpx;
+				height: 96rpx;
+				border: 5rpx solid #E21196;
+				border-radius: 50%;
+			}
+		}
 	}
 </style>