mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-05-07 02:39:26 +08:00
108 lines
2.9 KiB
HTML
108 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-cn">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
||
<title>展示图片列表和封面</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 0;
|
||
padding: 20px;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
#gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-gap: 20px;
|
||
font-size: small;
|
||
}
|
||
|
||
/* 当屏幕宽度大于600px时，调整列数和列的宽度 */
|
||
@media (min-width: 600px) {
|
||
#gallery {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
font-size: medium;
|
||
/* 两列布局 */
|
||
}
|
||
}
|
||
|
||
/* 当屏幕宽度大于900px时，进一步调整列数和列的宽度 */
|
||
@media (min-width: 900px) {
|
||
#gallery {
|
||
grid-template-columns: repeat(5, 1fr);
|
||
font-size: large;
|
||
/* 三列布局 */
|
||
}
|
||
}
|
||
|
||
.image {
|
||
max-width: 100%;
|
||
height: auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#imageContainer {
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 9999;
|
||
max-height: 90%;
|
||
max-width: 90%;
|
||
}
|
||
|
||
#imageContainer img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" id="search_text" placeholder="键入以搜索">
|
||
<button class="btn btn-secondary" type="button" onclick="window.location.href='/overview/1?search='+document.getElementById('search_text').value">Search</button>
|
||
</div>
|
||
<hr/>
|
||
<div id="gallery">
|
||
{% for item in list %}
|
||
<div class="image-container">
|
||
<img src="/api/img/{{ item[1] }}/1?mini=yes" class="image" onclick="linkjump('{{ item[1] }}')" />
|
||
<span>{{ item[2] }}</span>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
<div style="display:flex;justify-content: center; align-items:center;">
|
||
<div class="btn-group" role=" toolbar" aria-label="Toolbar with button groups">
|
||
{% for item in lastPageList %}
|
||
<button type="button" class="btn btn-primary" onclick="switchPage('{{item}}')">{{item}}</button>
|
||
{% endfor %}
|
||
</div>
|
||
<div class="btn-group" role=" group" aria-label="Second group">
|
||
<button type="button" class="btn btn-info">{{pagenow}}</button>
|
||
</div>
|
||
<div class="btn-group" role="group" aria-label="Third group">
|
||
{% for item in nextPageList %}
|
||
<button type="button" class="btn btn-primary" onclick="switchPage('{{item}}')">{{item}}</button>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function linkjump(url) {
|
||
window.open("/book/" + url)
|
||
}
|
||
function switchPage(pagemun) {
|
||
window.location.replace("/overview/" + pagemun)
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |