| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <!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>
|