121 lines
3.4 KiB
HTML
121 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-Hans">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>「永不停止的歌声」— 链上镌刻 | Luo Tianyi CodeLab</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f9f9f9;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
nav h2 {
|
|
font-weight: 400;
|
|
color: #666;
|
|
font-size: 1.2rem;
|
|
margin-bottom: .5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.faq-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.faq-item {
|
|
background-color: #fff;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.faq-question {
|
|
padding: 15px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.faq-question:hover {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.faq-answer {
|
|
padding: 1.2rem;
|
|
margin: 0;
|
|
display: none;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
|
|
.faq-icon {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.faq-icon img {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.faq-item.open .faq-answer {
|
|
display: block;
|
|
}
|
|
|
|
.faq-item.open .faq-icon {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.faq-container > a {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
color: #3b82f6;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #66ccff;
|
|
transition: color 0.3s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="faq-container">
|
|
<nav>
|
|
<h1>链上镌刻 —「永不停止的歌声」</h1>
|
|
<h2>常见问题解答 · FAQ</h2>
|
|
</nav>
|
|
{% for item in faq %}
|
|
<div class="faq-item {{ 'open' if item.alert else '' }}">
|
|
<div class="faq-question" {{ 'style="color: red;"' if item.alert else '' }}>
|
|
<span>{{ item.question }}</span>
|
|
<span class="faq-icon"><img src="/assets/icon/bx-chevron-right.svg" alt="Expand"></span>
|
|
</div>
|
|
<div class="faq-answer">
|
|
{{ item.answer | replace('\n\n', '<br><br>') | safe }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<a href="/">返回首页</a>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll('.faq-question').forEach(question => {
|
|
question.addEventListener('click', () => {
|
|
const item = question.parentElement;
|
|
item.classList.toggle('open');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|