re

pages/im/friends/pending.vue

@@ -1,14 +1,69 @@
 <template>
-    <div>
-        <search></search>
-        
-        <list></list>
-        好友搜索，好友申请列表 都会在这个页面
-    </div>
+	<view>
+		<!-- 搜索 -->
+		<view class="header-search">
+			<u-search placeholder="输入手机号码搜索" v-model="searchValue"></u-search>
+		</view>
+		<!-- 新朋友 -->
+		<view class="lists">
+			<view class="lists-item" v-for="(item, index) in 10" :key="index">
+				<image class="lists-item-cover" src="" mode="aspectFill"></image>
+				<view class="">好友</view>
+				<view class="">
+					<text>通过</text>
+					<text>拒绝</text>
+				</view>
+			</view>
+		</view>
+		<!-- 空列表 -->
+		<view class="">
+			空列表
+		</view>
+	</view>
 </template>
 
 <script>
+	export default{
+		data(){
+			return{
+				searchValue: "",
+				listsArr: []
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.header-search{
+		padding: $padding/2 $padding;
+		background: white;
+	}
+	// 好友列表
+	.lists{
+		.lists-item{
+			padding: 20rpx $padding;
+			position: relative;
+			display: flex;
+			align-items: center;
+
+			&::after{
+				content: " ";
+				position: absolute;
+				left: $margin;
+				right: 0;
+				bottom: 0;
+				height: 1rpx;
+				background-color: $border-color;
+			}
+			&:last-child::after{
+				display: none;
+			}
+			.lists-item-cover{
+				width: 98rpx;
+				height: 98rpx;
+				border-radius: 50%;
+				background: $window-color;
+			}
+		}
+	}
 </style>