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
Unified 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-container class="chat-box">
<el-header height="60px"> <el-header height="60px">
<span>{{title}}</span> <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-header>
<el-container> <el-main style="padding: 0;">
<el-container class="content-box"> <el-container>
<el-main class="im-chat-main" id="chatScrollBox"> <el-container class="content-box">
<div class="im-chat-box"> <el-main class="im-chat-main" id="chatScrollBox">
<ul> <div class="im-chat-box">
<li v-for="(msgInfo,idx) in chat.messages" :key="idx"> <ul>
<message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)" <li v-for="(msgInfo,idx) in chat.messages" :key="idx">
:msgInfo="msgInfo"> <message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)"
</message-item> :showName="showName(msgInfo)" :msgInfo="msgInfo">
</li> </message-item>
</ul> </li>
</div> </ul>
</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()">
</div> </div>
<div title="发送图片"> </el-main>
<file-upload :action="imageAction" :maxSize="5*1024*1024" :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp','image/gif']" <el-footer height="200px" class="im-chat-footer">
@before="handleImageBefore" @success="handleImageSuccess" @fail="handleImageFail"> <div class="chat-tool-bar">
<i class="el-icon-picture-outline"></i> <div title="表情" class="el-icon-eleme" ref="emotion" @click="switchEmotionBox()">
</file-upload> </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>
<div title="发送文件"> <textarea v-model="sendText" ref="sendBox" class="send-text-area"
<file-upload :action="fileAction" :maxSize="10*1024*1024" @before="handleFileBefore" @success="handleFileSuccess" @keydown.enter="sendTextMessage()"></textarea>
@fail="handleFileFail"> <div class="im-chat-send">
<i class="el-icon-wallet"></i> <el-button type="primary" @click="sendTextMessage()">发送</el-button>
</file-upload>
</div> </div>
<div title="发送语音" class="el-icon-microphone" @click="showVoiceBox()"> </el-footer>
</div> </el-container>
<div title="聊天记录" class="el-icon-chat-dot-round"></div> <el-aside class="chat-group-side-box" width="300px" v-show="showSide">
</div> <chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)">
<textarea v-model="sendText" ref="sendBox" class="send-text-area" @keydown.enter="sendTextMessage()"></textarea> </chat-group-side>
<div class="im-chat-send"> </el-aside>
<el-button type="primary" @click="sendTextMessage()">发送</el-button>
</div>
</el-footer>
</el-container> </el-container>
<el-aside class="chat-group-side-box" width="20%" v-show="showSide"> </el-main>
<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)"></chat-group-side>
</el-aside>
</el-container>
<emotion v-show="showEmotion" :pos="emoBoxPos" @emotion="handleEmotion"></Emotion> <emotion v-show="showEmotion" :pos="emoBoxPos" @emotion="handleEmotion"></Emotion>
<chat-voice :visible="showVoice" @close="closeVoiceBox" @send="handleSendVoice"></chat-voice> <chat-voice :visible="showVoice" @close="closeVoiceBox" @send="handleSendVoice"></chat-voice>
</el-container> </el-container>
@ -228,10 +234,10 @@
this.showVoice = true; this.showVoice = true;
}, },
closeVoiceBox(){ closeVoiceBox() {
this.showVoice = false; this.showVoice = false;
}, },
handleSendVoice(data){ handleSendVoice(data) {
let msgInfo = { let msgInfo = {
content: JSON.stringify(data), content: JSON.stringify(data),
type: 3 type: 3
@ -330,7 +336,6 @@
showName(msgInfo) { showName(msgInfo) {
if (this.chat.type == 'GROUP') { if (this.chat.type == 'GROUP') {
let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId); let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
console.log(member.aliasName)
return member ? member.aliasName : ""; return member ? member.aliasName : "";
} else { } else {
return msgInfo.sendId == this.mine.id ? this.mine.nickName : this.chat.showName 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-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-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
</el-input> </el-input>
<el-scrollbar style="height:500px;"> <el-scrollbar style="height:400px;">
<div v-for="(friend,index) in friends" :key="friend.id"> <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-item v-show="friend.nickName.startsWith(searchText)" :showDelete="false" @click.native="handleSwitchCheck(friend)"
:friend="friend" :index="index" :active="index === activeIndex"> :friend="friend" :index="index" :active="index === activeIndex">
@ -17,7 +17,7 @@
</div> </div>
<div class="agm-r-box"> <div class="agm-r-box">
<div class="agm-select-tip"> 已勾选{{checkCount}}位好友</div> <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"> <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 v-if="friend.isCheck && !friend.disabled" :friend="friend" :index="index" :active="false" @del="handleRemoveFriend(friend,index)">
</friend-item> </friend-item>

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

@ -1,5 +1,5 @@
<template> <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 :model="userInfo" label-width="80px" :rules="rules" ref="settingForm">
<el-form-item label="头像"> <el-form-item label="头像">
<file-upload class="avatar-uploader" <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"> <div class="r-group-header" v-show="activeGroup.id">
{{activeGroup.remark}}({{groupMembers.length}}) {{activeGroup.remark}}({{groupMembers.length}})
</div> </div>
<div class="r-group-container"> <el-scrollbar class="r-group-container">
<div v-show="activeGroup.id"> <div v-show="activeGroup.id">
<div class="r-group-info"> <div class="r-group-info">
<div> <div>
@ -74,7 +74,7 @@
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </el-scrollbar>
</el-container> </el-container>
</el-container> </el-container>
</template> </template>
@ -306,7 +306,7 @@
.r-group-info { .r-group-info {
display: flex; display: flex;
padding: 20px; padding: 5px 20px;
.r-group-form { .r-group-form {
flex: 1; flex: 1;
@ -351,7 +351,7 @@
} }
.r-group-member-list { .r-group-member-list {
padding: 20px; padding: 5px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;

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

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

Write Preview
Loading…
Cancel
Save