初始化鸿蒙应用展示平台项目 - 前后端分离架构
This commit is contained in:
Nvex
292
templates/donors.html
Executable file
292
templates/donors.html
Executable file
@@ -0,0 +1,292 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="donors-page">
|
||||
<div class="header">
|
||||
<a href="{{ url_for('index') }}" class="back-link" title="返回首页">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1>赞赏名单</h1>
|
||||
</div>
|
||||
|
||||
<div class="donors-grid">
|
||||
{% for donor in donors %}
|
||||
<div class="donor-card" {% if donor.link %}onclick="window.open('{{ donor.link }}', '_blank')"{% endif %}>
|
||||
<div class="donor-info">
|
||||
<div class="donor-name">{{ donor.name }}</div>
|
||||
<div class="donor-amount">
|
||||
{% set amount = donor.amount.replace('¥', '').strip() %}
|
||||
{% set float_amount = amount|float %}
|
||||
¥{{ "%.2f"|format(float_amount) }}
|
||||
</div>
|
||||
{% if donor.message %}
|
||||
<div class="message-divider"></div>
|
||||
<div class="donor-message">{{ donor.message }}</div>
|
||||
{% endif %}
|
||||
{% if donor.link %}
|
||||
<div class="donor-link-indicator">
|
||||
<i class="fas fa-link"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.donors-page {
|
||||
max-width: 1200px;
|
||||
margin: 60px auto 20px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 30px;
|
||||
background: white;
|
||||
padding: 10px 15px 10px 15px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
background: #e5e5e7;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-family: "SimHei", "黑体", sans-serif;
|
||||
}
|
||||
|
||||
.donors-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.donor-card {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.donor-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.donor-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.donor-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-family: "SimHei", "黑体", sans-serif;
|
||||
}
|
||||
|
||||
.donor-amount {
|
||||
font-size: 14px;
|
||||
color: #007AFF;
|
||||
font-family: "SimHei", "黑体", sans-serif;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.donor-message {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.3;
|
||||
word-break: break-word;
|
||||
font-family: "SimHei", "黑体", sans-serif;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.donors-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.donor-card {
|
||||
padding: 12px 12px 10px 12px;
|
||||
}
|
||||
|
||||
.donor-name, .donor-amount {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.donor-message {
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.donor-link-indicator {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.message-divider {
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.donor-info {
|
||||
gap: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.donor-link-indicator {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: #007AFF;
|
||||
font-size: 12px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.donor-card[onclick] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.donor-card[onclick]:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.message-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #e0e0e0;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
/* 暗色模式样式 */
|
||||
[data-theme="dark"] .donors-page {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .header {
|
||||
background: #242424;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .header h1 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .back-link {
|
||||
color: #ccc;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .back-link:hover {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .donor-card {
|
||||
background: #242424;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .donor-name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .donor-amount {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .donor-message {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .message-divider {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .donor-link-indicator {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.floating-buttons {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 暗色模式样式 */
|
||||
[data-theme="dark"] .theme-toggle {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.floating-buttons {
|
||||
bottom: 30px;
|
||||
right: 15px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 修改返回链接的处理
|
||||
document.querySelector('.back-link').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
window.history.back();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user