|
|
@@ -2,31 +2,6 @@
|
|
|
<div>
|
|
|
<div class="row allAlignment">
|
|
|
<leftNav />
|
|
|
-
|
|
|
- <!-- 详情抽屉-->
|
|
|
- <el-drawer
|
|
|
- :close-on-press-escape="true"
|
|
|
- :show-close="false"
|
|
|
- style="margin-top:7vh;height: 86vh; "
|
|
|
- :visible.sync="drawer"
|
|
|
- size="720px">
|
|
|
- <el-row class="content_box">
|
|
|
- <el-row>
|
|
|
- <el-col :span="23"><div class="">留言详情</div></el-col>
|
|
|
- <el-col :span="1"><div class="" style="text-align: center;" >X</div></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="chat_user">
|
|
|
- <el-col :span="17">
|
|
|
- <div class="chat_box">聊天消息</div>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :span="7">
|
|
|
- <div class="user_box" style="text-align: center;" >用户信息</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-row>
|
|
|
- </el-drawer>
|
|
|
-
|
|
|
<div>
|
|
|
<hader />
|
|
|
<messageCenter></messageCenter>
|
|
|
@@ -103,6 +78,71 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 详情抽屉-->
|
|
|
+ <el-drawer
|
|
|
+ id="leaveMessage"
|
|
|
+ :close-on-press-escape="true"
|
|
|
+ :show-close="false"
|
|
|
+ style="margin-top:50px"
|
|
|
+ :visible.sync="drawer"
|
|
|
+ size="720px">
|
|
|
+ <el-row class="content_box">
|
|
|
+ <el-row class="headers">
|
|
|
+ <el-col :span="12">Guest78...</el-col>
|
|
|
+ <el-col :span="12" style="text-align: right">
|
|
|
+ <el-button class="chuli" type="warning">未处理</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="chat_user">
|
|
|
+ <el-col :span="17">
|
|
|
+ <div class="chat_box">
|
|
|
+ <!-- 内容展示 -->
|
|
|
+ <el-row id="main">
|
|
|
+ 123123
|
|
|
+ </el-row>
|
|
|
+ <!--·········· 文本编辑框 ···········-->
|
|
|
+ <el-row class="chatting">
|
|
|
+ <!--表情-->
|
|
|
+ <el-col class="icons">
|
|
|
+ <i class="el-icon-edit"></i>
|
|
|
+ <i class="el-icon-share"></i>
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </el-col>
|
|
|
+ <!-- 发送信息 -->
|
|
|
+ <el-col>
|
|
|
+ <textarea></textarea>
|
|
|
+ <el-button class="send">发送</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="7">
|
|
|
+ <div class="user_box">
|
|
|
+ <ul>
|
|
|
+ <li class="title">用户信息</li>
|
|
|
+ <li>账号：123</li>
|
|
|
+ <li>标签：123</li>
|
|
|
+ <li>昵称：123</li>
|
|
|
+ <li>手机：123</li>
|
|
|
+ <li>邮箱：123</li>
|
|
|
+ <li>地址：123</li>
|
|
|
+ <li>备注：123</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <ul>
|
|
|
+ <li class="title">访问信息</li>
|
|
|
+ <li>来源渠道：直接访问</li>
|
|
|
+ <li>来源终端：123</li>
|
|
|
+ <li>来源终端：windows10 - chrome</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-row>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -224,7 +264,7 @@
|
|
|
// console.log(this.value);
|
|
|
// console.log(row.uid)
|
|
|
this.uid = row.uid;
|
|
|
- // this.drawer =true;
|
|
|
+ this.drawer =true;
|
|
|
// this.isShow = true;
|
|
|
},
|
|
|
childValue(e) {
|
|
|
@@ -249,20 +289,15 @@
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
+<style lang="less" scoped>
|
|
|
.content_box{
|
|
|
- margin: 0 10px;
|
|
|
.chat_user{
|
|
|
- border-top: 1px solid #D5E5FF;åå
|
|
|
- // height: 80vh;
|
|
|
- .chat_box{
|
|
|
- height: 80vh;
|
|
|
- }
|
|
|
- .user_box{
|
|
|
- height: 80vh;
|
|
|
- }
|
|
|
+ border-top: 1px solid #D5E5FF;
|
|
|
}
|
|
|
}
|
|
|
+ .user_box {
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
|
|
|
.el-pagination .btn-next .el-icon{
|
|
|
display: none;
|
|
|
@@ -303,9 +338,66 @@
|
|
|
.el-input-group__append {
|
|
|
text-align: center;
|
|
|
}
|
|
|
-</style>
|
|
|
-<style scoped>
|
|
|
.el-table td {
|
|
|
padding: 8px 0;
|
|
|
}
|
|
|
+ .headers{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 0 20px;
|
|
|
+ height:50px;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ .user_box {
|
|
|
+ padding: 20px;
|
|
|
+ background: #F6F8FF;
|
|
|
+ }
|
|
|
+ .chuli{
|
|
|
+ width:70px;
|
|
|
+ height:30px;
|
|
|
+ border-radius:5px;
|
|
|
+ color: #fff;
|
|
|
+ background: #FF6600
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ #main {
|
|
|
+ height: 65vh;
|
|
|
+ border-bottom: 1px solid #D5E5FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icons {
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ textarea {
|
|
|
+ padding: 0 20px;
|
|
|
+ outline: none;
|
|
|
+ border: none;
|
|
|
+ width: 400px;
|
|
|
+ height: 90px;
|
|
|
+ resize: none;
|
|
|
+ }
|
|
|
+ .send {
|
|
|
+ color: #fff;
|
|
|
+ width: 70px;
|
|
|
+ height:40px;
|
|
|
+ background:rgba(221,221,221,1);
|
|
|
+ opacity:1;
|
|
|
+ border-radius:5px;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
+
|
