La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

笔记本排版优化

master
xie.bx 3 years ago
parent
888435c7f8
commit
5efc9a5d97
5 changed files with 57 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 91
      im-ui/src/components/chat/ChatBox.vue
  2. 4
      im-ui/src/components/group/AddGroupMember.vue
  3. 2
      im-ui/src/components/setting/Setting.vue
  4. 8
      im-ui/src/view/Group.vue
  5. 3
      im-ui/src/view/Register.vue

91
im-ui/src/components/chat/ChatBox.vue
View File

@ -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

4
im-ui/src/components/group/AddGroupMember.vue
View File

@ -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>

2
im-ui/src/components/setting/Setting.vue
View File

@ -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"

8
im-ui/src/view/Group.vue
View File

@ -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;

3
im-ui/src/view/Register.vue
View File

@ -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;
}

Write Preview
Loading…
Cancel
Save