<!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;
        }
        
        .chat-main,
        .document-main {
            background: #fff;
        }
        
        .question {
            top: 0;
            border-top: none;
        }
        /*@media (max-width: 1200px) {*/
        /*body {*/
        /*width: 1200px;*/
        /*margin: 0 auto;*/
        /*position: relative;*/
        /*background: #ddd;*/
        /*box-shadow: 0 0 10px 2px #ccc;*/
        /*}*/
        /*}*/
        /**/
        /*@media (min-width: 1600px) {*/
        /*body {*/
        /*width: 1400px;*/
        /*margin: 0 auto;*/
        /*position: relative;*/
        /*background: #ddd;*/
        /*box-shadow: 0 0 10px 2px #ccc;*/
        /*}*/
        /*}*/
        /* callback add*/
        
        .live-right .l-r-m,
        .question-main {
            bottom: 0
        }
    </style>
</head>

<body>
    <!-- left start -->
    <div class="video-left">
        <div id="left-bar" class="left-bar" style="z-index: 0;">
            <!--<span id="left-switch" class="bar-switch left-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>
    <!-- left end -->
    <!-- middle start -->
    <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="height: 100%;"></div>
            </div>
        </div>
    </div>
    <!-- middle end -->
    <!-- right start -->
    <div class="video-right live-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 class="chat-main">
            <div class="chat-title">
                <h2><i></i><span>公共聊天区</span></h2>
            </div>
            <div class="chat-list l-r-m">
                <ul id="chat-list" class="chat-list l-r-m-list" style="top: 0px;"></ul>
            </div>
        </div>
    </div>
    <!-- right end -->
    <!-- 切换线路 -->
    <div class="public-layer" id="network">
        <div class="layer-title">
            <h2>选择网络</h2>
            <span class="layer-close" id="work-close"></span>
        </div>
        <div class="layer-content">
            <p>以下可以选择的网络途径:</p>
            <ul class="change-network" id="change-network">
                <li>
                    <input type="radio" value="0" name="network" id="network0" checked="">
                    <label for="network0">主线路</label>
                </li>
                <li>
                    <input type="radio" value="1" name="network" id="network1">
                    <label for="network1">备用线路</label>
                </li>
            </ul>
            <div class="networks btns">
                <input type="button" class="works-btn" id="btn-netsubmit" value="确定">
                <input type="button" class="works-btn" id="btn-netcannel" value="取消">
            </div>
        </div>
    </div>
    <!-- 提示信息 -->
    <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>