|
@@ -17,10 +17,26 @@
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="chatInfo">
|
|
|
<el-col :span="24" class="message">
|
|
|
- 显示信息
|
|
|
+ <el-col :span="24" class="info chat_frame" id="chat">
|
|
|
+ <el-col :span="24" v-for="(item, index) in fabiaolist" :key="index" class="list">
|
|
|
+ <el-col :span="4" class="lefts">
|
|
|
+ <el-image :src="squareImage" style="width:65%;height: 128px;"></el-image>
|
|
|
+ <p>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </p></el-col
|
|
|
+ ><el-col :span="19" class="under">
|
|
|
+ <p>{{ item.context }}</p>
|
|
|
+ <p>
|
|
|
+ <span class="date">{{ item.ceng }} {{ item.date }} {{ item.time }}</span>
|
|
|
+ </p></el-col
|
|
|
+ >
|
|
|
+ <el-col></el-col
|
|
|
+ ></el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="input">
|
|
|
- <wang-editor v-model="inputInfo" ref="editor"></wang-editor>
|
|
|
+ <el-col :span="24" class="title"><i class="el-icon-edit"></i> 发布评论 </el-col>
|
|
|
+ <wang-editor v-model="inputInfo" ref="editor" class="huifu"></wang-editor>
|
|
|
<el-button type="primary">发布评论</el-button>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
@@ -43,7 +59,21 @@ export default {
|
|
|
data: () => ({
|
|
|
detailinfo: {},
|
|
|
pic: require('@/assets/live/1.jpg'),
|
|
|
+ squareImage: require('@/assets/live/circle.png'),
|
|
|
inputInfo: '',
|
|
|
+ fabiaolist: [
|
|
|
+ { name: '测试1', context: 'ddasdadssssssssssssssssssssssssssssssssssssssssssssssssad', ceng: '1楼', time: '23:11', date: '2020-03-05' },
|
|
|
+ { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
|
|
|
+ { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
|
|
|
+ { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
|
|
|
+
|
|
|
+ { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
|
|
|
+ { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
|
|
|
+ { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
|
|
|
+ { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
|
|
|
+ { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
|
|
|
+ { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
|
|
|
+ ],
|
|
|
}),
|
|
|
created() {
|
|
|
this.search();
|
|
@@ -83,13 +113,14 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 400px;
|
|
|
overflow: hidden;
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
}
|
|
|
.messInfo .left p {
|
|
|
float: left;
|
|
|
width: 100%;
|
|
|
font-size: 18px;
|
|
|
padding: 5px 0 10px 0;
|
|
|
+ color: gold;
|
|
|
+ letter-spacing: 0;
|
|
|
}
|
|
|
.messInfo .left p:nth-child(2) {
|
|
|
font-weight: bold;
|
|
@@ -105,6 +136,9 @@ export default {
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
padding: 0 30px;
|
|
|
+ border-bottom: 1px solid red;
|
|
|
+ border-right: 1px solid red;
|
|
|
+ height: 380px;
|
|
|
}
|
|
|
.semDetail .chatInfo {
|
|
|
float: left;
|
|
@@ -113,17 +147,60 @@ export default {
|
|
|
}
|
|
|
.chatInfo .message {
|
|
|
float: left;
|
|
|
- border: 1px solid red;
|
|
|
- height: 400px;
|
|
|
- overflow: hidden;
|
|
|
+
|
|
|
+ min-height: 400px;
|
|
|
margin: 0 0 30px 0;
|
|
|
}
|
|
|
+.list {
|
|
|
+ border-bottom: 1px solid #fff;
|
|
|
+ border-left: 1px solid #fff;
|
|
|
+ min-height: 200px;
|
|
|
+ background-color: #e5e5e5;
|
|
|
+ /* width: 99.9%; */
|
|
|
+ padding: 15px 0 0 0;
|
|
|
+
|
|
|
+ margin: 1px 0 0 1px;
|
|
|
+}
|
|
|
+.lefts {
|
|
|
+ padding: 20px 0 0 20px;
|
|
|
+}
|
|
|
+.lefts p {
|
|
|
+ text-align: center;
|
|
|
+ width: 70%;
|
|
|
+}
|
|
|
+
|
|
|
+.under {
|
|
|
+ padding: 20px 0 20px 20px;
|
|
|
+ width: 80%;
|
|
|
+ background-color: #fff;
|
|
|
+ min-height: 160px;
|
|
|
+}
|
|
|
+.date {
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ top: 80px;
|
|
|
+ left: 1050px;
|
|
|
+}
|
|
|
.chatInfo .input {
|
|
|
float: left;
|
|
|
- height: 290px;
|
|
|
+ // height: 290px;
|
|
|
+ height: 340px;
|
|
|
+
|
|
|
overflow: hidden;
|
|
|
text-align: center;
|
|
|
padding: 0 10%;
|
|
|
+ background-color: #e5e5e5;
|
|
|
+}
|
|
|
+.huifu {
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ text-align: left;
|
|
|
+ padding: 5px 0 10px 0;
|
|
|
+ background-color: #e5e5e5;
|
|
|
+ color: #ff7f42;
|
|
|
}
|
|
|
.chatInfo .input .el-button {
|
|
|
margin: 20px 0 0 0;
|