70 lines
1.2 KiB
Vue
70 lines
1.2 KiB
Vue
<template>
|
|
<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 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>
|