mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-05-06 18:29:26 +08:00
为Overview页添加响应式布局
This commit is contained in:
parent
a0ad252dba
commit
8aff1ae64e
36
main.py
36
main.py
@ -20,36 +20,44 @@ def appinit():
|
|||||||
def login(): # 登录页面
|
def login(): # 登录页面
|
||||||
if request.method == "GET":
|
if request.method == "GET":
|
||||||
if request.cookies.get("islogin") is not None:
|
if request.cookies.get("islogin") is not None:
|
||||||
return redirect("/overview")
|
return redirect("/overview/1")
|
||||||
return render_template("login.html")
|
return render_template("login.html")
|
||||||
elif request.method == "POST":
|
elif request.method == "POST":
|
||||||
if request.form["username"] == config.get("user", "username") and request.form[
|
if request.form["username"] == config.get("user", "username") and request.form[
|
||||||
"password"
|
"password"
|
||||||
] == config.get("user", "password"):
|
] == config.get("user", "password"):
|
||||||
resp = make_response(redirect("/overview"))
|
resp = make_response(redirect("/overview/1"))
|
||||||
resp.set_cookie("islogin", "True")
|
resp.set_cookie("islogin", "True")
|
||||||
return resp
|
return resp
|
||||||
else:
|
else:
|
||||||
return redirect("/")
|
return redirect("/")
|
||||||
|
|
||||||
|
|
||||||
@app.route("/overview")
|
|
||||||
def overview(): # 概览
|
@app.route("/overview/<page>")
|
||||||
|
def overview(page): # 概览
|
||||||
|
page = int(page)
|
||||||
if request.cookies.get("islogin") is None:
|
if request.cookies.get("islogin") is None:
|
||||||
return redirect("/")
|
return redirect("/")
|
||||||
return render_template("overview.html")
|
metaDataList = db.getMetadata((page - 1) * 20, page * 20)
|
||||||
|
if page <= 3:
|
||||||
|
lastPageList = range(1,page)
|
||||||
|
else:
|
||||||
|
lastPageList = range(page-3,page)
|
||||||
|
nextPageList = range(page+1,page+4)
|
||||||
|
return render_template("overview.html",list=metaDataList,lastPageList=lastPageList,pagenow=page,nextPageList=nextPageList)
|
||||||
|
|
||||||
|
|
||||||
@app.route("/api/info")
|
# @app.route("/api/info") 暂时弃用
|
||||||
def api(): # 接口
|
# def api(): # 接口
|
||||||
if request.cookies.get("islogin") is None:
|
# if request.cookies.get("islogin") is None:
|
||||||
return abort(403)
|
# return abort(403)
|
||||||
func = request.args.get("func")
|
# func = request.args.get("func")
|
||||||
if func == "bookname" and request.args.get("page") is not None:
|
# if func == "bookname" and request.args.get("page") is not None:
|
||||||
page = int(request.args.get("page"))
|
# page = int(request.args.get("page"))
|
||||||
return db.getMetadata((page - 1) * 20, page * 20)
|
# return db.getMetadata((page - 1) * 20, page * 20)
|
||||||
|
|
||||||
return abort(400)
|
# return abort(400)
|
||||||
|
|
||||||
|
|
||||||
@app.route("/api/img/<bookid>/<index>")
|
@app.route("/api/img/<bookid>/<index>")
|
||||||
|
|||||||
@ -2,103 +2,106 @@
|
|||||||
<html lang="zh-cn">
|
<html lang="zh-cn">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>展示图片列表和封面</title>
|
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<style>
|
<title>展示图片列表和封面</title>
|
||||||
body {
|
<style>
|
||||||
font-family: Arial, sans-serif;
|
body {
|
||||||
margin: 0;
|
font-family: Arial, sans-serif;
|
||||||
padding: 20px;
|
margin: 0;
|
||||||
background-color: #f0f0f0;
|
padding: 20px;
|
||||||
}
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
#gallery {
|
#gallery {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
grid-template-columns: repeat(2, 1fr);
|
||||||
grid-gap: 20px;
|
grid-gap: 20px;
|
||||||
}
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
.image {
|
/* 当屏幕宽度大于600px时，调整列数和列的宽度 */
|
||||||
max-width: 100%;
|
@media (min-width: 600px) {
|
||||||
height: auto;
|
#gallery {
|
||||||
cursor: pointer;
|
grid-template-columns: repeat(3, 1fr);
|
||||||
}
|
font-size: medium;
|
||||||
|
/* 两列布局 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.loading {
|
/* 当屏幕宽度大于900px时，进一步调整列数和列的宽度 */
|
||||||
display: none;
|
@media (min-width: 900px) {
|
||||||
}
|
#gallery {
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
font-size: large;
|
||||||
|
/* 三列布局 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#imageContainer {
|
.image {
|
||||||
display: none;
|
max-width: 100%;
|
||||||
justify-content: center;
|
height: auto;
|
||||||
align-items: center;
|
cursor: pointer;
|
||||||
position: fixed;
|
}
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
z-index: 9999;
|
|
||||||
max-height: 90%;
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#imageContainer img {
|
.loading {
|
||||||
max-width: 100%;
|
display: none;
|
||||||
height: auto;
|
}
|
||||||
}
|
|
||||||
</style>
|
#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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="gallery"></div>
|
<div id="gallery">
|
||||||
<div id="imageContainer"></div>
|
{% 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>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
function linkjump(url) {
|
||||||
fetchImageList(); // 从API获取图片列表
|
window.open("/book/" + url)
|
||||||
|
}
|
||||||
// 从API获取图片列表
|
function switchPage(pagemun) {
|
||||||
function fetchImageList() {
|
window.location.replace("/overview/" + pagemun)
|
||||||
fetch('/api/info?func=bookname&page=1')
|
}
|
||||||
.then(response => response.json())
|
</script>
|
||||||
.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>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>文件上传</title>
|
<title>文件上传</title>
|
||||||
<link href="static/css/bootstrap.min.css" rel="stylesheet">
|
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
#progress {
|
#progress {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user