mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-09-14 11:19:34 +08:00
为Overview页添加响应式布局
This commit is contained in:
@@ -2,103 +2,106 @@
|
||||
<html lang="zh-cn">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>展示图片列表和封面</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
<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(auto-fill, minmax(200px, 1fr));
|
||||
grid-gap: 20px;
|
||||
}
|
||||
#gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 20px;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 当屏幕宽度大于600px时，调整列数和列的宽度 */
|
||||
@media (min-width: 600px) {
|
||||
#gallery {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
font-size: medium;
|
||||
/* 两列布局 */
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
}
|
||||
/* 当屏幕宽度大于900px时，进一步调整列数和列的宽度 */
|
||||
@media (min-width: 900px) {
|
||||
#gallery {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
font-size: large;
|
||||
/* 三列布局 */
|
||||
}
|
||||
}
|
||||
|
||||
#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%;
|
||||
}
|
||||
.image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#imageContainer img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
.loading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#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 id="gallery"></div>
|
||||
<div id="imageContainer"></div>
|
||||
<div id="gallery">
|
||||
{% for item in list %}
|
||||
<div class="image-container">
|
||||
<img src="/api/img/{{ item[1] }}/1" 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>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
fetchImageList(); // 从API获取图片列表
|
||||
|
||||
// 从API获取图片列表
|
||||
function fetchImageList() {
|
||||
fetch('/api/info?func=bookname&page=1')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
displayImages(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching image list:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示图片列表
|
||||
function displayImages(imageList) {
|
||||
const gallery = document.getElementById('gallery');
|
||||
gallery.innerHTML = '';
|
||||
|
||||
imageList.forEach(image => {
|
||||
const imgUrl = `/api/img/${image[1]}/1`; // 构建获取封面的API URL
|
||||
const img = document.createElement('img');
|
||||
const span = document.createElement('span');
|
||||
span.textContent = image[2]; // 书名作为标题
|
||||
img.src = imgUrl;
|
||||
img.classList.add('image');
|
||||
img.dataset.linkId = image[1]; // 存储链接ID以便点击事件处理
|
||||
|
||||
// 添加点击事件处理程序
|
||||
img.addEventListener('click', function () {
|
||||
window.location.href = "/book/"+image[1];
|
||||
});
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.classList.add('image-container'); // 添加一个容器类
|
||||
container.appendChild(img); // 将 img 元素添加到容器中
|
||||
container.appendChild(span); // 将 span 元素添加到容器中
|
||||
|
||||
gallery.appendChild(container); // 将容器添加到 gallery 中
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
function linkjump(url) {
|
||||
window.open("/book/" + url)
|
||||
}
|
||||
function switchPage(pagemun) {
|
||||
window.location.replace("/overview/" + pagemun)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user