nonebot-plugin-acgnshow/nonebot_plugin_acgnshow/res/template.html

196 lines
5.7 KiB
HTML
Raw Normal View History

2024-07-11 10:26:21 +00:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Show Information</title>
<style>
@font-face {
font-family: 'Source Han Sans';
src: url('SourceHanSans.otf') format('opentype');
}
body {
font-family: 'Source Han Sans', sans-serif;
background-image: url('{{ bgimage }}');
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
filter: blur(40%);
z-index: -1;
}
.container {
width: 98%;
margin: 1%;
border: 1px solid #fff;
padding: 10px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
}
.header {
border: 1px solid black;
padding: 5px;
margin-bottom: 10px;
text-align: center;
font-size: 10px;
font-weight: bold;
}
.content {
display: flex;
border: 1px solid black;
margin-bottom: 10px;
padding: 5px;
position: relative;
box-sizing: border-box;
}
.image {
width: 148px;
height: 200px;
border: 1px solid black;
text-align: center;
box-sizing: border-box;
}
.details {
flex: 1;
padding-left: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
2024-07-11 10:26:21 +00:00
position: relative;
font-size: 10px;
}
.details .title {
font-size: 10px;
font-weight: bold;
margin-bottom: 5px;
2024-07-11 10:26:21 +00:00
}
.details .venue_name {
font-size: 10px;
font-weight: normal;
margin-bottom: 5px;
}
.details .guests {
font-size: 10px;
word-wrap: break-word;
white-space: pre-wrap; /* 自动换行 */
margin-bottom: 5px;
}
.details .placeholder {
font-size: 10px;
margin-bottom: 5px;
2024-07-11 10:26:21 +00:00
}
.details .sale_flag {
color: red;
font-size: 10px;
position: absolute;
top: 5px;
right: 5px;
}
2024-07-11 15:45:40 +00:00
.details .id {
color: black;
font-size: 10px;
position: absolute;
top: 20px;
right: 5px;
}
2024-07-11 10:26:21 +00:00
.details .price {
color: #FB7299;
font-size: 10px;
font-weight: bold;
position: absolute;
bottom: 5px;
left: 5px;
}
.details .wish {
color: gray;
position: absolute;
bottom: 5px;
left: 60px;
2024-07-11 10:26:21 +00:00
}
.details .start-time,
.details .end-time {
font-size: 10px;
}
.details .start-time {
position: absolute;
bottom: 20px;
right: 5px;
}
.details .end-time {
position: absolute;
bottom: 5px;
right: 5px;
}
.footer {
border: 1px solid black;
flex: 1;
padding-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
font-size: 10px;
}
.footer .designer {
text-align: center;
font-weight: bold;
padding: 5px;
margin-bottom: 10px;
margin-top: 10px;
}
.footer .pages {
position: absolute;
bottom: 5px;
right: 5px;
font-size: 10px;
}
.footer .total_results {
position: absolute;
bottom: 5px;
left: 5px;
font-size: 10px;
}
.footer .project_name {
position: relative;
font-size: 10px;
text-align: center;
color: rgb(50, 227, 227);
}
2024-07-11 10:26:21 +00:00
</style>
</head>
<body>
<div class="container">
<div class="header">展览信息</div>
{% for show in shows %}
<div class="content">
<div class="image">
<img src="{{ show.image_url }}" alt="Image" width="148" height="200">
</div>
<div class="details">
<div class="title">{{ show.name }}</div>
<div class="venue_name">举办地点:{{ show.location }}</div>
{% if show.guests != "" %}
<div class="guests">嘉宾:{{ show.guests }}</div>
{% endif %}
<div class="placeholder"></div>
2024-07-11 10:26:21 +00:00
<div class="sale_flag">{{ show.sale_flag }}</div>
2024-07-11 15:45:40 +00:00
<div class="id">ID:{{ show.id }}</div>
2024-07-11 10:26:21 +00:00
<div class="price">¥{{ show.price }}起</div>
<div class="wish">{{ show.wish }}人想去</div>
<div class="start-time">开始时间:{{ show.start_time }}</div>
<div class="end-time">结束时间:{{ show.end_time }}</div>
</div>
</div>
{% endfor %}
<div class="footer">
<div class="designer"> Designed by Asankilp? </div>
<div class="total_results">共 {{ global_data.total_results }} 个结果</div>
<div class="pages">{{ global_data.page }} / {{ global_data.total_pages }} 页</div>
<div class="project_name">nonebot-plugin-acgnshow</div>
2024-07-11 10:26:21 +00:00
</div>
</div>
</body>
</html>