From c2aed416fb4a572fdf4a04f35d550924ac7ee2e8 Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Fri, 23 May 2025 14:04:26 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=80=E5=8C=96css=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../service/impl/UserServiceImpl.java         |  17 +-
 im-web/src/components/chat/ChatAtBox.vue      |   6 +-
 im-web/src/components/chat/ChatBox.vue        |   7 +-
 .../src/components/chat/ChatGroupMember.vue   |   6 +-
 .../src/components/chat/ChatGroupReaded.vue   |   2 +-
 im-web/src/components/chat/ChatGroupSide.vue  |  13 +-
 im-web/src/components/chat/ChatHistory.vue    |   6 +-
 im-web/src/components/chat/ChatItem.vue       |   6 +-
 .../src/components/chat/ChatMessageItem.vue   |  69 ++++----
 im-web/src/components/chat/ChatRecord.vue     |   3 +-
 im-web/src/components/common/Emotion.vue      |  18 +-
 im-web/src/components/common/FullImage.vue    |   2 +-
 im-web/src/components/common/HeadImage.vue    |   1 -
 im-web/src/components/common/Icp.vue          |   2 +-
 im-web/src/components/common/RightMenu.vue    |   2 +-
 im-web/src/components/common/UserInfo.vue     |  13 +-
 im-web/src/components/friend/AddFriend.vue    |  10 +-
 .../src/components/group/AddGroupMember.vue   |   4 +-
 im-web/src/components/group/GroupItem.vue     |   2 +-
 im-web/src/components/group/GroupMember.vue   |   2 +-
 .../src/components/group/GroupMemberItem.vue  |   2 +-
 .../components/group/GroupMemberSelector.vue  |   6 +-
 im-web/src/components/rtc/RtcGroupVideo.vue   |   2 +-
 .../src/components/rtc/RtcPrivateAcceptor.vue |   4 +-
 im-web/src/components/rtc/RtcPrivateVideo.vue |   2 +-
 im-web/src/components/setting/Setting.vue     |   2 +-
 im-web/src/view/Chat.vue                      |  28 ++-
 im-web/src/view/Friend.vue                    |  34 ++--
 im-web/src/view/Group.vue                     | 165 +++++++++---------
 im-web/src/view/Home.vue                      |   9 +-
 im-web/src/view/Login.vue                     |  12 +-
 im-web/src/view/Register.vue                  |  20 +--
 32 files changed, 223 insertions(+), 254 deletions(-)

diff --git a/im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java b/im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java
index bf42251..87ce164 100644
--- a/im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java
+++ b/im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java
@@ -24,6 +24,7 @@ import com.bx.implatform.service.UserService;
 import com.bx.implatform.session.SessionContext;
 import com.bx.implatform.session.UserSession;
 import com.bx.implatform.util.BeanUtils;
+import com.bx.implatform.util.SensitiveFilterUtil;
 import com.bx.implatform.vo.LoginVO;
 import com.bx.implatform.vo.OnlineTerminalVO;
 import com.bx.implatform.vo.UserVO;
@@ -46,6 +47,7 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
     private final FriendService friendService;
     private final JwtProperties jwtProperties;
     private final IMClient imClient;
+    private final SensitiveFilterUtil sensitiveFilterUtil;
 
     @Override
     public LoginVO login(LoginDTO dto) {
@@ -108,6 +110,12 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
     @Override
     public void register(RegisterDTO dto) {
         User user = this.findUserByUserName(dto.getUserName());
+        if(!dto.getUserName().equals(sensitiveFilterUtil.filter(dto.getUserName()))){
+            throw new GlobalException("用户名包含敏感字符");
+        }
+        if(!dto.getNickName().equals(sensitiveFilterUtil.filter(dto.getNickName()))){
+            throw new GlobalException("昵称包含敏感字符");
+        }
         if (!Objects.isNull(user)) {
             throw new GlobalException(ResultCode.USERNAME_ALREADY_REGISTER);
         }
@@ -140,14 +148,19 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements Us
     @Override
     public void update(UserVO vo) {
         UserSession session = SessionContext.getSession();
+        if(!vo.getNickName().equals(sensitiveFilterUtil.filter(vo.getNickName()))){
+            throw new GlobalException("昵称包含敏感字符");
+        }
+        if(!vo.getSignature().equals(sensitiveFilterUtil.filter(vo.getSignature()))){
+            throw new GlobalException("签名内容包含敏感字符");
+        }
         if (!session.getUserId().equals(vo.getId())) {
-            throw new GlobalException("不允许修改其他用户的信息!");
+            throw new GlobalException("不允许修改其他用户的信息");
         }
         User user = this.getById(vo.getId());
         if (Objects.isNull(user)) {
             throw new GlobalException("用户不存在");
         }
-
         if (!user.getNickName().equals(vo.getNickName()) || !user.getHeadImageThumb().equals(vo.getHeadImageThumb())) {
             // 更新好友昵称和头像
             LambdaUpdateWrapper<Friend> wrapper1 = Wrappers.lambdaUpdate();
diff --git a/im-web/src/components/chat/ChatAtBox.vue b/im-web/src/components/chat/ChatAtBox.vue
index 9229896..747f0a4 100644
--- a/im-web/src/components/chat/ChatAtBox.vue
+++ b/im-web/src/components/chat/ChatAtBox.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-scrollbar v-show="show && showMembers.length" ref="scrollBox" class="group-member-choose"
+	<el-scrollbar v-show="show && showMembers.length" ref="scrollBox" class="chat-at-box"
 		:style="{ 'left': pos.x + 'px', 'top': pos.y - 300 + 'px' }">
 		<div v-for="(member, idx) in showMembers" :key="member.id">
 			<chat-group-member :member="member" :height="40" :active='activeIdx == idx'
@@ -123,12 +123,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.group-member-choose {
+.chat-at-box {
 	position: fixed;
 	width: 200px;
 	height: 300px;
-	//border: 1px solid #53a0e79c;
-	//border-radius: 5px;
 	background-color: #fff;
 	box-shadow: var(--im-box-shadow);
 }
diff --git a/im-web/src/components/chat/ChatBox.vue b/im-web/src/components/chat/ChatBox.vue
index 3599749..b5b2cd9 100644
--- a/im-web/src/components/chat/ChatBox.vue
+++ b/im-web/src/components/chat/ChatBox.vue
@@ -67,7 +67,7 @@
 							</div>
 						</el-footer>
 					</el-container>
-					<el-aside class="chat-group-side-box" width="320px" v-if="showSide">
+					<el-aside class="side-box" width="320px" v-if="showSide">
 						<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)">
 						</chat-group-side>
 					</el-aside>
@@ -742,7 +742,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .chat-box {
 	position: relative;
 	width: 100%;
@@ -837,9 +837,8 @@ export default {
 		}
 	}
 
-	.chat-group-side-box {
+	.side-box {
 		border-left: var(--im-border);
-		//animation: rtl-drawer-in .3s 1ms;
 	}
 
 }
diff --git a/im-web/src/components/chat/ChatGroupMember.vue b/im-web/src/components/chat/ChatGroupMember.vue
index dff4da5..bcdfa73 100644
--- a/im-web/src/components/chat/ChatGroupMember.vue
+++ b/im-web/src/components/chat/ChatGroupMember.vue
@@ -3,7 +3,7 @@
 		<div class="member-avatar">
 			<head-image :size="headImageSize" :name="member.showNickName" :url="member.headImage"> </head-image>
 		</div>
-		<div class="member-name" :style="{ 'line-height': height + 'px' }">
+		<div class="name" :style="{ 'line-height': height + 'px' }">
 			<div>{{ member.showNickName }}</div>
 		</div>
 	</div>
@@ -39,7 +39,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .chat-group-member {
 	display: flex;
 	position: relative;
@@ -52,7 +52,7 @@ export default {
 		background: #E1EAF7;
 	}
 
-	.member-name {
+	.name {
 		padding-left: 10px;
 		height: 100%;
 		text-align: left;
diff --git a/im-web/src/components/chat/ChatGroupReaded.vue b/im-web/src/components/chat/ChatGroupReaded.vue
index a90e683..dfe5dce 100644
--- a/im-web/src/components/chat/ChatGroupReaded.vue
+++ b/im-web/src/components/chat/ChatGroupReaded.vue
@@ -122,7 +122,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .chat-group-readed-mask {
 	position: fixed;
 	left: 0;
diff --git a/im-web/src/components/chat/ChatGroupSide.vue b/im-web/src/components/chat/ChatGroupSide.vue
index 0140128..9024315 100644
--- a/im-web/src/components/chat/ChatGroupSide.vue
+++ b/im-web/src/components/chat/ChatGroupSide.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="chat-group-side">
-    <div v-show="!group.quit" class="group-side-search">
+    <div v-show="!group.quit" class="search">
       <el-input placeholder="搜索群成员" v-model="searchText" size="small">
         <i class="el-icon-search el-input__icon" slot="prefix"> </i>
       </el-input>
@@ -29,7 +29,7 @@
       </div>
     </el-scrollbar>
     <el-divider v-if="!group.quit" content-position="center"></el-divider>
-    <el-form labelPosition="top" class="group-side-form" :model="group" size="small">
+    <el-form labelPosition="top" class="form" :model="group" size="small">
       <el-form-item label="群聊名称">
         <el-input v-model="group.name" disabled maxlength="20"></el-input>
       </el-form-item>
@@ -179,15 +179,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .chat-group-side {
   position: relative;
 
-  .group-side-search {
+  .search {
     padding: 10px;
   }
 
-
   .el-divider--horizontal {
     margin: 0;
   }
@@ -208,7 +207,6 @@ export default {
       margin-left: 5px;
     }
 
-
     .member-tools {
       display: flex;
       flex-direction: column;
@@ -243,7 +241,7 @@ export default {
     }
   }
 
-  .group-side-form {
+  .form {
     text-align: left;
     padding: 10px;
     height: 30%;
@@ -272,6 +270,5 @@ export default {
       margin-top: 12px;
     }
   }
-
 }
 </style>
diff --git a/im-web/src/components/chat/ChatHistory.vue b/im-web/src/components/chat/ChatHistory.vue
index 442eeaa..8ce1601 100644
--- a/im-web/src/components/chat/ChatHistory.vue
+++ b/im-web/src/components/chat/ChatHistory.vue
@@ -1,7 +1,7 @@
 <template>
 	<el-drawer title="聊天历史记录" size="700px" :visible.sync="visible" direction="rtl" :before-close="onClose">
 		<div class="chat-history" v-loading="loading" element-loading-text="拼命加载中">
-			<el-scrollbar class="chat-history-scrollbar" ref="scrollbar" id="historyScrollbar">
+			<el-scrollbar class="scroll-box" ref="scrollbar" id="historyScrollbar">
 				<ul>
 					<li v-for="(msgInfo, idx) in messages" :key="idx">
 						<chat-message-item :mode="2" :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)"
@@ -147,12 +147,12 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .chat-history {
 	display: flex;
 	height: 100%;
 
-	.chat-history-scrollbar {
+	.scroll-box {
 		flex: 1;
 
 		.el-scrollbar__thumb {
diff --git a/im-web/src/components/chat/ChatItem.vue b/im-web/src/components/chat/ChatItem.vue
index 414e35a..f67b4ef 100644
--- a/im-web/src/components/chat/ChatItem.vue
+++ b/im-web/src/components/chat/ChatItem.vue
@@ -91,7 +91,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .chat-item {
 	height: 50px;
 	display: flex;
@@ -185,8 +185,7 @@ export default {
 				font-size: var(--im-font-size-small);
 				color: var(--im-text-color-light);
 			}
-
-
+			
 			.chat-content-text {
 				flex: 1;
 				white-space: nowrap;
@@ -194,7 +193,6 @@ export default {
 				text-overflow: ellipsis;
 				font-size: var(--im-font-size-small);
 				color: var(--im-text-color-light);
-
 			}
 
 		}
diff --git a/im-web/src/components/chat/ChatMessageItem.vue b/im-web/src/components/chat/ChatMessageItem.vue
index b28109d..16f1b05 100644
--- a/im-web/src/components/chat/ChatMessageItem.vue
+++ b/im-web/src/components/chat/ChatMessageItem.vue
@@ -1,29 +1,28 @@
 <template>
-	<div class="chat-msg-item">
-		<div class="chat-msg-tip"
-			v-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
+	<div class="chat-message-item">
+		<div class="message-tip" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
 			{{ msgInfo.content }}
 		</div>
-		<div class="chat-msg-tip" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME">
+		<div class="message-tip" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME">
 			{{ $date.toTimeText(msgInfo.sendTime) }}
 		</div>
-		<div class="chat-msg-normal" v-else-if="isNormal" :class="{ 'chat-msg-mine': mine }">
+		<div class="message-normal" v-else-if="isNormal" :class="{ 'message-mine': mine }">
 			<div class="head-image">
 				<head-image :name="showName" :size="38" :url="headImage" :id="msgInfo.sendId"></head-image>
 			</div>
-			<div class="chat-msg-content">
-				<div v-show="mode == 1 && msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
+			<div class="content">
+				<div v-show="mode == 1 && msgInfo.groupId && !msgInfo.selfSend" class="message-top">
 					<span>{{ showName }}</span>
 				</div>
-				<div v-show="mode == 2" class="chat-msg-top">
+				<div v-show="mode == 2" class="message-top">
 					<span>{{ showName }}</span>
 					<span>{{ $date.toTimeText(msgInfo.sendTime) }}</span>
 				</div>
-				<div class="chat-msg-bottom" @contextmenu.prevent="showRightMenu($event)">
+				<div class="message-bottom" @contextmenu.prevent="showRightMenu($event)">
 					<div ref="chatMsgBox">
-						<span class="chat-msg-text" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT"
+						<span class="message-text" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT"
 							v-html="htmlText"></span>
-						<div class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
+						<div class="message-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
 							<div class="img-load-box" v-loading="loading" element-loading-text="上传中.."
 								element-loading-background="rgba(0, 0, 0, 0.4)">
 								<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl"
@@ -32,7 +31,7 @@
 							<span title="发送失败" v-show="loadFail" @click="onSendFail"
 								class="send-fail el-icon-warning"></span>
 						</div>
-						<div class="chat-msg-file" v-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE">
+						<div class="message-file" v-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE">
 							<div class="chat-file-box" v-loading="loading">
 								<div class="chat-file-info">
 									<el-link class="chat-file-name" :underline="true" target="_blank" type="primary"
@@ -47,17 +46,17 @@
 								class="send-fail el-icon-warning"></span>
 						</div>
 					</div>
-					<div class="chat-msg-voice" v-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO" @click="onPlayVoice()">
+					<div class="message-voice" v-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO" @click="onPlayVoice()">
 						<audio controls :src="JSON.parse(msgInfo.content).url"></audio>
 					</div>
-					<div class="chat-action chat-msg-text" v-if="isAction">
+					<div class="chat-action message-text" v-if="isAction">
 						<span v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VOICE" title="重新呼叫"
 							@click="$emit('call')" class="iconfont icon-chat-voice"></span>
 						<span v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VIDEO" title="重新呼叫"
 							@click="$emit('call')" class="iconfont icon-chat-video"></span>
 						<span>{{ msgInfo.content }}</span>
 					</div>
-					<div class="chat-msg-status" v-if="!isAction">
+					<div class="message-status" v-if="!isAction">
 						<span class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId
 							&& msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</span>
 						<span class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId
@@ -195,22 +194,22 @@ export default {
 		htmlText() {
 			let color = this.msgInfo.selfSend ? 'white' : '';
 			let text = this.$url.replaceURLWithHTMLLinks(this.msgInfo.content, color)
-			return this.$emo.transform(text,'emoji-normal')
+			return this.$emo.transform(text, 'emoji-normal')
 		}
 	}
 }
 </script>
 
-<style lang="scss">
-.chat-msg-item {
+<style lang="scss" scoped>
+.chat-message-item {
 
-	.chat-msg-tip {
+	.message-tip {
 		line-height: 50px;
 		font-size: var(--im-font-size-small);
 		color: var(--im-text-color-light);
 	}
 
-	.chat-msg-normal {
+	.message-normal {
 		position: relative;
 		font-size: 0;
 		padding-left: 48px;
@@ -225,7 +224,7 @@ export default {
 			left: 0;
 		}
 
-		.chat-msg-content {
+		.content {
 			text-align: left;
 
 			.send-fail {
@@ -235,7 +234,7 @@ export default {
 				margin: 0 20px;
 			}
 
-			.chat-msg-top {
+			.message-top {
 				display: flex;
 				flex-wrap: nowrap;
 				color: var(--im-text-color-light);
@@ -247,12 +246,12 @@ export default {
 				}
 			}
 
-			.chat-msg-bottom {
+			.message-bottom {
 				display: inline-block;
 				padding-right: 300px;
 				padding-left: 5px;
 
-				.chat-msg-text {
+				.message-text {
 					display: inline-block;
 					position: relative;
 					line-height: 26px;
@@ -279,7 +278,7 @@ export default {
 					}
 				}
 
-				.chat-msg-image {
+				.message-image {
 					display: flex;
 					flex-wrap: nowrap;
 					flex-direction: row;
@@ -296,7 +295,7 @@ export default {
 
 				}
 
-				.chat-msg-file {
+				.message-file {
 					display: flex;
 					flex-wrap: nowrap;
 					flex-direction: row;
@@ -351,7 +350,7 @@ export default {
 
 				}
 
-				.chat-msg-voice {
+				.message-voice {
 					font-size: 14px;
 					cursor: pointer;
 
@@ -372,7 +371,7 @@ export default {
 					}
 				}
 
-				.chat-msg-status {
+				.message-status {
 					display: block;
 
 					.chat-readed {
@@ -406,7 +405,7 @@ export default {
 		}
 
 
-		&.chat-msg-mine {
+		&.message-mine {
 			text-align: right;
 			padding-left: 0;
 			padding-right: 48px;
@@ -416,10 +415,10 @@ export default {
 				right: 0;
 			}
 
-			.chat-msg-content {
+			.content {
 				text-align: right;
 
-				.chat-msg-top {
+				.message-top {
 					flex-direction: row-reverse;
 
 					span {
@@ -428,11 +427,11 @@ export default {
 					}
 				}
 
-				.chat-msg-bottom {
+				.message-bottom {
 					padding-left: 180px;
 					padding-right: 5px;
 
-					.chat-msg-text {
+					.message-text {
 						margin-left: 10px;
 						background-color: var(--im-color-primary-light-2);
 						color: #fff;
@@ -444,11 +443,11 @@ export default {
 						}
 					}
 
-					.chat-msg-image {
+					.message-image {
 						flex-direction: row-reverse;
 					}
 
-					.chat-msg-file {
+					.message-file {
 						flex-direction: row-reverse;
 					}
 
diff --git a/im-web/src/components/chat/ChatRecord.vue b/im-web/src/components/chat/ChatRecord.vue
index f219dd4..186b455 100644
--- a/im-web/src/components/chat/ChatRecord.vue
+++ b/im-web/src/components/chat/ChatRecord.vue
@@ -120,11 +120,10 @@ export default {
 			})
 		}
 	}
-
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .chat-record {
 
 	.tip {
diff --git a/im-web/src/components/common/Emotion.vue b/im-web/src/components/common/Emotion.vue
index 1337bb0..eded3a0 100644
--- a/im-web/src/components/common/Emotion.vue
+++ b/im-web/src/components/common/Emotion.vue
@@ -2,7 +2,7 @@
 	<div v-show="show" @click="close()">
 		<div class="emotion-box" :style="{ 'left': x + 'px', 'top': y + 'px' }">
 			<el-scrollbar style="height: 220px">
-				<div class="emotion-item-list">
+				<div class="emotion-items">
 					<div class="emotion-item" v-for="(emoText, i) in $emo.emoTextList" :key="i"
 						@click="onClickEmo(emoText)" v-html="$emo.textToImg(emoText,'emoji-large')">
 					</div>
@@ -53,11 +53,10 @@ export default {
 	width: 372px;
 	box-sizing: border-box;
 	padding: 5px;
-	//border-radius: 5px;
 	background-color: #fff;
 	box-shadow: var(--im-box-shadow);
 
-	.emotion-item-list {
+	.emotion-items {
 		display: flex;
 		flex-wrap: wrap;
 
@@ -68,18 +67,5 @@ export default {
 
 		}
 	}
-
-	//&:after {
-	//	content: "";
-	//	position: absolute;
-	//	left: 185px;
-	//	bottom: -30px;
-	//	width: 0;
-	//	height: 0;
-	//	border-style: solid dashed dashed;
-	//	border-color: #f5f5f5 transparent transparent;
-	//	overflow: hidden;
-	//	border-width: 15px;
-	//}
 }
 </style>
diff --git a/im-web/src/components/common/FullImage.vue b/im-web/src/components/common/FullImage.vue
index f766309..6c5661e 100644
--- a/im-web/src/components/common/FullImage.vue
+++ b/im-web/src/components/common/FullImage.vue
@@ -32,7 +32,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .full-image {
 	position: fixed;
 	width: 100%;
diff --git a/im-web/src/components/common/HeadImage.vue b/im-web/src/components/common/HeadImage.vue
index 173b4b4..9a18bd5 100644
--- a/im-web/src/components/common/HeadImage.vue
+++ b/im-web/src/components/common/HeadImage.vue
@@ -100,7 +100,6 @@ export default {
 <style scoped lang="scss">
 .head-image {
 	position: relative;
-	//cursor: pointer;
 
 	.avatar-image {
 		position: relative;
diff --git a/im-web/src/components/common/Icp.vue b/im-web/src/components/common/Icp.vue
index 5a8cdd5..48b143a 100644
--- a/im-web/src/components/common/Icp.vue
+++ b/im-web/src/components/common/Icp.vue
@@ -8,7 +8,7 @@
 <script>
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .icp {
 	position: fixed;
 	text-align: center;
diff --git a/im-web/src/components/common/RightMenu.vue b/im-web/src/components/common/RightMenu.vue
index b6efc88..7e90484 100644
--- a/im-web/src/components/common/RightMenu.vue
+++ b/im-web/src/components/common/RightMenu.vue
@@ -41,7 +41,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .right-menu-mask {
 	position: fixed;
 	left: 0;
diff --git a/im-web/src/components/common/UserInfo.vue b/im-web/src/components/common/UserInfo.vue
index eff9549..3cdd07e 100644
--- a/im-web/src/components/common/UserInfo.vue
+++ b/im-web/src/components/common/UserInfo.vue
@@ -20,7 +20,7 @@
 			</div>
 		</div>
 		<el-divider content-position="center"></el-divider>
-		<div class="user-btn-group">
+		<div class="btn-group">
 			<el-button v-if="isFriend" type="primary" @click="onSendMessage()">发消息</el-button>
 			<el-button v-else type="primary" @click="onAddFriend()">加为好友</el-button>
 		</div>
@@ -99,7 +99,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .user-info-mask {
 	background-color: rgba($color: #f4f4f4, $alpha: 0);
 	position: fixed;
@@ -144,23 +144,16 @@ export default {
 				font-size: var(--im-font-size);
 				margin-top: 5px;
 				word-break: break-all;
-
 			}
 		}
-
 	}
 
 	.el-divider--horizontal {
 		margin: 18px 0;
 	}
 
-	.user-btn-group {
+	.btn-group {
 		text-align: center;
-
-		.wait-text {
-			font-size: 14px;
-			color: var(--im-text-color-light);
-		}
 	}
 }
 </style>
\ No newline at end of file
diff --git a/im-web/src/components/friend/AddFriend.vue b/im-web/src/components/friend/AddFriend.vue
index f326981..249cec1 100644
--- a/im-web/src/components/friend/AddFriend.vue
+++ b/im-web/src/components/friend/AddFriend.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog v-dialogDrag title="添加好友" :visible.sync="dialogVisible" width="400px" :before-close="onClose"
-		custom-class="add-friend-dialog">
+		custom-class="add-friend">
 		<el-input placeholder="输入用户名或昵称按下enter搜索，最多展示20条" class="input-with-select" v-model="searchText" size="small"
 			@keyup.enter.native="onSearch()">
 			<i class="el-icon-search el-input__icon" slot="suffix" @click="onSearch()"> </i>
@@ -11,7 +11,7 @@
 					<div class="avatar">
 						<head-image :name="user.nickName" :url="user.headImage" :online="user.online"></head-image>
 					</div>
-					<div class="add-friend-text">
+					<div class="friend-info">
 						<div class="nick-name">
 							<div>{{ user.nickName }}</div>
 							<div :class="user.online ? 'online-status  online' : 'online-status'">{{
@@ -93,8 +93,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.add-friend-dialog {
+<style lang="scss" scoped>
+.add-friend {
 	.item {
 		height: 65px;
 		display: flex;
@@ -103,7 +103,7 @@ export default {
 		align-items: center;
 		padding-right: 25px;
 
-		.add-friend-text {
+		.friend-info {
 			margin-left: 15px;
 			flex: 3;
 			display: flex;
diff --git a/im-web/src/components/group/AddGroupMember.vue b/im-web/src/components/group/AddGroupMember.vue
index 6dbe7a8..181d6f0 100644
--- a/im-web/src/components/group/AddGroupMember.vue
+++ b/im-web/src/components/group/AddGroupMember.vue
@@ -11,7 +11,7 @@
 					<div v-for="friend in friends" :key="friend.id">
 						<friend-item v-show="friend.nickName.includes(searchText)" :showDelete="false"
 							@click.native="onSwitchCheck(friend)" :menu="false" :friend="friend" :active="false">
-							<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="friend-checkbox"
+							<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="checkbox"
 								v-model="friend.isCheck" size="medium"></el-checkbox>
 						</friend-item>
 					</div>
@@ -143,7 +143,7 @@ export default {
 			}
 		}
 
-		.friend-checkbox {
+		.checkbox {
 			margin-right: 20px;
 		}
 	}
diff --git a/im-web/src/components/group/GroupItem.vue b/im-web/src/components/group/GroupItem.vue
index b98d80e..51cedf5 100644
--- a/im-web/src/components/group/GroupItem.vue
+++ b/im-web/src/components/group/GroupItem.vue
@@ -31,7 +31,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .group-item {
 	height: 50px;
 	display: flex;
diff --git a/im-web/src/components/group/GroupMember.vue b/im-web/src/components/group/GroupMember.vue
index 7d1dec9..b7d6eff 100644
--- a/im-web/src/components/group/GroupMember.vue
+++ b/im-web/src/components/group/GroupMember.vue
@@ -26,7 +26,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .group-member {
 	display: flex;
 	flex-direction: column;
diff --git a/im-web/src/components/group/GroupMemberItem.vue b/im-web/src/components/group/GroupMemberItem.vue
index 0137b9c..f4f3cb8 100644
--- a/im-web/src/components/group/GroupMemberItem.vue
+++ b/im-web/src/components/group/GroupMemberItem.vue
@@ -37,7 +37,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .group-member-item {
     display: flex;
     position: relative;
diff --git a/im-web/src/components/group/GroupMemberSelector.vue b/im-web/src/components/group/GroupMemberSelector.vue
index 7090c42..203302d 100644
--- a/im-web/src/components/group/GroupMemberSelector.vue
+++ b/im-web/src/components/group/GroupMemberSelector.vue
@@ -19,7 +19,7 @@
 			<div class="right-box">
 				<div class="select-tip"> 已勾选{{ checkedMembers.length }}位成员</div>
 				<el-scrollbar class="scroll-box">
-					<div class="checked-member-list">
+					<div class="member-items">
 						<div v-for="m in members" :key="m.userId">
 							<group-member class="member-item" v-if="m.checked" :member="m"></group-member>
 						</div>
@@ -123,7 +123,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .group-member-selector {
 	display: flex;
 
@@ -163,7 +163,7 @@ export default {
 			color: var(--im-text-color-light)
 		}
 
-		.checked-member-list {
+		.member-items {
 			padding: 10px;
 			display: flex;
 			flex-direction: row;
diff --git a/im-web/src/components/rtc/RtcGroupVideo.vue b/im-web/src/components/rtc/RtcGroupVideo.vue
index 11fd07a..644ad5c 100644
--- a/im-web/src/components/rtc/RtcGroupVideo.vue
+++ b/im-web/src/components/rtc/RtcGroupVideo.vue
@@ -37,7 +37,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rtc-group-video {
 	height: 300px;
 	background-color: #E8F2FF;
diff --git a/im-web/src/components/rtc/RtcPrivateAcceptor.vue b/im-web/src/components/rtc/RtcPrivateAcceptor.vue
index 2673632..921c2ee 100644
--- a/im-web/src/components/rtc/RtcPrivateAcceptor.vue
+++ b/im-web/src/components/rtc/RtcPrivateAcceptor.vue
@@ -5,7 +5,7 @@
 		<div class="acceptor-text">
 			{{ tip }}
 		</div>
-		<div class="acceptor-btn-group">
+		<div class="btn-group">
 			<div class="icon iconfont icon-phone-accept accept" @click="$emit('accept')" title="接受"></div>
 			<div class="icon iconfont icon-phone-reject reject" @click="$emit('reject')" title="拒绝"></div>
 		</div>
@@ -61,7 +61,7 @@ export default {
 		font-size: 16px;
 	}
 
-	.acceptor-btn-group {
+	.btn-group {
 		display: flex;
 		justify-content: space-around;
 		margin-top: 20px;
diff --git a/im-web/src/components/rtc/RtcPrivateVideo.vue b/im-web/src/components/rtc/RtcPrivateVideo.vue
index d7b2432..757b231 100644
--- a/im-web/src/components/rtc/RtcPrivateVideo.vue
+++ b/im-web/src/components/rtc/RtcPrivateVideo.vue
@@ -420,7 +420,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .rtc-private-video {
   position: relative;
 
diff --git a/im-web/src/components/setting/Setting.vue b/im-web/src/components/setting/Setting.vue
index 6bc8f8d..03b3eac 100644
--- a/im-web/src/components/setting/Setting.vue
+++ b/im-web/src/components/setting/Setting.vue
@@ -101,7 +101,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .setting {
 	.el-form {
 		padding: 10px 0 0 10px;
diff --git a/im-web/src/view/Chat.vue b/im-web/src/view/Chat.vue
index 8ebee12..5234da2 100644
--- a/im-web/src/view/Chat.vue
+++ b/im-web/src/view/Chat.vue
@@ -1,23 +1,23 @@
 <template>
   <el-container class="chat-page">
-    <el-aside width="260px" class="chat-list-box">
-      <div class="chat-list-header">
+    <el-aside width="260px" class="aside">
+      <div class="header">
         <el-input class="search-text" size="small" placeholder="搜索" v-model="searchText">
           <i class="el-icon-search el-input__icon" slot="prefix"> </i>
         </el-input>
       </div>
-      <div class="chat-list-loading" v-if="loading" v-loading="true" element-loading-text="消息接收中..."
+      <div class="chat-loading" v-if="loading" v-loading="true" element-loading-text="消息接收中..."
         element-loading-spinner="el-icon-loading" element-loading-background="#F9F9F9" element-loading-size="24">
       </div>
-      <el-scrollbar class="chat-list-items" v-else>
+      <el-scrollbar class="chat-items" v-else>
         <div v-for="(chat, index) in chatStore.chats" :key="index">
-          <chat-item v-show="!chat.delete && chat.showName && chat.showName.includes(searchText)" :chat="chat" :index="index"
-            @click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)"
+          <chat-item v-show="!chat.delete && chat.showName && chat.showName.includes(searchText)" :chat="chat"
+            :index="index" @click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)"
             :active="chat === chatStore.activeChat"></chat-item>
         </div>
       </el-scrollbar>
     </el-aside>
-    <el-container class="chat-box">
+    <el-container>
       <chat-box v-if="chatStore.activeChat" :chat="chatStore.activeChat"></chat-box>
     </el-container>
   </el-container>
@@ -63,21 +63,21 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .chat-page {
-  .chat-list-box {
+  .aside {
     display: flex;
     flex-direction: column;
     background: var(--im-background);
 
-    .chat-list-header {
+    .header {
       height: 50px;
       display: flex;
       align-items: center;
       padding: 0 8px;
     }
 
-    .chat-list-loading {
+    .chat-loading {
       height: 50px;
       background-color: #eee;
 
@@ -89,13 +89,9 @@ export default {
       .el-loading-text {
         color: var(--im-text-color-light);
       }
-
-      .chat-loading-box {
-        height: 100%;
-      }
     }
 
-    .chat-list-items {
+    .chat-items {
       flex: 1;
     }
   }
diff --git a/im-web/src/view/Friend.vue b/im-web/src/view/Friend.vue
index 8559256..271259a 100644
--- a/im-web/src/view/Friend.vue
+++ b/im-web/src/view/Friend.vue
@@ -1,7 +1,7 @@
 <template>
 	<el-container class="friend-page">
-		<el-aside width="260px" class="friend-list-box">
-			<div class="friend-list-header">
+		<el-aside width="260px" class="aside">
+			<div class="header">
 				<el-input class="search-text" size="small" placeholder="搜索" v-model="searchText">
 					<i class="el-icon-search el-input__icon" slot="prefix"> </i>
 				</el-input>
@@ -9,9 +9,9 @@
 					@click="onShowAddFriend()"></el-button>
 				<add-friend :dialogVisible="showAddFriend" @close="onCloseAddFriend"></add-friend>
 			</div>
-			<el-scrollbar class="friend-list-items">
+			<el-scrollbar class="friend-items">
 				<div v-for="(friends, i) in friendValues" :key="i">
-					<div class="index-title">{{ friendKeys[i] }}</div>
+					<div class="letter">{{ friendKeys[i] }}</div>
 					<div v-for="(friend) in friends" :key="friend.id">
 						<friend-item :friend="friend" :active="friend.id === activeFriend.id"
 							@chat="onSendMessage(friend)" @delete="onDelFriend(friend)"
@@ -22,12 +22,12 @@
 				</div>
 			</el-scrollbar>
 		</el-aside>
-		<el-container class="friend-box">
-			<div class="friend-header" v-show="userInfo.id">
+		<el-container class="container">
+			<div class="header" v-show="userInfo.id">
 				{{ userInfo.nickName }}
 			</div>
 			<div v-show="userInfo.id">
-				<div class="friend-detail">
+				<div class="friend-info">
 					<head-image :size="160" :name="userInfo.nickName" :url="userInfo.headImage" radius="10%"
 						@click.native="showFullImage()"></head-image>
 					<div>
@@ -42,7 +42,7 @@
 								<el-descriptions-item label="签名">{{ userInfo.signature }}</el-descriptions-item>
 							</el-descriptions>
 						</div>
-						<div class="frient-btn-group">
+						<div class="btn-group">
 							<el-button v-show="isFriend" icon="el-icon-position" type="primary"
 								@click="onSendMessage(userInfo)">发消息</el-button>
 							<el-button v-show="!isFriend" icon="el-icon-plus" type="primary"
@@ -223,14 +223,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .friend-page {
-	.friend-list-box {
+	.aside {
 		display: flex;
 		flex-direction: column;
 		background: var(--im-background);
 
-		.friend-list-header {
+		.header {
 			height: 50px;
 			display: flex;
 			align-items: center;
@@ -244,10 +244,10 @@ export default {
 			}
 		}
 
-		.friend-list-items {
+		.friend-items {
 			flex: 1;
 
-			.index-title {
+			.letter {
 				text-align: left;
 				font-size: var(--im-larger-size-larger);
 				padding: 5px 15px;
@@ -256,11 +256,11 @@ export default {
 		}
 	}
 
-	.friend-box {
+	.container {
 		display: flex;
 		flex-direction: column;
 
-		.friend-header {
+		.header {
 			height: 50px;
 			display: flex;
 			justify-content: space-between;
@@ -271,7 +271,7 @@ export default {
 			box-sizing: border-box;
 		}
 
-		.friend-detail {
+		.friend-info {
 			display: flex;
 			padding: 50px 80px 20px 80px;
 			text-align: center;
@@ -287,7 +287,7 @@ export default {
 			}
 		}
 
-		.frient-btn-group {
+		.btn-group {
 			text-align: left !important;
 			padding: 20px;
 		}
diff --git a/im-web/src/view/Group.vue b/im-web/src/view/Group.vue
index f16b1f1..6a968ce 100644
--- a/im-web/src/view/Group.vue
+++ b/im-web/src/view/Group.vue
@@ -1,15 +1,15 @@
 <template>
 	<el-container class="group-page">
-		<el-aside width="260px" class="group-list-box">
-			<div class="group-list-header">
+		<el-aside width="260px" class="aside">
+			<div class="header">
 				<el-input class="search-text" size="small" placeholder="搜索" v-model="searchText">
 					<i class="el-icon-search el-input__icon" slot="prefix"> </i>
 				</el-input>
 				<el-button plain class="add-btn" icon="el-icon-plus" title="创建群聊" @click="onCreateGroup()"></el-button>
 			</div>
-			<el-scrollbar class="group-list-items">
+			<el-scrollbar class="group-items">
 				<div v-for="(groups, i) in groupValues" :key="i">
-					<div class="index-title">{{ groupKeys[i] }}</div>
+					<div class="letter">{{ groupKeys[i] }}</div>
 					<div v-for="group in groups" :key="group.id">
 						<group-item :group="group" :active="group.id == activeGroup.id"
 							@click.native="onActiveItem(group)">
@@ -19,80 +19,75 @@
 				</div>
 			</el-scrollbar>
 		</el-aside>
-		<el-container class="group-box">
-			<div class="group-header" v-show="activeGroup.id">
-				{{ activeGroup.showGroupName }}({{ showMembers.length }})
-			</div>
-			<div class="group-container">
-				<div v-show="activeGroup.id">
-					<div class="group-info">
+		<el-container class="container">
+			<div class="header" v-show="activeGroup.id">{{ activeGroup.showGroupName }}({{ showMembers.length }})</div>
+			<div class="container-box" v-show="activeGroup.id">
+				<div class="group-info">
+					<div>
+						<file-upload v-show="isOwner" class="avatar-uploader" :action="imageAction" :showLoading="true"
+							:maxSize="maxSize" @success="onUploadSuccess"
+							:fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp']">
+							<img v-if="activeGroup.headImage" :src="activeGroup.headImage" class="avatar">
+							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
+						</file-upload>
+						<head-image v-show="!isOwner" class="avatar" :size="160" :url="activeGroup.headImage"
+							:name="activeGroup.showGroupName" radius="10%">
+						</head-image>
+						<el-button class="send-btn" icon="el-icon-position" type="primary" @click="onSendMessage()">发消息
+						</el-button>
+					</div>
+					<el-form class="form" label-width="130px" :model="activeGroup" :rules="rules" size="small"
+						ref="groupForm">
+						<el-form-item label="群聊名称" prop="name">
+							<el-input v-model="activeGroup.name" :disabled="!isOwner" maxlength="20"></el-input>
+						</el-form-item>
+						<el-form-item label="群主">
+							<el-input :value="ownerName" disabled></el-input>
+						</el-form-item>
+						<el-form-item label="群名备注">
+							<el-input v-model="activeGroup.remarkGroupName" :placeholder="activeGroup.name"
+								maxlength="20"></el-input>
+						</el-form-item>
+						<el-form-item label="我在本群的昵称">
+							<el-input v-model="activeGroup.remarkNickName" maxlength="20"
+								:placeholder="$store.state.userStore.userInfo.nickName"></el-input>
+						</el-form-item>
+						<el-form-item label="群公告">
+							<el-input v-model="activeGroup.notice" :disabled="!isOwner" type="textarea" :rows="3"
+								maxlength="1024" placeholder="群主未设置"></el-input>
+						</el-form-item>
 						<div>
-							<file-upload v-show="isOwner" class="avatar-uploader" :action="imageAction"
-								:showLoading="true" :maxSize="maxSize" @success="onUploadSuccess"
-								:fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp']">
-								<img v-if="activeGroup.headImage" :src="activeGroup.headImage" class="avatar">
-								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
-							</file-upload>
-							<head-image v-show="!isOwner" class="avatar" :size="160" :url="activeGroup.headImage"
-								:name="activeGroup.showGroupName" radius="10%">
-							</head-image>
-							<el-button class="send-btn" icon="el-icon-position" type="primary"
-								@click="onSendMessage()">发消息
-							</el-button>
+							<el-button type="warning" @click="onInvite()">邀请</el-button>
+							<el-button type="success" @click="onSaveGroup()">保存</el-button>
+							<el-button type="danger" v-show="!isOwner" @click="onQuit()">退出</el-button>
+							<el-button type="danger" v-show="isOwner" @click="onDissolve()">解散</el-button>
 						</div>
-						<el-form class="group-form" label-width="130px" :model="activeGroup" :rules="rules" size="small"
-							ref="groupForm">
-							<el-form-item label="群聊名称" prop="name">
-								<el-input v-model="activeGroup.name" :disabled="!isOwner" maxlength="20"></el-input>
-							</el-form-item>
-							<el-form-item label="群主">
-								<el-input :value="ownerName" disabled></el-input>
-							</el-form-item>
-							<el-form-item label="群名备注">
-								<el-input v-model="activeGroup.remarkGroupName" :placeholder="activeGroup.name"
-									maxlength="20"></el-input>
-							</el-form-item>
-							<el-form-item label="我在本群的昵称">
-								<el-input v-model="activeGroup.remarkNickName" maxlength="20"
-									:placeholder="$store.state.userStore.userInfo.nickName"></el-input>
-							</el-form-item>
-							<el-form-item label="群公告">
-								<el-input v-model="activeGroup.notice" :disabled="!isOwner" type="textarea" :rows="3"
-									maxlength="1024" placeholder="群主未设置"></el-input>
-							</el-form-item>
-							<div>
-								<el-button type="warning" @click="onInvite()">邀请</el-button>
-								<el-button type="success" @click="onSaveGroup()">保存</el-button>
-								<el-button type="danger" v-show="!isOwner" @click="onQuit()">退出</el-button>
-								<el-button type="danger" v-show="isOwner" @click="onDissolve()">解散</el-button>
-							</div>
-						</el-form>
-					</div>
-					<el-divider content-position="center"></el-divider>
-					<el-scrollbar ref="scrollbar" :style="'height: ' + scrollHeight + 'px'">
-						<div class="group-member-list">
-							<div class="member-tools">
-								<div class="tool-btn" title="邀请好友进群聊" @click="onInvite()">
-									<i class="el-icon-plus"></i>
-								</div>
-								<div class="tool-text">邀请</div>
-								<add-group-member ref="addGroupMember" :groupId="activeGroup.id" :members="groupMembers"
-									@reload="$emit('reload')"></add-group-member>
-							</div>
-							<div class="member-tools" v-if="isOwner">
-								<div class="tool-btn" title="选择成员移出群聊" @click="onRemove()">
-									<i class="el-icon-minus"></i>
-								</div>
-								<div class="tool-text">移除</div>
-								<group-member-selector ref="removeSelector" title="选择成员进行移除" :group="activeGroup"
-									@complete="onRemoveComplete"></group-member-selector>
+					</el-form>
+				</div>
+				<el-divider content-position="center"></el-divider>
+				<el-scrollbar ref="scrollbar" :style="'height: ' + scrollHeight + 'px'">
+					<div class="member-items">
+						<div class="member-tools">
+							<div class="tool-btn" title="邀请好友进群聊" @click="onInvite()">
+								<i class="el-icon-plus"></i>
 							</div>
-							<div v-for="(member, idx) in showMembers" :key="member.id">
-								<group-member v-if="idx < showMaxIdx" class="group-member" :member="member"></group-member>
+							<div class="tool-text">邀请</div>
+							<add-group-member ref="addGroupMember" :groupId="activeGroup.id" :members="groupMembers"
+								@reload="$emit('reload')"></add-group-member>
+						</div>
+						<div class="member-tools" v-if="isOwner">
+							<div class="tool-btn" title="选择成员移出群聊" @click="onRemove()">
+								<i class="el-icon-minus"></i>
 							</div>
+							<div class="tool-text">移除</div>
+							<group-member-selector ref="removeSelector" title="选择成员进行移除" :group="activeGroup"
+								@complete="onRemoveComplete"></group-member-selector>
 						</div>
-					</el-scrollbar>
-				</div>
+						<div v-for="(member, idx) in showMembers" :key="member.id">
+							<group-member v-if="idx < showMaxIdx" class="member-item" :member="member"></group-member>
+						</div>
+					</div>
+				</el-scrollbar>
 			</div>
 		</el-container>
 	</el-container>
@@ -348,14 +343,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .group-page {
-	.group-list-box {
+	.aside {
 		display: flex;
 		flex-direction: column;
 		background: var(--im-background);
 
-		.group-list-header {
+		.header {
 			height: 50px;
 			display: flex;
 			align-items: center;
@@ -369,10 +364,10 @@ export default {
 			}
 		}
 
-		.group-list-items {
+		.group-items {
 			flex: 1;
 
-			.index-title {
+			.letter {
 				text-align: left;
 				font-size: var(--im-larger-size-larger);
 				padding: 5px 15px;
@@ -381,11 +376,11 @@ export default {
 		}
 	}
 
-	.group-box {
+	.container {
 		display: flex;
 		flex-direction: column;
 
-		.group-header {
+		.header {
 			display: flex;
 			justify-content: space-between;
 			padding: 0 12px;
@@ -398,7 +393,7 @@ export default {
 			margin: 16px 0;
 		}
 
-		.group-container {
+		.container-box {
 			overflow: auto;
 			padding: 20px;
 			flex: 1;
@@ -407,7 +402,7 @@ export default {
 				display: flex;
 				padding: 5px 20px;
 
-				.group-form {
+				.form {
 					flex: 1;
 					padding-left: 40px;
 					max-width: 700px;
@@ -450,14 +445,14 @@ export default {
 				}
 			}
 
-			.group-member-list {
+			.member-items {
 				padding: 0 12px;
 				display: flex;
 				align-items: center;
 				flex-wrap: wrap;
 				text-align: center;
 
-				.group-member {
+				.member-item {
 					margin-right: 5px;
 				}
 
@@ -495,8 +490,6 @@ export default {
 
 			}
 		}
-
-
 	}
 }
 </style>
\ No newline at end of file
diff --git a/im-web/src/view/Home.vue b/im-web/src/view/Home.vue
index 4c942f2..845865c 100644
--- a/im-web/src/view/Home.vue
+++ b/im-web/src/view/Home.vue
@@ -32,13 +32,13 @@
 					</div>
 
 					<div class="botoom">
-						<div class="botoom-item" @click="isFullscreen = !isFullscreen">
+						<div class="bottom-item" @click="isFullscreen = !isFullscreen">
 							<i class="el-icon-full-screen"></i>
 						</div>
-						<div class="botoom-item" @click="showSetting">
+						<div class="bottom-item" @click="showSetting">
 							<span class="icon iconfont icon-setting" style="font-size: 20px"></span>
 						</div>
-						<div class="botoom-item" @click="onExit()" title="退出">
+						<div class="bottom-item" @click="onExit()" title="退出">
 							<span class="icon iconfont icon-exit"></span>
 						</div>
 					</div>
@@ -440,7 +440,6 @@ export default {
 	border-radius: 4px;
 	overflow: hidden;
 	background: var(--im-color-primary-light-9);
-	//background-image: url('../assets/image/background.jpg');
 
 	.app-container {
 		width: 62vw;
@@ -535,7 +534,7 @@ export default {
 			}
 		}
 
-		.botoom-item {
+		.bottom-item {
 			display: flex;
 			justify-content: center;
 			align-items: center;
diff --git a/im-web/src/view/Login.vue b/im-web/src/view/Login.vue
index 3ecf9f2..950820e 100644
--- a/im-web/src/view/Login.vue
+++ b/im-web/src/view/Login.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="login-view">
-		<div class="login-content">
-			<el-form class="login-form" :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="60px"
+		<div class="content">
+			<el-form class="form" :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="60px"
 				@keyup.enter.native="submitForm('loginForm')">
-				<div class="login-brand">
+				<div class="title">
 					<img class="logo" src="../../public/logo.png" />
 					<div>登录盒子IM</div>
 				</div>
@@ -126,14 +126,14 @@ export default {
 	box-sizing: border-box;
 
 
-	.login-content {
+	.content {
 		position: relative;
 		display: flex;
 		justify-content: space-around;
 		align-items: center;
 		padding: 10%;
 
-		.login-form {
+		.form {
 			height: 340px;
 			width: 400px;
 			padding: 30px;
@@ -144,7 +144,7 @@ export default {
 			overflow: hidden;
 			border: 1px solid #ccc;
 
-			.login-brand {
+			.title {
 				display: flex;
 				justify-content: center;
 				align-items: center;
diff --git a/im-web/src/view/Register.vue b/im-web/src/view/Register.vue
index 81163b8..d90ca4b 100644
--- a/im-web/src/view/Register.vue
+++ b/im-web/src/view/Register.vue
@@ -2,22 +2,22 @@
 	<el-container class="register-view">
 		<div>
 			<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px"
-				class="web-ruleForm">
-				<div class="register-brand">
+				class="content">
+				<div class="title">
 					<img class="logo" src="../../public/logo.png" />
 					<div>欢迎成为盒子IM的用户</div>
 				</div>
 				<el-form-item label="用户名" prop="userName">
-					<el-input type="userName" v-model="registerForm.userName" autocomplete="off"
-						placeholder="用户名(登录使用)" maxlength="20"></el-input>
+					<el-input type="userName" v-model="registerForm.userName" autocomplete="off" placeholder="用户名(登录使用)"
+						maxlength="20"></el-input>
 				</el-form-item>
 				<el-form-item label="昵称" prop="nickName">
-					<el-input type="nickName" v-model="registerForm.nickName" autocomplete="off"
-						placeholder="昵称" maxlength="20"></el-input>
+					<el-input type="nickName" v-model="registerForm.nickName" autocomplete="off" placeholder="昵称"
+						maxlength="20"></el-input>
 				</el-form-item>
 				<el-form-item label="密码" prop="password">
-					<el-input type="password" v-model="registerForm.password" autocomplete="off"
-						placeholder="密码" maxlength="20"></el-input>
+					<el-input type="password" v-model="registerForm.password" autocomplete="off" placeholder="密码"
+						maxlength="20"></el-input>
 				</el-form-item>
 				<el-form-item label="确认密码" prop="confirmPassword">
 					<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"
@@ -133,7 +133,7 @@ export default {
 	height: 100%;
 	background: rgb(232, 242, 255);
 
-	.web-ruleForm {
+	.content {
 		width: 500px;
 		height: 450px;
 		padding: 20px;
@@ -144,7 +144,7 @@ export default {
 		overflow: hidden;
 		border-radius: 3%;
 
-		.register-brand {
+		.title {
 			display: flex;
 			justify-content: center;
 			align-items: center;