diff --git a/common/css/component.scss b/common/css/component.scss
index b45a06797d97739cf90af7de758f5b8c8e50c40a..916fc15e77c718538bc4e60ecc3653492171cc05 100644
--- a/common/css/component.scss
+++ b/common/css/component.scss
@@ -1,3 +1,4 @@
+//数量提示小红点气泡
 @mixin no-read-css {
 	display: flex;
 	height: 32rpx;
diff --git a/common/css/style.scss b/common/css/style.scss
index 1dabeb65963079e82ed4be981bd75053baef9c9a..73a907ce0f087b8e4f8dd71d0e15e9b01c785d77 100644
--- a/common/css/style.scss
+++ b/common/css/style.scss
@@ -1,6 +1,8 @@
 //主色调
 $global-primary: #29105D !default;
 
+$global-center: lighten($global-primary, 45%) !default;
+
 //次色调
 $global-minor: #9C94FF !default;
 
@@ -8,4 +10,10 @@ $global-minor: #9C94FF !default;
 $global-general: #F7F7F7 !default;
 
 //红色提示
-$global-red: #f56c6c !default
\ No newline at end of file
+$global-red: #f56c6c !default;
+
+//性别女
+$sex-girl: #FF0080 !default;
+
+//性别男
+$sex-boy: #60baff !default;
\ No newline at end of file
diff --git a/components/my-tabbar.vue b/components/my-tabbar.vue
index a8ed90f8b78c4eca59825ba6e68074d0b839c5ed..25e64abd87715abbd79464a847d74e614764ed35 100644
--- a/components/my-tabbar.vue
+++ b/components/my-tabbar.vue
@@ -16,7 +16,7 @@
 							<image v-else class="image-area" :src="item.iconPath"></image>
 						</view>
 					
-						<view class="title">
+						<view class="title" :class="{'active': current === index}">
 							{{ item.title }}
 						</view>
 					</view>
@@ -56,7 +56,8 @@
 		height: calc(100rpx + constant(safe-area-inset-bottom));
 		height: calc(100rpx + env(safe-area-inset-bottom));	
 		.custom-tabbar-fixed {
-			//box-shadow:4px 4px 8px #999999;
+			box-shadow: 0 10px 16px $global-primary;
+			//border-top: 1px solid $global-minor;
 			background-color: $global-general;
 			width: 100%;
 			position: fixed;
@@ -72,13 +73,11 @@
 				display: flex;
 				justify-content: space-between;
 				.tabbar-item {
-				
-					padding-top: 18rpx;
+					padding-top: 10rpx;
 					display: flex;
 					flex: 1;
 					flex-direction: column;
 					align-items: center;
-					justify-content: center;
 					
 					.image-box {
 						position: relative;
@@ -91,12 +90,16 @@
 						}
 					}
 					.image-area {
-						width: 44rpx;
-						height: 44rpx;
+						font-size: 0;
+						width: 40rpx;
+						height: 40rpx;
 					}
 					.title {
-						padding-top: 5rpx;
 						font-size: 22rpx;
+						color: #999999;
+						&.active {
+							color: $global-primary;
+						}
 					}
 				}
 			}
diff --git a/components/my-topbar.vue b/components/my-topbar.vue
index 182f4c5a2c2ef0ebcc8c923ad39dfb6e3ac0cae9..5d51c1a10300c88f2749dc01d604ef50d64663db 100644
--- a/components/my-topbar.vue
+++ b/components/my-topbar.vue
@@ -35,7 +35,8 @@
 <style scoped lang="scss">
 	.my-topbar {
 		.my-topbar-content {
-			background-color: $global-general;
+			background: linear-gradient(to bottom, $global-primary ,#d1d1d1);
+			color: #ffffff;
 			width: 100%;
 			position: fixed;
 			// z-index 不可以太高，容易遮挡住 loading
diff --git a/manifest.json b/manifest.json
index ea5c8d728ea75321f196aaccd514dae162e6f5bf..e24ac741cff7c5b7c242e70b417b832287e0b4a4 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,8 +2,8 @@
     "name" : "private-chat",
     "appid" : "__UNI__CB4BB2F",
     "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
+    "versionName" : "1.0.6",
+    "versionCode" : 106,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {
@@ -133,7 +133,7 @@
             "disableHostCheck" : true,
             "proxy" : {
                 "/api" : {
-                    "target" : "http://1.116.67.83:9090",
+                    "target" : "http://127.0.0.1:9090",
                     "changeOrigin" : true,
                     "secure" : false,
                     "pathRewrite" : {
diff --git a/pages.json b/pages.json
index 7fb7ac52fc9c44e18e15adcce519dc267071848b..92ab4c114e6add3238f8577d53ad2b63b674f07c 100644
--- a/pages.json
+++ b/pages.json
@@ -117,7 +117,7 @@
         }
     ],
 	"globalStyle": {
-		"navigationBarTextStyle": "black",
+		"navigationBarTextStyle": "white",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#f7f7f8"
diff --git a/pages/chat-room/single-room.vue b/pages/chat-room/single-room.vue
index fcf87a293b252d3e58c812477c2a2b1ab0b57c1b..91453db19540cbb2036446b55949e1eb09435071 100644
--- a/pages/chat-room/single-room.vue
+++ b/pages/chat-room/single-room.vue
@@ -10,37 +10,37 @@
 		<!-- 
 			当软键盘上升的时候 取消安全域 
 		-->
-		<view class="chat-box" 
-			:class="{'safe':!height}" 
-			:style="{'height': elasticHeight}">
+		<view class="chat-box" :class="{'safe':!height}" :style="{'height': elasticHeight}">
+			<!-- :scroll-into-view="scrollIntoView" -->
 			<scroll-view 
-				:scroll-with-animation="true"
-				:scroll-y="true"
-				@scrolltoupper="upLoadMessage"
+				:scroll-with-animation="isAnimation" 
+				:scroll-y="true" 
+				:scroll-into-view="scrollIntoView"
+				@scrolltoupper="upLoadMessage" 
 				:scroll-top="scrollTop"
 				@scroll="scroll"
-				class="message-box"
-				id="messageBox">
+				class="message-box" id="messageBox">
 				<!-- 必须要有 message-list这个class 因为我是用这个class来计算scroll-view的高度的-->
 				<view id="messageList" class="message-list">
 					<view class="message-loading" v-if="messageLoading">加载...</view>
-					<view class="message-item" :class="{'left':item.senderId !== userInfo.id }" v-for="(item,index) in messageList" :key="index">
+					<view class="message-item" :class="{'left':item.senderId !== userInfo.id }"
+						v-for="(item,index) in messageList" :key="item.id" :id="`msg`+item.id">
 						<view class="avatar">
-							<u-avatar :size="55" class="avatar"
-							 :src="item.senderId !== userInfo.id?targetInfo.avatar:userInfo.avatar"></u-avatar>
+							<u-avatar :size="65" class="avatar"
+								:src="item.senderId !== userInfo.id?targetInfo.avatar:userInfo.avatar"></u-avatar>
 						</view>
-						<view class="message"  :class="{'left':item.senderId !== userInfo.id }">
+						<view class="message" :class="{'left':item.senderId !== userInfo.id }">
 							<view class="content" :class="{'left':item.senderId !== userInfo.id }">
 								{{item.message}}
-							</view>					
+							</view>
 						</view>
 					</view>
 				</view>
-				
+
 			</scroll-view>
 			<view class="bottom-box">
-				<textarea placeholder="请输入" v-model="param.message" class="input-box"
-				@focus="rearchDown" :adjust-position="false" auto-height />
+				<textarea placeholder="请输入" v-model="param.message" class="input-box" @focus="rearchDown"
+					:adjust-position="false" auto-height />
 				<!-- 使用 @touchend.prevent而不是@click 是为了点击发送后不让焦点消失-->
 				<view class="send-btn" @touchend.prevent="sendMessage" :class="{'disable': !param.message}">
 					发送
@@ -51,7 +51,11 @@
 </template>
 
 <script>
-	import {mapMutations,mapGetters,mapState} from "vuex";
+	import {
+		mapMutations,
+		mapGetters,
+		mapState
+	} from "vuex";
 	import SingleRoomTopbar from "./topbar/single-room-topbar.vue";
 	import messageApi from "@/api/chat/message.js";
 	import latelyApi from "@/api/chat/lately.js";
@@ -65,12 +69,13 @@
 			return {
 				targetInfo: {}, //聊天室目标对象
 				height: 0,
+				isAnimation: true,
 				scrollTop: 0,
 				old: {
 					scrollTop: 0
 				},
 				param: {
-					file: null ,
+					file: null,
 					message: "", //消息内容
 					msgType: 0, //消息类型
 					senderId: null, //发送者
@@ -80,16 +85,19 @@
 				},
 				page: {
 					current: 1,
-					size: 20
+					size: 25
 				},
 				messageLoading: false,
 				messageList: [],
-				isBottom: false
+				isBottom: false,
+				timeFlag: null,
+				isEmpty: false,
+				scrollIntoView: "", //锚点
 			}
 		},
 		computed: {
 			...mapState({
-			    latelyList: (state) => state.chat.latelyList,
+				latelyList: (state) => state.chat.latelyList,
 			}),
 			...mapGetters({
 				userInfo: "user/getUserInfo",
@@ -119,8 +127,8 @@
 		},
 		onLoad(param) {
 			//软键盘升起降落的时候，软键盘高度监控
-			uni.onKeyboardHeightChange(res =>{
-			    //获取键盘高度
+			uni.onKeyboardHeightChange(res => {
+				//获取键盘高度
 				this.height = res.height
 			})
 			this.targetInfo.id = param.userId
@@ -128,82 +136,124 @@
 		},
 		async onReady() {
 			this.messageList = []
-			
+
 			let userInfo = await userApi.getUserInfoById(this.targetInfo.id)
-			
+
 			this.targetInfo = userInfo
-			
+
 			//获得最新的十条记录 后续新记录则unshift到头部
 			await this.getMessageList()
-			
+
 			this.rearchDown()
 		},
 		methods: {
 			...mapMutations({
-			    removeRoomFlagVX(commit) {
-			       commit("chat/REMOVE_ROOM_FLAG")
-			    },
+				removeRoomFlagVX(commit) {
+					commit("chat/REMOVE_ROOM_FLAG")
+				},
 			}),
 			scroll(e) {
 				let detail = e.detail
-			    this.old.scrollTop = detail.scrollTop
-				
+				this.old.scrollTop = detail.scrollTop
+
 				//判断是否已经到达底部
 				this.getBoxDom(box => {
 					this.getMessageDom(list => {
-						if(box.height + detail.scrollTop === list.height) {
+						if (box.height + detail.scrollTop === list.height) {
 							this.isBottom = true
-						}else {
+						} else {
 							this.isBottom = false
 						}
 					})
 				})
 			},
 			getBoxDom(call) {
-				this.$nextTick(function(){
+				this.$nextTick(function() {
 					const query = uni.createSelectorQuery().in(this);
 					let info = query.select("#messageBox");
-					　　　  　info.boundingClientRect((data) => { //data - 各种参数
-							 call(data)
+					info.boundingClientRect((data) => { //data - 各种参数
+						call(data)
 					}).exec()
 				})
 			},
 			//获得消息列表的高度
 			getMessageDom(call) {
-				this.$nextTick(function(){
-					let info = uni.createSelectorQuery().select("#messageList");
-					　　　  　info.boundingClientRect((data) => { //data - 各种参数
-							 call(data)
+				this.$nextTick(function() {
+					const query = uni.createSelectorQuery().in(this);
+					let info = query.select("#messageList");
+					info.boundingClientRect((data) => { //data - 各种参数
+						call(data)
 					}).exec()
 				})
 			},
 			//到达scroll-view 最底端
 			rearchDown() {
+				//不延时的话，触发焦点的时候会不会到达底端
 				setTimeout(()=>{
-					this.scrollTop = this.old.scrollTop
-					this.$nextTick(function(){
-						 this.getMessageDom(data =>{
-							 this.scrollTop = data.height
-						 })
+					this.$nextTick(() => {
+						this.scrollTop = this.old.scrollTop
+						this.$nextTick(() => {
+							this.getMessageDom(data => {
+								this.scrollTop = data.height
+							})
+						})
 					})
 				},300)
 			},
 			//获得消息列表
 			async getMessageList() {
-				this.messageLoading = true
-				//获得目标人的id
-				let param = {
-					targetId: this.targetInfo.id,
-					current: this.page.current,
-					size: 15
-				}
-				const res = await messageApi.getSingleMessage(param)
-				this.messageList.unshift(...res) 
-				this.messageLoading = false
+				
+					this.messageLoading = true
+					//获得目标人的id
+					let param = {
+						targetId: this.targetInfo.id,
+						current: this.page.current,
+						size: this.page.size
+					}
+					const res = await messageApi.getSingleMessage(param)
+					
+					this.messageList.unshift(...res)
+					
+					this.messageLoading = false
+					
+					if(res.length == 0 ){
+						this.isEmpty = true
+					}
+					
+			
 			},
 			upLoadMessage() {
-				this.page.current+=1
-				this.getMessageList()
+				//回弹，让滚动条视图永远到达不了顶部
+				this.old.scrollTop += 1
+				//判空能防止回弹时候重复调用
+				if(this.isEmpty == true) {
+					return;
+				}
+				//因为ios 页面在顶部插入的时候会把原位置顶下来，所以还是需要用到锚点定位的
+				this.$nextTick(() => {
+					//获取加载之前的，最新的那个消息
+					let topId = "msg"+this.messageList[0].id
+					//滚动动画关闭
+					this.isAnimation = false
+					this.scrollTop = this.old.scrollTop
+					this.messageLoading = true
+					if(this.timeFlag) {
+						clearTimeout(this.timeFlag)
+					}
+					//稍微延时一下，让历史记录加载不那么快
+					this.timeFlag = setTimeout(async ()=>{
+						this.page.current += 1
+						await this.getMessageList()
+						
+						this.$nextTick(()=>{
+							this.scrollIntoView = topId
+							this.$nextTick(()=>{
+								this.isAnimation = true
+							})
+						})
+					},1500)
+					
+				})
 			},
 			//参数初始化
 			dataClear() {
@@ -211,10 +261,10 @@
 			},
 			//发送消息
 			sendMessage() {
-				if(this.param.message) {
+				if (this.param.message) {
 					//只有文字会通过这个发送出去 文字中包含表情
 					this.param.msgType = 1
-					
+
 					let str = JSON.stringify(this.messageParam)
 					wsClient.send(str)
 					//输入框中的内容清空
@@ -236,25 +286,24 @@
 				this.removeRoomFlag()
 				//删除vuex中的标识
 				this.removeRoomFlagVX()
-			}
+			},
 		},
 		watch: {
 			//监听新消息
-			nowMessage(res){
+			nowMessage(res) {
 				let obj = res
 				let message = obj.chatMessage
 				//只有是200消息体 且发送者与接受者对应的上才允许接受消息
-				if(obj.statusCode === 200 && (
-					this.targetInfo.id === message.senderId && this.userInfo.id === message.targetId
-					||
-					this.userInfo.id === message.senderId && this.targetInfo.id === message.targetId
-				)) {
+				if (obj.statusCode === 200 && (
+						this.targetInfo.id === message.senderId && this.userInfo.id === message.targetId ||
+						this.userInfo.id === message.senderId && this.targetInfo.id === message.targetId
+					)) {
 					this.messageList.push(message)
 					//消息是自己发到，或者已经处于底端了，新发到消息会到达底端
-					if(message.senderId === this.userInfo.id || this.isBottom) {
+					if (message.senderId === this.userInfo.id || this.isBottom) {
 						this.rearchDown()
-					} 
-					
+					}
+
 				}
 			}
 		}
@@ -262,54 +311,64 @@
 </script>
 
 <style scoped lang="scss">
-
 	.chat-box {
 		//去掉topbar
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		transition: height .2s;
+
 		&.safe {
 			background-color: $global-general;
 			//底部安全局 padding
 			padding-bottom: constant(safe-area-inset-bottom);
 			padding-bottom: env(safe-area-inset-bottom);
 		}
+
 		.message-box {
 			min-height: 0;
 			background-color: $global-general;
 			flex: 1;
+
 			.message-list {
 				padding: 20rpx;
 				.message-loading {
 					text-align: center;
 					color: #999999;
 				}
+
 				.message-item {
 					display: flex;
-					align-items: center;
+					//align-items: center;
 					flex-direction: row-reverse;
 					margin-bottom: 25rpx;
+
 					&.left {
 						flex-direction: row;
-					}	
+					}
+
 					.avatar {
-						width: 55rpx;
-						height: 55rpx;
+						width: 65rpx;
+						height: 65rpx;
 					}
+
 					.message {
-						padding-left: 55rpx ;
+						padding-left: 65rpx;
+
 						&.left {
 							padding-left: 0;
 							padding-right: 55rpx;
 						}
+
 						.content {
+							font-size: 32rpx;
 							background-color: #ffffff;
 							background-color: $global-primary;
 							color: #ffffff;
 							padding: 18rpx;
 							border-radius: 15rpx;
 							margin-right: 10rpx;
+
 							&.left {
 								color: #000000;
 								background-color: #ffffff;
@@ -317,15 +376,17 @@
 								margin-left: 10rpx;
 							}
 						}
-					}			
+					}
 				}
 			}
 		}
+
 		.bottom-box {
 			display: flex;
 			padding: 15rpx;
 			box-sizing: border-box;
 			background-color: $global-general;
+
 			.input-box {
 				width: 100%;
 				box-sizing: border-box;
@@ -334,7 +395,8 @@
 				border-top-left-radius: 32rpx;
 				border-bottom-left-radius: 32rpx;
 				margin-right: 20rpx;
-			}	
+			}
+
 			.send-btn {
 				display: flex;
 				align-items: center;
@@ -345,6 +407,7 @@
 				border-top-right-radius: 32rpx;
 				border-bottom-right-radius: 32rpx;
 				transition: background-color .2s;
+
 				&.disable {
 					background-color: lighten($global-primary, 70%);
 				}
diff --git a/pages/chat-room/topbar/single-room-topbar.vue b/pages/chat-room/topbar/single-room-topbar.vue
index e09d5b75ed731465c17b9fd8f945be81d788ec6b..9b052e54765daffcd135b66939725244fa266174 100644
--- a/pages/chat-room/topbar/single-room-topbar.vue
+++ b/pages/chat-room/topbar/single-room-topbar.vue
@@ -7,7 +7,7 @@
 						<u-icon name="arrow-left"></u-icon>
 					</view>
 					<view class="center">
-						{{targetInfo.showName}}
+						{{remarkName(targetInfo)}}
 					</view>		
 					<view class="action">
 						<u-icon name="list"></u-icon>
@@ -20,11 +20,36 @@
 
 <script>
 	import MyTopBar from "@/components/my-topbar.vue"
-	
+	import {mapGetters,mapMutations,mapState} from "vuex"
 	export default {
 		components: {
 			MyTopBar
 		},
+		computed: {
+			...mapState({
+				//好友列表
+				relationList: (state) => state.relation.relationList,
+				//最近联系人列表，为了得到未阅读数量
+				latelyList: (state) => state.chat.latelyList,
+			}),	
+			//备注名
+			remarkName() {
+				return (item) =>{
+					
+				  let uid = item.id
+				  let relationIndex = this.relationList.findIndex(e => e.targetUserInfo.id == uid)
+				  if(relationIndex > -1) {
+					  let remark = this.relationList[relationIndex].remark
+					  //如果有备注就直接取备注
+					  if(remark) {
+					  		return remark
+					  }
+				  }
+				  
+				  return item.showName
+				}
+			}
+		},
 		props: {
 			targetInfo: {
 				type: Object,
@@ -53,14 +78,14 @@
 		padding: 0 15rpx;
 		.left {
 			font-size: 48rpx;
-			color: $global-primary;
+			color: #ffffff;
 		}
 		.center {
 			font-size: 32rpx;
 		}
 		.action {
 			font-size: 48rpx;
-			color: $global-primary;
+			color: #ffffff;
 			padding-right: 15rpx;
 		}
 	}
diff --git a/pages/login/login.vue b/pages/login/login.vue
index a5d29c28ce9568dbaf99bd20e1fa9f6df155890c..c5b45e891110d0932e93ed17a189285a65642976 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -4,7 +4,7 @@
 		<view class="login-content">
 			
 			<view class="page-title">
-				<view class="title">Qiu的聊天</view>
+				<view class="title">Private-Chat</view>
 			</view>
 			<view class="input-area">
 				<view class="form-item">
@@ -130,7 +130,6 @@
 					border-radius: 50rpx;
 					padding: 30rpx 0;
 					text-align: center;
-					//border-bottom: 1px solid $global-minor;
 					margin-bottom: 20rpx;
 					.login-input {
 						color: $global-primary;
@@ -148,7 +147,11 @@
 						height: 130rpx;
 						font-weight: bold;
 						background-color: $global-primary;
+						transition: background-color .2s;
 						border-radius: 50%;
+						&:active {
+							background-color: lighten($global-primary, 70%);
+						}
 					}
 				}
 			}
diff --git a/pages/tabs/index/group-item.vue b/pages/tabs/index/group-item.vue
index 0aa14b952fbdcb849f8e6c965545a175e11973fd..f34a4b1025f06e585c20829f7acdeb7b379e5b9e 100644
--- a/pages/tabs/index/group-item.vue
+++ b/pages/tabs/index/group-item.vue
@@ -38,8 +38,9 @@
 	.group-item {
 		display: flex;
 		padding: 20rpx;
+		border-bottom: 1px solid #F7F7F7;
 		&:active {
-			background-color: #dee2e2;
+			background-color: lighten($global-primary, 75%);
 		}
 		.item-avatar {
 			width: 100rpx;
diff --git a/pages/tabs/index/index-topbar.vue b/pages/tabs/index/index-topbar.vue
index 848174ab3a7b5715dd3717166ee473dbaf9b27f1..1ef05c95797840da8e0ec49fe1498974d60090bd 100644
--- a/pages/tabs/index/index-topbar.vue
+++ b/pages/tabs/index/index-topbar.vue
@@ -17,9 +17,9 @@
 						<template #list>
 							<view class="choise-box">
 								<view class="choise-drop-down-item" @click="runToUserAddPage">
-									加好友
+									添加好友
 								</view>
-								<view class="choise-drop-down-item">暂未开发</view>
+								<view class="choise-drop-down-item">创建群组</view>
 								<view class="choise-drop-down-item">暂未开发</view>
 							</view>
 						</template>
@@ -71,7 +71,7 @@
 		height: 100%;
 		.right {
 			font-size: 48rpx;
-			color: $global-primary;
+			color: #ffffff;
 		}
 		.center {
 			//flex: 1;
@@ -83,10 +83,14 @@
 			background-color: #ffffff;
 			border-radius: 20rpx;
 			.choise-drop-down-item {
+				border-radius: 20rpx;
 				color: #000000;
 				padding: 24rpx 0;
 				text-align: center;
 				font-size: 28rpx;
+				&:active {
+					background-color: lighten($global-primary, 75%);
+				}
 			}
 		}
 	}
diff --git a/pages/tabs/index/user-item.vue b/pages/tabs/index/user-item.vue
index bf65e7cb0771ed4769caa275fdc0d648fca0e81e..d170120437d657de9f540a2e0380eda77c93e0bf 100644
--- a/pages/tabs/index/user-item.vue
+++ b/pages/tabs/index/user-item.vue
@@ -4,7 +4,7 @@
 		<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
 		<view class="title-wrap">
 			<view class="item-top">
-				<text class="nick-name">{{ item.targetUserInfo.showName }}</text>
+				<text class="nick-name">{{ remarkName(item) }}</text>
 				<text class="last-time">{{ new Date(item.updateTime).format("hh:mm:ss") }}</text>
 			</view>
 			<view class="item-bottom">
@@ -20,8 +20,32 @@
 </template>
 
 <script>
+	import {mapGetters,mapMutations,mapState} from "vuex"
+	
 	export default {
 		name: "user-item",
+		computed: {
+			...mapState({
+			    relationList: (state) => state.relation.relationList,
+			}),
+			//备注名
+			remarkName() {
+				return (item) =>{
+					
+				  let uid = item.targetUserInfo.id
+				  let relationIndex = this.relationList.findIndex(e => e.targetUserInfo.id == uid)
+				  if(relationIndex > -1) {
+					  let remark = this.relationList[relationIndex].remark
+					  //如果有备注就直接取备注
+					  if(remark) {
+					  		return remark
+					  }
+				  }
+				  
+				  return item.targetUserInfo.showName
+				}
+			}
+		},
 		props: {
 			item: {
 				type: Object,
@@ -38,8 +62,9 @@
 	.user-item {
 		display: flex;
 		padding: 20rpx;
+		border-bottom: 1px solid #F7F7F7;
 		&:active {
-			background-color: #dee2e2;
+			background-color: lighten($global-primary, 75%);
 		}
 		.item-avatar {
 			width: 100rpx;
diff --git a/pages/tabs/my-center/my-center-list-item.vue b/pages/tabs/my-center/my-center-list-item.vue
index d7f65451284f731a0cfe2f30d39c1d1c5ab05814..9c05de1149eec7e637ccd98dbb352130ee52485d 100644
--- a/pages/tabs/my-center/my-center-list-item.vue
+++ b/pages/tabs/my-center/my-center-list-item.vue
@@ -59,7 +59,7 @@
 		justify-content: space-between;
 		padding: 30rpx 25rpx;
 		font-size: 32rpx;
-		border-bottom: 1px solid $global-general;
+		//border-bottom: 1px solid $global-general;
 		.left {
 			display: flex;
 			.left-icon {
diff --git a/pages/tabs/my-center/my-center-list.vue b/pages/tabs/my-center/my-center-list.vue
index 34db94c5fd0a9dd11804649c872d83a89b820b7b..bd80cf2e56f41f7f986f540494d6c92330d73fa6 100644
--- a/pages/tabs/my-center/my-center-list.vue
+++ b/pages/tabs/my-center/my-center-list.vue
@@ -17,8 +17,7 @@
 <style scoped lang="scss">
 	.my-cener-list {
 		border-radius: 15rpx;
-		background-color: #ffffff;
 		margin-bottom: 35rpx;
-		border-top: 1px solid $global-general;
+		background-color: rgba(255,255,255, 0.87);
 	}
 </style>
diff --git a/pages/tabs/my-center/my-center.vue b/pages/tabs/my-center/my-center.vue
index 045d28274083f2c5cd4904581ba2c1ac97554b0e..85e0dea92e1ceca4561c6cf6cb19a8ad7e65ee41 100644
--- a/pages/tabs/my-center/my-center.vue
+++ b/pages/tabs/my-center/my-center.vue
@@ -95,16 +95,18 @@
 
 <style scoped lang="scss">
 	.my-center {
+		background: linear-gradient(to bottom, $global-primary, #ffffff);
 		height: 100%;	
 		.my-center-page {
 			
 			padding-top: 200rpx;
 			.user-info-box {
-				// padding: 0 35rpx;
+				padding: 0 35rpx;
 				.user-info {
+					color: $global-primary;
 					text-align: center;
 					border-radius: 15rpx;
-					background-color: $global-general;
+					background-color: rgba(255,255,255, 0.87);
 					margin-bottom: 35rpx;
 					padding-bottom: 25rpx;
 					.avatar {
@@ -118,16 +120,13 @@
 						text-align: center;
 					}
 					.account {
-						color: #9a9a9a;
 						text-align: center;
 					}
 				}
 			}
 			.action-list-box {
-				// padding: 0 35rpx;
+				padding: 0 35rpx;
 				.action-list {
-					border-radius: 15rpx;
-					background-color: #ffffff;
 					margin-bottom: 35rpx;
 				}
 			}
diff --git a/pages/tabs/relation/relation-topbar.vue b/pages/tabs/relation/relation-topbar.vue
index 25a5e90ef5ea114cd99b8b3ba3492a9bb979ad09..8a0734ecc16827dbbc745ca77180e0ea6390aa49 100644
--- a/pages/tabs/relation/relation-topbar.vue
+++ b/pages/tabs/relation/relation-topbar.vue
@@ -17,9 +17,9 @@
 						<template #list>
 							<view class="choise-box">
 								<view class="choise-drop-down-item" @click="runToUserAddPage">
-									加好友
+									添加好友
 								</view>
-								<view class="choise-drop-down-item">暂未开发</view>
+								<view class="choise-drop-down-item">创建群组</view>
 								<view class="choise-drop-down-item">暂未开发</view>
 							</view>
 						</template>
@@ -71,7 +71,7 @@
 		height: 100%;
 		.right {
 			font-size: 48rpx;
-			color: $global-primary;
+			color: #ffffff;
 		}
 		.center {
 			//flex: 1;
@@ -83,10 +83,14 @@
 			background-color: #ffffff;
 			border-radius: 20rpx;
 			.choise-drop-down-item {
+				border-radius: 20rpx;
 				color: #000000;
 				padding: 24rpx 0;
 				text-align: center;
 				font-size: 28rpx;
+				&:active {
+					background-color: lighten($global-primary, 75%);
+				}
 			}
 		}
 	}
diff --git a/pages/tabs/relation/single-relation.vue b/pages/tabs/relation/single-relation.vue
index ceee9646c5a62f5957cc90321d7d14bd0615c330..ff1788b383feb925a112a0309242e6b47e64db1b 100644
--- a/pages/tabs/relation/single-relation.vue
+++ b/pages/tabs/relation/single-relation.vue
@@ -14,7 +14,7 @@
 				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
 				<view class="title-wrap">
 					<view class="item-top">
-						<text class="nick-name">{{ item.targetUserInfo.showName }}</text>
+						<text class="nick-name">{{ item.remark?item.remark:item.targetUserInfo.showName }}</text>
 					</view>
 					<view class="item-bottom">
 						<view class="interview">
@@ -66,7 +66,7 @@
 		height: 100%;
 		.new-request {
 			padding: 20rpx 0;
-			background-color: #edf2f1;
+			background-color: #F7F7F7;
 			.request-item {
 				padding: 25rpx;
 				background-color: #ffffff;
@@ -84,8 +84,9 @@
 			.relation-item {
 				display: flex;
 				padding: 20rpx;
+				border-bottom: 1px solid #F7F7F7;
 				&:active {
-					background-color: #dee2e2;
+					background-color: lighten($global-primary, 75%);
 				}
 				.item-avatar {
 					width: 100rpx;
diff --git a/pages/test/test.vue b/pages/test/test.vue
index e3e2f1b35b2d8668737805d3aa3ac8f66d1e925d..c1f450508a354b84f1648a25e0b873c24e8ec090 100644
--- a/pages/test/test.vue
+++ b/pages/test/test.vue
@@ -1,6 +1,14 @@
 <template>
 	<view>
-		测试页面
+		
+		<scroll-view 
+		:scroll-y="true" class="test-box">
+			<view v-for="item in list" :key="item">
+				{{item}}
+			</view>
+		</scroll-view>
+		
+		<button @click="add">add</button>
 	</view>
 </template>
 
@@ -8,43 +16,19 @@
 	export default {
 		data() {
 			return {
-
+				list: [1,2,3,4,5,6,7,8]
 			}
 		},
 		methods: {
-			
+			add() {
+				this.list.unshift(...[this.$getUUID(),this.$getUUID(),this.$getUUID()])
+			}
 		},
 	}
 </script>
 
 <style scope lang="scss">
-	.date-choice {
-		display: flex;
-
-		.date-pathway {
-
-			flex: 1;
-			overflow: auto;
-			white-space: nowrap;
-			background-color: #ffffff;
-
-			.pathway-item {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				padding: 10rpx;
-				width: 150rpx;
-				height: 100%;
-				display: inline-flex;
-
-			}
-		}
-
-		.date-btn {
-			margin-left: 10rpx;
-			width: 150rpx;
-			height: 150rpx;
-			background-color: #ffffff;
-		}
+	.test-box {
+		height: 400rpx;
 	}
 </style>
diff --git a/pages/user-add/user-add-topbar.vue b/pages/user-add/user-add-topbar.vue
index 24f1058eb955ac84ddfc76f34aa8af68342f653f..e1bddad1177dfe5627b3232b987694187c38bedd 100644
--- a/pages/user-add/user-add-topbar.vue
+++ b/pages/user-add/user-add-topbar.vue
@@ -8,9 +8,9 @@
 				<view class="search">
 					<MySearch :value="value" 
 						@input="handleInput"
-						@search="handleSearch" placeholder="搜索功能与通知">
+						@search="handleSearch" placeholder="输入账户或者昵称">
 						<view class="search-icon">
-							<u-icon name="search" color="#60baff" :size="30"></u-icon>
+							<u-icon name="search" color="#9C94FF" :size="30"></u-icon>
 						</view>
 					</MySearch>
 				</view>
@@ -60,7 +60,7 @@
 		padding: 0 35rpx;
 		height: 100%;
 		.left {
-			
+			color: #ffffff
 		}
 		.search {
 			flex: 1;
diff --git a/pages/user-add/user-add.vue b/pages/user-add/user-add.vue
index 23122e0b9c80fbffa3a88d3fb8e69a9662a31115..ac68e7a35da64577ed2f6a24b762e61dbf27ab5b 100644
--- a/pages/user-add/user-add.vue
+++ b/pages/user-add/user-add.vue
@@ -10,7 +10,7 @@
 					:src="item.avatar" mode="circle"></u-avatar>
 					<view class="content">
 						<view class="show-name">
-							{{`${item.showName}(${item.userName})`}}
+							{{`${remarkName(item)}(${item.userName})`}}
 						</view>
 						<view class="sex">
 							<view v-if="item.sex" :class="item.sex == 1?'man':'woman'">
@@ -31,7 +31,7 @@
 	import ToastUtil from "@/common/js/util/toast-util.js"
 	import userApi from "@/api/user/info.js"
 	import relationReqApi from "@/api/relation/single-relation-req.js"
-	import {mapGetters} from "vuex";
+	import {mapGetters,mapMutations,mapState} from "vuex"
 	
 	export default {
 		components: {
@@ -41,6 +41,25 @@
 			...mapGetters({
 				userInfo: "user/getUserInfo",
 			}),
+			...mapState({
+			    relationList: (state) => state.relation.relationList,
+			}),
+			//备注名
+			remarkName() {
+				return (item) =>{
+				  let uid = item.id
+				  let relationIndex = this.relationList.findIndex(e => e.targetUserInfo.id == uid)
+				  if(relationIndex > -1) {
+					  let remark = this.relationList[relationIndex].remark
+					  //如果有备注就直接取备注
+					  if(remark) {
+					  	return remark
+					  }
+				  }
+				 
+				  return item.showName
+				}
+			}
 		},
 		data() {
 			return {
@@ -119,10 +138,10 @@
 							border-radius: 4rpx;
 							color: #999999;
 							.woman {
-								color: #FF0080;
+								color: $sex-girl;
 							}
 							.man {
-								color: $global-primary;
+								color: $sex-boy;
 							}
 						}
 						.comment {
diff --git a/pages/user-detail/user-detail-topbar.vue b/pages/user-detail/user-detail-topbar.vue
index d3e7df4b04bdddeafece98e1cd89d59bf804cc04..ecd7ff6344ef59eee8f32647f5bc7dd5d49270d5 100644
--- a/pages/user-detail/user-detail-topbar.vue
+++ b/pages/user-detail/user-detail-topbar.vue
@@ -44,14 +44,14 @@
 		padding: 0 15rpx;
 		.left {
 			font-size: 48rpx;
-			color: $global-primary;
+			color: #ffffff;
 		}
 		.center {
 			font-size: 32rpx;
 		}
 		.action {
 			font-size: 48rpx;
-			color: $global-primary;
+			color: #ffffff;
 			padding-right: 15rpx;
 		}
 	}
diff --git a/pages/user-detail/user-detail.vue b/pages/user-detail/user-detail.vue
index 3c23434b25f1df2199ffed900d549008f2fdd012..ef96663680f005d53cee91b81651ae60a4c0c5aa 100644
--- a/pages/user-detail/user-detail.vue
+++ b/pages/user-detail/user-detail.vue
@@ -11,7 +11,7 @@
 					</view>
 					<view class="info-area">
 						<view class="nick-area">
-							<view class="nick-text">{{userDetail.showName}}</view>
+							<view class="nick-text">{{remarkName(userDetail)}}</view>
 							<view v-if="userDetail.sex" :class="userDetail.sex == 1?'man':'woman'">
 								<u-icon :name="userDetail.sex == 1?'man':'woman'"></u-icon>
 							</view>
@@ -75,6 +75,23 @@
 				//最近联系人列表，为了得到未阅读数量
 				latelyList: (state) => state.chat.latelyList,
 			}),
+			//备注名
+			remarkName() {
+				return (item) =>{
+					
+				  let uid = item.id
+				  let relationIndex = this.relationList.findIndex(e => e.targetUserInfo.id == uid)
+				  if(relationIndex > -1) {
+					  let remark = this.relationList[relationIndex].remark
+					  //如果有备注就直接取备注
+					  if(remark) {
+					  		return remark
+					  }
+				  }
+				  
+				  return item.showName
+				}
+			}
 		},
 		data() {
 			return {
@@ -246,12 +263,13 @@
 							overflow: hidden;
 							white-space: nowrap;
 							max-width: 350rpx;
+							margin-right: 10rpx;
 						}
 						.woman {
-							color: #FF0080;
+							color: $sex-girl;
 						}
 						.man {
-							color: $global-primary;
+							color: $sex-boy;
 						}
 					}
 					.username-area {
@@ -269,7 +287,7 @@
 			}
 		}
 		.bottom-box {
-			padding: 0 10rpx;
+			padding: 10rpx;
 			.simple-btn {
 				border-radius: 14rpx;
 				padding: 15rpx 0;
diff --git a/pages/user-relation-request/user-relation-req-topbar.vue b/pages/user-relation-request/user-relation-req-topbar.vue
index 33d9b3bc46c86cfa94ab82241ec229edab444ffc..fcfed5c3e6f6abcc8a419e26c82000b196c72f57 100644
--- a/pages/user-relation-request/user-relation-req-topbar.vue
+++ b/pages/user-relation-request/user-relation-req-topbar.vue
@@ -46,14 +46,14 @@
 		padding: 0 15rpx;
 		.left {
 			font-size: 48rpx;
-			color: $global-primary;
+			color: #ffffff;
 		}
 		.center {
 			font-size: 32rpx;
 		}
 		.action {
 			font-size: 32rpx;
-			color: $global-primary;
+			color: #ffffff;
 			padding-right: 15rpx;
 		}
 	}
diff --git a/pages/user-relation-request/user-relation-request.vue b/pages/user-relation-request/user-relation-request.vue
index 6a3956942180a88a0911855439198781a41903b7..dcd152a1f54aaeb16bea5e7356558d6f39a810a2 100644
--- a/pages/user-relation-request/user-relation-request.vue
+++ b/pages/user-relation-request/user-relation-request.vue
@@ -219,10 +219,10 @@
 					border-radius: 4rpx;
 					color: #999999;
 					.woman {
-						color: #FF0080;
+						color: $sex-girl;
 					}
 					.man {
-						color: $global-primary;
+						color: $sex-boy;
 					}
 				}
 				.comment {
diff --git a/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue b/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
index a53e261825cc1a5b42104f9bfa69b3a81406e8a1..14aec14dc09c73bff2a89b93d8e74be353e83eaa 100644
--- a/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
+++ b/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
@@ -91,7 +91,7 @@
 			// 选中项的主题颜色
 			activeColor: {
 				type: String,
-				default: '#2979ff'
+				default: '#29105D'
 			},
 			// 未选中项的颜色
 			inactiveColor: {