在线客服.html 4.0 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/base.js"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript"> 
        $(function () {
            var position = $("#yuyin").offset();
            $("#div2").offset({
                top: position.top + 22,
                left: position.left
            });
            $("#yuyin").click(function () {
                $("#N1G").toggleClass("open");
            });

            $("#ccc").click(function () {
                $("div#N1G").removeClass("open");
            })
        })

    </script>

    <title>在线客服</title>
    <style>
        .yuyin {
            text-align: center;
            font-size: 0.24rem;
            color: #424242;
            padding: 0.1rem;
        }

        .yuyin img {
            width: auto;
        }
        .onlinepart1{
            width:100%;
        }
    </style>
</head>

<body>
    <div class="onlineheader center">
        <div class="left seback">
            <a href="#" onClick="javascript:history.back(-1);">
                <img src="images/yeback_03.png" />
            </a>
        </div>
        <div class="headertext">在线客服</div>
    </div>

    <div class="onlinepart1">
        <div class="opposite">
            <div class="smallimg-right">
                <img src="images/onliy_03.jpg" />
            </div>
            <p>在吗 投诉</p>
            <img src="images/onlineli_03.jpg" />
        </div>

        <div class="onlinetime">2018-01-31 17:56</div>

        <div class="customer">
            <div class="smallimg-left">
                <img src="images/onliy_07.jpg" />
            </div>
            <img src="images/onlineli_07.jpg" />
            <p>您好,慈界医养有什么可以帮您?</p>
        </div>

        <div class="onlinetime">2018-01-31 17:55</div>
        <div class="opposite">
            <div class="smallimg-right">
                <img src="images/onliy_03.jpg" />
            </div>
            <p>订单可否取消?</p>
            <img src="images/onlineli_03.jpg" />
        </div>

        <div class="onlinetime">2018-01-31 17:56</div>
        <div class="customer">
            <div class="smallimg-left">
                <img src="images/onliy_07.jpg" />
            </div>
            <img src="images/onlineli_07.jpg" />
            <p>非常抱歉,现在是非上班时间,如有问题请您详细描述厚留言。客服人员会在工作时间(早9:00-晚17:00)尽快为您处理。</p>
        </div>

        <div class="onlinetime">2018-01-31 17:56</div>
        <div class="customer">
            <div class="smallimg-left">
                <img src="images/onliy_07.jpg" />
            </div>
            <img src="images/onlineli_07.jpg" />
            <p>你好,由于当前咨询量较大,还请您稍事等待,客服会尽快为您处理,您也可以详细描述问题,客服处理完毕会直接回复您。</p>
        </div>

    </div>

    <div class="onbut">
        <input type="text" class="onlinetext" placeholder="输入新消息" />
        <a href="#" id="yuyin">
            <img src="images/onlineli_11.jpg" />
        </a>
    </div>


    <div id="div2">
        <div class="mPicker1 close" id="N1G">
            <div class="mPicker-mask1" id="ccc"></div>
            <div class="mPicker-main1">
                <div class="yuyin">
                    <a href="#">
                        <img src="images/yuyin.png" />
                    </a>
                </div>
            </div>
        </div>
    </div>
    </div>