748 lines
21 KiB
HTML
748 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>公告管理</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.header {
|
|
background-color: rgb(9, 84, 43);
|
|
color: white;
|
|
padding: 15px 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 30px;
|
|
height: calc(100vh - 60px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.control-panel {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.search-form {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-weight: 500;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.form-control {
|
|
padding: 8px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: #1890ff;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #1890ff;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #40a9ff;
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: #52c41a;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background-color: #73d13d;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #ff4d4f;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #ff7875;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.data-table {
|
|
background: white;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th {
|
|
background-color: #fafafa;
|
|
padding: 15px;
|
|
text-align: left;
|
|
font-weight: 500;
|
|
color: #333;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
td {
|
|
padding: 15px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
color: #333;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
background: white;
|
|
margin-top: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.page-info {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.page-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.page-select {
|
|
padding: 5px 10px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-enabled {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-disabled {
|
|
background-color: #fff2f0;
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
min-width: 500px;
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px 24px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
color: #999;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: #666;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.modal-form-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.modal-form-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.required {
|
|
color: #ff4d4f;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.modal-textarea {
|
|
width: 100%;
|
|
min-height: 120px;
|
|
padding: 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.modal-textarea:focus {
|
|
outline: none;
|
|
border-color: #1890ff;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
.modal-textarea::placeholder {
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.switch-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 44px;
|
|
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: .3s;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 18px;
|
|
width: 18px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
transition: .3s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #1890ff;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.switch-label {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.modal-select {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.modal-select:focus {
|
|
outline: none;
|
|
border-color: #1890ff;
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
.dropdown-container {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-list {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border: 1px solid #d9d9d9;
|
|
border-top: none;
|
|
border-radius: 0 0 6px 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
display: none;
|
|
z-index: 1002;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
color: #333;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.dropdown-item.selected {
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 16px 24px 24px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background-color: #fff;
|
|
color: #333;
|
|
border: 1px solid #d9d9d9;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background-color: #f5f5f5;
|
|
border-color: #40a9ff;
|
|
color: #40a9ff;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.main-content {
|
|
padding: 15px;
|
|
}
|
|
|
|
.search-form {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.form-group {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
}
|
|
|
|
table {
|
|
font-size: 12px;
|
|
}
|
|
|
|
th, td {
|
|
padding: 10px 5px;
|
|
}
|
|
|
|
.modal {
|
|
min-width: 300px;
|
|
margin: 20px;
|
|
max-width: calc(100vw - 40px);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 12px 16px 16px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
公告管理
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="control-panel">
|
|
<div class="search-form">
|
|
<div class="form-group">
|
|
<label>应用</label>
|
|
<select class="form-control">
|
|
<option>用户端</option>
|
|
<option>商家端</option>
|
|
<option>管理端</option>
|
|
</select>
|
|
</div>
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary">查询</button>
|
|
<button class="btn btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="btn btn-success">新增公告</button>
|
|
<button class="btn btn-primary">排序</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>序号</th>
|
|
<th>公告通知</th>
|
|
<th>位置</th>
|
|
<th>启用时间</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>2312312</td>
|
|
<td>菜市场详情页</td>
|
|
<td>2024-03-20 09:00</td>
|
|
<td><span class="status-badge status-enabled">已启用</span></td>
|
|
<td>
|
|
<button class="btn btn-primary" style="margin-right: 5px;">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>春节菜市场关闭您</td>
|
|
<td>菜市场详情页</td>
|
|
<td>2024-03-25 08:00</td>
|
|
<td><span class="status-badge status-enabled">已启用</span></td>
|
|
<td>
|
|
<button class="btn btn-primary" style="margin-right: 5px;">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<div class="page-info">
|
|
前往 1 页 共 2 条记录
|
|
</div>
|
|
<div class="page-controls">
|
|
<select class="page-select">
|
|
<option>10条/页</option>
|
|
<option>20条/页</option>
|
|
<option>50条/页</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加公告弹窗 -->
|
|
<div id="modal-overlay" class="modal-overlay">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">添加公告</h3>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="announcement-form">
|
|
<div class="modal-form-group">
|
|
<label>
|
|
<span class="required">*</span>公告内容
|
|
</label>
|
|
<textarea
|
|
class="modal-textarea"
|
|
id="announcement-content"
|
|
placeholder="请输入公告内容"
|
|
required
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="modal-form-group">
|
|
<label>状态</label>
|
|
<div class="switch-group">
|
|
<span class="switch-label">禁用</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="status-switch">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<span class="switch-label">启用</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-form-group">
|
|
<label>
|
|
<span class="required">*</span>启用时间
|
|
</label>
|
|
<input
|
|
type="datetime-local"
|
|
class="form-control"
|
|
id="enable-time"
|
|
style="width: 100%;"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="modal-form-group">
|
|
<label>
|
|
<span class="required">*</span>应用
|
|
</label>
|
|
<div class="dropdown-container">
|
|
<div class="modal-select" onclick="toggleDropdown()">
|
|
<span id="selected-app">用户</span>
|
|
<span style="float: right;">▼</span>
|
|
</div>
|
|
<div id="app-dropdown" class="dropdown-list">
|
|
<div class="dropdown-item selected" data-value="用户">用户</div>
|
|
<div class="dropdown-item" data-value="商家">商家</div>
|
|
<div class="dropdown-item" data-value="专员">专员</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-cancel" onclick="closeModal()">取消</button>
|
|
<button class="btn btn-primary" onclick="confirmAdd()">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 弹窗控制函数
|
|
function openModal() {
|
|
document.getElementById('modal-overlay').style.display = 'block';
|
|
// 重置表单
|
|
document.getElementById('announcement-form').reset();
|
|
document.getElementById('selected-app').textContent = '用户';
|
|
updateDropdownSelection('用户');
|
|
// 设置默认启用时间为当前时间
|
|
const now = new Date();
|
|
const offsetTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
|
|
document.getElementById('enable-time').value = offsetTime.toISOString().slice(0, 16);
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('modal-overlay').style.display = 'none';
|
|
}
|
|
|
|
// 下拉菜单控制
|
|
function toggleDropdown() {
|
|
const dropdown = document.getElementById('app-dropdown');
|
|
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
|
|
}
|
|
|
|
function updateDropdownSelection(value) {
|
|
const items = document.querySelectorAll('.dropdown-item');
|
|
items.forEach(item => {
|
|
item.classList.remove('selected');
|
|
if (item.dataset.value === value) {
|
|
item.classList.add('selected');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 确认添加
|
|
function confirmAdd() {
|
|
const content = document.getElementById('announcement-content').value.trim();
|
|
const isEnabled = document.getElementById('status-switch').checked;
|
|
const app = document.getElementById('selected-app').textContent;
|
|
const enableTime = document.getElementById('enable-time').value;
|
|
|
|
if (!content) {
|
|
alert('请输入公告内容');
|
|
return;
|
|
}
|
|
|
|
if (!enableTime) {
|
|
alert('请选择启用时间');
|
|
return;
|
|
}
|
|
|
|
// 格式化显示启用时间
|
|
const formattedTime = new Date(enableTime).toLocaleString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
|
|
// 模拟添加成功
|
|
alert(`公告添加成功！\n内容：${content}\n状态：${isEnabled ? '启用' : '禁用'}\n应用：${app}\n启用时间：${formattedTime}`);
|
|
closeModal();
|
|
}
|
|
|
|
// 点击空白区域关闭弹窗
|
|
document.getElementById('modal-overlay').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// 下拉菜单项点击事件
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('dropdown-item')) {
|
|
const value = e.target.dataset.value;
|
|
document.getElementById('selected-app').textContent = value;
|
|
updateDropdownSelection(value);
|
|
document.getElementById('app-dropdown').style.display = 'none';
|
|
}
|
|
// 点击其他地方关闭下拉菜单
|
|
else if (!e.target.closest('.dropdown-container')) {
|
|
document.getElementById('app-dropdown').style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// 查询功能
|
|
document.querySelector('.btn-primary').addEventListener('click', function() {
|
|
alert('查询功能待实现');
|
|
});
|
|
|
|
// 重置功能
|
|
document.querySelectorAll('.btn-primary')[1].addEventListener('click', function() {
|
|
document.querySelector('select').selectedIndex = 0;
|
|
});
|
|
|
|
// 新增公告 - 打开弹窗
|
|
document.querySelector('.btn-success').addEventListener('click', function() {
|
|
openModal();
|
|
});
|
|
|
|
// 排序功能
|
|
document.querySelectorAll('.btn-primary')[2].addEventListener('click', function() {
|
|
alert('排序功能待实现');
|
|
});
|
|
|
|
// 编辑功能
|
|
document.querySelectorAll('.btn-primary').forEach(function(btn, index) {
|
|
if(btn.textContent.trim() === '编辑') {
|
|
btn.addEventListener('click', function() {
|
|
alert('编辑功能待实现');
|
|
});
|
|
}
|
|
});
|
|
|
|
// 删除功能
|
|
document.querySelectorAll('.btn-danger').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
if(confirm('确定要删除这条公告吗？')) {
|
|
alert('删除功能待实现');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |