<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">

<head>
    <title>CCR播放器</title>
    <link rel="stylesheet" href="./css/index6.css">

    <script src="./js/view.js"></script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            overflow-x: auto;
        }
        /*body {*/
        /*width: 1200px;*/
        /*margin: 0 auto;*/
        /*position: relative;*/
        /*background: #ddd;*/
        /*box-shadow: 0 0 10px 2px #ccc;*/
        /*border: 0px;*/
        /*}*/
        
        .chat-main,
        .document-main {
            background: #fff;
        }
        
        .video-middle {
            left: 0;
        }
        
        .question {
            top: 0;
            right: 0;
            border-top: none;
        }
        /* callback add*/
        
        .question-main {
            bottom: 0
        }
    </style>
</head>

<body>
    <div class="video-middle" id="video-middle">
        <div class="video-m-top" id="doc-main" data-module="1" style="bottom: 0px;">
            <div class="document-main">
                <div id="main-video" style="z-index: 100; height: 100%;"></div>
            </div>
        </div>
    </div>
    <!-- middle end -->
    <!-- right start -->
    <div class="video-right" id="video-right">
        <div id="right-bar" class="right-bar" style="z-index: 0;">
            <!--<span id="right-switch" class="bar-switch right-icons"></span>-->
        </div>
        <div id="question" class="question">
            <div class="question-title">
                <h2><i></i><span>问答区</span></h2>
            </div>
            <div class="question-main live-left">
                <ul id="qas" class="l-b-m-list"></ul>
            </div>
        </div>
    </div>
    <!-- right end -->
    <!-- 输入提示 -->
    <div class="input-tips" id="input-tips">
        <i></i>
        <p></p>
        <div class="input-tips-cur"></div>
    </div>
    <!-- 聊天模板 -->
    <script id="chatMsgTemplate" type="text/x-handlebars-template">
        <li {{#if isFromMe}}class="me" {{/if}}>
            <div class="peo-infos">
                <p class="peo-names">
                    <span class="p-n-names">{{name}}</span>
                    <i class="peo-icons "></i>
                </p>
            </div>
            <div class="peo-chat">
                <i class="icons"></i>

                <p class="chat-content">{{{content}}}</p>
            </div>
        </li>
    </script>
    <!-- 私聊 -->
    <script id="privateChatMsgTemplate" type="text/x-handlebars-template">
        <li {{#if isFromMe}}class="me" {{/if}}>
            <div class="peo-infos">
                <p class="peo-names">
                    <span class="p-n-names pchat">{{fromUserName}}&nbsp;对&nbsp;{{toUserName}}&nbsp;说</span>
                    <i class="peo-icons "></i>
                </p>
            </div>
            <div class="peo-chat">
                <i class="icons"></i>

                <p class="chat-content">{{{content}}}</p>
            </div>
        </li>
    </script>
    <!-- 提问 -->
    <script id="questionTemplate" type="text/x-handlebars-template">
        <li id="{{id}}" questionUserId="{{questionUserId}}" {{#if isFromMe}}self="1" {{else}}style="display:none;" {{/if}}>
            <div class="peo-infos">
                <p class="peo-names">
                    <span class="p-n-names">{{questionUserName}}：</span>
                    <i class="peo-icons"></i>
                </p>
            </div>
            <div class="peo-chat">
                <p class="chat-content">{{content}}</p>
            </div>
        </li>
    </script>
    <!-- 回答 -->
    <script id="answerTemplate" type="text/x-handlebars-template">
        <div class="peo-repeat">
            <p class="teacher-name">
                <i></i> {{answerUserName}}：
            </p>

            <p class="repeat-content">{{content}}</p>
        </div>
    </script>
</body>

</html>