<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>IOmga</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-v4.6.2/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='layui-v2.9.7/css/layui.css') }}">
    <style>
        /* 字体集 */
        @font-face {
            font-family: "思源黑体 Regular";
            font-weight: 400;
            src: url("{{ url_for('static', filename='font/SourceHanSans.Regular.woff2') }}") format("woff2"),
            url("{{ url_for('static', filename='font/SourceHanSans.Regular.woff') }}") format("woff");
            font-display: swap;
        }

        body, html {
            margin: 0;
            padding: 0;
            font-family: '思源黑体 Regular', Helvetica, 'Microsoft YaHei', Arial, sans-serif;
        }

        .top {
            position: fixed;
            top: 0;
            left: 0;
            height: 60px;
            width: 100%;
            background-color: #f0f0f0;
            z-index: 1;
        }

        .middle {
            margin-top: 80px; /* 确保中间 div 不被固定顶部的 div 遮挡 */
            margin-bottom: 55px;
            height: auto; /* 设置中间 div 的高度，使其可以滚动 */
        }

        .bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 55px;
            width: 100%;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-content: center;
        }

        .card-box {
            margin-bottom: 45px;
            display: flex;
            justify-content: center;
            align-content: center;
        }

        .ebook-card {
            flex: none !important;
            width: 162px;
            height: 100%;
        }

        .ebook-card-body {
            flex: none;
            padding: 0.35rem;
        }

        .ebook-card-body > h5 {
            text-align: center;
            margin-bottom: 0.35rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-fluid" style="height: 100%; padding: 0">
    <div class="layui-row top">
        <div class="layui-text" style="padding: 16px; text-align: center">
            <h2>搜索结果: {{ render_data['title'] }}</h2>
        </div>
    </div>
    <div class="layui-row middle">
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
        <div class="card-box layui-col-xs3 layui-col-md2">
            <div class="card ebook-card">
                <img src="https://www.wetools.com/placeholder/160x213?fontsize=30" class="card-img-top" alt="...">
                <div class="card-body ebook-card-body">
                    <h5 class="card-title" data-toggle="tooltip" data-placement="bottom" title="你当像鸟飞往你的山">
                        你当像鸟飞往你的山 - 你当像鸟飞往你的山</h5>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row bottom">
        <div id="card-laypage-limits"></div>
    </div>
</div>

<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-v4.6.2/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ url_for('static', filename='layui-v2.9.7/layui.js') }}"></script>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

    layui.config({
        base: "{{ url_for('static', filename='layui-modules/') }}",
        version: true
    }).use(["layer", "form", "laypage", "element", "util"], function () {
        var layer = layui.layer
            , form = layui.form
            , laypage = layui.laypage
            , element = layui.element
            , util = layui.util;

        // tab 删除事件
        element.on('tabDelete(body-handle)', function (data) {
            console.log(data.index); // 得到被删除的 tab 项的所在下标
            console.log(data.elem); // 得到当前的 tab 容器
        });

        // 自定义每页条数的选择项
        laypage.render({
            elem: 'card-laypage-limits',
            count: 1000,
            limit: 100,
            limits: [100, 300, 500],
            layout: ['prev', 'page', 'next', 'limit']
        });

    });
</script>
</body>
</html>