{% extends "layout.html" %}

{% block content %}
<div class="main-content pb55">
    <div class="container-fluid">
        <div class="pos-box bgw mtb15">
            <div class="tab-list" id="cutMode">
                <div class="tabs-item" data-type="fast_project">快速部署项目</div>
                <div class="tabs-item" data-type="container">容器</div>
                <div class="tabs-item" data-type="compose">项目</div>
                <div class="tabs-item" data-type="model">项目模板</div>
                <div class="tabs-item" data-type="image">镜像</div>
                <div class="tabs-item" data-type="network">网络</div>
                <div class="tabs-item" data-type="volume">存储卷</div>
                <div class="tabs-item" data-type="registry">仓库</div>
                <div class="tabs-item" data-type="setup">设置</div>
            </div>
        </div>
        <div class="dk-container-view bgw mtb15 pd15 tab-view-box">
            <div class="tab-con" style="padding: 0;overflow: inherit;">
                <div class="tab-con-block">
                    <div style="display: flex;justify-content: space-between;padding-bottom: 15px;border-bottom: 2px dashed #F1F1F1;">
                        <span style="font-size: 14px;color:#666;line-height: 30px;">如果您希望添加其他快速部署项目，请<a class="btlink" onclick="bt.onlineService()">联系客服</a>,或进行<a class="btlink" onclick="docker.openFeedback()">需求反馈</a></span>
                        <span><button class="btn btn-default btn-sm" onclick="docker.update_project_list()">更新项目列表</button></span>
                    </div>
                    <div id="dk_fast_project_box" style="padding-bottom:60px"></div>
                </div>
                <div class="tab-con-block">
                    <div id="dk_container_table"></div>
                </div>
                <div class="tab-con-block">
                    <div id="dk_compose_table"></div>
                </div>
                <div class="tab-con-block">
                    <div id="dk_model_table"></div>
                </div>
                <div class="tab-con-block">
                    <div id="dk_image_table"></div>
                </div>
                <div class="tab-con-block">
                    <div id="dk_network_table"></div>
                </div>
                <div class="tab-con-block">
                    <div id="dk_volume_table"></div>
                </div>
                <div class="tab-con-block">
                    <div id="dk_registry_table"></div>
                </div>
                <div class="tab-con-block">
                    <div id="dk_setup_form"></div>
                </div>
            </div>
            <div class="mask_layer" style="display: none;"><div class="prompt_description"></div></div>
        </div>
</div>
<style>
    /* 快速部署 */
    .dk_fast_project_block{
        display: inline-block;
        width:260px;
        height: 316px;
        border: 1px solid #F0F0F0;
        padding:34px 30px;
        margin:60px 0px 0px 60px;
        border-radius: 8px;
        box-shadow: 0px 4px 4px rgba(186, 186, 186, 0.25);
        text-align: center;
    }
    .dk_fast_project_block .dk_fp_header .dk_fast_project_icon{
        height: 63px;
        text-align: center;
        margin-bottom: 25px;
    }
    .dk_fast_project_block .dk_fp_header svg{
        height: 100%;
    }
    .dk_fast_project_block .dk_fp_header span{
        text-align: center;
    }
    .dk_fast_project_block .dk_fp_header .dk_template_name{
        font-size: 16px;
        color: #333;
    }
    .dk_fast_project_block .dk_fp_header .dk_template_title{
        font-size: 14px;
        color: #666;
    }
    .dk_fast_project_block .dk_fp_centent{
        margin-top: 18px;
        height: 34px;
    }
    .dk_fp_template-introduce{
        color: #999;
        text-align: left;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .dk_fast_project_block .deployment_project{
        font-size: 14px;
        width: 115px;
        height: 31px;
        margin-top: 15px;
    }

    /* 快速部署 end */
    .tab-view-box{
        position: relative;
    }
    .add_container .bt-form th,
    .add_container .bt-form td{
        padding: 4px!important;
    }
    .add_container .line-tname,
    .add_container span.minus{
        padding:0 20px
    }
    .add_container span.plus{
        margin-left: 5px;
        font-size: 18px;
        cursor: pointer;
    }
    .add_container span.plus:hover{
        background-color: #20a53a;
        color:#fff
    }
    .add_container .divtable {
        width: 393px;
    }
    .cu-pointer{
        cursor: pointer;
    }
    .dk-container-view .size_ellipsis{
        vertical-align: bottom;
    }
    .add_container .unit{
        display: inline-block;
        border: 1px solid #ccc;
        border-left: 0;
        border-radius: 2px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #f6f6f6;
        vertical-align: bottom;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    ul.dk_volumes{
        transition: all 500ms;
        background: #fff;
        position: absolute;
        top: 30px;
        left: 0;
        display: none;
        box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
        border-radius: 1px;
        width: 155px;
        z-index: 999;
        max-height: 200px;
        overflow: auto;
    }
    ul.dk_volumes li {
        height: 28px;
        line-height: 28px;
        padding: 0 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    ul.dk_volumes li.active{
        color: #fff;
        background-color: #20a53a;
    }

    ul.dk_volumes li:hover {
        background-color: #f2f2f2;
    }


    .dk_status_select{
        border: 1px solid #ccc;
        padding: 0px 2px;
        position: relative;
        background-color: #fff;
    }
    .dk_status_select:after{
        content: "";
        width: 6px;
        height: 6px;
        border-left: 1px solid #666;
        border-bottom: 1px solid #666;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        position: absolute;
        right: 7px;
        top: 5px;
    }
    .dk_status_select a {
        /* color: #333!important; */
        display: block;
    }
    .dk_status_select .glyphicon{
        display: none;
    }
    ul.dk_status_select_list{
        position: fixed;
        background: #fff;
        border: 1px solid #c9c9c9;
        z-index: 10;
        display: block;
        width: 63px;
        margin-top: 5px;
    }
    ul.dk_status_select_list li{
        height: 24px;
        line-height: 24px;
        padding:0 4px;
        cursor: pointer;
    }
    ul.dk_status_select_list li:hover{
        background-color: #20a53a;
        color: #fff;
    }

    /* json树 */
    ul.jsontree_tree{
        margin-left:0
    }
    .jsontree_value_string{
        word-break: break-all;
    }
    /* json树 end*/


    /* 容器监控样式 */
    .cont-chart-dialog{
        font-size: 0;
    }

    .cont_chart_block {
        display: inline-block;
        width: 49.5%;
    }
    .cont_chart_line,
    .cont_chart_block {
        border-radius: 4px;
        border: 1px solid #EBEEF5;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .cont_chart_block:nth-child(2n-1){
        margin-left: 10px;
    }
    .cont_chart_child_title{
        border-bottom: 1px solid #EBEEF5;
        padding: 10px;
    }
    .cont_chart_basis {
        display: inline-block;
        padding: 15px;
        font-size: 13px;
    }
    .cont_chart_basis span {
        color: #919191;
    }
    .bt-ico-ask a{
        color: #fb7d00;
    }
    .bt-ico-ask:hover a,
    .bt-ico-ask a:hover{
        color:#fff
    }
    /* 容器监控样式 end */

    /* 添加Yaml模板 */
    .model_sc_top{
        position: relative;
    }
    .model_sc_child {
        display: inline-block;
        position: absolute;
        right: 110px;
        top: 6px;
    }
    .model_sc_child::after {
        content: '包含子目录';
        margin-left: 5px;
    }
    /* 添加Yaml模板 end */
</style>
<script type="text/template" id="aceTmplate">
    <div id="ace_conter">
        <div class="ace_header" style="top: 0">
            <span class="saveFile"><i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i><span>保存</span></span>
            <span class="saveFileAll"><i class="glyphicon glyphicon-duplicate" aria-hidden="true"></i><span>全部保存</span></span>
            <span class="refreshs"><i class="glyphicon glyphicon-refresh" aria-hidden="true"></i><span>刷新</span></span>
            <span class="searchs"><i class="glyphicon glyphicon-search" aria-hidden="true"></i><span>搜索</span></span>
            <span class="replaces"><i class="glyphicon glyphicon-retweet" aria-hidden="true"></i><span>替换</span></span>
            <span class="jumpLine"><i class="glyphicon glyphicon-pushpin" aria-hidden="true"></i><span>跳转行</span></span>
            <span class="fontSize"><i class="glyphicon glyphicon-text-width" aria-hidden="true"></i><span>字体</span></span>
            <span class="themes"><i class="glyphicon glyphicon-magnet" aria-hidden="true"></i><span>主题</span></span>
            <span class="setUp"><i class="glyphicon glyphicon-cog" aria-hidden="true"></i><span>设置</span><div class="red-poins" style="display: none;"></div></span>
            <span class="helps"><i class="glyphicon glyphicon-question-sign" aria-hidden="true"></i><span>快捷键</span></span>
            <div class="pull-down" title="隐藏工具条" style="top: 0"><i class="glyphicon glyphicon-menu-down" aria-hidden="true"></i></div>
        </div>
        <div class="ace_overall" style="top: 35px;">
            <!-- 编辑器目录 -->
            <div class="ace_catalogue" style="left:0px">
                <div class="ace_catalogue_title">目录<div class="dir-menu-right"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></div></div>
                <div class="ace_dir_tools">
                    <div class="upper_level"  title="返回上级目录">
                        <i class="glyphicon glyphicon-share-alt" aria-hidden="true"></i>
                        <span>上一级</span>
                    </div>
                    <div class="search_file" title="搜索内容">
                        <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
                        <span>搜索</span>
                    </div>
                    <div class="new_folder" title="新建文件/目录">
                        <i class="glyphicon glyphicon-plus"  aria-hidden="true"></i>
                        <span>新建</span>
                        <ul class="folder_down_up">
                            <li data-type="2"><i class="folder-icon"></i>新建文件夹</li>
                            <li data-type="3"><i class="text-icon"></i>新建文件</li>
                        </ul>
                    </div>
                    <div class="refresh_dir" title="刷新当前目录">
                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                        <span>刷新</span>
                    </div>
                    <span class="ace_editor_main_storey"></span>
                </div>
                <div class="ace_catalogue_list">
                    <ul class="cd-accordion-menu"></ul>
                    <ul class="ace_catalogue_menu">
                        <li data-type="0"><i class="glyphicon glyphicon-refresh" aria-hidden="true"></i><span>刷新目录</span></li>
                        <li data-type="1"><i class="glyphicon glyphicon-folder-open" aria-hidden="true"></i><span>打开子目录</span></li>
                        <li data-type="2"><i class="folder-icon"></i><span>新建文件夹</span></li>
                        <li data-type="3"><i class="text-icon"></i><span>新建文件</span></li>
                        <li data-type="4"><i class="rename-icon img-icon"></i><span>重命名</span></li>
                        <li data-type="5"><i class="down-icon img-icon"></i><span>下载</span></li>
                        <li data-type="6"><i class="del-icon img-icon"></i><span>删除</span></li>
                    </ul>
                </div>
                <div class="ace_catalogue_drag_icon">
                    <div class="drag_icon_conter"></div>
                    <span class="fold_icon_conter" title="隐藏文件目录"></span>
                </div>

            </div>
            <!-- 编辑内容 -->
            <div class="ace_editor_main" style="margin-left:265px">
                <ul class="ace_conter_menu"></ul>
                <div class="ace_conter_tips"><div class="tips"></div></div>
                <div class="ace_editor_main_storey"></div>
                <div class="ace_conter_editor"></div>
                // 编辑器终端
                <div class="term-parent">
                    <div class="term-content" id="termContent"></div>
                </div>
                <div class="ace_conter_toolbar">
                    <div class="pull-left size_ellipsis">
                        <span data-type="path" class="size_ellipsis"></span>
                    </div>
                    <div class="pull-right">
                        <span data-type="cursor"></span>
                        <span data-type="history"></span>
                        <span data-type="tab"></span>
                        <span data-type="encoding"></span>
                        <span data-type="lang"></span>
                    </div>
                </div>
            </div>
            <div class="ace_toolbar_menu" style="display: none;">
                <div class="menu-item menu-tabs" style="display: none;">
                    <div class="menu-title">设置制表符</div>
                    <ul class="tabsType">
                        <li data-value="nbsp">使用空格缩进</li>
                        <li data-value="tabs">使用 "Tab" 缩进</li>
                    </ul>
                    <div class="menu-title" style="margin-top:15px">设置制表符长度</div>
                    <ul class="tabsSize">
                        <li data-value="1">1</li>
                        <li data-value="2">2</li>
                        <li data-value="3">3</li>
                        <li data-value="4">4</li>
                        <li data-value="5">5</li>
                        <li data-value="6">6</li>
                    </ul>
                </div>
                <div class="menu-item menu-encoding" style="display: none;">
                    <div class="menu-title">设置文件保存编码格式</div>
                    <ul></ul>
                </div>
                <div class="menu-item menu-files" style="display: none;">
                    <div class="menu-conter">
                        <input type="text" class="menu-input" placeholder="输入语言模式">
                        <i class="fa fa-close" aria-hidden="true"></i>
                    </div>
                    <div class="menu-title">设置文件语言关联</div>
                    <ul></ul>
                </div>
                <div class="menu-item menu-fontSize" style="display: none;">
                    <div class="menu-title">设置编辑器字体大小</div>
                    <div class="menu-conter">
                        <div class="set_font_size">
                            <input type="number" min="12" max="45"/>
                            <span class="tips error">字体设置范围 12-45</span>
                            <button class="btn-save">保存</button>
                        </div>
                    </div>
                </div>
                <div class="menu-item menu-jumpLine" style="display: none;">
                    <div class="menu-title">跳转到指定行</div>
                    <div class="menu-conter">
                        <div class="set_jump_line">
                            <input type="number" min="0"/>
                            <div class="jump_tips">当前：行&nbsp;<span></span>&nbsp;，列&nbsp;<span></span>&nbsp;，输入行数(介于&nbsp;1&nbsp;-&nbsp;<span></span>&nbsp;之间)</div>
                        </div>
                    </div>
                </div>
                <div class="menu-item menu-themes" style="display: none;">
                    <div class="menu-title">设置编辑器主题</div>
                    <ul></ul>
                </div>
                <div class="menu-item menu-history" style="display: none;">
                    <div class="menu-title">文件历史版本</div>
                    <ul></ul>
                </div>
                <div class="menu-item menu-setUp"  style="display: none;">
                    <div class="menu-title">编辑器设置【部分设置需要重新打开编辑生效】</div>
                    <ul class="editor_menu">
                        <li data-type="wrap">自动换行</li>
                        <li data-type="enableLiveAutocompletion">代码自动完成</li>
                        <li data-type="enableSnippets">启用代码段</li>
                        <li data-type="showInvisibles">显示隐藏字符</li>
                        <li data-type="showLineNumbers">显示行号</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/template" id="aceShortcutKeys">
    <div class ="keysUp_left">
        <div class="keysUp-row">
            <div class="keysUp-title">常用快捷键</div>
            <div class="keysUp-content">
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">S</span>
                    <span class="keysUp-tips">保存文件</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">C</span>
                    <span class="keysUp-tips">复制内容</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">X</span>
                    <span class="keysUp-tips">剪切内容</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">V</span>
                    <span class="keysUp-tips">粘贴内容</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">A</span>
                    <span class="keysUp-tips">全选内容</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Z</span>
                    <span class="keysUp-tips">撤销操作</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Y</span>
                    <span class="keysUp-tips">反撤销操作</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">F</span>
                    <span class="keysUp-tips">搜索内容</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">H</span>
                    <span class="keysUp-tips">替换内容</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACkElEQVQ4T62UTWhTQRDHZ6bhFZpK9CAetEoPocF6MG83jRaqFvHjIgrFQ9WLQkHsyZMWvAkFL978QET0YPVUxUuLFFK/Ynk7W0tAqeIHFFEoQqGGWKt9I6+Y2Mh7iQcX9jT//c3Of2cW4T8vXMmbnp5eNT8/34uIKtgAoESEEXGsubl5MJVKfa2Xvwo4OTm52/f9sahDWusqfZiuSuB53gARDYYJRWQ4k8n0WGsPAMAPpdTo37qJiYnNVUBmvg8AB0MzIx5TSt1m5msA0IeIIyIyS0SffN/fFNiDiLMVYD6fX+84znsAcMKAi4uLTZ2dnd+YeRYA1kZUca4CZOZDAHAvwr/XWuuU53ktRDQT5TEi/jHZGHMVEVsRsSAiz3zfd2KxWKvv+6cR8ZZS6gwznwKASxHAj1rrlsoNc7lcrLu7+2eI0RsaGxs3ptPpvDFmHBF3RgCva637KsBCobBmYWFhLxHtAYCEiIw2NDQ8d133VRlgrR0XkVAgIvYopYaXgcx8EgCuRGQe0lofLceMMSeIKCsiwct+EZG3sVjsoeM4hfb29uIy0BhzAxGPhwGJ6Kzruhestf2lUmmoq6trrta0IDM3IeKUiCTDhEtLS23ZbPYNMwsAzIjIIxGxIvKOiILeawuK1FpfDM6jMWYXIuYispa01nFr7X4RGanRLjuUUk+Wgcw8AACh4wYAd7TWR5g5aJWgZcLWy0QioZLJ5Pcy8DEitohIUPYHRNwOANuCoIj0ZjKZu7WmAwBuaq0r/qPneVs7OjqmVqY2xmwBgN5isXg+Ho+vJqLPNR6iX2t9uRyv+x3VmQ4goozruvzPwEBord0nIod/W7EOER8AwFMiepFOp6uqq3vDWj0XFvsFsp0JRWHn0UYAAAAASUVORK5CYII=" /></span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Alt</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">0</span>
                    <span class="keysUp-tips">折叠代码</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACkElEQVQ4T62UTWhTQRDHZ6bhFZpK9CAetEoPocF6MG83jRaqFvHjIgrFQ9WLQkHsyZMWvAkFL978QET0YPVUxUuLFFK/Ynk7W0tAqeIHFFEoQqGGWKt9I6+Y2Mh7iQcX9jT//c3Of2cW4T8vXMmbnp5eNT8/34uIKtgAoESEEXGsubl5MJVKfa2Xvwo4OTm52/f9sahDWusqfZiuSuB53gARDYYJRWQ4k8n0WGsPAMAPpdTo37qJiYnNVUBmvg8AB0MzIx5TSt1m5msA0IeIIyIyS0SffN/fFNiDiLMVYD6fX+84znsAcMKAi4uLTZ2dnd+YeRYA1kZUca4CZOZDAHAvwr/XWuuU53ktRDQT5TEi/jHZGHMVEVsRsSAiz3zfd2KxWKvv+6cR8ZZS6gwznwKASxHAj1rrlsoNc7lcrLu7+2eI0RsaGxs3ptPpvDFmHBF3RgCva637KsBCobBmYWFhLxHtAYCEiIw2NDQ8d133VRlgrR0XkVAgIvYopYaXgcx8EgCuRGQe0lofLceMMSeIKCsiwct+EZG3sVjsoeM4hfb29uIy0BhzAxGPhwGJ6Kzruhestf2lUmmoq6trrta0IDM3IeKUiCTDhEtLS23ZbPYNMwsAzIjIIxGxIvKOiILeawuK1FpfDM6jMWYXIuYispa01nFr7X4RGanRLjuUUk+Wgcw8AACh4wYAd7TWR5g5aJWgZcLWy0QioZLJ5Pcy8DEitohIUPYHRNwOANuCoIj0ZjKZu7WmAwBuaq0r/qPneVs7OjqmVqY2xmwBgN5isXg+Ho+vJqLPNR6iX2t9uRyv+x3VmQ4goozruvzPwEBord0nIod/W7EOER8AwFMiepFOp6uqq3vDWj0XFvsFsp0JRWHn0UYAAAAASUVORK5CYII=" /></span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Alt</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Shift</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">0</span>
                    <span class="keysUp-tips">展开代码</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Esc</span>
                    <span class="keysUp-tips">退出搜索、取消自动提示</span>
                </div>
            </div>
        </div>
        <div class="keysUp-row">
            <div class="keysUp-title">光标移动</div>
            <div class="keysUp-content">
                <div class="keysUp-item">
                    <span class="keysUp-btn">Home</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">End</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Up</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Left</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Down</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Right</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Home</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">End</span>
                    <span class="keysUp-tips">光标移动到文档首/尾</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">P</span>
                    <span class="keysUp-tips">跳转到匹配的标签</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">pageUp</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">pageDown</span>
                    <span class="keysUp-tips">光标上/下翻页</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Alt</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Left</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Right</span>
                    <span class="keysUp-tips">光标移动到行首/尾</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">I</span>
                    <span class="keysUp-tips">跳转到指定行</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Alt</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Up</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Down</span>
                    <span class="keysUp-tips">上/下增加光标</span>
                </div>
            </div>
        </div>
    </div>
    <div class ="keysUp_right">
        <div class="keysUp-row">
            <div class="keysUp-title">内容选择</div>
            <div class="keysUp-content">
                <div class="keysUp-item">
                    <span class="keysUp-btn">鼠标框选——拖动</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Shift</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Home</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">End</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Up</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Left</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Down</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Right</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Shift</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">pageUp</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">PageDown</span>
                    <span class="keysUp-tips">上下翻页选中</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Shift</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Home</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-tips">当前光标至头/尾</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Alt</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">鼠标拖动</span>
                    <span class="keysUp-tips">块选择</span>
                </div>
            </div>
        </div>
        <div class="keysUp-row">
            <div class="keysUp-title">编辑</div>
            <div class="keysUp-content">
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">/</span>
                    <span class="keysUp-tips">注释&取消注释</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Tab</span>
                    <span class="keysUp-tips">对齐</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Shift</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Tab</span>
                    <span class="keysUp-tips">整体前移</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Delete</span>
                    <span class="keysUp-tips">删除</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">D</span>
                    <span class="keysUp-tips">删除整行</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Alt</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Shift</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Up</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Down</span>
                    <span class="keysUp-tips">复制行并添加到上一行/下一行</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Alt</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Delete</span>
                    <span class="keysUp-tips">删除光标右侧内容</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Alt</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Up</span>
                    <span class="keysUp-symbols">/</span>
                    <span class="keysUp-btn">Down</span>
                    <span class="keysUp-tips">当前行和上一行/下一行交换</span>
                </div>
                <div class="keysUp-item">
                    <span class="keysUp-btn">Ctrl</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">Shift</span>
                    <span class="keysUp-symbol">+</span>
                    <span class="keysUp-btn">D</span>
                    <span class="keysUp-tips">复制行并添加到下面</span>
                </div>
            </div>
        </div>
    </div>
</script>
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="{{g.cdn_url}}/js/docker.js?version={{g['version']}}&repair={{data['js_random']}}"></script>
<script type="text/javascript" src="{{g.cdn_url}}/jsonTree/jsonTree.js"></script>

<script type="text/javascript" src="{{g.cdn_url}}/js/jquery.dragsort-0.5.2.min.js" defer></script>
<script type="text/javascript" src="{{g.cdn_url}}/editor/ace.js" defer></script>
<script type="text/javascript" src="{{g.cdn_url}}/editor/ext-language_tools.js" defer></script>
<script type="text/javascript" src="{{g.cdn_url}}/js/xterm.js" defer></script>
<link rel="stylesheet" href="{{g.cdn_url}}/jsonTree/jsonTree.css" />
{% endblock %}
