File size: 25,335 Bytes
03d1e18 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品牌声誉监控与分析</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
.word-cloud {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
}
.word-cloud span {
margin: 5px;
padding: 5px 10px;
border-radius: 15px;
display: inline-block;
transition: all 0.3s ease;
}
.word-cloud span:hover {
transform: scale(1.1);
}
.comment-card {
transition: all 0.3s ease;
}
.comment-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.heatmap {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 8px;
padding: 15px;
}
.heatmap-item {
padding: 10px;
border-radius: 8px;
text-align: center;
color: white;
font-weight: bold;
}
.chart-container {
position: relative;
height: 100%;
width: 100%;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Navigation Bar -->
<nav class="bg-white shadow-sm py-4 px-6 flex flex-wrap items-center justify-between">
<div class="flex items-center">
<i class="fas fa-apple-alt text-blue-600 text-2xl mr-3"></i>
<h1 class="text-xl font-bold text-gray-800">品牌声誉监控与分析</h1>
</div>
<div class="flex items-center space-x-4 mt-2 md:mt-0">
<div class="flex items-center">
<label class="text-sm text-gray-600 mr-2">品牌:</label>
<select class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>烟台红富士</option>
<option>渭南秦冠</option>
<option>洛川苹果</option>
<option>阿克苏冰糖心</option>
</select>
</div>
<div class="flex items-center">
<label class="text-sm text-gray-600 mr-2">时间:</label>
<select class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>本周</option>
<option>本月</option>
<option>本季度</option>
</select>
</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-md text-sm">
<i class="fas fa-sync-alt mr-1"></i> 刷新
</button>
</div>
</nav>
<!-- Main Content -->
<div class="container mx-auto px-4 py-6">
<!-- Key Metrics Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm">品牌声誉指数 (BRI)</p>
<h2 class="text-2xl font-bold text-gray-800 mt-1">86.5</h2>
<p class="text-green-500 text-sm mt-2 flex items-center">
<i class="fas fa-arrow-up mr-1"></i> 2.3% 较上周
</p>
</div>
<div class="bg-blue-100 p-3 rounded-full">
<i class="fas fa-chart-line text-blue-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm">负面评论占比</p>
<h2 class="text-2xl font-bold text-gray-800 mt-1">12.7%</h2>
<p class="text-red-500 text-sm mt-2 flex items-center">
<i class="fas fa-arrow-up mr-1"></i> 1.5% 较上周
</p>
</div>
<div class="bg-green-100 p-3 rounded-full">
<i class="fas fa-exclamation-triangle text-green-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-purple-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm">本周新增评论量</p>
<h2 class="text-2xl font-bold text-gray-800 mt-1">1,284</h2>
<p class="text-green-500 text-sm mt-2 flex items-center">
<i class="fas fa-arrow-up mr-1"></i> 18% 较上周
</p>
</div>
<div class="bg-purple-100 p-3 rounded-full">
<i class="fas fa-comments text-purple-600 text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-yellow-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm">舆情预警次数</p>
<h2 class="text-2xl font-bold text-gray-800 mt-1">3</h2>
<p class="text-gray-500 text-sm mt-2">较上周减少 1 次</p>
</div>
<div class="bg-yellow-100 p-3 rounded-full">
<i class="fas fa-bell text-yellow-600 text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- Brand Reputation Trend -->
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-chart-area text-blue-500 mr-2"></i> 品牌声誉趋势图 (近30天)
</h3>
<div class="chart-container">
<canvas id="trendChart"></canvas>
</div>
</div>
<!-- Sentiment Heatmap -->
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-fire text-orange-500 mr-2"></i> 全网情绪热力图
</h3>
<div class="heatmap">
<div class="heatmap-item bg-red-600" style="font-size: 18px;">甜度高</div>
<div class="heatmap-item bg-green-600" style="font-size: 22px;">物流慢</div>
<div class="heatmap-item bg-blue-600" style="font-size: 16px;">包装好看</div>
<div class="heatmap-item bg-purple-600" style="font-size: 20px;">价格合理</div>
<div class="heatmap-item bg-yellow-600" style="font-size: 14px;">新鲜度</div>
<div class="heatmap-item bg-red-600" style="font-size: 18px;">客服响应</div>
<div class="heatmap-item bg-green-600" style="font-size: 16px;">促销活动</div>
<div class="heatmap-item bg-blue-600" style="font-size: 20px;">产地溯源</div>
<div class="heatmap-item bg-purple-600" style="font-size: 14px;">有机认证</div>
<div class="heatmap-item bg-yellow-600" style="font-size: 16px;">口感脆甜</div>
<div class="heatmap-item bg-red-600" style="font-size: 18px;">配送时效</div>
<div class="heatmap-item bg-green-600" style="font-size: 14px;">售后服务</div>
</div>
</div>
</div>
<!-- Hot Comments and Media Events -->
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-newspaper text-indigo-500 mr-2"></i> 热点评论与媒体事件
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- User Comments -->
<div>
<h4 class="text-md font-medium text-gray-700 mb-3 flex items-center">
<i class="fas fa-comment-dots text-blue-400 mr-2"></i> 典型用户评论
</h4>
<div class="space-y-3">
<div class="comment-card bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500 cursor-pointer" onclick="toggleComment(this)">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-600">京东用户 • 2023-11-15</p>
<p class="text-gray-800 mt-1 line-clamp-2">这次购买的烟台红富士苹果非常新鲜，甜度适中，包装也很精美，会继续回购！</p>
</div>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">正面</span>
</div>
<div class="comment-full hidden mt-2 text-sm text-gray-600">
<p>详细评论内容：这次购买的烟台红富士苹果非常新鲜，甜度适中，包装也很精美。每个苹果都独立包装，运输过程中完全没有损坏。口感脆甜多汁，比我之前在其他平台购买的品质要好很多。价格虽然略高但物有所值，会继续回购！</p>
<p class="mt-2 text-xs text-gray-500">来源：京东商城 • 评分：★★★★★</p>
</div>
</div>
<div class="comment-card bg-red-50 p-4 rounded-lg border-l-4 border-red-500 cursor-pointer" onclick="toggleComment(this)">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-600">天猫用户 • 2023-11-14</p>
<p class="text-gray-800 mt-1 line-clamp-2">物流太慢了，收到时有两个苹果已经碰伤，客服处理态度一般...</p>
</div>
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">负面</span>
</div>
<div class="comment-full hidden mt-2 text-sm text-gray-600">
<p>详细评论内容：物流太慢了，下单后5天才收到货，收到时有两个苹果已经碰伤。联系客服后，对方只是简单道歉并表示可以补偿5元优惠券，处理态度一般。苹果本身味道还可以，但这样的购物体验让人不太愉快。希望改进物流包装和售后服务。</p>
<p class="mt-2 text-xs text-gray-500">来源：天猫超市 • 评分：★★☆☆☆</p>
</div>
</div>
<div class="comment-card bg-gray-50 p-4 rounded-lg border-l-4 border-gray-500 cursor-pointer" onclick="toggleComment(this)">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-600">拼多多用户 • 2023-11-12</p>
<p class="text-gray-800 mt-1 line-clamp-2">苹果大小不太均匀，但价格便宜，性价比还可以。</p>
</div>
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">中性</span>
</div>
<div class="comment-full hidden mt-2 text-sm text-gray-600">
<p>详细评论内容：苹果大小不太均匀，有的很大有的偏小，但考虑到价格便宜，性价比还可以。甜度一般，不算特别甜但也不酸。包装比较简单，就是普通纸箱加泡沫网套。总体而言对得起这个价格，但追求高品质的可能不太适合。</p>
<p class="mt-2 text-xs text-gray-500">来源：拼多多 • 评分：★★★☆☆</p>
</div>
</div>
</div>
</div>
<!-- Media News -->
<div>
<h4 class="text-md font-medium text-gray-700 mb-3 flex items-center">
<i class="fas fa-bullhorn text-purple-400 mr-2"></i> 媒体相关新闻
</h4>
<div class="space-y-3">
<div class="comment-card bg-green-50 p-4 rounded-lg border-l-4 border-green-500 cursor-pointer" onclick="toggleComment(this)">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-600">中国农业网 • 2023-11-10</p>
<p class="text-gray-800 mt-1 line-clamp-2">烟台苹果产业升级：数字化溯源系统提升品牌价值</p>
</div>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">正面</span>
</div>
<div class="comment-full hidden mt-2 text-sm text-gray-600">
<p>详细内容：烟台市近日宣布全面升级苹果产业数字化溯源系统，通过区块链技术实现从果园到消费者全程可追溯。该系统已覆盖全市85%以上的苹果种植基地，消费者扫描包装上的二维码即可查看苹果的生长环境、采摘日期、检测报告等信息。这一举措显著提升了烟台苹果的品牌价值和消费者信任度。</p>
<p class="mt-2 text-xs text-gray-500">来源：中国农业网 • 阅读量：3.2万</p>
</div>
</div>
<div class="comment-card bg-red-50 p-4 rounded-lg border-l-4 border-red-500 cursor-pointer" onclick="toggleComment(this)">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-600">消费日报 • 2023-11-08</p>
<p class="text-gray-800 mt-1 line-clamp-2">部分电商平台苹果以次充好问题引关注</p>
</div>
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">负面</span>
</div>
<div class="comment-full hidden mt-2 text-sm text-gray-600">
<p>详细内容：近期有消费者反映，部分电商平台销售的品牌苹果存在以次充好问题。记者调查发现，某些商家将普通苹果贴上知名产地标签高价出售，实际品质与宣传不符。行业协会提醒消费者购买时注意查看溯源信息和商家资质，建议选择正规渠道购买。</p>
<p class="mt-2 text-xs text-gray-500">来源：消费日报 • 阅读量：5.7万</p>
</div>
</div>
<div class="comment-card bg-gray-50 p-4 rounded-lg border-l-4 border-gray-500 cursor-pointer" onclick="toggleComment(this)">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-600">农产品市场周刊 • 2023-11-05</p>
<p class="text-gray-800 mt-1 line-clamp-2">今年苹果产量预计增长8%，市场价格趋于平稳</p>
</div>
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">中性</span>
</div>
<div class="comment-full hidden mt-2 text-sm text-gray-600">
<p>详细内容：根据农业农村部最新数据，今年全国苹果产量预计达到4500万吨，同比增长8%左右。主要产区气候条件良好，未出现重大自然灾害。市场分析人士指出，随着供应量增加，苹果市场价格将趋于平稳，不同品质和品牌的苹果价格分化可能更加明显。</p>
<p class="mt-2 text-xs text-gray-500">来源：农产品市场周刊 • 阅读量：1.8万</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- AI Strategy Recommendations -->
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-robot text-teal-500 mr-2"></i> AI策略建议
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
<div class="flex items-start">
<div class="bg-teal-100 p-2 rounded-full mr-3">
<i class="fas fa-headset text-teal-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">售后服务优化</h4>
<p class="text-sm text-gray-600 mt-1">基于12%的负面评论与物流和客服相关，建议强化售后服务保障文案，在商品页面突出显示售后承诺。</p>
</div>
</div>
<div class="flex justify-end mt-3">
<button class="text-xs bg-teal-600 hover:bg-teal-700 text-white px-3 py-1 rounded-md">
<i class="fas fa-download mr-1"></i> 导出方案
</button>
</div>
</div>
<div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-video text-blue-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">内容营销建议</h4>
<p class="text-sm text-gray-600 mt-1">"包装好看"关键词热度上升23%，建议制作新品包装展示视频，重点投放小红书和抖音平台。</p>
</div>
</div>
<div class="flex justify-end mt-3">
<button class="text-xs bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md">
<i class="fas fa-download mr-1"></i> 导出方案
</button>
</div>
</div>
<div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
<div class="flex items-start">
<div class="bg-purple-100 p-2 rounded-full mr-3">
<i class="fas fa-truck text-purple-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">物流改进方案</h4>
<p class="text-sm text-gray-600 mt-1">针对物流投诉增加问题，建议与顺丰合作试点"苹果专送"服务，并在详情页展示物流保障措施。</p>
</div>
</div>
<div class="flex justify-end mt-3">
<button class="text-xs bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-md">
<i class="fas fa-download mr-1"></i> 导出方案
</button>
</div>
</div>
</div>
<div class="flex justify-center">
<button class="bg-teal-600 hover:bg-tele-700 text-white px-6 py-2 rounded-md flex items-center">
<i class="fas fa-file-pdf mr-2"></i> 一键导出全部建议 (PDF)
</button>
</div>
</div>
</div>
<script>
// Initialize Trend Chart
const trendCtx = document.getElementById('trendChart').getContext('2d');
const trendChart = new Chart(trendCtx, {
type: 'line',
data: {
labels: Array.from({length: 30}, (_, i) => `${i+1}日`),
datasets: [{
label: '品牌声誉指数',
data: [82, 83, 84, 83, 85, 86, 85, 84, 85, 86, 87, 86, 85, 84, 85, 86, 87, 88, 87, 86, 85, 86, 87, 88, 87, 86, 85, 86, 87, 86.5],
borderColor: '#3B82F6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.3,
fill: true,
pointRadius: 3,
pointHoverRadius: 5
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
y: {
beginAtZero: false,
min: 80,
max: 90,
ticks: {
stepSize: 2
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
// Toggle comment details
function toggleComment(element) {
const fullText = element.querySelector('.comment-full');
fullText.classList.toggle('hidden');
}
// Simulate data refresh
document.querySelector('button').addEventListener('click', function() {
// Show loading state
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> 加载中...';
this.disabled = true;
// Simulate API call
setTimeout(() => {
// Update chart data
trendChart.data.datasets[0].data = trendChart.data.datasets[0].data.map(val => val + (Math.random() - 0.5));
trendChart.update();
// Reset button
this.innerHTML = '<i class="fas fa-sync-alt mr-1"></i> 刷新';
this.disabled = false;
// Show notification
alert('数据已更新！');
}, 1500);
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/apple4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |