|
|
@@ -30,15 +30,26 @@
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="down">
|
|
|
<el-col :span="24" class="list">
|
|
|
- <el-col :span="24" v-for="(item, index) in chatList" :key="index">
|
|
|
- {{ item.name }}
|
|
|
+ <el-col :span="24" class="chatList" v-for="(item, index) in chatList" :key="index">
|
|
|
+ <el-col :span="2" class="image">
|
|
|
+ <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22" class="other">
|
|
|
+ <el-col :span="24" class="otherone">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <span>{{ item.date }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="othertwo">
|
|
|
+ <p class="remark">{{ item.content }}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="chat">
|
|
|
- <el-col :span="20">
|
|
|
+ <el-col :span="21" class="input">
|
|
|
<el-input v-model="text" placeholder="请输入聊天内容"></el-input>
|
|
|
</el-col>
|
|
|
- <el-col :span="4">
|
|
|
+ <el-col :span="3" class="btn">
|
|
|
<el-button type="primary" size="mini">发送</el-button>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
@@ -46,7 +57,10 @@
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="three">
|
|
|
- 招聘信息
|
|
|
+ 广告位
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="four">
|
|
|
+ 广告位
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -70,7 +84,11 @@ export default {
|
|
|
{ name: '参展职位', num: 1000 },
|
|
|
],
|
|
|
// 聊天列表
|
|
|
- chatList: [{ name: '名字' }],
|
|
|
+ chatList: [
|
|
|
+ { name: '顾红伟', date: '10:00', content: '信息内容' },
|
|
|
+ { name: '顾红伟', date: '10:00', content: '信息内容' },
|
|
|
+ ],
|
|
|
+ touxiang: require('@/assets/emotion/touxiang.png'),
|
|
|
// 发言内容
|
|
|
text: '',
|
|
|
};
|
|
|
@@ -179,9 +197,54 @@ export default {
|
|
|
.list {
|
|
|
height: 370px;
|
|
|
overflow-y: auto;
|
|
|
+ .chatList {
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px dashed #409eff;
|
|
|
+ .image {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .other {
|
|
|
+ .otherone {
|
|
|
+ span:nth-child(1) {
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 0 0 15px;
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .othertwo {
|
|
|
+ margin: 5px 0 0 0;
|
|
|
+ color: #000;
|
|
|
+ .remark {
|
|
|
+ min-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #cccccc5f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.chat {
|
|
|
height: 40px;
|
|
|
+ .input {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ /deep/.el-button--mini,
|
|
|
+ .el-button--mini.is-round {
|
|
|
+ padding: 10px 15px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
