diff --git a/.DS_Store b/.DS_Store
index fbf1f23..102121f 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/App.vue b/App.vue
index ad31a1b..185135f 100644
--- a/App.vue
+++ b/App.vue
@@ -5,7 +5,7 @@
     export default {
         onLaunch: function() {
             im.initIm('lmxuhwaglu76d')
-
+			return
             //#ifdef APP-PLUS
             // 获取系统版本号
             getVersions({
diff --git a/apis/interfaces/im.js b/apis/interfaces/im.js
index 07dcddf..55652a8 100644
--- a/apis/interfaces/im.js
+++ b/apis/interfaces/im.js
@@ -12,7 +12,7 @@ import {
 // 获取好友列表
 const getFriends = () => {
     return request({
-        url: 'im/friends',
+        url: 'im/friends/letter',
     }, true)
 }
 
diff --git a/pages.json b/pages.json
index 34409cf..d6d23bf 100644
--- a/pages.json
+++ b/pages.json
@@ -372,28 +372,8 @@
             "path": "pages/im/index",
             "name": "IM",
             "style": {
-                "navigationBarTitleText": "聊聊",
-                "navigationBarBackgroundColor": "#F3F6FB",
-                "app-plus": {
-                    "titleNView": {
-                        "buttons": [
-                            {
-                                "float": "left",
-                                "text": "\ue605",
-                                "fontSrc": "/static/iconfont.ttf",
-                                "color": "#000",
-                                "fontSize": "20px"
-                            },
-                            {
-                                "float": "right",
-                                "text": "\ue606",
-                                "fontSrc": "/static/iconfont.ttf",
-                                "color": "#000",
-                                "fontSize": "20px"
-                            }
-                        ]
-                    }
-                }
+                "navigationBarBackgroundColor": "#FFFFFF",
+				"navigationStyle":"custom"
             }
         },
         {
diff --git a/pages/im/friends/index.vue b/pages/im/friends/index.vue
index b3f2ed2..2b3d801 100644
--- a/pages/im/friends/index.vue
+++ b/pages/im/friends/index.vue
@@ -1,28 +1,37 @@
 <template>
-    <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">
-                    <u-cell :title="item.name + item.userId" @click="toInfo(item.userId)">
-                        <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
-                    </u-cell>
-                </u-list-item>
-            </u-list>
+    <view>
+        <block v-if="friends.length > 0">
+			<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
+				<view>
+					<view class="friend-flex" @click="toPending">
+						<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
+						<view class="name">新的朋友</view>
+					</view>
+					<view class="friend-flex" @click="showToast">
+						<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
+						<view class="name">我的群聊</view>
+					</view>
+				</view>
+				<template v-for="(item, friend) in friends">
+					<!-- #ifdef APP-NVUE -->
+						<u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666"></u-index-anchor>
+					<!-- #endif -->
+					<u-index-item>
+						<!-- #ifndef APP-NVUE -->
+							<u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666"></u-index-anchor>
+						<!-- #endif -->
+						<view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex">
+							<block v-if="friendItem.portraitUrl != ''">
+								<u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''" :default-url="require('@/static/user/cover.png')"></u-avatar>
+							</block>
+							<block v-else>
+								<u-avatar class="cover" size="40" shape="square" :src="require('@/static/user/cover.png')"></u-avatar>
+							</block>
+							<view class="name">{{friendItem.name}}</view>
+						</view>
+					</u-index-item>
+				</template>
+			</u-index-list>
         </block>
         <block v-else>
             <u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
@@ -37,13 +46,17 @@
     } from '@/apis/interfaces/im'
     export default {
         data() {
-            return {
+            return {
+				indexs : [],
                 friends: []
             }
         },
         onShow() {
-            getFriends().then(res => {
-                this.friends = res
+            getFriends().then(res => {
+				this.indexs  = res.indexList
+                this.friends = res.itemArr
+				
+				console.log(res.itemArr)
             })
         },
         computed: {
@@ -76,9 +89,36 @@
     }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     // 页面空
     .pages-null {
         height: 70vh;
-    }
+    }
+	// 好友列表
+	.friend-flex{
+		position: relative;
+		padding: 20rpx $padding;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		// .cover
+		.name{
+			flex: 1;
+			padding-left: $padding;
+			font-size: $title-size;
+			@extend .nowrap;
+		}
+		&::after{
+			position: absolute;
+			height: 1rpx;
+			background: $border-color;
+			left: calc(40px + #{$padding * 2});
+			right: 0;
+			bottom: 0;
+			content: " ";
+		}
+		&:last-child::after{
+			display: none;
+		}
+	}
 </style>
diff --git a/pages/im/index.vue b/pages/im/index.vue
index 741e92a..7c0630f 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -1,5 +1,24 @@
 <template>
-    <view class="container">
+    <view class="contents">
+		<view class="ios-top"></view>
+		<!-- header -->
+		<view class="custom-header">
+			<view class="header-flex">
+				<view class="tabs">
+					<view class="item show">私聊</view>
+					<view class="item" @click="onNav('', {})">群聊</view>
+				</view>
+				<view class="btns">
+					<view class="item" @click="onNav('imFriends', {})">
+						<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
+					</view>
+					<view class="item" @click="onNav('', {})">
+						<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- content -->
         <view v-if="$store.state.token != ''">
             <block v-if="conversations.length < 1">
                 <view class="vertical null-list">
@@ -11,30 +30,22 @@
                 </view>
             </block>
             <block v-else>
-                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
-
-                <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
-                    @tap="toDetail(item)" @longpress="onLongPress" :data-item="item">
-                    <view class="avatar">
-                        <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
-                            :value="item.unreadMessageCount" />
-                        <u-avatar size="44" v-if="!friend(item.targetId).portraitUrl"
-                            :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
-                            font-size="14" randomBgColor></u-avatar>
-                        <u-avatar v-else :src="friend(item.targetId).portraitUrl" size="44">
-                        </u-avatar>
-                    </view>
-
-                    <view class="content">
-                        <view class="header">
+                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
+                <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]" @tap="toDetail(item)" @longpress="onLongPress" :data-item="item">
+					<view class="avatar">
+						<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]" :value="item.unreadMessageCount" />
+						<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" font-size="16" randomBgColor></u-avatar>
+						<u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
+					</view>
+					<view class="content">
+						<view class="header">
                             <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
                             <view class="time">{{ item.sentTime|timeCustomCN }}</view>
-                        </view>
-                        <view class="preview">{{ item.latestMessage.content || '&nbsp;' }}</view>
-                    </view>
+						</view>
+						<view class="preview">{{ item.latestMessage.content || '' }}</view>
+                    </view>
                 </view>
-
-                <view class="shade" @tap="hidePop">
+                <view class="shade" @tap="hidePop">
                     <view class="pop" :style="popStyle" :class="{'show':showPop}">
                         <view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
                             {{item}}
@@ -58,10 +69,8 @@
     import * as RongIMLib from '@rongcloud/imlib-uni'
     import im from '@/utils/im/index.js'
     import userAuth from '@/public/userAuth'
-    import {
-        getImToken
-    } from '@/apis/interfaces/im.js'
-
+    import { getImToken } from '@/apis/interfaces/im.js'
+	
     export default {
         data() {
             return {
@@ -145,7 +154,7 @@
                 this.getConversationList()
                 this.hidePop()
             },
-            onLongPress(e) {
+            onLongPress(e) {
                 let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
 
                 if (touches.clientY > (this.winSize.height / 2)) {
@@ -194,82 +203,128 @@
                     url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
                         .conversationType
                 })
-            }
+            },
+			// 点击按钮
+			onNav(name, params){
+				if(this.toLogin){
+					if(name === ''){
+						uni.showToast({
+							title: '开发中，敬请期待',
+							icon : 'none'
+						})
+						return
+					}
+					this.$Router.push({name, params})
+				}
+			}
         }
     }
 </script>
 
-<style lang="scss" scoped>
-    .container {
+<style lang="scss" scoped>
+	// header
+	.custom-header{
+		@extend .ios-top;
+		background: white;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 9999;
+		.header-flex{
+			padding: 20rpx $padding;
+			display: flex;
+			justify-content: space-between;
+			height: 60rpx;
+			line-height: 60rpx;
+			.tabs{
+				.item{
+					margin-left: $margin;
+					display: inline-block;
+					font-size: $title-size-lg;
+					color: $text-gray;
+					padding: 0 ($padding - 10);
+					border-radius: 30rpx;
+					&:first-child{
+						margin: 0;
+					}
+					&.show{
+						background: rgba($color: $main-color, $alpha: .1);
+						color: $main-color;
+						font-weight: bold;
+					}
+				}
+			}
+			.btns{
+				.item{
+					display: inline-block;
+					margin-left: $margin;
+				}
+			}
+		}
+	}
+	
+	// contents
+    .contents {
         background-color: $window-color;
-        min-height: 100vh;
-
+        min-height: 100vh;
+		padding-top: 90rpx;
+		box-sizing: border-box;
         .null-list {
             height: 100vh;
             text-align: center;
-
             &-btn {
                 margin-top: $margin * 2;
                 line-height: 70rpx;
                 color: $main-color;
-                border: solid 1rpx $main-color;
+                border: solid 2rpx $main-color;
                 padding: 0 ($padding*3);
                 font-size: $title-size-m;
                 border-radius: 35rpx;
                 box-sizing: border-box;
             }
         }
-
         .message {
-            position: relative;
-            display: flex;
-            background: white;
-            padding: 24rpx 24rpx 20rpx 24rpx;
-
+            background: white;
+			padding: 20rpx 30rpx;
+			position: relative;
+			display: flex;
             &.is-top {
-                background: $window-color;
-            }
-
-            .avatar {
-                position: relative;
-
+                background: $window-color;
+            }
+            .avatar {
+				position: relative;
                 .u-badge {
-                    z-index: 999;
+                    z-index: 998;
                 }
             }
-
-            .content {
-                margin-left: 16rpx;
-                flex: 1;
-
+            .content {
+				padding-left: 30rpx;
+				width: calc(100% - 44px);
+				box-sizing: border-box;
                 .header {
                     display: flex;
                     justify-content: space-between;
-
                     .name {
-                        font-size: 36rpx
+                        font-size: $title-size + 4;
                     }
-
                     .time {
-                        font-size: 24rpx;
+                        font-size: $title-size-sm;
                         color: $text-gray;
                     }
                 }
-
                 .preview {
-                    width: 520rpx;
                     word-break: break-all;
                     color: $text-gray;
-                    font-size: 26rpx;
+                    font-size: $title-size-sm;
                     @extend .nowrap;
                 }
             }
         }
-
         .message:not(:last-child) {
             &::after {
                 position: absolute;
-                left: $padding + 108;
+                left: calc(44px + #{$padding} + 30rpx);
                 right: 0;
                 bottom: 0;
                 content: " ";
diff --git a/static/.DS_Store b/static/.DS_Store
index c45d1ef..3cd5bcc 100644
Binary files a/static/.DS_Store and b/static/.DS_Store differ
diff --git a/static/iconfont.css b/static/iconfont.css
index ea0d6a9..e3beb58 100644
--- a/static/iconfont.css
+++ b/static/iconfont.css
@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gengduo2:before {
+  content: "\e608";
+}
+
 .icon-gengduo:before {
   content: "\e607";
 }
diff --git a/static/iconfont.ttf b/static/iconfont.ttf
index 36c0377..bc0ec3a 100644
Binary files a/static/iconfont.ttf and b/static/iconfont.ttf differ
diff --git a/static/im/im_00.png b/static/im/im_00.png
new file mode 100644
index 0000000..e8cf083
Binary files /dev/null and b/static/im/im_00.png differ
diff --git a/static/im/im_01.png b/static/im/im_01.png
new file mode 100644
index 0000000..ac0fc3e
Binary files /dev/null and b/static/im/im_01.png differ