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(): # 登录页面
|
||||
if request.method == "GET":
|
||||
if request.cookies.get("islogin") is not None:
|
||||
return redirect("/overview")
|
||||
return redirect("/overview/1")
|
||||
return render_template("login.html")
|
||||
elif request.method == "POST":
|
||||
if request.form["username"] == config.get("user", "username") and request.form[
|
||||
"password"
|
||||
] == config.get("user", "password"):
|
||||
resp = make_response(redirect("/overview"))
|
||||
resp = make_response(redirect("/overview/1"))
|
||||
resp.set_cookie("islogin", "True")
|
||||
return resp
|
||||
else:
|
||||
return redirect("/")
|
||||
|
||||
|
||||
@app.route("/overview")
|
||||
def overview(): # 概览
|
||||
|
||||
@app.route("/overview/<page>")
|
||||
def overview(page): # 概览
|
||||
page = int(page)
|
||||
if request.cookies.get("islogin") is None:
|
||||
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")
|
||||
def api(): # 接口
|
||||
if request.cookies.get("islogin") is None:
|
||||
return abort(403)
|
||||
func = request.args.get("func")
|
||||
if func == "bookname" and request.args.get("page") is not None:
|
||||
page = int(request.args.get("page"))
|
||||
return db.getMetadata((page - 1) * 20, page * 20)
|
||||
# @app.route("/api/info") 暂时弃用
|
||||
# def api(): # 接口
|
||||
# if request.cookies.get("islogin") is None:
|
||||
# return abort(403)
|
||||
# func = request.args.get("func")
|
||||
# if func == "bookname" and request.args.get("page") is not None:
|
||||
# page = int(request.args.get("page"))
|
||||
# return db.getMetadata((page - 1) * 20, page * 20)
|
||||
|
||||
return abort(400)
|
||||
# return abort(400)
|
||||
|
||||
|
||||
@app.route("/api/img/<bookid>/<index>")
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<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 {
|
||||
@ -15,8 +16,27 @@
|
||||
|
||||
#gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
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 {
|
||||
@ -50,54 +70,37 @@
|
||||
</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 linkjump(url) {
|
||||
window.open("/book/" + url)
|
||||
}
|
||||
|
||||
// 显示图片列表
|
||||
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 中
|
||||
});
|
||||
function switchPage(pagemun) {
|
||||
window.location.replace("/overview/" + pagemun)
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>文件上传</title>
|
||||
<link href="static/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
#progress {
|
||||
display: none;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user