443 lines
26 KiB
HTML
443 lines
26 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>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.gvsds.com/font-awesome/css/all.min.css" rel="stylesheet">
|
|
<!-- Tailwind 配置 -->
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#0F3460',
|
|
secondary: '#E6B325',
|
|
accent: '#16C2D5',
|
|
success: '#27AE60',
|
|
pending: '#F39C12',
|
|
danger: '#E74C3C',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Noto Sans SC', 'sans-serif'],
|
|
serif: ['Noto Serif SC', 'serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.hero-gradient {
|
|
background: linear-gradient(135deg, #0F3460 0%, #16C2D5 100%);
|
|
}
|
|
.btn-icon {
|
|
@apply p-1.5 rounded transition-colors flex items-center justify-center;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300 min-h-screen flex flex-col">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="bg-primary text-white shadow-md sticky top-0 z-50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-between items-center py-4">
|
|
<div class="flex items-center">
|
|
<i class="fa fa-balance-scale text-2xl mr-3 text-secondary"></i>
|
|
<h1 class="text-xl md:text-2xl font-serif font-bold">枢机协律中央法庭</h1>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<!--
|
|
<a href="/login" class="flex items-center px-3 py-1.5 rounded hover:bg-primary-700 transition-colors">
|
|
<i class="fa fa-sign-in mr-1"></i>
|
|
<span class="hidden md:inline">登录/注册</span>
|
|
</a>
|
|
-->
|
|
|
|
<button id="themeToggle" class="w-9 h-9 rounded-full flex items-center justify-center hover:bg-primary-700 transition-colors">
|
|
<i class="fa fa-moon-o dark:hidden"></i>
|
|
<i class="fa fa-sun-o hidden dark:block"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航标签 -->
|
|
<div class="flex border-t border-primary-700 overflow-x-auto">
|
|
<a href="/" class="tab-btn active flex-1 py-3 px-4 text-center focus:outline-none">
|
|
<i class="fa fa-home mr-1"></i>首页
|
|
</a>
|
|
<a href="/case.html" class="tab-btn flex-1 py-3 px-4 text-center focus:outline-none">
|
|
<i class="fa fa-gavel mr-1"></i>案件系统
|
|
</a>
|
|
<a href="https://doc.gvsds.com/a3fe3c662ff43689a1f3e0c61382b612" class="tab-btn flex-1 py-3 px-4 text-center focus:outline-none">
|
|
<i class="fa fa-book mr-1"></i>法典查阅
|
|
</a>
|
|
<a href="/about" class="tab-btn flex-1 py-3 px-4 text-center focus:outline-none">
|
|
<i class="fa fa-info-circle mr-1"></i>关于我们
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="flex-grow">
|
|
<!-- 英雄区域 -->
|
|
<section class="hero-gradient text-white py-16 md:py-24">
|
|
<div class="container mx-auto px-4 text-center">
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">公正 · 透明 · 高效</h2>
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">欢迎来到枢机协律中央法庭官方网站</p>
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
|
<a href="/case.html?tab=new-Case" class="px-6 py-3 bg-secondary hover:bg-secondary/90 text-primary font-bold rounded-lg transition-colors">
|
|
<i class="fa fa-plus-circle mr-2"></i>提起诉讼
|
|
</a>
|
|
<a href="https://doc.gvsds.com/a3fe3c662ff43689a1f3e0c61382b612" class="px-6 py-3 bg-white/10 hover:bg-white/20 text-white font-bold rounded-lg transition-colors">
|
|
<i class="fa fa-book mr-2"></i>查阅法典
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 特色功能 -->
|
|
<section class="py-16 bg-gray-100 dark:bg-gray-800">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-primary dark:text-secondary">核心功能</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- 功能卡片1 -->
|
|
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover">
|
|
<div class="p-6">
|
|
<div class="w-16 h-16 bg-primary/10 text-primary dark:text-secondary rounded-full flex items-center justify-center mb-4 mx-auto">
|
|
<i class="fa fa-gavel text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-center mb-3">案件管理</h3>
|
|
<p class="text-gray-600 dark:text-gray-300 text-center">
|
|
高效管理您的所有案件，实时跟踪案件状态，获取最新进展通知。
|
|
</p>
|
|
</div>
|
|
<div class="px-6 pb-6 text-center">
|
|
<a href="/cases" class="text-primary dark:text-secondary font-medium hover:underline">
|
|
进入系统 <i class="fa fa-arrow-right ml-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 功能卡片2 -->
|
|
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover">
|
|
<div class="p-6">
|
|
<div class="w-16 h-16 bg-primary/10 text-primary dark:text-secondary rounded-full flex items-center justify-center mb-4 mx-auto">
|
|
<i class="fa fa-book text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-center mb-3">法典查阅</h3>
|
|
<p class="text-gray-600 dark:text-gray-300 text-center">
|
|
完整收录现行法律法规，智能检索，帮助您快速找到相关法律条文。
|
|
</p>
|
|
</div>
|
|
<div class="px-6 pb-6 text-center">
|
|
<a href="https://doc.gvsds.com/a3fe3c662ff43689a1f3e0c61382b612" class="text-primary dark:text-secondary font-medium hover:underline">
|
|
查阅法典 <i class="fa fa-arrow-right ml-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 功能卡片3 -->
|
|
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover">
|
|
<div class="p-6">
|
|
<div class="w-16 h-16 bg-primary/10 text-primary dark:text-secondary rounded-full flex items-center justify-center mb-4 mx-auto">
|
|
<i class="fa fa-line-chart text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-center mb-3">数据统计</h3>
|
|
<p class="text-gray-600 dark:text-gray-300 text-center">
|
|
可视化案件数据统计，了解司法趋势，为决策提供数据支持。
|
|
</p>
|
|
</div>
|
|
<div class="px-6 pb-6 text-center">
|
|
<a href="/stats" class="text-primary dark:text-secondary font-medium hover:underline">
|
|
查看统计 <i class="fa fa-arrow-right ml-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 公告与新闻 -->
|
|
<section class="py-16">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex flex-col md:flex-row gap-8">
|
|
<!-- 公告区 -->
|
|
<div class="md:w-1/2">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-2xl font-bold text-primary dark:text-secondary">最新公告</h2>
|
|
<a href="/announcements" class="text-sm text-primary dark:text-secondary hover:underline">查看全部</a>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
|
|
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<li class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
|
<a href="/announcements/1" class="block">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<h3 class="font-medium">系统维护通知</h3>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">2023-11-15</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
|
|
系统将于2023年11月20日凌晨2:00至4:00进行维护升级，期间可能无法访问。
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
|
<a href="/announcements/2" class="block">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<h3 class="font-medium">新法规发布</h3>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">2023-11-10</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
|
|
《虚拟财产保护法》已正式发布，自2023年12月1日起施行。
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
|
<a href="/announcements/3" class="block">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<h3 class="font-medium">案件系统升级</h3>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">2023-11-05</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
|
|
案件管理系统已升级至2.0版本，新增多项功能，优化用户体验。
|
|
</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新闻区 -->
|
|
<div class="md:w-1/2">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-2xl font-bold text-primary dark:text-secondary">司法新闻</h2>
|
|
<a href="/news" class="text-sm text-primary dark:text-secondary hover:underline">更多新闻</a>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
|
|
<div class="relative">
|
|
<!-- 主新闻 -->
|
|
<a href="/news/1" class="block group">
|
|
<div class="h-48 bg-gray-200 dark:bg-gray-700 overflow-hidden">
|
|
<img src="https://via.placeholder.com/800x400?text=司法新闻" alt="新闻图片" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-primary dark:group-hover:text-secondary transition-colors">
|
|
中央法庭审理首例虚拟财产纠纷案
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
|
|
枢机协律中央法庭近日审理了一起涉及虚拟财产的重大案件，标志着我国虚拟财产保护进入新阶段...
|
|
</p>
|
|
<div class="flex justify-between items-center mt-3">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">2023-11-12</span>
|
|
<span class="text-xs px-2 py-1 bg-primary/10 text-primary dark:text-secondary rounded">热点</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 次要新闻列表 -->
|
|
<ul class="divide-y divide-gray-200 dark:divide-gray-700 border-t">
|
|
<li class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
|
<a href="/news/2" class="block">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<h3 class="font-medium">司法改革白皮书发布</h3>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">2023-11-08</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">
|
|
枢机协律中央法庭发布2023年度司法改革白皮书，详细阐述未来五年发展规划...
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
|
<a href="/news/3" class="block">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<h3 class="font-medium">数字司法研讨会召开</h3>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">2023-11-03</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">
|
|
首届数字司法与区块链技术应用国际研讨会在京召开，探讨司法数字化未来...
|
|
</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 快速链接 -->
|
|
<section class="py-16 bg-gray-100 dark:bg-gray-800">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-primary dark:text-secondary">快速通道</h2>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<a href="/case.html?tab=new-Case" class="bg-white dark:bg-gray-700 rounded-lg p-4 text-center hover:shadow-md transition-shadow card-hover">
|
|
<div class="w-12 h-12 bg-primary/10 text-primary dark:text-secondary rounded-full flex items-center justify-center mb-3 mx-auto">
|
|
<i class="fa fa-plus text-xl"></i>
|
|
</div>
|
|
<h3 class="font-medium">提起诉讼</h3>
|
|
</a>
|
|
|
|
<a href="/case.html" class="bg-white dark:bg-gray-700 rounded-lg p-4 text-center hover:shadow-md transition-shadow card-hover">
|
|
<div class="w-12 h-12 bg-primary/10 text-primary dark:text-secondary rounded-full flex items-center justify-center mb-3 mx-auto">
|
|
<i class="fa fa-search text-xl"></i>
|
|
</div>
|
|
<h3 class="font-medium">查询案件</h3>
|
|
</a>
|
|
|
|
<a href="https://doc.gvsds.com/a3fe3c662ff43689a1f3e0c61382b612" class="bg-white dark:bg-gray-700 rounded-lg p-4 text-center hover:shadow-md transition-shadow card-hover">
|
|
<div class="w-12 h-12 bg-primary/10 text-primary dark:text-secondary rounded-full flex items-center justify-center mb-3 mx-auto">
|
|
<i class="fa fa-book text-xl"></i>
|
|
</div>
|
|
<h3 class="font-medium">查阅法典</h3>
|
|
</a>
|
|
|
|
<a href="/help" class="bg-white dark:bg-gray-700 rounded-lg p-4 text-center hover:shadow-md transition-shadow card-hover">
|
|
<div class="w-12 h-12 bg-primary/10 text-primary dark:text-secondary rounded-full flex items-center justify-center mb-3 mx-auto">
|
|
<i class="fa fa-question-circle text-xl"></i>
|
|
</div>
|
|
<h3 class="font-medium">帮助中心</h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-primary text-white py-12">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4 flex items-center">
|
|
<i class="fa fa-balance-scale mr-2 text-secondary"></i>
|
|
枢机协律中央法庭
|
|
</h3>
|
|
<p class="text-sm text-primary-200">
|
|
致力于提供公正、透明、高效的司法服务，推动法治建设，保障公民权益。
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-bold mb-4">快速链接</h4>
|
|
<ul class="space-y-2">
|
|
<li><a href="/" class="text-sm text-primary-200 hover:text-secondary transition-colors">首页</a></li>
|
|
<li><a href="/cases" class="text-sm text-primary-200 hover:text-secondary transition-colors">案件系统</a></li>
|
|
<li><a href="https://doc.gvsds.com/a3fe3c662ff43689a1f3e0c61382b612" class="text-sm text-primary-200 hover:text-secondary transition-colors">法典查阅</a></li>
|
|
<li><a href="/about" class="text-sm text-primary-200 hover:text-secondary transition-colors">关于我们</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-bold mb-4">帮助中心</h4>
|
|
<ul class="space-y-2">
|
|
<li><a href="/help/faq" class="text-sm text-primary-200 hover:text-secondary transition-colors">常见问题</a></li>
|
|
<li><a href="/help/guide" class="text-sm text-primary-200 hover:text-secondary transition-colors">使用指南</a></li>
|
|
<li><a href="/help/contact" class="text-sm text-primary-200 hover:text-secondary transition-colors">联系我们</a></li>
|
|
<li><a href="/help/feedback" class="text-sm text-primary-200 hover:text-secondary transition-colors">意见反馈</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-bold mb-4">联系我们</h4>
|
|
<ul class="space-y-2 text-sm text-primary-200">
|
|
<li class="flex items-center">
|
|
<i class="fa fa-map-marker mr-2 text-secondary"></i>
|
|
北京市朝阳区司法大厦
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fa fa-phone mr-2 text-secondary"></i>
|
|
010-12345678
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fa fa-envelope mr-2 text-secondary"></i>
|
|
contact@court.example.com
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="flex space-x-4 mt-4">
|
|
<a href="#" class="w-8 h-8 rounded-full bg-primary-700 hover:bg-secondary flex items-center justify-center transition-colors">
|
|
<i class="fa fa-weixin"></i>
|
|
</a>
|
|
<a href="#" class="w-8 h-8 rounded-full bg-primary-700 hover:bg-secondary flex items-center justify-center transition-colors">
|
|
<i class="fa fa-weibo"></i>
|
|
</a>
|
|
<a href="#" class="w-8 h-8 rounded-full bg-primary-700 hover:bg-secondary flex items-center justify-center transition-colors">
|
|
<i class="fa fa-github"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-primary-700 mt-8 pt-8 text-sm text-center text-primary-300">
|
|
<p>© 2023 枢机协律中央法庭 版权所有 | 京ICP备12345678号</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 检查主题偏好
|
|
function checkThemePreference() {
|
|
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
}
|
|
|
|
// 切换主题
|
|
function toggleTheme() {
|
|
document.documentElement.classList.toggle('dark');
|
|
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
|
}
|
|
|
|
// 初始化
|
|
function init() {
|
|
checkThemePreference();
|
|
|
|
// 主题切换按钮
|
|
document.getElementById('themeToggle').addEventListener('click', toggleTheme);
|
|
|
|
// 模拟当前用户登录状态
|
|
const currentUser = localStorage.getItem('currentUser');
|
|
if (currentUser) {
|
|
document.querySelector('a[href="/login"]').innerHTML = `
|
|
<i class="fa fa-user-circle mr-1"></i>
|
|
<span class="hidden md:inline">${JSON.parse(currentUser).username}</span>
|
|
`;
|
|
document.querySelector('a[href="/login"]').href = "/dashboard";
|
|
}
|
|
}
|
|
|
|
// 启动应用
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
</script>
|
|
</body>
|
|
</html> |