746 lines
21 KiB
HTML
746 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>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>50</td>
|
||
<td>春节菜市场关闭您</td>
|
||
<td>菜市场详情页</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>10</td>
|
||
<td>2312312</td>
|
||
<td>菜市场详情页</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>
|
||
<input
|
||
type="number"
|
||
class="form-control"
|
||
id="announcement-order"
|
||
placeholder="请输入序号"
|
||
min="0"
|
||
step="1"
|
||
style="width: 100%;"
|
||
required
|
||
/>
|
||
<small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
|
||
序号越大越靠前显示，建议设置为10、20、30等便于后续插入
|
||
</small>
|
||
</div>
|
||
|
||
<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>
|
||
<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('用户');
|
||
}
|
||
|
||
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 order = document.getElementById('announcement-order').value.trim();
|
||
const content = document.getElementById('announcement-content').value.trim();
|
||
const isEnabled = document.getElementById('status-switch').checked;
|
||
const app = document.getElementById('selected-app').textContent;
|
||
|
||
if (!order) {
|
||
alert('请输入序号');
|
||
return;
|
||
}
|
||
|
||
if (!content) {
|
||
alert('请输入公告内容');
|
||
return;
|
||
}
|
||
|
||
// 验证序号是否为非负整数
|
||
const orderNum = parseInt(order);
|
||
if (isNaN(orderNum) || orderNum < 0) {
|
||
alert('序号必须是非负整数');
|
||
return;
|
||
}
|
||
|
||
// 模拟添加成功
|
||
alert(`公告添加成功！\n序号：${order}\n内容：${content}\n状态：${isEnabled ? '启用' : '禁用'}\n应用：${app}`);
|
||
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> |