kefu/views/server/index.ejs

<% include header.ejs %>
<style>
    .friend {
        position: relative;
        float: left;
        width: 300px;
        height: 100%;
        background: #fbfcfe;
        border-right: 1px solid #e9e9e9;
    }

    .chat {
        position: relative;
        float: left;
        width: calc(100% - 301px);
        height: 100%;
    }

    .friend-head {
        display: block;
        cursor: pointer;
        height: 51px;
        padding: 0 12px;
        font-size: 15px;
        line-height: 50px;
        color: #767d85;
        background-color: #fff;
        border-top: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
    }

    .friend-head-right {
        float: right;
    }

    .message-agent,.message-client{
        overflow: auto;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .message-container{
        padding: 0 20px 0 20px;
        overflow: auto;
    }

    .message-time-sender{
        line-height: 1;
        margin-bottom: 5px;
        font-size: 12px;
        color: #adb2bb;
    }

    .message-agent-time-sender{
        text-align: right;
    }

    .message-content{
        border-radius: 3px;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 22px;
        word-wrap: break-word;
        word-break: break-all;
        border: 1px dashed transparent;
    }

    .message-agent-content{
        position: relative;
        float: right;
        background-color: #f0f1f3;
        color: #161e26;
    }
    .message-client-content{
        position: relative;
        float: left ;
        background-color: #e7f4ff;
        color: #161e26;
    }

    .message-sender{
        position: absolute;
        bottom: 0;
        height: 150px;
        border-top: 1px solid #e9e9e9;
        width: 100%;

    }

    .sender-editor{
        height: 100%;
    }

    .message-sender textarea{
        resize: none;
        border: none;
        border-radius: 6px;
        font-size: 15px;
        color: #161e26;
        line-height: 22px;
        background-color: #fff;
        height: calc(100% - 40px);
        padding: 20px;
        width: calc(100% - 40px);
    }

    .btnMsgSend{
        z-index: 1;
        position: absolute;
        right: 15px;
        bottom: 15px;
    }

    .user-info{
        height: 60px;
        background: #ffffff;
        line-height: 60px;
        font-size: 16px;
        color: #767d85;
        border-bottom: 1px solid #e9e9e9;
    }

    .chat-user{
        overflow: auto;
    }

    .user-info img{
        width: 50px;
    }

    .user-info .user-avatar{
        text-align: center;
    }

    .user-info .user-name{
        font-size: 12px;
    }

    .empty-status{
        width: 150px;
        margin: 0 auto;
        text-align: center;
        margin-top: 200px;
    }

    .empty-status img{
        width: 100px;
    }

    .msg-tips{
        margin-top: 25px;
        display: none;
    }

</style>
<div class="layui-fluid">
    <div class="friend">
        <div class="friend-head">
            <span class="friend-head-right">0人</span>
            <span class="help-my-chat">我的对话<span id="keleyivisitorip" style="display: none;"></span></span>
        </div>
        <div class="chat-user">

        </div>
    </div>
    <div class="chat">
        <div class="message-container" id="message-container">
            <div class="empty-status">
                <img src="/images/server/tabpage.png">
                <div class="text">从左侧列表打开对话</div>
            </div>

        </div>
        <div class="message-sender">
            <div class="sender-editor">
                <textarea placeholder="请输入消息内容，Enter快捷发送，Ctrl+Enter换行" id="msg-send-textarea" disabled></textarea>
                <div class="layui-btn layui-btn-normal btnMsgSend layui-btn-disabled" title="Enter快捷发送，Ctrl+Enter换行">发送</div>
            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type='text/javascript' src='js/common.js' charset='utf-8'></script>
<script src="/js/server/index.js"> </script>
<script type="text/javascript" src="http://tool.keleyi.com/ip/visitoriphost/"></script>

<% include footer.ejs %>