优化后台界面效果

Author: taoshihan1991

static/css/common.css

@@ -309,15 +309,8 @@ a{color: #07a9fe;text-decoration: none;}
 .chatBoxMe .chatContent:before{border-left-color: rgb(152,225,101);border-right:none;right: -5px;left: auto;}
 .chatBoxMe .el-col-3{float: right;text-align: right;}
 .chatBoxMe .chatUser{text-align: right}
-.chatArea{float: left;width: 85%;margin: 4px 0 0 4px;}
-.chatArea .el-textarea__inner{padding: 1px 5px}
 .btnArea{width: 10%;float: right;}
-@media screen and (max-width: 500px) {
-    body{background: #fff}
-    .chatCenter{border: none;box-shadow:none;margin-top: 0px;}
-    .chatArea {width: 70%;}
-    .btnArea{width: 20%;}
-}
+
 
 .chatTitle{height: 30px;line-height: 30px;color: #1989fa}
 .chatBoxSend{
@@ -378,6 +371,7 @@ a{color: #07a9fe;text-decoration: none;}
     display: flex;
     align-items: center;
     color: #7e7e7e;
+    height: 35px;
 }
 .iconBtnsBox .iconBtn{
     margin-right: 10px;
@@ -388,12 +382,13 @@ a{color: #07a9fe;text-decoration: none;}
 
 .kefuFuncBox{
     position: absolute;
+    height: 135px;
     bottom: 0px;
     width: 100%;
-    padding-bottom: 10px;
     background: #fff;
+    border-top: 1px solid #e5e5e5;
 }
-.kefuFuncBox .el-textarea{width: 99%;}
+
 .kefuFolderBtn{vertical-align: middle;}
 .visitorReply{
     font-size: 14px;
@@ -408,6 +403,7 @@ a{color: #07a9fe;text-decoration: none;}
 }
 .iconBtnsBox .kefuSendBtn{
     margin-left: auto;
+    margin-right: 2px;
 }
 .clear{clear:both;}
 

static/templates/chat_main.html

@@ -27,7 +27,7 @@
 
         .chatBoxMe .el-col-3{float: right;text-align: right;}
         .chatBoxMe .chatUser{text-align: right}
-        .chatBox{width: 100%;height:calc(100% - 130px);;overflow-y: auto;overflow-x: hidden;}
+        .chatBox{width: 100%;height:calc(100% - 170px);;overflow-y: auto;overflow-x: hidden;}
         .chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
     </style>
 </head>
@@ -121,15 +121,15 @@
                                     <div class="iconBtn el-icon-picture" id="uploadImg" v-on:click="uploadImg('/uploadimg')" style="font-size: 24px;"></div>
                                 </el-tooltip>
                                 <el-tooltip content="上传附件" placement="top">
-                                    <div  class="iconBtn el-icon-upload" id="uploadFile" v-on:click="uploadFile('/2/uploadFile')" style="font-size: 26px;"></div>
+                                    <div  class="iconBtn el-icon-upload" id="uploadFile" v-on:click="uploadFile('/uploadfile')" style="font-size: 26px;"></div>
                                 </el-tooltip>
                                 <el-tooltip content="消息记录" placement="top">
                                     <div  class="iconBtn el-icon-chat-line-round" v-on:click="getMesssagesByVisitorId(visitor.visitor_id,true)" style="font-size: 24px;"></div>
                                 </el-tooltip>
                                 <el-button class="kefuSendBtn" :disabled="sendDisabled" size="mini" type="primary" v-on:click="chatToUser">发送</el-button>
                             </div>
                             <div class="clear"></div>
-                            <el-input type="textarea" class="chatArea" v-model="messageContent"  v-on:keyup.enter.native="chatToUser"  placeholder="请输入内容"></el-input>
+                            <el-input type="textarea" :rows="4" class="chatArea" v-model="messageContent"  v-on:keyup.enter.native="chatToUser"  placeholder="请输入内容"></el-input>
                         </div>
 
                     </div>

static/templates/chat_page.html

@@ -69,7 +69,7 @@
             </div>
         </div>
         <div class="chatArticle">
-            <h3 class="hotQuestionTitle"><img src="/static/images/fire.svg" class="fire">热门问题
+            <h3 class="hotQuestionTitle"><img src="/static/images/fire.svg" class="fire">公告通知
             </h3>
         </div>