vue+pc端聊天功能实实现(可发送图片,视频,评分,选择产品
1.效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xjRzINXH-1617093937143)(E:\各种文档\vue项目躺坑\p4.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jg33sxpa-1617093937144)(E:\各种文档\vue项目躺坑\p5.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-89qBxnAv-1617093937146)(E:\各种文档\vue项目躺坑\p6.png)]
<template>
<div class="app-container">
<div class="content">
<div class="wxchatBorderLeft">
<el-row>
<div style="padding: 10px;">
</div>
</el-row>
<el-row>
<div>
<el-col :span="24">
<div class="contact" v-for="(item,index) in list" :key='index' @click='getInfo(item)'>
<div style="display: inline-block;padding: 12px;">
<el-avatar shape="square" :src="item.icon"></el-avatar>
</div>
<div style="display: inline-block;">
<el-col>
<div class="wxchatPeople">{{item.name}}</div>
</el-col>
<el-col>
<div class="wxchatNews" v-if="item.type=='TIMVideoFileElem'">[ 视频 ]</div>
<div class="wxchatNews" v-else-if="item.type=='TIMImageElem'">[ 图片 ]</div>
<div class="wxchatNews" v-else-if="item.type=='TIMSoundElem'">[ 语音 ]</div>
<div class="wxchatNews" v-else-if="item.type=='TIMProductElem'">[ 产品 ]</div>
<div class="wxchatNews" v-else>{{item.message}}</div>
</el-col>
</div>
</div>
</el-col>
</div>
</el-row>
</div>
<div class="rightContent">
<div class="wxchatBorderRightTop">
<div class="wxchatName">{{userName}}</div>
</div>
<div class="wxchatBorderRightMid" @scroll="scrollEvent">
<!-- <div class="more">{{moreText}}</div> -->
<div v-for="(item,index) in userList" :key='index'>
<div style="margin-left: 30px;margin-top: 15px;" v-if='userData.id!=item.sendMember.id'>
<div align="center" style="padding: 15px 0;">
<el-tag type="info" size="mini">{{item.time}}</el-tag>
</div>
<el-row>
<el-col :span="2">
<el-avatar shape="square" :src="item.sendMember.icon" style="width: 35px;height: 35px;"></el-avatar>
</el-col>
<el-col :span="12">
<div class="chatPop1">
<div class="chatPop_item" style="line-height: 19px;" v-if="item.type=='TIMVideoFileElem'">
<video width="150px" height="150px" style="padding: 0 5px;" controls="controls" loop :src="item.message">
您的浏览器不支持视频播放</video>
</div>
<div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMImageElem'">
<el-image v-image-preview style="width: 90px;height: 90px;" :src="item.message" fit="cover"></el-image>
</div>
<div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMSoundElem'">
<audio style="width: 241px;height: 61px;" :src="item.message" controls="controls"></audio>
</div>
<div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMProductElem'">
<div style="border: 1px solid #CCCCCC;display: flex;flex-direction: column;background-color: #FFFFFF;">
<el-image v-image-preview :src="item.message.pic"
fit="cover"></el-image>
<span style="font-size: 16px;line-height: 25px;color: #000000;padding: 1px 8px;">{{item.message.proName}}</span>
<span style="color: #D30E0E;font-weight: bold;line-height: 25px;padding: 1px 6px;">¥{{item.message.price}}</span>
</div>
</div>
<div class="chatPop_item" style="line-height: 19px; word-wrap:break-word;" v-else>{{item.message}}</div>
</div>
</el-col>
</el-row>
</div>
<div style="margin-left: 30px;margin-top: 15px;" v-if='userData.id==item.sendMember.id'>
<div align="center" style="padding: 15px 0;">
<el-tag type="info" size="mini">{{item.time}}</el-tag>
</div>
<el-row>
<el-col :span="21">
<div class="chatPop2">
<div class="chatPop_item" style="line-height: 19px;" v-if="item.type=='TIMVideoFileElem'">
<video width="150px" height="150px" style="padding: 0 5px;" controls="controls" loop :src="item.message">
您的浏览器不支持视频播放</video>
</div>
<div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMImageElem'">
<el-image v-image-preview style="width: 90px;height: 90px;" :src="item.message" fit="cover"
:preview-src-list="srcList"></el-image>
</div>
<div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMSoundElem'">
<audio style="width: 241px;height: 61px;" :src="item.message" controls="controls"></audio>
</div>
<div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMProductElem'">
<div style="display: flex;flex-direction: column;background-color: #FFFFFF;">
<el-image v-image-preview :src="item.message.pic"
fit="cover"></el-image>
<span style="font-size: 16px;line-height: 25px;color: #000000;padding: 1px 8px;">{{item.message.proName}}</span>
<span style="color: #D30E0E;font-weight: bold;line-height: 25px;padding: 1px 6px;">¥{{item.message.price}}</span>
</div>
</div>
<div class="chatPop_item" style="line-height: 1px; word-wrap:break-word;height: 30px;" v-else>
{{item.message}}
</div>
</div>
</el-col>
<el-col :span="2">
<el-avatar shape="square" :src="item.sendMember.icon" style="width: 35px;height: 35px;"></el-avatar>
</el-col>
</el-row>
</div>
</div>
</div>
<div class="wxchatBorderRightBottom">
<div>
<div class="wxchatIcon1">
<el-tooltip placement="top" content="图片">
<el-upload action="https://wtwf-product.oss-cn-chengdu.aliyuncs.com" :data="dataObj" class="avatar-uploader"
:file-list="fileList" :show-file-list="false" :on-remove="handleRemove" :on-success="handleUploadSuccess"
:before-upload="beforeUpload">
<i style="fontSize:'18px',fontWeight:'bold',padding:10px" class="el-icon-picture"></i>
</el-upload>
</el-tooltip>
</div>
<div class="wxchatIcon2">
<el-tooltip placement="top" content="视频">
<el-upload action="https://wtwf-product.oss-cn-chengdu.aliyuncs.com" :data="dataObj1" :show-file-list="false"
:auto-upload="true" :on-success="handleUploadSuccess1" :before-upload="beforeUpload1" accept=".mp4">
<span class="warpss">
<i class="el-icon-video-camera-solid" style="fontSize:22px"></i>
</span>
</el-upload>
</el-tooltip>
</div>
<div class="wxchatIcon3">
<el-tooltip placement="top" content="评分">
<i class="el-icon-star-on" @click="score"></i>
</el-tooltip>
</div>
<div class="wxchatIcon4">
<el-tooltip placement="top" content="选择商品">
<i class="el-icon-s-shop" @click='dialogTableVisibles=true'></i>
</el-tooltip>
</div>
</div>
<div style="margin: -2px 15px;">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="" v-model="textarea2" resize="none"
autofocus maxlength="500" @keyup.enter.native="onSubmit">
</el-input>
</div>
<div class="sendButton">
<el-button size="mini" @click='sendMessage'>发送</el-button>
</div>
</div>
</div>
</div>
<!-- 选择产品 -->
<!-- 修改弹框 -->
<el-dialog title="选择商品" width="990px" :visible.sync="dialogTableVisibles" :close-on-click-modal="false">
<div style="display: flex;justify-content: center;flex-direction: column;">
<div style="margin-top: 15px;width: 700px;align-self: center;">
<el-input placeholder="搜索宝贝" v-model="goods" class="input-with-select">
<el-button slot="append" icon="el-icon-search" style="background-color:#D30E0E;color: white;" @click='toquery'></el-button>
</el-input>
</div>
<!-- 商品 -->
<div class="selectGoods">
<i class="el-icon-s-shop" style="color: #D30E0E;font-size: 28px;margin: 0 10px;"></i>
<span style="font-size: 18px;color: #D30E0E;font-weight: bold;">全部商品</span>
</div>
<div class="goodsList">
<div class="goodContent">
<div class="goodsInfo" v-for="(item,index) in goodsList" :key='index'>
<el-image style='width: 100%;height: 170px;' :src="item.pic" fit='cover'></el-image>
<el-tooltip class="item" effect="dark" :content="item.proName" placement="top-start">
<span style="flex: 1;font-size: 15px;font-weight: bold;padding: 7px 5px;box-sizing: border-box;">{{item.proName.length>20?item.proName.slice(0,21)+'...':item.proName}}</span>
</el-tooltip>
<div class="goodsText">
<span style="font-weight: bold;color:#D30E0E;font-size: 19px; ">¥{{item.price}}</span>
<el-button type="danger" size="mini" round style="background-color:#D30E0E;" @click='selectGoods(item)'>发送</el-button>
</div>
</div>
</div>
</div>
<div style="position: relative;top: 50px;">
<!--分页组件-->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize" layout="total, prev, pager, next, sizes,jumper"
:total="total">
</el-pagination>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="dialogTableVisibles=false">返回</el-button>
<!-- <el-button @click="reply" type="primary" size="small">回复</el-button> -->
</div>
</el-dialog>
</div>
</template>
<script>
import {
policy1
} from '../../../api/oss.js'
import {
getInfo,
} from '../../../api/login.js'
import {
getChat, //查询用户聊天分组
getChatMessage,
sendMessage,
queryUser
} from '../../../api/bannerManagement.js'
import {
addMall,
listGoods1
} from '../../../api/mallManagement.js'
export default {
name: 'Resource',
components: {
singleUpload
},
data() {
return {
currentPage: 1,
pageSize: 10,
total: 10,
goodsList: [],
goods: '',
dialogTableVisibles: false,
srcList: [],
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
dataObj1: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: ''
},
userImg: '',
moreText: '点击查看更多',
chatUserId: null,
userName: '',
keywordNew: '',
list: [],
wsUrl: '',
content: [{
id: 33,
time: '2021-3-11 10:10:10',
icon: "",
message: '1234',
}],
userList: [],
websocket: null,
dialogTableVisible: true,
input2: '',
textarea2: '',
websock: null,
username: '',
page: 1,
pageSize: 10,
dialogImageUrl: null,
dialogImageUrlArr: [],
userData: {},
fileList1: [],
}
},
created() {
},
computed: {
imageUrl() {
console.log("修改图", this.value);
if (this.value) {
this.dialogImageUrl = this.value;
} else {
this.dialogImageUrl = '';
}
return this.value;
},
imageName() {
if (this.value != null && this.value !== '') {
return this.value.substr(this.value.lastIndexOf('/') + 1)
} else {
return null
}
},
fileList() {
return [{
name: this.imageName,
url: this.imageUrl
}]
},
showFileList: {
get: function() {
return this.value !== null && this.value !== '' && this.value !== undefined
},
set: function(newValue) {}
}
},
mounted() {
getInfo().then(res => {
this.username = res.data.username;
this.getSocket()
// console.log('获取名字111', this.username)
}).catch(res => {})
this.chatPai();
queryUser().then(res => {
// console.log('获取初始化数据', res.data);
this.userData = res.data;
}).catch(res => {
})
this.update();
},
methods: {
//发送产品
selectGoods(item){
var data = {
message: 'SHARE_PRODUCT_MESSAGE_ID:' + item.id,
userId: this.chatUserId,
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = item;
message.type = 'TIMProductElem';
message.time = this.dateFormat(new Date());
this.fileList1 = '';
this.userList.push(
message
)
this.chatPai();
this.$message({
type: 'success',
message: res.message
});
}).catch(res => {
})
},
queryApi(searchData) {
listGoods1(searchData).then(res => {
this.total = res.data.total;
this.goodsList = res.data.list;
this.$message({
type: 'success',
message: res.message
});
this.goods = '';
}).catch(res => {
// console.log("失败", res);
this.$message({
type: 'warning',
message: res.message
});
})
},
toquery() {
var searchData = {};
this.keywordNew = this.goods;
searchData.keyword = this.goods; //搜索字符串
searchData.page = this.currentPage; // 当前页
searchData.limit = this.pageSize; //每页显示数量
searchData.type = null; //全部=null,下架=0,上架=1,售罄=2
console.log("查询", searchData);
this.queryApi(searchData);
// this.toqueryApi(searchData,this.total,this.allTableData,this.couponName,this.time);
},
//更新
update() {
var that = this;
//初始化
var userDataList = {};
userDataList.page = this.currentPage; //当前页
userDataList.limit = this.pageSize; //每页显示条数
userDataList.type = null;
listGoods1(userDataList).then(res => {
console.log("成功", res.data.list);
this.total = res.data.total;
that.goodsList = res.data.list;
}).catch(res => {
console.log("失败", res);
})
},
//分页
handleSizeChange(val) {
this.pageSize = val;
if (this.keywordNew) {
var searchData = {};
searchData.keyword = this.keywordNew; //搜索字符串
searchData.page = this.currentPage; // 当前页
searchData.limit = this.pageSize; //每页显示数量
searchData.type = null; //全部=null,下架=0,上架=1,售罄=2
this.queryApi(searchData);
} else {
this.update();
}
},
handleCurrentChange(val) {
this.currentPage = val;
if (this.keywordNew) {
var searchData = {};
searchData.keyword = this.keywordNew; //搜索字符串
searchData.page = this.currentPage; // 当前页
searchData.limit = this.pageSize; //每页显示数量
searchData.type = null; //全部=null,下架=0,上架=1,售罄=2
this.queryApi(searchData);
} else {
this.update();
}
},
//评分
score() {
var data = {
message: 'TO_END_MESSAGE_SCORE',
userId: this.chatUserId,
}
sendMessage(data).then(res => {
this.chatPai();
}).catch(res => {})
},
beforeUpload1(file) {
var fileSize = file.size / 1024 / 1024 < 100;
console.log('视频大小', fileSize);
if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) ==
-1) {
this.$message({
type: 'warning',
message: '请上传正确的视频格式'
});
return false;
}
if (!fileSize) {
this.$message({
type: 'warning',
message: '视频大小不能超过100MB'
});
return false;
}
this.videoFlag = true;
console.log("上传视频值", file);
const _self = this
return new Promise((resolve, reject) => {
policy1().then(response => {
console.log("视频---->获取数据", response.data);
_self.dataObj1.policy = response.data.policy;
_self.dataObj1.signature = response.data.signature;
_self.dataObj1.ossaccessKeyId = response.data.accessKeyId;
_self.dataObj1.key = response.data.dir + this.getUUID() + '_${filename}';
_self.dataObj1.dir = response.data.dir;
_self.dataObj1.host = response.data.host;
_self.dataObj1.callback = response.data.callback;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
handleUploadSuccess1(res, file) {
let url = this.dataObj1.host + '/' + this.dataObj1.key.replace('${filename}', file.name);
this.fileList1 = url
var data = {
message: this.fileList1,
userId: this.chatUserId,
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = this.fileList1;
message.type = 'TIMVideoFileElem';
message.time = this.dateFormat(new Date());
this.fileList1 = '';
this.userList.push(
message
)
this.chatPai();
}).catch(res => {
})
},
handleRemove(file, fileList) {
this.emitInput('')
},
handleUploadSuccess(res, file) {
this.showFileList = true
this.fileList.pop();
this.dialogImageUrl = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
this.dialogImageUrlArr.push(this.dialogImageUrl);
console.log('上传图片', this.dialogImageUrl);
var data = {
message: this.dialogImageUrl,
userId: this.chatUserId,
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = this.dialogImageUrl;
message.type = 'TIMImageElem';
message.time = this.dateFormat(new Date());
this.dialogImageUrl = '';
this.userList.push(
message
)
this.chatPai();
}).catch(res => {
})
},
getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
})
},
beforeUpload(file) {
const _self = this;
return new Promise((resolve, reject) => {
policy1().then(response => {
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessKeyId;
_self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
console.log('key值', _self.dataObj.key);
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
_self.dataObj.callback = response.data.callback;
resolve(true)
}).catch(err => {
console.log(err)
reject(false)
})
})
},
//滚动事件
scrollEvent(e) {
var container = this.$el.querySelector(".wxchatBorderRightMid");
if (container.scrollTop == 0) {
getChatMessage(this.chatUserId, ++this.page, this.pageSize).then(res => {
// let message = res.data.list;
// message.push(this.userList)
this.userList = res.data.list.concat(this.userList)
for(let item of this.userList){
if(item.type =='TIMProductElem'){
var string =eval('(' + item.message + ')')
item.message = string;
}else{
console.log(item.message)
}
}
console.log('聊天记录', res.data.list)
this.$nextTick(() => {
var container = this.$el.querySelector(".wxchatBorderRightMid");
container.scrollTop = container.scrollHeight / this.page;
})
}).catch(res => {})
}
},
sendMessage() {
var data = {
message: this.textarea2,
userId: this.chatUserId,
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = this.textarea2;
message.type = 'TIMTextElem';
message.time = this.dateFormat(new Date());
this.textarea2 = '';
this.userList.push(
message
)
this.chatPai()
}).catch(res => {
})
},
chatPai() {
getChat().then(res => {
this.list = res.data.list;
this.userName = this.list[0].name;
console.log('获取初始化数据', this.list[0]);
if (this.list.length > 0) {
getChatMessage(this.list[0].id, this.page, this.pageSize).then(res => {
this.userList = res.data.list;
this.chatUserId = this.list[0].id;
for(let item of this.userList){
if(item.type =='TIMProductElem'){
var string =eval('(' + item.message + ')')
item.message = string;
}
}
console.log("聊天记录",this.userList)
this.scrollToBottom()
}).catch(res => {
})
}
}).catch(res => {
})
},
//提交
onSubmit() {
console.log(this.textarea2, '回车');
var data = {
message: this.textarea2,
userId: this.chatUserId
}
sendMessage(data).then(res => {
let message = {
"evaluateId": null,
"id": null,
"message": "",
"sendMember": null,
"time": null,
"type": "",
}
message.sendMember = this.userData;
message.message = this.textarea2;
message.type = 'TIMTextElem';
message.time = this.dateFormat(new Date());
this.textarea2 = '';
this.userList.push(
message
)
this.chatPai();
}).catch(res => {
})
},
scrollToBottom() {
this.$nextTick(() => {
var container = this.$el.querySelector(".wxchatBorderRightMid");
container.scrollTop = container.scrollHeight;
})
},
getInfo(data) {
this.page = 1;
this.pageSize = 15;
this.userName = data.name;
this.chatUserId = data.id;
console.log('idsdfs', this.chatUserId);
getChatMessage(data.id, this.page, this.pageSize).then(res => {
this.userList = res.data.list;
for(let item of this.userList){
if(item.type =='TIMProductElem'){
var string =eval('(' + item.message + ')')
item.message = string;
}else{
console.log(item.message)
}
}
this.scrollToBottom();
console.log('聊天记录', res.data.list)
}).catch(res => {})
},
getSocket() {
//获取消息
let that = this;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
var socket = new WebSocket('地址?uid=' + that.username + '&type=1');
} else {
alert('当前浏览器 Not support websocket')
}
socket.onopen = () => {
console.log("websocket握手成功!")
}
socket.onmessage = (e) => {
try {
let nowMessage = JSON.parse(e.data);
console.log('获取对方id', this.chatUserId);
if (nowMessage.sendMember.id == this.chatUserId) {
let jsonString = JSON.parse(nowMessage.message);
nowMessage.message = jsonString;
this.userList.push(
nowMessage
)
this.scrollToBottom();
} else {
for (let item of this.list) {
if (item.id == nowMessage.sendMember.id) {
item.message = nowMessage.message;
}
}
}
console.log(e.data);
} catch (err) {
console.log(err);
}
};
},
dateFormat(date) {
let fmt = 'YYYY-mm-dd HH:MM:SS'
let ret;
const opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加,必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}
}
}
</script>
<style scoped="scoped">
/* 商品选择 */
.goodsInfo {
border: 1px solid #CCCCCC;
height: 269px;
width: 204px;
display: flex;
flex-direction: column;
margin: 4px 4px;
}
.goodsText {
display: flex;
justify-content: space-between;
padding: 9px 5px;
align-items: center;
}
.selectGoods {
height: 50px;
line-height: 40px;
display: flex;
position: relative;
top: 40px;
margin: 0 50px;
align-items: center;
background-color: #F3F3F3;
}
.goodContent {
flex-wrap: wrap;
display: flex;
}
.goodsList {
position: relative;
top: 50px;
/* height: 700px; */
margin: 0 50px;
/* padding: 10px 10px; */
box-sizing: border-box;
border: 1px solid #CCCCCC;
display: flex;
}
/deep/ .avatar-uploader .el-upload {
border: 1px dashed transparent !important;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: inherit !important;
}
.app-container {
width: 100%;
margin: 20px auto;
height: 900px;
position: relative;
display: flex;
justify-content: center;
}
.contact {
border-bottom: 1px dashed #ccc;
}
.rightContent {
display: flex;
flex-direction: column;
}
.content {
width: 1000px;
display: flex;
}
.el-dialog__header {
padding: 20px 20px 10px;
}
.chatPop1 :hover {
background-color: #FAFAFA;
}
video {
object-fit: fill;
}
.chatPop1 .chatPop_item {
background-color: #fff;
padding: 17px 19px;
display: inline-block;
border-radius: 10px;
margin: 0px 0 10px 10px;
position: relative;
border: 1px solid #E3E3E3;
max-width: 247px;
}
.chatPop1 .chatPop_item::after {
content: '';
border: 8px solid #ffffff00;
border-right: 8px solid #fff;
position: absolute;
top: 8px;
left: -16px;
}
.chatPop2 :hover {
/* background-color: #FAFAFA; */
}
.chatPop2 .chatPop_item {
background-color: #2683f5;
padding: 17px 19px;
display: inline-block;
border-radius: 10px;
margin: 0px 15px 10px 10px;
position: relative;
border: 1px solid #E3E3E3;
max-width: 247px;
float: right;
color: #fff;
}
.chatPop2 .chatPop_item::after {
content: '';
border: 8px solid #ffffff00;
border-right: 8px solid #2683f5;
position: absolute;
top: 8px;
right: -16px;
transform: rotateY(180deg)
}
.custom {
border: 0px solid blue;
height: 670px;
width: 795px;
}
.wxchatBorder {
width: 795px;
height: 670px;
border: 1px solid red;
margin-left: -20px;
margin-top: -59.5px;
}
.wxchatBorderLeft::-webkit-scrollbar {
display: none;
}
.wxchatBorderLeft {
width: 250px;
background-color: #eeebe9;
display: inline-block;
overflow-y: scroll;
width: 250px;
}
.wxchatPeople {
color: #000000;
font-size: 14px;
}
.wxchatNews {
color: #999;
padding-top: 5px;
font-size: 12px;
}
.wxchatName {
color: #000000;
font-size: 20px;
float: left;
padding-left: 30px;
padding-top: 20px;
}
.wxchatMore {
color: #999;
font-size: 20px;
float: right;
margin-right: -15px;
padding-top: 25px;
}
.wxchatBorderRight {
max-width: 245px;
height: 670px;
display: inline-block;
float: right;
margin-right: -22px;
margin-top: -60px;
}
.wxchatBorderRightTop {
width: 748px;
height: 60px;
background-color: #f5f5f5;
border-bottom: 1px solid #e7e7e7;
display: block;
float: right;
}
.more {
text-align: center;
color: #CCCCCC;
margin: 10px auto;
}
.wxchatBorderRightMid ::-webkit-scrollbar {
display: none;
}
.wxchatBorderRightMid {
height: 603px;
background-color: #f5f5f5;
overflow-y: scroll;
}
.wxchatBorderRightBottom {
height: 196px;
background-color: #fff;
border: 1px solid #eee;
}
.wxchatIcon1 {
display: inline-block;
padding: 8px 10px 10px 30px;
width: 40px;
height: 40px;
font-size: 20px;
}
.wxchatIcon2 {
display: inline-block;
padding: 8px 10px 10px 20px;
width: 40px;
height: 40px;
font-size: 20px;
}
.wxchatIcon3 {
display: inline-block;
padding: 8px 10px 10px 10px;
width: 40px;
height: 40px;
font-size: 20px;
}
.wxchatIcon4 {
display: inline-block;
padding: 8px 10px 10px 0px;
width: 40px;
height: 40px;
font-size: 20px;
}
.sendButton {
float: right;
margin-top: 5px;
margin-right: 28px;
}
</style>
代码有点乱请不要打我,我还是个小菜鸡哈哈哈哈
转发请注明原创噢~~~~
看完记得点个赞哟!!!