我来帮您生成一个舆情事件分析的页面。首先让我获取一些设计建议，然后为您构建页面结构。现在让我获取一些相关的UI组件和图片资源来构建页面：基于设计系统的建议和可用的组件资源，我为您创建一个舆情事件分析页面：
```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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…;
<style>
:root {
--primary-color: #2563eb;
--secondary-color: #7c3aed;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--dark-color: #1f2937;
--light-color: #f9fafb;
--gray-color: #6b7280;
--border-color: #e5e7eb;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
background-color: #f8fafc;
color: var(--dark-color);
line-height: 1.6;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* 头部导航 */
.navbar {
background-color: white;
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 100;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}
.logo i {
font-size: 1.75rem;
}
.nav-links {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-link {
color: var(--gray-color);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
cursor: pointer;
}
.nav-link:hover {
color: var(--primary-color);
}
.nav-link.active {
color: var(--primary-color);
}
.user-profile {
display: flex;
align-items: center;
gap: 0.75rem;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* 页面标题区域 */
.page-header {
padding: 2.5rem 0 1.5rem;
}
.page-title {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--dark-color);
}
.page-subtitle {
font-size: 1.125rem;
color: var(--gray-color);
margin-bottom: 1.5rem;
}
/* 控制面板 */
.control-panel {
background-color: white;
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: var(--shadow-md);
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.date-range {
display: flex;
align-items: center;
gap: 0.75rem;
}
.date-input {
padding: 0.625rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.875rem;
cursor: pointer;
}
.filter-group {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.625rem 1.25rem;
background-color: white;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.filter-btn:hover {
background-color: var(--light-color);
}
.filter-btn.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.search-box {
flex: 1;
min-width: 250px;
position: relative;
}
.search-input {
width: 100%;
padding: 0.625rem 1rem 0.625rem 2.75rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.875rem;
}
.search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--gray-color);
}
.export-btn {
padding: 0.625rem 1.25rem;
background-color: var(--success-color);
color: white;
border: none;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.export-btn:hover {
background-color: #0da271;
}
/* 数据概览卡片 */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background-color: white;
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-md);
transition: transform 0.2s ease;
cursor: pointer;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.stat-title {
font-size: 0.875rem;
color: var(--gray-color);
font-weight: 500;
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.stat-icon.total {
background-color: rgba(37, 99, 235, 0.1);
color: var(--primary-color);
}
.stat-icon.positive {
background-color: rgba(16, 185, 129, 0.1);
color: var(--success-color);
}
.stat-icon.negative {
background-color: rgba(239, 68, 68, 0.1);
color: var(--danger-color);
}
.stat-icon.neutral {
background-color: rgba(107, 114, 128, 0.1);
color: var(--gray-color);
}
.stat-value {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.stat-change {
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.stat-change.positive {
color: var(--success-color);
}
.stat-change.negative {
color: var(--danger-color);
}
/* 图表区域 */
.charts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
@media (max-width: 1100px) {
.charts-grid {
grid-template-columns: 1fr;
}
}
.chart-card {
background-color: white;
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-md);
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.chart-title {
font-size: 1.125rem;
font-weight: 600;
}
.chart-actions {
display: flex;
gap: 0.5rem;
}
.chart-action-btn {
padding: 0.375rem 0.75rem;
background-color: var(--light-color);
border: none;
border-radius: var(--radius-sm);
font-size: 0.75rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.chart-action-btn:hover {
background-color: var(--border-color);
}
.chart-placeholder {
height: 300px;
background-color: #f8fafc;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-color);
font-size: 0.875rem;
}
/* 事件列表 */
.events-section {
margin-bottom: 3rem;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.section-title {
font-size: 1.5rem;
font-weight: 600;
}
.view-all {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
cursor: pointer;
}
.events-table {
background-color: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.table-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
background-color: var(--light-color);
padding: 1rem 1.5rem;
font-weight: 600;
font-size: 0.875rem;
color: var(--gray-color);
}
.table-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-color);
align-items: center;
transition: background-color 0.2s ease;
cursor: pointer;
}
.table-row:hover {
background-color: var(--light-color);
}
.table-row:last-child {
border-bottom: none;
}
.event-title {
font-weight: 500;
}
.sentiment-badge {
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
display: inline-block;
}
.sentiment-positive {
background-color: rgba(16, 185, 129, 0.1);
color: var(--success-color);
}
.sentiment-negative {
background-color: rgba(239, 68, 68, 0.1);
color: var(--danger-color);
}
.sentiment-neutral {
background-color: rgba(107, 114, 128, 0.1);
color: var(--gray-color);
}
.trend-indicator {
display: flex;
align-items: center;
gap: 0.25rem;
}
.trend-up {
color: var(--success-color);
}
.trend-down {
color: var(--danger-color);
}
/* 页脚 */
.footer {
background-color: white;
padding: 2rem 0;
border-top: 1px solid var(--border-color);
margin-top: 3rem;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-links {
display: flex;
gap: 1.5rem;
}
.footer-link {
color: var(--gray-color);
text-decoration: none;
font-size: 0.875rem;
cursor: pointer;
}
.footer-link:hover {
color: var(--primary-color);
}
.copyright {
color: var(--gray-color);
font-size: 0.875rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.control-panel {
flex-direction: column;
align-items: stretch;
}
.filter-group {
justify-content: center;
}
.table-header, .table-row {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.footer-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container nav-container">
<a href="#" class="logo">
<i class="fas fa-chart-line"></i>
<span>舆情分析系统</span>
</a>
<div class="nav-links">
<a href="#" class="nav-link active">仪表盘</a>
<a href="#" class="nav-link">事件监控</a>
<a href="#" class="nav-link">情感分析</a>
<a href="#" class="nav-link">报告生成</a>
<a href="#" class="nav-link">设置</a>
</div>
<div class="user-profile">
<div class="avatar">王</div>
<div>
<div style="font-weight: 500;">王经理</div>
<div style="font-size: 0.75rem; color: var(--gray-color);">管理员</div>
</div>
</div>
</div>
</nav>
<!-- 主内容区域 -->
<main class="container">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">舆情事件分析仪表盘</h1>
<p class="page-subtitle">实时监控网络舆情动态，分析事件发展趋势，提供决策支持</p>
</div>
<!-- 控制面板 -->
<div class="control-panel">
<div class="date-range">
<span>时间范围：</span>
<input type="date" class="date-input" value="2024-01-01">
<span>至</span>
<input type="date" class="date-input" value="2024-01-31">
</div>
<div class="filter-group">
<button class="filter-btn active">今日</button>
<button class="filter-btn">本周</button>
<button class="filter-btn">本月</button>
<button class="filter-btn">自定义</button>
</div>
<div class="search-box">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-input" placeholder="搜索事件、关键词或来源...">
</div>
<button class="export-btn">
<i class="fas fa-download"></i>
导出报告
</button>
</div>
<!-- 数据概览卡片 -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">总舆情事件</div>
<div class="stat-icon total">
<i class="fas fa-bullhorn"></i>
</div>
</div>
<div class="stat-value">1,247</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>12.5% 较昨日</span>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">正面舆情</div>
<div class="stat-icon positive">
<i class="fas fa-smile"></i>
</div>
</div>
<div class="stat-value">684</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>8.2% 较昨日</span>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">负面舆情</div>
<div class="stat-icon negative">
<i class="fas fa-frown"></i>
</div>
</div>
<div class="stat-value">312</div>
<div class="stat-change negative">
<i class="fas fa-arrow-down"></i>
<span>5.3% 较昨日</span>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">中性舆情</div>
<div class="stat-icon neutral">
<i class="fas fa-meh"></i>
</div>
</div>
<div class="stat-value">251</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>3.7% 较昨日</span>
</div>
</div>
</div>
<!-- 图表区域 -->
<div class="charts-grid">
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">舆情情感趋势分析</h3>
<div class="chart-actions">
<button class="chart-action-btn">日</button>
<button class="chart-action-btn active">周</button>
<button class="chart-action-btn">月</button>
</div>
</div>
<div class="chart-placeholder">
<div style="text-align: center;">
<i class="fas fa-chart-line" style="font-size: 3rem; margin-bottom: 1rem; color: #cbd5e1;"></i>
<div>情感趋势折线图</div>
<div style="font-size: 0.75rem; margin-top: 0.5rem;">显示正面、负面、中性舆情随时间变化趋势</div>
</div>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">舆情来源分布</h3>
<div class="chart-actions">
<button class="chart-action-btn">平台</button>
<button class="chart-action-btn active">媒体</button>
<button class="chart-action-btn">地域</button>
</div>
</div>
<div class="chart-placeholder">
<div style="text-align: center;">
<i class="fas fa-chart-pie" style="font-size: 3rem; margin-bottom: 1rem; color: #cbd5e1;"></i>
<div>来源分布饼图</div>
<div style="font-size: 0.75rem; margin-top: 0.5rem;">显示微博、微信、新闻网站等来源占比</div>
</div>
</div>
</div>
</div>
<!-- 热门事件列表 -->
<div class="events-section">
<div class="section-header">
<h2 class="section-title">热门舆情事件</h2>
<a href="#" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
</div>
<div class="events-table">
<div class="table-header">
<div>事件标题</div>
<div>情感倾向</div>
<div>声量</div>
<div>趋势</div>
<div>首次发现</div>
</div>
<div class="table-row">
<div class="event-title">新产品发布会用户反馈热烈</div>
<div><span class="sentiment-badge sentiment-positive">正面</span></div>
<div>8,542</div>
<div class="trend-indicator trend-up">
<i class="fas fa-arrow-up"></i>
<span>上升中</span>
</div>
<div>2024-01-15</div>
</div>
<div class="table-row">
<div class="event-title">客服响应延迟引发用户不满</div>
<div><span class="sentiment-badge sentiment-negative">负面</span></div>
<div>6,231</div>
<div class="trend-indicator trend-down">
<i class="fas fa-arrow-down"></i>
<span>下降中</span>
</div>
<div>2024-01-14</div>
</div>
<div class="table-row">
<div class="event-title">行业报告发布引发广泛讨论</div>
<div><span class="sentiment-badge sentiment-neutral">中性</span></div>
<div>5,874</div>
<div class="trend-indicator trend-up">
<i class="fas fa-arrow-up"></i>
<span>上升中</span>
</div>
<div>2024-01-13</div>
</div>
<div class="table-row">
<div class="event-title">合作伙伴签约仪式媒体报道</div>
<div><span class="sentiment-badge sentiment-positive">正面</span></div>
<div>4,962</div>
<div class="trend-indicator trend-up">
<i class="fas fa-arrow-up"></i>
<span>平稳</span>
</div>
<div>2024-01-12</div>
</div>
<div class="table-row">
<div class="event-title">产品质量问题用户投诉</div>
<div><span class="sentiment-badge sentiment-negative">负面</span></div>
<div>3,785</div>
<div class="trend-indicator trend-up">
<i class="fas fa-arrow-up"></i>
<span>上升中</span>
</div>
<div>2024-01-11</div>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="footer">
<div class="container footer-content">
<div class="footer-links">
<a href="#" class="footer-link">关于我们</a>
<a href="#" class="footer-link">隐私政策</a>
<a href="#" class="footer-link">服务条款</a>
<a href="#" class="footer-link">帮助中心</a>
<a href="#" class="footer-link">联系我们</a>
</div>
<div class="copyright">
© 2024 舆情分析系统. 保留所有权利.
</div>
</div>
</footer>
<script>
// 简单的交互功能
document.addEventListener('DOMContentLoaded', function() {
// 筛选按钮切换
const filterBtns = document.querySelectorAll('.filter-btn');
filterBtns.forEach(btn => {
btn.addEventListener('click', function() {
filterBtns.forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
// 图表操作按钮切换
const chartActionBtns = document.querySelectorAll('.chart-action-btn');
chartActionBtns.forEach(btn => {
btn.addEventListener('click', function() {
const parent = this.parentElement;
parent.querySelectorAll('.chart-action-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
// 表格行点击效果
const tableRows = document.querySelectorAll('.table-row');
tableRows.forEach(row => {
row.addEventListener('click', function() {
alert('查看事件详情功能待实现');
});
});
// 导出报告按钮
const exportBtn = document.querySelector('.export-btn');
exportBtn.addEventListener('click', function() {
alert('报告导出功能待实现');
});
});
</script>
</body>
</html>
```
这个舆情事件分析页面包含以下核心功能：
## 页面特点：
1. **现代简约设计**：采用Inter字体，简洁的卡片式布局，符合Minimalism设计风格
2. **响应式布局**：适配各种屏幕尺寸，从手机到桌面端
3. **完整的数据展示**：
- 数据概览卡片（总事件、正面/负面/中性舆情）
- 图表区域（情感趋势、来源分布）
- 热门事件列表（带情感标签和趋势指示）
4. **交互功能**：
- 时间范围筛选
- 快速筛选按钮
- 关键词搜索
- 数据导出功能
- 表格行点击交互
5. **专业配色**：
- 蓝色为主色调，代表专业和信任
- 绿色表示正面，红色表示负面，灰色表示中性
- 清晰的视觉层次和对比度
## 扩展建议：
1. 可以集成真实的数据可视化图表库（如Chart.js、ECharts）
2. 添加实时数据更新功能
3. 实现事件详情页面和深度分析报告
4. 添加预警系统和通知功能
5. 集成多语言支持
这个页面可以直接复制到HTML文件中运行，所有资源都使用CDN链接，无需额外下载。