{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <link rel="stylesheet" href="{% static '/css/backstageNet/common.css' %}">
    <style>
        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        /* 发布类型 */

        .uploadType {
            overflow: hidden;
        }

        .uploadType>li {
            float: left;
            margin: 12px 22px 0;
            line-height: 45px;
            padding: 0 10px;
            cursor: pointer;
            border-bottom: 5px solid #fff;
            color: #868686;
        }

        .uploadType>li:hover {
            color: #22a3ed;
        }

        .uploadType>li.active {
            color: #22a3ed;
            border-bottom: 5px solid #22a3ed;
        }

        /* 详情 */

        .uploadContent {
            border-top: 7px solid #f0f0f0;
            padding: 25px;
        }

        /* 管理员审核权限 */

        .permission {
            text-align: right;
        }

        .layui-btn.active {
            background-color: #23a3ee;
            color: #fff;
        }

        .layui-btn.active:hover {
            background-color: #23a3ee;
            color: #fff;
        }

        .layui-btn-blue {
            border: 1px solid #23a3ee;
            background-color: #ffffff;
            color: #23a3ee;
        }

        .layui-btn-blue:hover {
            color: #0c6ea8;
            border: 1px solid #0c6ea8;
        }

        /* 操作按钮 */

        .operateBtn {
            cursor: pointer;
        }

        .editBtn,
        .editBtn:hover {
            color: #23a3ee;
        }

        .passBtn,
        .passBtn:hover {
            color: #3ab851;
        }

        .delBtn,
        .delBtn:hover {
            color: #c12525;
        }

        /* 编辑框 */

        .openDiv>div {
            padding: 30px;
            width: 70%;
        }

        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>信息维护</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div>
            <!-- 发布类型 -->
            <div>
                <ul class="uploadType">
                    <li class="active"> 新闻资讯</li>
                    <li> 视频资讯 </li>
                    <li> 产品展厅 </li>
                    <li> 四季采摘 </li>
                    <li> 民宿导览 </li>
                </ul>
            </div>

            <!-- 新系列表 -->
            <div class="uploadContent">
                <div class="" id="dataDiv"></div>
            </div>

        </div>
    </div>


    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="{% static '/js/backstageNet/common.js'%}"></script>
    <script>
        layui.use(['element'], function () {
            var element = layui.element;
        })
        getPage('news_check');

        // 发布类型切换
        $('.uploadType').on('click', 'li', function () {
            $('.uploadType li').removeClass('active');
            $(this).addClass('active');
            $('.permission button').removeClass('active');
            $('.permission button').eq(0).addClass('active');
            // scrollBar()
            if ($(this).index() == 0) {
                getPage('news_check');
            } else if ($(this).index() == 1) {
                getPage('video_check');
            } else if ($(this).index() == 2) {
                getPage('video_check');
            } else if ($(this).index() == 3) {
                getPage('video_check');
            } else if ($(this).index() == 4) {
                getPage('video_check');
            }
        })

        function getPage(url) {
            $.ajax({
                url: url,
                type: 'get',
                data: {},
                dataType: 'html',
                success: function (data) {
                   $('#dataDiv').html(data);
                }
            })
        }
    </script>
</body>

</html>