nonebot-plugin-acgnshow/nonebot_plugin_acgnshow/res/template.html
2024-07-11 10:26:21 +00:00

142 lines
3.9 KiB
HTML

<!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-image: url('{{ bgimage }}');*/
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;
/*padding: 10px; */
box-sizing: border-box;
}
.details {
flex: 1;
padding-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
font-size: 10px;
}
.details .title {
font-size: 10px;
font-weight: bold;
}
.details .venue_name {
font-size: 10px;
font-weight: normal;
}
.details .sale_flag {
color: red;
font-size: 10px;
position: absolute;
top: 5px;
right: 5px;
}
.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;
}
.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;
}
</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">
<div>{{ show.name }}</div>
<div class="venue_name">
<div>举办地点:{{ show.location }}</div>
</div>
</div>
<div class="sale_flag">{{ show.sale_flag }}</div>
<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="header">
Designed by Asankilp?
</div>
</div>
</body>
</html>