|
|
@@ -57,7 +57,10 @@
|
|
|
<el-col :span="6" class="noVideo">
|
|
|
<el-col :span="24" class="chatList">
|
|
|
<el-col :span="24" class="list" v-for="(item, index) in dataList" :key="index">
|
|
|
- <span class="">{{ item.sendname }}:{{ item.content }}</span>
|
|
|
+ <p>
|
|
|
+ <span :class="item.sendname == user.name ? 'selfColor' : ''">{{ item.sendname }}</span>
|
|
|
+ <span>{{ item.content }}</span>
|
|
|
+ </p>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="chatInput">
|
|
|
@@ -354,16 +357,35 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.noVideo {
|
|
|
+ position: relative;
|
|
|
min-height: 640px;
|
|
|
- background-color: #c0c4cc;
|
|
|
+ background-color: #000;
|
|
|
+ border-left: 1px solid #fff;
|
|
|
+ color: #fff;
|
|
|
.chatList {
|
|
|
- border: 1px solid #ccc;
|
|
|
- min-height: 550px;
|
|
|
- margin: 0 0 10px 0;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 5px 10px;
|
|
|
+ height: 598px;
|
|
|
+ padding: 5px 5px 5px 0px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .list {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ span:first-child {
|
|
|
+ float: left;
|
|
|
+ width: 17%;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ // font-weight: bold;
|
|
|
+ }
|
|
|
+ span:last-child {
|
|
|
+ float: right;
|
|
|
+ width: 82%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.chatInput {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
.el-button {
|
|
|
width: 100%;
|
|
|
padding: 13px 0;
|
|
|
@@ -391,4 +413,12 @@ export default {
|
|
|
min-height: 160px;
|
|
|
grid-area: 1/1/3/4;
|
|
|
}
|
|
|
+/deep/.el-textarea__inner {
|
|
|
+ padding: 0 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+.selfColor {
|
|
|
+ color: #ff0000;
|
|
|
+}
|
|
|
</style>
|
