williamet/jiace-admin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

聊天对话框版本1

Browse Source
This commit is contained in:
熊丽君
2021-07-30 18:03:59 +08:00
parent ebd4300bea
commit 6d006a47f3
1 changed files with 103 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/service/index.vue
View File

@ -1,6 +1,42 @@
<template> <template>
<div> <div class="app-container" style="background-color:#e6e6e6;">
<button @click="send">发消息</button> <el-row :gutter="20">
<el-col :span="6">
<div class="box_l">
<div class="user_item" v-for="item in 15" :key="item">
<div class="user_item_l">
<el-avatar
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
></el-avatar>
<div class="info">
<div class="phone">15679846126</div>
<div class="company">科大讯飞股份有限公司</div>
</div>
</div>
<div class="user_item_r">
14:19
</div>
</div>
</div>
</el-col>
<el-col :span="18">
<div class="box_r">
<div class="content">
123
</div>
<div class="dialogue">
<el-input
type="textarea"
:autosize="{ minRows: 4, maxRows: 4 }"
placeholder="请输入内容"
v-model="textarea"
>
</el-input>
<button @click="send">确定</button>
</div>
</div>
</el-col>
</el-row>
</div> </div>
</template> </template>
@ -8,6 +44,7 @@
export default { export default {
data() { data() {
return { return {
textarea: '',
path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId, path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
socket: '' socket: ''
}; };
@ -55,4 +92,67 @@ export default {
}; };
</script> </script>
<style></style> <style lang="scss" scoped>
.app-container {
height: calc(100vh - 84px);
overflow: auto;
.el-row {
height: 100%;
.el-col {
height: 100%;
overflow: auto;
.box_l {
background-color: #fff;
padding: 10px;
min-height: 100%;
.user_item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #ccc;
.user_item_l {
display: flex;
align-items: center;
.info {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 40px;
margin-left: 10px;
.phone {
}
.company {
font-size: 12px;
}
}
}
.user_item_r {
font-size: 12px;
}
}
}
.box_r {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #fff;
padding: 10px 20px;
min-height: 100%;
.content {
flex: 1;
}
.dialogue {
height: 150px;
.el-input {
height: 100%;
/deep/.el-input--medium .el-input__inner {
height: 100%;
}
}
}
}
}
}
}
</style>