好友列表,统一风格

This commit is contained in:
2022-01-24 09:23:11 +08:00
parent a30f2f9bd0
commit 33b4fb304d
2 changed files with 25 additions and 44 deletions

View File

@@ -1,17 +1,20 @@
<template>
<view>
<view class="list">
<view class="list__item" @click="toPending">
<u-avatar size="35" icon="plus-people-fill" fontSize="26" bg-color="#f0ad4e"></u-avatar>
<text class="list__item__user-name">新的朋友</text>
</view>
<u-line></u-line>
<view class="list__item" @click="showToast">
<u-avatar size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar>
<text class="list__item__user-name">我的群聊</text>
</view>
<u-line></u-line>
</view>
<u-list height="auto">
<u-list-item>
<u-cell title="新的朋友" @click="toPending">
<u-avatar slot="icon" size="35" font-size="24" icon="plus-people-fill" shape="square"
bg-color="#f0ad4e"></u-avatar>
</u-cell>
</u-list-item>
<u-list-item>
<u-cell title="我的群聊" @click="showToast">
<u-avatar slot="icon" size="35" font-size="24" icon="account-fill" shape="square"
bg-color="#4cd964"></u-avatar>
</u-cell>
</u-list-item>
</u-list>
<block v-if="friends.length > 0">
<u-list height="auto">
<u-list-item v-for="(item, index) in friends" :key="index">
@@ -74,33 +77,6 @@
</script>
<style lang="scss">
.list {
&__item {
@include flex;
padding: 6px 12px;
align-items: center;
&__avatar {
height: 35px;
width: 35px;
border-radius: 50%;
}
&__user-name {
font-size: 16px;
margin-left: 10px;
color: $u-main-color;
}
}
&__footer {
color: $u-tips-color;
font-size: 14px;
text-align: center;
margin: 15px 0;
}
}
// 页面空
.pages-null {
height: 70vh;