web端ui优化

im-ui/src/components/chat/ChatBox.vue

@@ -320,6 +320,7 @@
 					msgInfo.loadStatus = 'ok';
 					msgInfo.id = m.id;
 					this.isReceipt = false;
+					this.refreshPlaceHolder();
 					this.$store.commit("insertMessage", msgInfo);
 				})
 			},
@@ -375,6 +376,7 @@
 					msgInfo.loadStatus = 'ok';
 					msgInfo.id = m.id;
 					this.isReceipt = false;
+					this.refreshPlaceHolder();
 					this.$store.commit("insertMessage", msgInfo);
 				})
 			},
@@ -540,6 +542,7 @@
 					// 关闭录音窗口
 					this.showRecord = false;
 					this.isReceipt = false;
+					this.refreshPlaceHolder();
 
 				})
 			},
@@ -611,6 +614,7 @@
 					this.scrollToBottom();
 					this.resetEditor();
 					this.isReceipt = false;
+					this.refreshPlaceHolder();
 				});
 
 			},

im-ui/src/components/chat/ChatItem.vue

@@ -7,6 +7,9 @@
 		</div>
 		<div class="chat-right">
 			<div class="chat-name">
+				<div class="chat-tag" v-if="chat.type=='GROUP'">
+					<el-tag size="mini" >群</el-tag>
+				</div>
 				<div class="chat-name-text">{{chat.showName}}</div>
 				<div class="chat-time-text">{{showTime}}</div>
 			</div>
@@ -109,8 +112,7 @@
 		display: flex;
 		margin-bottom: 1px;
 		position: relative;
-		padding: 5px;
-		padding-left: 10px;
+		padding: 5px 10px;
 		align-items: center;
 		background-color: white;
 		white-space: nowrap;
@@ -160,6 +162,13 @@
 				line-height: 25px;
 				height: 25px;
 
+				.chat-tag {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-right: 1px;
+				}
+
 				.chat-name-text {
 					flex: 1;
 					font-size: 15px;

im-ui/src/components/friend/FriendItem.vue

@@ -88,8 +88,7 @@
 		display: flex;
 		margin-bottom: 1px;
 		position: relative;
-		padding: 5px;
-		padding-left: 10px;
+		padding: 5px 10px;
 		align-items: center;
 		background-color: #fafafa;
 		white-space: nowrap;

im-ui/src/components/group/GroupItem.vue

@@ -38,8 +38,7 @@
 		display: flex;
 		margin-bottom: 1px;
 		position: relative;
-		padding: 5px;
-		padding-left: 10px;
+		padding: 5px 10px;
 		align-items: center;
 		background-color: white;
 		white-space: nowrap;

im-ui/src/view/Chat.vue

@@ -1,6 +1,6 @@
 <template>
 	<el-container class="chat-page">
-		<el-aside width="260px" class="chat-list-box">
+		<el-aside width="280px" class="chat-list-box">
 			<div class="chat-list-header">
 				<el-input class="search-text" placeholder="搜索" v-model="searchText">
 					<i class="el-icon-search el-input__icon" slot="prefix"> </i>

im-ui/src/view/Friend.vue

@@ -1,6 +1,6 @@
 <template>
 	<el-container class="friend-page">
-		<el-aside width="260px" class="friend-list-box">
+		<el-aside width="280px" class="friend-list-box">
 			<div class="friend-list-header">
 				<el-input class="search-text" placeholder="搜索" v-model="searchText">
 					<i class="el-icon-search el-input__icon" slot="prefix"> </i>

im-ui/src/view/Group.vue

@@ -1,6 +1,6 @@
 <template>
 	<el-container class="group-page">
-		<el-aside width="260px" class="group-list-box">
+		<el-aside width="280px" class="group-list-box">
 			<div class="group-list-header">
 				<el-input class="search-text" placeholder="搜索" v-model="searchText">
 					<i class="el-icon-search el-input__icon" slot="prefix"> </i>

im-ui/src/view/Home.vue

@@ -3,11 +3,11 @@
 		<el-aside width="80px" class="navi-bar">
 			<div class="user-head-image">
 				<head-image :name="$store.state.userStore.userInfo.nickName"
-					:url="$store.state.userStore.userInfo.headImageThumb" :size="50"
+					:url="$store.state.userStore.userInfo.headImageThumb" :size="60"
 					@click.native="showSettingDialog = true">
 				</head-image>
 			</div>
-			<el-menu background-color="#19082f" style="margin-top: 25px;">
+			<el-menu background-color="#f0f4f8" style="margin-top: 25px;">
 				<el-menu-item title="聊天">
 					<router-link class="link" v-bind:to="'/home/chat'">
 						<span class="icon iconfont icon-chat"></span>
@@ -350,8 +350,8 @@
 
 <style scoped lang="scss">
 	.navi-bar {
-		background: #19082f;
-		padding: 15px;
+		background: #f0f4f8;
+		padding: 10px;
 		padding-top: 50px;
 
 		.el-menu {
@@ -360,7 +360,7 @@
 
 			.el-menu-item {
 				margin: 20px 0;
-				background-color: #19082f !important;
+				background-color: #f0f4f8 !important;
 				padding: 0 !important;
 				text-align: center;
 
@@ -368,13 +368,14 @@
 					text-decoration: none;
 
 					&.router-link-active .icon {
-						color: #ba785a;
+						color: #587ff0;
+						font-size: 28px;
 					}
 				}
 
 				.icon {
-					font-size: 26px !important;
-					color: #ddd;
+					font-size: 26px;
+					color: #406080;
 				}
 
 				.unread-text {
@@ -398,7 +399,6 @@
 			position: absolute;
 			width: 60px;
 			bottom: 40px;
-			color: #ccc;
 			text-align: center;
 			cursor: pointer;
 
@@ -407,7 +407,7 @@
 			}
 
 			&:hover {
-				color: white;
+				font-weight: 600;
 			}
 		}
 	}