笔记本排版优化

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

@@ -2,51 +2,57 @@
 	<el-container class="chat-box">
 		<el-header height="60px">
 			<span>{{title}}</span>
-			<span title="群聊信息" v-show="this.chat.type=='GROUP'" class="btn-side el-icon-more" @click="showSide=!showSide"></span>
+			<span title="群聊信息" v-show="this.chat.type=='GROUP'" class="btn-side el-icon-more"
+				@click="showSide=!showSide"></span>
 		</el-header>
-		<el-container>
-			<el-container class="content-box">
-				<el-main class="im-chat-main" id="chatScrollBox">
-					<div class="im-chat-box">
-						<ul>
-							<li v-for="(msgInfo,idx) in chat.messages" :key="idx">
-								<message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
-								 :msgInfo="msgInfo">
-								</message-item>
-							</li>
-						</ul>
-					</div>
-				</el-main>
-				<el-footer height="25%" class="im-chat-footer">
-					<div class="chat-tool-bar">
-						<div title="表情" class="el-icon-eleme" ref="emotion" @click="switchEmotionBox()">
+		<el-main style="padding: 0;">
+			<el-container>
+				<el-container class="content-box">
+					<el-main class="im-chat-main" id="chatScrollBox">
+						<div class="im-chat-box">
+							<ul>
+								<li v-for="(msgInfo,idx) in chat.messages" :key="idx">
+									<message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)"
+										:showName="showName(msgInfo)" :msgInfo="msgInfo">
+									</message-item>
+								</li>
+							</ul>
 						</div>
-						<div title="发送图片">
-							<file-upload :action="imageAction" :maxSize="5*1024*1024" :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp','image/gif']"
-							 @before="handleImageBefore" @success="handleImageSuccess" @fail="handleImageFail">
-								<i class="el-icon-picture-outline"></i>
-							</file-upload>
+					</el-main>
+					<el-footer height="200px" class="im-chat-footer">
+						<div class="chat-tool-bar">
+							<div title="表情" class="el-icon-eleme" ref="emotion" @click="switchEmotionBox()">
+							</div>
+							<div title="发送图片">
+								<file-upload :action="imageAction" :maxSize="5*1024*1024"
+									:fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp','image/gif']"
+								 @before="handleImageBefore" @success="handleImageSuccess" @fail="handleImageFail">
+									<i class="el-icon-picture-outline"></i>
+								</file-upload>
+							</div>
+							<div title="发送文件">
+								<file-upload :action="fileAction" :maxSize="10*1024*1024" @before="handleFileBefore"
+									@success="handleFileSuccess" @fail="handleFileFail">
+									<i class="el-icon-wallet"></i>
+								</file-upload>
+							</div>
+							<div title="发送语音" class="el-icon-microphone" @click="showVoiceBox()">
+							</div>
+							<div title="聊天记录" class="el-icon-chat-dot-round"></div>
 						</div>
-						<div title="发送文件">
-							<file-upload :action="fileAction" :maxSize="10*1024*1024" @before="handleFileBefore" @success="handleFileSuccess"
-							 @fail="handleFileFail">
-								<i class="el-icon-wallet"></i>
-							</file-upload>
+						<textarea v-model="sendText" ref="sendBox" class="send-text-area"
+							@keydown.enter="sendTextMessage()"></textarea>
+						<div class="im-chat-send">
+							<el-button type="primary" @click="sendTextMessage()">发送</el-button>
 						</div>
-						<div title="发送语音" class="el-icon-microphone" @click="showVoiceBox()">
-						</div>
-						<div title="聊天记录" class="el-icon-chat-dot-round"></div>
-					</div>
-					<textarea v-model="sendText" ref="sendBox" class="send-text-area" @keydown.enter="sendTextMessage()"></textarea>
-					<div class="im-chat-send">
-						<el-button type="primary" @click="sendTextMessage()">发送</el-button>
-					</div>
-				</el-footer>
+					</el-footer>
+				</el-container>
+				<el-aside class="chat-group-side-box" width="300px" v-show="showSide">
+					<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)">
+					</chat-group-side>
+				</el-aside>
 			</el-container>
-			<el-aside class="chat-group-side-box" width="20%" v-show="showSide">
-				<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)"></chat-group-side>
-			</el-aside>
-		</el-container>
+		</el-main>
 		<emotion v-show="showEmotion" :pos="emoBoxPos" @emotion="handleEmotion"></Emotion>
 		<chat-voice :visible="showVoice" @close="closeVoiceBox" @send="handleSendVoice"></chat-voice>
 	</el-container>
@@ -228,10 +234,10 @@
 				this.showVoice = true;
 
 			},
-			closeVoiceBox(){
+			closeVoiceBox() {
 				this.showVoice = false;
 			},
-			handleSendVoice(data){
+			handleSendVoice(data) {
 				let msgInfo = {
 					content: JSON.stringify(data),
 					type: 3
@@ -330,7 +336,6 @@
 			showName(msgInfo) {
 				if (this.chat.type == 'GROUP') {
 					let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
-					console.log(member.aliasName)
 					return member ? member.aliasName : "";
 				} else {
 					return msgInfo.sendId == this.mine.id ? this.mine.nickName : this.chat.showName

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

@@ -5,7 +5,7 @@
 				<el-input width="200px" placeholder="搜索好友" class="input-with-select" v-model="searchText" @keyup.enter.native="handleSearch()">
 					<el-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
 				</el-input>
-				<el-scrollbar style="height:500px;">
+				<el-scrollbar style="height:400px;">
 					<div v-for="(friend,index) in friends" :key="friend.id">
 						<friend-item v-show="friend.nickName.startsWith(searchText)" :showDelete="false" @click.native="handleSwitchCheck(friend)"
 						 :friend="friend" :index="index" :active="index === activeIndex">
@@ -17,7 +17,7 @@
 			</div>
 			<div class="agm-r-box">
 				<div class="agm-select-tip"> 已勾选{{checkCount}}位好友</div>
-				<el-scrollbar style="height:500px;">
+				<el-scrollbar style="height:400px;">
 					<div v-for="(friend,index) in friends" :key="friend.id">
 						<friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend" :index="index" :active="false" @del="handleRemoveFriend(friend,index)">
 						</friend-item>

im-ui/src/components/setting/Setting.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-dialog class="setting" title="设置" :visible.sync="visible"  width="30%" :before-close="handleClose">
+	<el-dialog class="setting" title="设置" :visible.sync="visible"  width="500px" :before-close="handleClose">
 		<el-form :model="userInfo" label-width="80px" :rules="rules" ref="settingForm">
 			<el-form-item label="头像">
 				<file-upload  class="avatar-uploader"

im-ui/src/view/Group.vue

@@ -22,7 +22,7 @@
 			<div class="r-group-header" v-show="activeGroup.id">
 				{{activeGroup.remark}}({{groupMembers.length}})
 			</div>
-			<div class="r-group-container">
+			<el-scrollbar class="r-group-container">
 				<div v-show="activeGroup.id">
 					<div class="r-group-info">
 						<div>
@@ -74,7 +74,7 @@
 						</div>
 					</el-scrollbar>
 				</div>
-			</div>
+			</el-scrollbar>
 		</el-container>
 	</el-container>
 </template>
@@ -306,7 +306,7 @@
 
 				.r-group-info {
 					display: flex;
-					padding: 20px;
+					padding: 5px 20px;
 
 					.r-group-form {
 						flex: 1;
@@ -351,7 +351,7 @@
 				}
 
 				.r-group-member-list {
-					padding: 20px;
+					padding: 5px 20px;
 					display: flex;
 					align-items: center;
 					flex-wrap: wrap;

im-ui/src/view/Register.vue

@@ -3,7 +3,7 @@
 		<div>
 			
 			<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px" class="web-ruleForm">
-				<div class="register-brand">欢迎注册成为FLY CHAT用户</div>
+				<div class="register-brand">欢迎注册</div>
 				<el-form-item label="用户名" prop="userName">
 					<el-input type="userName" v-model="registerForm.userName" autocomplete="off"></el-input>
 				</el-form-item>
@@ -142,6 +142,7 @@
 				font-size: 22px;
 				font-weight: 600;
 				letter-spacing: 2px;
+				text-align: center;
 				text-transform: uppercase;
 			}