|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>社媒运营平台 | SocialEase</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Noto Sans SC', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.content-area { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.platform-icon { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: 4px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.post-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.analytics-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.analytics-card:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #cbd5e1; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #94a3b8; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
} |
|
|
|
|
|
.delay-100 { |
|
|
animation-delay: 0.1s; |
|
|
} |
|
|
|
|
|
.delay-200 { |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
|
|
|
.delay-300 { |
|
|
animation-delay: 0.3s; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-white w-64 flex-shrink-0 border-r border-gray-200 flex flex-col h-full"> |
|
|
<div class="p-4 border-b border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-xl">SE</div> |
|
|
<h1 class="ml-3 text-xl font-bold text-gray-800">SocialEase</h1> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto py-4"> |
|
|
<div class="px-4 mb-6"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="搜索..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav> |
|
|
<div class="px-4 mb-2"> |
|
|
<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">主菜单</p> |
|
|
</div> |
|
|
<ul> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-600 bg-blue-50"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
<span>仪表盘</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<i class="fas fa-calendar-alt mr-3"></i> |
|
|
<span>内容日历</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<i class="fas fa-pencil-alt mr-3"></i> |
|
|
<span>内容创作</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span>数据分析</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<i class="fas fa-users mr-3"></i> |
|
|
<span>受众分析</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span>设置</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="px-4 mt-6 mb-2"> |
|
|
<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">社交媒体</p> |
|
|
</div> |
|
|
<ul> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<div class="platform-icon bg-blue-500 text-white mr-3"> |
|
|
<i class="fab fa-facebook-f text-xs"></i> |
|
|
</div> |
|
|
<span>Facebook</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<div class="platform-icon bg-blue-400 text-white mr-3"> |
|
|
<i class="fab fa-twitter text-xs"></i> |
|
|
</div> |
|
|
<span>Twitter</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<div class="platform-icon bg-gradient-to-r from-purple-500 to-pink-500 text-white mr-3"> |
|
|
<i class="fab fa-instagram text-xs"></i> |
|
|
</div> |
|
|
<span>Instagram</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<div class="platform-icon bg-red-600 text-white mr-3"> |
|
|
<i class="fab fa-youtube text-xs"></i> |
|
|
</div> |
|
|
<span>YouTube</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<div class="platform-icon bg-green-500 text-white mr-3"> |
|
|
<i class="fab fa-weixin text-xs"></i> |
|
|
</div> |
|
|
<span>微信</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
|
|
<div class="platform-icon bg-red-500 text-white mr-3"> |
|
|
<i class="fab fa-weibo text-xs"></i> |
|
|
</div> |
|
|
<span>微博</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-10 h-10 rounded-full"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">张运营</p> |
|
|
<p class="text-xs text-gray-500">高级运营经理</p> |
|
|
</div> |
|
|
<button class="ml-auto text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content-area flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white border-b border-gray-200 py-4 px-6 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<button class="text-gray-500 mr-4 md:hidden"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-semibold text-gray-800">仪表盘</h2> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-gray-500 hover:text-gray-700 relative"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-question-circle"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button class="flex items-center text-gray-700 focus:outline-none"> |
|
|
<span class="mr-2 hidden md:inline">快速操作</span> |
|
|
<i class="fas fa-chevron-down text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
|
|
|
<div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl p-6 text-white mb-6 animate-fade-in"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-2">早上好，张运营！</h3> |
|
|
<p class="opacity-90">今天有3个待发布内容，2个社交媒体互动需要回复</p> |
|
|
</div> |
|
|
<button class="mt-4 md:mt-0 bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition duration-200"> |
|
|
查看待办事项 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="analytics-card bg-white rounded-xl p-6 shadow-sm hover:shadow-md delay-100 animate-fade-in"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">总粉丝数</p> |
|
|
<h3 class="text-2xl font-bold mt-1">1,248,759</h3> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center text-sm"> |
|
|
<span class="text-green-500 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 12.5% |
|
|
</span> |
|
|
<span class="text-gray-500 ml-2">相比上周</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="analytics-card bg-white rounded-xl p-6 shadow-sm hover:shadow-md delay-200 animate-fade-in"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">互动率</p> |
|
|
<h3 class="text-2xl font-bold mt-1">8.2%</h3> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> |
|
|
<i class="fas fa-comments text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center text-sm"> |
|
|
<span class="text-green-500 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 3.1% |
|
|
</span> |
|
|
<span class="text-gray-500 ml-2">相比上周</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="analytics-card bg-white rounded-xl p-6 shadow-sm hover:shadow-md delay-300 animate-fade-in"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">发布内容</p> |
|
|
<h3 class="text-2xl font-bold mt-1">24</h3> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600"> |
|
|
<i class="fas fa-pencil-alt text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center text-sm"> |
|
|
<span class="text-red-500 flex items-center"> |
|
|
<i class="fas fa-arrow-down mr-1"></i> 2.4% |
|
|
</span> |
|
|
<span class="text-gray-500 ml-2">相比上周</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="analytics-card bg-white rounded-xl p-6 shadow-sm hover:shadow-md delay-100 animate-fade-in"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">转化率</p> |
|
|
<h3 class="text-2xl font-bold mt-1">3.7%</h3> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600"> |
|
|
<i class="fas fa-exchange-alt text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center text-sm"> |
|
|
<span class="text-green-500 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 1.8% |
|
|
</span> |
|
|
<span class="text-gray-500 ml-2">相比上周</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6 animate-fade-in"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">近期发布内容</h3> |
|
|
<button class="text-sm text-blue-600 hover:text-blue-800">查看全部</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="post-card bg-gray-50 rounded-lg p-4 border border-gray-200 transition duration-200 hover:border-blue-200"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="内容图片" class="w-16 h-16 rounded-md object-cover flex-shrink-0"> |
|
|
<div class="ml-4 flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h4 class="font-medium text-gray-800">春季新品发布会预告</h4> |
|
|
<span class="text-xs text-gray-500">2小时前</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1 line-clamp-2">我们即将推出全新春季系列产品，包含多款时尚单品，敬请期待3月15日的线上发布会...</p> |
|
|
<div class="mt-2 flex items-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">微博</span> |
|
|
<span class="px-2 py-1 bg-purple-50 text-purple-600 text-xs rounded-full">微信</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-4 text-sm text-gray-500"> |
|
|
<span class="flex items-center"><i class="fas fa-heart mr-1 text-red-400"></i> 1,248</span> |
|
|
<span class="flex items-center"><i class="fas fa-comment mr-1 text-blue-400"></i> 89</span> |
|
|
<span class="flex items-center"><i class="fas fa-share mr-1 text-green-400"></i> 56</span> |
|
|
</div> |
|
|
<button class="text-sm text-blue-600 hover:text-blue-800">查看详情</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="post-card bg-gray-50 rounded-lg p-4 border border-gray-200 transition duration-200 hover:border-blue-200"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="内容图片" class="w-16 h-16 rounded-md object-cover flex-shrink-0"> |
|
|
<div class="ml-4 flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h4 class="font-medium text-gray-800">用户故事：如何用我们的产品改变生活</h4> |
|
|
<span class="text-xs text-gray-500">昨天</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1 line-clamp-2">采访了三位长期使用我们产品的忠实客户，分享他们如何通过我们的产品提升生活品质...</p> |
|
|
<div class="mt-2 flex items-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Facebook</span> |
|
|
<span class="px-2 py-1 bg-pink-50 text-pink-600 text-xs rounded-full">Instagram</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-4 text-sm text-gray-500"> |
|
|
<span class="flex items-center"><i class="fas fa-heart mr-1 text-red-400"></i> 2,456</span> |
|
|
<span class="flex items-center"><i class="fas fa-comment mr-1 text-blue-400"></i> 134</span> |
|
|
<span class="flex items-center"><i class="fas fa-share mr-1 text-green-400"></i> 287</span> |
|
|
</div> |
|
|
<button class="text-sm text-blue-600 hover:text-blue-800">查看详情</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="post-card bg-gray-50 rounded-lg p-4 border border-gray-200 transition duration-200 hover:border-blue-200"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="内容图片" class="w-16 h-16 rounded-md object-cover flex-shrink-0"> |
|
|
<div class="ml-4 flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h4 class="font-medium text-gray-800">限时优惠：会员专享折扣</h4> |
|
|
<span class="text-xs text-gray-500">3天前</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mt-1 line-clamp-2">为感谢会员长期支持，即日起至本月底，所有会员可享受全场商品8折优惠，新会员注册即送100元优惠券...</p> |
|
|
<div class="mt-2 flex items-center space-x-2"> |
|
|
<span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">微博</span> |
|
|
<span class="px-2 py-1 bg-red-50 text-red-600 text-xs rounded-full">抖音</span> |
|
|
<span class="px-2 py-1 bg-green-50 text-green-600 text-xs rounded-full">微信</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-4 text-sm text-gray-500"> |
|
|
<span class="flex items-center"><i class="fas fa-heart mr-1 text-red-400"></i> 5,789</span> |
|
|
<span class="flex items-center"><i class="fas fa-comment mr-1 text-blue-400"></i> 432</span> |
|
|
<span class="flex items-center"><i class="fas fa-share mr-1 text-green-400"></i> 1,024</span> |
|
|
</div> |
|
|
<button class="text-sm text-blue-600 hover:text-blue-800">查看详情</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 animate-fade-in"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">平台表现</h3> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="text-sm px-3 py-1 bg-blue-50 text-blue-600 rounded-full hover:bg-blue-100">本周</button> |
|
|
<button class="text-sm px-3 py-1 text-gray-500 rounded-full hover:bg-gray-100">本月</button> |
|
|
<button class="text-sm px-3 py-1 text-gray-500 rounded-full hover:bg-gray-100">年度</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="platform-icon bg-blue-500 text-white mr-3"> |
|
|
<i class="fab fa-facebook-f text-xs"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm font-medium text-gray-700">Facebook</span> |
|
|
<span class="text-sm font-semibold text-gray-800">12,456</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
|
|
<div class="bg-blue-500 h-1.5 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="platform-icon bg-gradient-to-r from-purple-500 to-pink-500 text-white mr-3"> |
|
|
<i class="fab fa-instagram text-xs"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm font-medium text-gray-700">Instagram</span> |
|
|
<span class="text-sm font-semibold text-gray-800">18,932</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
|
|
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-1.5 rounded-full" style="width: 82%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="platform-icon bg-red-500 text-white mr-3"> |
|
|
<i class="fab fa-weibo text-xs"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm font-medium text-gray-700">微博</span> |
|
|
<span class="text-sm font-semibold text-gray-800">24,567</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
|
|
<div class="bg-red-500 h-1.5 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="platform-icon bg-green-500 text-white mr-3"> |
|
|
<i class="fab fa-weixin text-xs"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm font-medium text-gray-700">微信</span> |
|
|
<span class="text-sm font-semibold text-gray-800">9,876</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
|
|
<div class="bg-green-500 h-1.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="platform-icon bg-red-600 text-white mr-3"> |
|
|
<i class="fab fa-youtube text-xs"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm font-medium text-gray-700">YouTube</span> |
|
|
<span class="text-sm font-semibold text-gray-800">7,654</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
|
|
<div class="bg-red-600 h-1.5 rounded-full" style="width: 38%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 pt-6 border-t border-gray-200"> |
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-3">互动类型分布</h4> |
|
|
<div class="flex items-center justify-center"> |
|
|
<div class="w-40 h-40 relative"> |
|
|
<svg class="w-full h-full" viewBox="0 0 100 100"> |
|
|
|
|
|
<circle cx="50" cy="50" r="45" fill="none" stroke="#e2e8f0" stroke-width="10"></circle> |
|
|
|
|
|
<circle cx="50" cy="50" r="45" fill="none" stroke="#ef4444" stroke-width="10" stroke-dasharray="70.69 282.74" stroke-dashoffset="0"></circle> |
|
|
|
|
|
<circle cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="10" stroke-dasharray="56.55 282.74" stroke-dashoffset="-70.69"></circle> |
|
|
|
|
|
<circle cx="50" cy="50" r="45" fill="none" stroke="#10b981" stroke-width="10" stroke-dasharray="84.82 282.74" stroke-dashoffset="-127.24"></circle> |
|
|
|
|
|
<circle cx="50" cy="50" r="45" fill="none" stroke="#f59e0b" stroke-width="10" stroke-dasharray="70.69 282.74" stroke-dashoffset="-212.06"></circle> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center flex-col"> |
|
|
<span class="text-2xl font-bold text-gray-800">8,432</span> |
|
|
<span class="text-xs text-gray-500">总互动</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-6"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div> |
|
|
<span class="text-sm text-gray-700">点赞 25%</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span class="text-sm text-gray-700">评论 20%</span> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
|
|
<span class="text-sm text-gray-700">分享 30%</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div> |
|
|
<span class="text-sm text-gray-700">收藏 25%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-1 bg-white rounded-xl shadow-sm p-6 animate-fade-in"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">待办事项</h3> |
|
|
<button class="text-sm text-blue-600 hover:text-blue-800">添加任务</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<input type="checkbox" class="mt-1 h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">审核并回复用户评论</p> |
|
|
<p class="text-xs text-gray-500 mt-1">15条新评论待处理</p> |
|
|
</div> |
|
|
<span class="ml-auto text-xs px-2 py-1 bg-red-50 text-red-600 rounded-full">紧急</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<input type="checkbox" class="mt-1 h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">准备下周内容日历</p> |
|
|
<p class="text-xs text-gray-500 mt-1">3月15日-3月21日</p> |
|
|
</div> |
|
|
<span class="ml-auto text-xs px-2 py-1 bg-yellow-50 text-yellow-600 rounded-full">中等</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<input type="checkbox" class="mt-1 h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">分析上周活动数据</p> |
|
|
<p class="text-xs text-gray-500 mt-1">生成报告并发送给团队</p> |
|
|
</div> |
|
|
<span class="ml-auto text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">低</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<input type="checkbox" class="mt-1 h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">与设计团队讨论新素材</p> |
|
|
<p class="text-xs text-gray-500 mt-1">下午2点会议</p> |
|
|
</div> |
|
|
<span class="ml-auto text-xs px-2 py-1 bg-yellow-50 text-yellow-600 rounded-full">中等</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<input type="checkbox" class="mt-1 h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">更新社交媒体简介</p> |
|
|
<p class="text-xs text-gray-500 mt-1">添加新产品信息</p> |
|
|
</div> |
|
|
<span class="ml-auto text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">低</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="mt-6 w-full py-2 border border-dashed border-gray-300 rounded-lg text-sm text-gray-500 hover:text-gray-700 hover:border-gray-400"> |
|
|
<i class="fas fa-plus mr-2"></i>添加新任务 |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6 animate-fade-in"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">热门话题</h3> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button class="text-sm px-3 py-1 bg-blue-50 text-blue-600 rounded-full hover:bg-blue-100">全部</button> |
|
|
<button class="text-sm px-3 py-1 text |
|
|
</html> |
