修改聊天样式

4 years ago · dd40ee7b82
parent 3d849161dd
commit dd40ee7b82
2 changed files with 13 additions and 12 deletions
--- a/static/css/common.css
+++ b/static/css/common.css
@ -4,9 +4,8 @@
    border: 1px solid;
 }
 .visitorFaceBtn{
-    right: 70px;
-    bottom: 50%;
-    position: absolute!important;
+    float: right;
+    margin: 6px 4px 0 0;
 }
 .visitorFaceBox{
    position: absolute;
@ -31,7 +30,6 @@
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
-    margin-bottom: -14px;
    position: relative;
    cursor: pointer;
 }
--- a/static/html/chat_page.html
+++ b/static/html/chat_page.html
@ -19,6 +19,7 @@
            height: 100%;
            background: rgb(245,245,245);
        }
+        .chatCenter{background: #fff;max-width: 800px;margin: 0 auto;}
        .chatContext{
            padding:0 10px;
            width: 100%;
@ -70,19 +71,19 @@
        .chatBoxMe .el-col-3{float: right;text-align: right;}
        .chatBoxMe .chatUser{text-align: right}
        .chatBoxMe .chatContent:after{left:auto;right: -10px;}
-        .chatArea{margin: 5px 0 0 5px;}
-        .chatArea .el-textarea__inner{width: 80%;}
+        .chatArea{float: left;width: 80%;}
+        .btnArea{width: 20%;float: right;}
        .chatTitle{height: 30px;line-height: 30px;color: #1989fa}
-        .chatBoxSend{background: #fff;position: fixed;bottom: 0;left: 0;width: 100%;height: 67px;}
-        .chatBoxSendBtn{position: absolute;right: 5px;bottom:50%;margin-bottom: -16px;}
+        .chatBoxSend{background: #fff;position: fixed;bottom: 0;width: 100%;height: 67px;max-width: 800px;}
+        .chatBoxSendBtn{float: right;margin: 4px 4px 0 0;}
        .chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
        .chatTimeHide{display: none;}
        .clear{clear:both;}
    </style>

 </head>
-<body class="text-center">
-<div id="app" style="width:100%">
+<body>
+<div id="app"  class="chatCenter">
    <template>
        <!--客服代码-->
        <div class="chatContext">
@ -117,8 +118,10 @@
                </ul>
                <div class="clear"></div>
            </div>
-            <div class="faceBtn visitorFaceBtn"></div>
-            <el-button type="primary" class="chatBoxSendBtn" size="small" v-on:click="chatToUser">{{.SendBtn}}</el-button>
+            <div class="btnArea">
+                <el-button type="primary" class="chatBoxSendBtn" size="small" v-on:click="chatToUser">{{.SendBtn}}</el-button>
+                <div class="faceBtn visitorFaceBtn"></div>
+            </div>
        </div>
        <!--//客服代码-->