907 lines
23 KiB
HTML
Executable File
907 lines
23 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
{% include 'admin_nav.html' %}
|
|
|
|
<div class="admin-container">
|
|
<div class="admin-content">
|
|
<div class="admin-card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<i class="fas fa-cog"></i>
|
|
<h3>赞赏设置</h3>
|
|
</div>
|
|
</div>
|
|
<form onsubmit="submitDonateSettings(event)" class="admin-form" enctype="multipart/form-data">
|
|
<div class="form-group">
|
|
<label class="switch-label">
|
|
<span>赞赏功能</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="donate-enabled" name="donate_enabled"
|
|
{% if settings.donate_enabled == '1' %}checked{% endif %}>
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="donate-text">赞赏文字</label>
|
|
<input type="text" id="donate-text" name="donate_text"
|
|
value="{{ settings.donate_text }}" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="donate-image">赞赏二维码</label>
|
|
<div class="file-input-wrapper">
|
|
<input type="file" id="donate-image" name="donate_image" accept="image/*">
|
|
<label for="donate-image" class="file-input-label">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
<span>选择文件</span>
|
|
</label>
|
|
</div>
|
|
{% if settings.donate_image %}
|
|
<div class="current-image">
|
|
<img src="{{ settings.donate_image }}" alt="当前赞赏二维码">
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="donate-note">赞赏说明</label>
|
|
<input type="text" id="donate-note" name="donate_note"
|
|
value="{{ settings.donate_note }}" placeholder="显示在二维码下方的说明文字">
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary">
|
|
<i class="fas fa-save"></i> 保存设置
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 添加赞赏人卡片 -->
|
|
<div class="admin-card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<i class="fas fa-user-plus"></i>
|
|
<h3>添加赞赏人</h3>
|
|
</div>
|
|
</div>
|
|
<form onsubmit="submitDonor(event)" class="admin-form">
|
|
<div class="form-group">
|
|
<label for="donor-name">赞赏人</label>
|
|
<input type="text" id="donor-name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="donor-amount">赞赏金额</label>
|
|
<input type="text" id="donor-amount" name="amount" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="donor-link">个人链接</label>
|
|
<input type="url" id="donor-link" name="link" placeholder="http://...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="donor-message">留言</label>
|
|
<textarea id="donor-message" name="message" rows="3" placeholder="赞赏留言..."></textarea>
|
|
</div>
|
|
<button type="submit" class="btn-primary">
|
|
<i class="fas fa-plus"></i> 添加赞赏人
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 赞赏人列表卡片 -->
|
|
<div class="admin-card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<i class="fas fa-list"></i>
|
|
<h3>赞赏人列表</h3>
|
|
<div class="search-box">
|
|
<input type="text" id="donor-search" placeholder="搜索赞赏人...">
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="total-amount">
|
|
总金额：<span>¥{{ total_amount|default('0.00') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="donors-list">
|
|
{% for donor in donors %}
|
|
<div class="donor-item" data-donor-id="{{ donor.id }}">
|
|
<div class="donor-info">
|
|
<span class="donor-name">{{ donor.name }}</span>
|
|
<span class="donor-amount">{{ donor.amount }}</span>
|
|
{% if donor.message %}
|
|
<span class="donor-message">{{ donor.message }}</span>
|
|
{% endif %}
|
|
{% if donor.link %}
|
|
<span class="donor-link">
|
|
<a href="{{ donor.link }}" target="_blank">
|
|
<i class="fas fa-link"></i>
|
|
</a>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="donor-controls">
|
|
<button onclick="editDonor({{ donor.id }})" class="btn-edit">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button onclick="deleteDonor({{ donor.id }})" class="btn-delete">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加编辑模态框 -->
|
|
<div id="edit-donor-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>编辑赞赏人</h3>
|
|
<span class="close">×</span>
|
|
</div>
|
|
<form id="edit-donor-form" class="admin-form">
|
|
<input type="hidden" id="edit-donor-id">
|
|
<div class="form-group">
|
|
<label for="edit-donor-name">赞赏人</label>
|
|
<input type="text" id="edit-donor-name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-donor-amount">赞赏金额</label>
|
|
<input type="text" id="edit-donor-amount" name="amount" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-donor-link">个人链接</label>
|
|
<input type="url" id="edit-donor-link" name="link" placeholder="http://...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-donor-message">留言</label>
|
|
<textarea id="edit-donor-message" name="message" rows="3"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn-primary">
|
|
<i class="fas fa-save"></i> 保存修改
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function submitDonateSettings(event) {
|
|
event.preventDefault();
|
|
const form = event.target;
|
|
const formData = new FormData(form);
|
|
|
|
// 添加开关状态
|
|
formData.set('donate_enabled', form.querySelector('#donate-enabled').checked ? '1' : '0');
|
|
|
|
fetch('{{ url_for("update_donate_settings") }}', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showNotification('设置已更新', 'success');
|
|
} else {
|
|
showNotification(data.error || '更新失败', 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
showNotification('更新失败，请重试', 'error');
|
|
});
|
|
}
|
|
|
|
function updatePreview(text, imageUrl) {
|
|
const preview = document.querySelector('.donate-preview');
|
|
preview.querySelector('.donate-text').textContent = text;
|
|
if (imageUrl) {
|
|
let img = preview.querySelector('.donate-qr');
|
|
if (!img) {
|
|
img = document.createElement('img');
|
|
img.className = 'donate-qr';
|
|
preview.appendChild(img);
|
|
}
|
|
img.src = imageUrl;
|
|
img.alt = '赞赏二维码';
|
|
}
|
|
}
|
|
|
|
function showNotification(message, type = 'success') {
|
|
const notification = document.createElement('div');
|
|
notification.className = `notification ${type}`;
|
|
|
|
// 添加图标
|
|
const icon = document.createElement('i');
|
|
icon.className = type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';
|
|
notification.appendChild(icon);
|
|
|
|
// 添加消息文本
|
|
const text = document.createElement('span');
|
|
text.textContent = message;
|
|
notification.appendChild(text);
|
|
|
|
// 添加关闭按钮
|
|
const closeBtn = document.createElement('i');
|
|
closeBtn.className = 'fas fa-times close-notification';
|
|
closeBtn.onclick = () => closeNotification(notification);
|
|
notification.appendChild(closeBtn);
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
// 确保动画正常执行
|
|
notification.style.opacity = '0';
|
|
notification.style.transform = 'translateY(20px)';
|
|
|
|
// 强制重排，确保动画生效
|
|
notification.offsetHeight;
|
|
|
|
// 显示通知
|
|
notification.style.opacity = '1';
|
|
notification.style.transform = 'translateY(0)';
|
|
|
|
// 延迟关闭通知
|
|
const timer = setTimeout(() => {
|
|
closeNotification(notification);
|
|
}, 2000);
|
|
|
|
// 鼠标悬停时暂停关闭计时
|
|
notification.addEventListener('mouseenter', () => {
|
|
clearTimeout(timer);
|
|
});
|
|
|
|
// 鼠标离开时重新开始计时
|
|
notification.addEventListener('mouseleave', () => {
|
|
setTimeout(() => {
|
|
closeNotification(notification);
|
|
}, 1000);
|
|
});
|
|
}
|
|
|
|
// 修改关闭通知函数
|
|
function closeNotification(notification) {
|
|
// 添加关闭动画
|
|
notification.style.opacity = '0';
|
|
notification.style.transform = 'translateY(20px)';
|
|
|
|
// 等待动画完成后移除元素
|
|
setTimeout(() => {
|
|
if (notification && notification.parentElement) {
|
|
notification.remove();
|
|
}
|
|
}, 300);
|
|
}
|
|
|
|
// 添加赞赏人
|
|
function submitDonor(event) {
|
|
event.preventDefault();
|
|
const form = event.target;
|
|
const formData = new FormData(form);
|
|
|
|
fetch('{{ url_for("add_donor") }}', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showNotification('赞赏人添加成功', 'success');
|
|
form.reset();
|
|
location.reload();
|
|
} else {
|
|
showNotification(data.error || '添加失败', 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
showNotification('添加失败，请重试', 'error');
|
|
});
|
|
}
|
|
|
|
// 删除赞赏人
|
|
function deleteDonor(id) {
|
|
if (confirm('确定要删除这条赞赏记录吗？')) {
|
|
fetch(`{{ url_for('delete_donor', donor_id=0) }}`.replace('0', id), {
|
|
method: 'POST'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showNotification('赞赏记录已删除', 'success');
|
|
location.reload();
|
|
} else {
|
|
showNotification(data.error || '删除失败', 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
showNotification('删除失败，请重试', 'error');
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateDonateEnabled(enabled) {
|
|
fetch('{{ url_for("update_donate_settings") }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `donate_enabled=${enabled ? '1' : '0'}`
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showNotification('设置已更新', 'success');
|
|
} else {
|
|
showNotification(data.error || '更新失败', 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
showNotification('更新失败，请重试', 'error');
|
|
});
|
|
}
|
|
|
|
// 搜索功能
|
|
document.getElementById('donor-search').addEventListener('input', function(e) {
|
|
const searchText = e.target.value.toLowerCase();
|
|
const donors = document.querySelectorAll('.donor-item');
|
|
|
|
donors.forEach(donor => {
|
|
const name = donor.querySelector('.donor-name').textContent.toLowerCase();
|
|
const message = donor.querySelector('.donor-message')?.textContent.toLowerCase() || '';
|
|
|
|
if (name.includes(searchText) || message.includes(searchText)) {
|
|
donor.style.display = '';
|
|
} else {
|
|
donor.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// 编辑功能
|
|
function editDonor(id) {
|
|
const modal = document.getElementById('edit-donor-modal');
|
|
const donorItem = document.querySelector(`.donor-item[data-donor-id="${id}"]`);
|
|
|
|
// 填充表单
|
|
document.getElementById('edit-donor-id').value = id;
|
|
document.getElementById('edit-donor-name').value = donorItem.querySelector('.donor-name').textContent;
|
|
document.getElementById('edit-donor-amount').value = donorItem.querySelector('.donor-amount').textContent;
|
|
document.getElementById('edit-donor-link').value = donorItem.querySelector('.donor-link a')?.href || '';
|
|
document.getElementById('edit-donor-message').value = donorItem.querySelector('.donor-message')?.textContent || '';
|
|
|
|
modal.style.display = 'block';
|
|
}
|
|
|
|
// 关闭模态框
|
|
document.querySelector('.close').addEventListener('click', function() {
|
|
document.getElementById('edit-donor-modal').style.display = 'none';
|
|
});
|
|
|
|
// 提交编辑表单
|
|
document.getElementById('edit-donor-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const id = document.getElementById('edit-donor-id').value;
|
|
const formData = new FormData(this);
|
|
|
|
fetch(`/admin/edit_donor/${id}`, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showNotification('赞赏信息已更新', 'success');
|
|
document.getElementById('edit-donor-modal').style.display = 'none';
|
|
location.reload();
|
|
} else {
|
|
showNotification(data.error || '修改失败', 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
showNotification('修改失败，请重试', 'error');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.donate-layout {
|
|
display: flex;
|
|
gap: 40px; /* 增加间距 */
|
|
align-items: flex-start;
|
|
margin: 0 auto; /* 居中布局 */
|
|
max-width: 1000px; /* 限制最大宽度 */
|
|
}
|
|
|
|
.donate-form-section {
|
|
width: 50%; /* 固定宽度为50% */
|
|
padding-right: 20px; /* 添加右内边距 */
|
|
border-right: 1px solid #e0e0e0; /* 添加分隔线 */
|
|
}
|
|
|
|
.preview-section {
|
|
width: 50%; /* 固定宽度为50% */
|
|
padding-left: 20px; /* 添加左内边距 */
|
|
}
|
|
|
|
.preview-section h4 {
|
|
margin: 0 0 15px 0;
|
|
color: #333;
|
|
font-size: 14px;
|
|
text-align: center; /* 居中标题 */
|
|
}
|
|
|
|
.donate-preview {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加阴影 */
|
|
}
|
|
|
|
.donate-text {
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.donate-qr {
|
|
max-width: 150px; /* 调整二维码尺寸 */
|
|
border-radius: 8px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
.admin-form input[type="text"],
|
|
.admin-form input[type="url"] {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #d2d2d7;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.admin-form input:focus {
|
|
border-color: #0066cc;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
|
|
}
|
|
|
|
.file-input-wrapper {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.file-input-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: #f5f5f7;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.file-input-label:hover {
|
|
background: #e5e5e7;
|
|
}
|
|
|
|
/* 响应式布局 */
|
|
@media (max-width: 768px) {
|
|
.donate-layout {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.donate-form-section,
|
|
.preview-section {
|
|
width: 100%;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.preview-section {
|
|
margin-top: 20px;
|
|
border-top: 1px solid #e0e0e0;
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
|
|
/* 添加赞赏人列表样式 */
|
|
.donors-list {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.donor-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 12px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
background: #fff;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.donor-info {
|
|
flex: 1;
|
|
margin-right: 15px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.donor-name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.donor-amount {
|
|
font-size: 14px;
|
|
color: #007AFF;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.donor-message {
|
|
font-size: 13px;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
word-break: break-word;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
max-width: 100%;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.donor-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.btn-edit, .btn-delete {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-edit {
|
|
color: #007AFF;
|
|
}
|
|
|
|
.btn-delete {
|
|
color: #ff3b30;
|
|
}
|
|
|
|
.btn-edit:hover {
|
|
color: #0056b3;
|
|
}
|
|
|
|
.btn-delete:hover {
|
|
color: #dc3545;
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.donor-item {
|
|
padding: 10px;
|
|
}
|
|
|
|
.donor-info {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.donor-name, .donor-amount {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.donor-message {
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.donor-controls {
|
|
gap: 6px;
|
|
}
|
|
|
|
.btn-edit, .btn-delete {
|
|
padding: 3px;
|
|
}
|
|
}
|
|
|
|
/* 开关样式 */
|
|
.switch-label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 24px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
transition: .4s;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #2196F3;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
/* 当前图片预览 */
|
|
.current-image {
|
|
margin-top: 10px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.current-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.header-left h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.search-box {
|
|
margin: 0 0 0 20px; /* 调整左边距 */
|
|
}
|
|
|
|
.search-box input {
|
|
padding: 6px 12px;
|
|
border: 1px solid #d2d2d7;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
width: 200px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-box input:focus {
|
|
border-color: #0066cc;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
|
|
}
|
|
|
|
.total-amount {
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.total-amount span {
|
|
color: #007AFF;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #d2d2d7;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
textarea:focus {
|
|
border-color: #0066cc;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
|
|
}
|
|
|
|
.donor-message {
|
|
color: #666;
|
|
font-size: 13px;
|
|
font-style: italic;
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.donor-info {
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.donor-message {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.total-amount {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.header-left {
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.search-box {
|
|
margin: 0;
|
|
width: 100%;
|
|
order: 2; /* 在移动端将搜索框放到下一行 */
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.header-right {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-content {
|
|
position: relative;
|
|
background: white;
|
|
margin: 10% auto;
|
|
padding: 20px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.close {
|
|
font-size: 24px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close:hover {
|
|
color: #333;
|
|
}
|
|
|
|
/* 添加提示框样式 */
|
|
.notification {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-size: 14px;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
min-width: 280px;
|
|
max-width: 400px;
|
|
pointer-events: auto;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.notification.success {
|
|
background: #4CAF50;
|
|
}
|
|
|
|
.notification.error {
|
|
background: #f44336;
|
|
}
|
|
|
|
.notification i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.notification .close-notification {
|
|
margin-left: auto;
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s ease;
|
|
padding: 4px;
|
|
}
|
|
|
|
.notification .close-notification:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 添加悬停效果 */
|
|
.notification:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
/* 确保动画在移动端也正常工作 */
|
|
@media (max-width: 768px) {
|
|
.notification {
|
|
width: calc(100% - 32px);
|
|
right: 16px;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %} |