Spaces:

maomaobj
/

hetong2

Running

hetong2 / index.html

设计一个“国央企业务合规系统”的【合同画像页面】，展示单份合同的全景信息，体现“合同—业务—监督”三位一体的检查视图。页面适用于纪检、合规、法务、审计、业务主管等角色查看与判断风险。布局要求专业清晰、图表辅助、便于决策分析。【页面结构和内容要求】： 1. 页面顶部（基础信息）： - 合同编号、合同名称、签署单位（对内/对外） - 签署时间、合同类型（采购/服务/工程等）、金额、币种 - 合同状态（草稿中 / 审批中 / 执行中 / 已归档） - 合同生命周期进度条（签署 → 执行 → 验收 → 归档） 2. 左侧区域（合同内容与审核）： - 【主要条款摘要】：展示核心条款（金额、付款方式、关键时间点、责任分工） - 【审核记录】：显示法务、纪检、业务各环节的审核节点与审批人 - 【智能审核结果】：展示AI识别的风险点（如高风险条款、不合理付款条件） 3. 中央区域（业务关联）： - 【关联业务项目】：展示合同绑定的业务（项目名称、项目负责人、项目状态） - 【关键业务节点】：以时间轴方式列出执行过程中的关键环节（下单、验收、付款等） - 【执行轨迹图】：简化流程图展示合同对应的业务流程执行情况（正常/异常） 4. 右侧区域（合规与监督）： - 【合规评分】：合同合规性打分（绿色/黄色/红色标签） - 【廉洁风险标签】：是否存在纪检关注行为（如：多次变更、临时调整、审批绕岗） - 【问题预警列表】：系统自动识别的异常点（如超预算、异常审批路径、敏感供应商） 5. 页面底部（辅助信息）： - 附件列表（合同扫描件、评审意见、变更记录） - 修改日志（合同草拟至归档的历史操作记录） - 按钮操作区：查看原文、导出报告、发起专项检查【视觉风格要求】： - 整体采用**浅色背景**（白色/浅灰），风格清晰、专业、干净 - 风险信息使用红色或橙色醒目标注 - 使用图标、评分卡片、流程图等多种可视化元素提升信息可读性 - 模块布局整齐分明，适配大屏或高分辨率PC端显示 - Initial Deployment

d780b6b verified 9 months ago

raw

history blame contribute delete

33.7 kB

	<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#1a56db',
	secondary: '#3b82f6',
	success: '#10b981',
	warning: '#f59e0b',
	danger: '#ef4444',
	light: '#f9fafb',
	dark: '#1f2937'
	}
	}
	}
	}
	</script>
	<style>
	.contract-progress {
	height: 8px;
	}
	.timeline-item {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 1.5rem;
	}
	.timeline-item:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #3b82f6;
	border: 2px solid white;
	box-shadow: 0 0 0 2px #3b82f6;
	}
	.timeline-item:after {
	content: '';
	position: absolute;
	left: 7px;
	top: 16px;
	width: 2px;
	height: calc(100% + 1.5rem);
	background: #d1d5db;
	}
	.timeline-item:last-child:after {
	display: none;
	}
	.flow-chart {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	}
	.flow-step {
	position: relative;
	text-align: center;
	padding: 1rem;
	border-radius: 0.5rem;
	background-color: #f3f4f6;
	border: 1px solid #e5e7eb;
	}
	.flow-step:not(:last-child):after {
	content: '→';
	position: absolute;
	right: -1.2rem;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	font-size: 1.5rem;
	}
	.flow-step.abnormal {
	background-color: #fee2e2;
	border-color: #fecaca;
	}
	.risk-tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 500;
	}
	.attachment-card {
	transition: all 0.2s ease;
	}
	.attachment-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	}
	</style>
	</head>
	<body class="bg-gray-50 text-gray-800">
	<!-- 顶部导航 -->
	<header class="bg-white shadow-sm">
	<div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center">
	<div class="bg-primary p-2 rounded-lg mr-3">
	<i class="fas fa-file-contract text-white text-xl"></i>
	</div>
	<h1 class="text-xl font-bold text-gray-800">国央企业务合规系统</h1>
	</div>
	<div class="flex items-center space-x-4">
	<div class="relative">
	<input type="text" placeholder="搜索合同..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	<div class="flex items-center space-x-2">
	<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-semibold">张</div>
	<span class="text-gray-700">张经理</span>
	</div>
	</div>
	</div>
	</header>

	<!-- 主内容区 -->
	<main class="max-w-7xl mx-auto px-4 py-6">
	<!-- 面包屑导航 -->
	<nav class="mb-6">
	<ol class="flex items-center space-x-2 text-sm text-gray-500">
	<li><a href="#" class="hover:text-primary">首页</a></li>
	<li><i class="fas fa-chevron-right text-xs"></i></li>
	<li><a href="#" class="hover:text-primary">合同管理</a></li>
	<li><i class="fas fa-chevron-right text-xs"></i></li>
	<li class="text-primary font-medium">合同画像</li>
	</ol>
	</nav>

	<!-- 合同基础信息 -->
	<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
	<div class="flex justify-between items-start mb-4">
	<div>
	<h2 class="text-2xl font-bold text-gray-800">2023年度云计算平台服务采购合同</h2>
	<div class="flex items-center mt-2 space-x-4">
	<div class="flex items-center">
	<i class="fas fa-hashtag text-gray-400 mr-1"></i>
	<span class="text-gray-600">HT-2023-08-00156</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-building text-gray-400 mr-1"></i>
	<span class="text-gray-600">对外 - 云创科技有限公司</span>
	</div>
	</div>
	</div>
	<div class="flex items-center space-x-3">
	<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">执行中</span>
	<button class="px-4 py-2 bg-primary hover:bg-blue-700 text-white rounded-lg flex items-center">
	<i class="fas fa-pen mr-2"></i> 编辑合同
	</button>
	</div>
	</div>

	<div class="grid grid-cols-4 gap-6 mb-6">
	<div class="border-l-4 border-primary pl-4">
	<p class="text-gray-500 text-sm">签署时间</p>
	<p class="font-medium">2023-08-15</p>
	</div>
	<div class="border-l-4 border-secondary pl-4">
	<p class="text-gray-500 text-sm">合同类型</p>
	<p class="font-medium">服务采购</p>
	</div>
	<div class="border-l-4 border-warning pl-4">
	<p class="text-gray-500 text-sm">合同金额</p>
	<p class="font-medium">¥ 2,850,000.00</p>
	</div>
	<div class="border-l-4 border-success pl-4">
	<p class="text-gray-500 text-sm">币种</p>
	<p class="font-medium">人民币 (CNY)</p>
	</div>
	</div>

	<!-- 合同生命周期进度条 -->
	<div class="mb-2">
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium text-gray-700">合同生命周期</span>
	<span class="text-sm font-medium text-primary">75%</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2.5 contract-progress">
	<div class="bg-primary h-2.5 rounded-full" style="width: 75%"></div>
	</div>
	</div>
	<div class="flex justify-between mt-1">
	<span class="text-sm text-gray-600">签署</span>
	<span class="text-sm text-gray-600">执行</span>
	<span class="text-sm text-gray-600">验收</span>
	<span class="text-sm text-gray-600">归档</span>
	</div>
	</div>

	<!-- 三列布局主体 -->
	<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
	<!-- 左侧区域：合同内容与审核 -->
	<div class="lg:col-span-3">
	<!-- 主要条款摘要 -->
	<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-file-alt text-primary mr-2"></i> 主要条款摘要
	</h3>
	<div class="space-y-3">
	<div class="flex justify-between">
	<span class="text-gray-600">合同总金额</span>
	<span class="font-medium">¥2,850,000.00</span>
	</div>
	<div class="flex justify-between">
	<span class="text-gray-600">首付款比例</span>
	<span class="font-medium">30% (¥855,000)</span>
	</div>
	<div class="flex justify-between">
	<span class="text-gray-600">服务开始日期</span>
	<span class="font-medium">2023-09-01</span>
	</div>
	<div class="flex justify-between">
	<span class="text-gray-600">服务结束日期</span>
	<span class="font-medium">2024-08-31</span>
	</div>
	<div>
	<p class="text-gray-600 mb-1">责任分工</p>
	<p class="text-sm">甲方提供基础设施，乙方提供云平台运维和技术支持</p>
	</div>
	</div>
	</div>

	<!-- 审核记录 -->
	<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-clipboard-check text-secondary mr-2"></i> 审核记录
	</h3>
	<div class="space-y-4">
	<div class="timeline-item">
	<p class="font-medium text-sm">业务部门初审</p>
	<p class="text-xs text-gray-500">张经理 · 2023-08-01 10:24</p>
	<p class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded mt-1 inline-block">通过</p>
	</div>
	<div class="timeline-item">
	<p class="font-medium text-sm">法务审核</p>
	<p class="text-xs text-gray-500">李律师 · 2023-08-03 14:36</p>
	<p class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded mt-1 inline-block">通过</p>
	<p class="text-xs mt-1 text-gray-600">修改了第5条责任条款</p>
	</div>
	<div class="timeline-item">
	<p class="font-medium text-sm">纪检审核</p>
	<p class="text-xs text-gray-500">王主任 · 2023-08-05 09:15</p>
	<p class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded mt-1 inline-block">通过</p>
	</div>
	<div class="timeline-item">
	<p class="font-medium text-sm">领导审批</p>
	<p class="text-xs text-gray-500">赵总 · 2023-08-10 16:45</p>
	<p class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded mt-1 inline-block">通过</p>
	</div>
	</div>
	</div>

	<!-- 智能审核结果 -->
	<div class="bg-white rounded-xl shadow-sm p-5">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-robot text-warning mr-2"></i> 智能审核结果
	</h3>
	<div class="space-y-3">
	<div class="p-3 bg-red-50 border border-red-100 rounded-lg">
	<div class="flex items-start">
	<i class="fas fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
	<div>
	<p class="font-medium text-red-700">高风险条款</p>
	<p class="text-xs text-red-600">第12条违约责任中，乙方责任上限过低</p>
	</div>
	</div>
	</div>
	<div class="p-3 bg-orange-50 border border-orange-100 rounded-lg">
	<div class="flex items-start">
	<i class="fas fa-exclamation-triangle text-orange-500 mt-1 mr-2"></i>
	<div>
	<p class="font-medium text-orange-700">付款条件风险</p>
	<p class="text-xs text-orange-600">验收后付款比例过高(70%)，建议增加阶段付款</p>
	</div>
	</div>
	</div>
	<div class="p-3 bg-yellow-50 border border-yellow-100 rounded-lg">
	<div class="flex items-start">
	<i class="fas fa-info-circle text-yellow-500 mt-1 mr-2"></i>
	<div>
	<p class="font-medium text-yellow-700">知识产权条款</p>
	<p class="text-xs text-yellow-600">未明确约定开发成果的知识产权归属</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 中央区域：业务关联 -->
	<div class="lg:col-span-6">
	<!-- 关联业务项目 -->
	<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-project-diagram text-success mr-2"></i> 关联业务项目
	</h3>
	<div class="grid grid-cols-2 gap-4">
	<div class="border rounded-lg p-4">
	<div class="flex justify-between items-start mb-2">
	<p class="font-medium">集团云平台升级项目</p>
	<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">进行中</span>
	</div>
	<div class="text-sm text-gray-600">
	<p class="flex items-center mb-1">
	<i class="fas fa-user mr-2"></i> 项目负责人: 王总监
	</p>
	<p class="flex items-center">
	<i class="fas fa-calendar mr-2"></i> 项目周期: 2023-07-01 至 2024-06-30
	</p>
	</div>
	</div>
	<div class="border rounded-lg p-4">
	<div class="flex justify-between items-start mb-2">
	<p class="font-medium">IT基础设施优化项目</p>
	<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">已验收</span>
	</div>
	<div class="text-sm text-gray-600">
	<p class="flex items-center mb-1">
	<i class="fas fa-user mr-2"></i> 项目负责人: 刘经理
	</p>
	<p class="flex items-center">
	<i class="fas fa-calendar mr-2"></i> 项目周期: 2023-01-15 至 2023-07-15
	</p>
	</div>
	</div>
	</div>
	</div>

	<!-- 关键业务节点 -->
	<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-stream text-info mr-2"></i> 关键业务节点
	</h3>
	<div class="relative pl-6 border-l-2 border-gray-200">
	<div class="mb-6 relative">
	<div class="absolute -left-8 top-0 w-5 h-5 rounded-full bg-primary border-4 border-white"></div>
	<div class="ml-4">
	<p class="font-medium">合同签署</p>
	<p class="text-sm text-gray-500">2023-08-15 · 已完成</p>
	</div>
	</div>
	<div class="mb-6 relative">
	<div class="absolute -left-8 top-0 w-5 h-5 rounded-full bg-primary border-4 border-white"></div>
	<div class="ml-4">
	<p class="font-medium">首付款支付</p>
	<p class="text-sm text-gray-500">2023-08-20 · 已完成</p>
	</div>
	</div>
	<div class="mb-6 relative">
	<div class="absolute -left-8 top-0 w-5 h-5 rounded-full bg-primary border-4 border-white"></div>
	<div class="ml-4">
	<p class="font-medium">服务启动</p>
	<p class="text-sm text-gray-500">2023-09-01 · 进行中</p>
	</div>
	</div>
	<div class="mb-6 relative">
	<div class="absolute -left-8 top-0 w-5 h-5 rounded-full bg-gray-300 border-4 border-white"></div>
	<div class="ml-4">
	<p class="font-medium">中期评估</p>
	<p class="text-sm text-gray-500">2024-02-01 · 未开始</p>
	</div>
	</div>
	<div class="relative">
	<div class="absolute -left-8 top-0 w-5 h-5 rounded-full bg-gray-300 border-4 border-white"></div>
	<div class="ml-4">
	<p class="font-medium">项目验收</p>
	<p class="text-sm text-gray-500">2024-08-20 · 未开始</p>
	</div>
	</div>
	</div>
	</div>

	<!-- 执行轨迹图 -->
	<div class="bg-white rounded-xl shadow-sm p-5">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-sitemap text-purple-500 mr-2"></i> 执行轨迹图
	</h3>
	<div class="flow-chart">
	<div class="flow-step">
	<div class="text-sm font-medium mb-1">立项</div>
	<div class="text-xs text-green-600">正常</div>
	</div>
	<div class="flow-step">
	<div class="text-sm font-medium mb-1">招标</div>
	<div class="text-xs text-green-600">正常</div>
	</div>
	<div class="flow-step">
	<div class="text-sm font-medium mb-1">签约</div>
	<div class="text-xs text-green-600">正常</div>
	</div>
	<div class="flow-step abnormal">
	<div class="text-sm font-medium mb-1">执行</div>
	<div class="text-xs text-red-600">异常</div>
	</div>
	</div>
	<div class="mt-4 p-3 bg-red-50 border border-red-100 rounded-lg">
	<div class="flex">
	<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-2"></i>
	<div>
	<p class="font-medium text-red-700">执行异常</p>
	<p class="text-xs text-red-600">9月份服务响应时间超出合同约定标准</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 右侧区域：合规与监督 -->
	<div class="lg:col-span-3">
	<!-- 合规评分 -->
	<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-shield-alt text-danger mr-2"></i> 合规评分
	</h3>
	<div class="text-center">
	<div class="inline-flex items-center justify-center w-32 h-32 rounded-full border-8 border-warning relative mb-4">
	<span class="text-3xl font-bold text-warning">78</span>
	<span class="absolute bottom-0 text-warning">分</span>
	</div>
	<div class="px-3 py-2 bg-warning-100 text-warning-800 rounded-full inline-block text-sm font-medium">
	中等风险
	</div>
	<div class="mt-4 text-sm text-left">
	<div class="flex justify-between mb-1">
	<span>流程合规</span>
	<span class="font-medium">92分</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2 mb-4">
	<div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
	</div>

	<div class="flex justify-between mb-1">
	<span>条款合规</span>
	<span class="font-medium">65分</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2 mb-4">
	<div class="bg-yellow-500 h-2 rounded-full" style="width: 65%"></div>
	</div>

	<div class="flex justify-between mb-1">
	<span>执行合规</span>
	<span class="font-medium">76分</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2">
	<div class="bg-orange-500 h-2 rounded-full" style="width: 76%"></div>
	</div>
	</div>
	</div>
	</div>

	<!-- 廉洁风险标签 -->
	<div class="bg-white rounded-xl shadow-sm p-5 mb-6">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-user-shield text-purple-500 mr-2"></i> 廉洁风险标签
	</h3>
	<div class="flex flex-wrap gap-2">
	<span class="risk-tag bg-red-100 text-red-800">多次变更</span>
	<span class="risk-tag bg-orange-100 text-orange-800">临时调整</span>
	<span class="risk-tag bg-yellow-100 text-yellow-800">单一来源</span>
	<span class="risk-tag bg-green-100 text-green-800">无关联交易</span>
	<span class="risk-tag bg-red-100 text-red-800">审批绕岗</span>
	</div>
	</div>

	<!-- 问题预警列表 -->
	<div class="bg-white rounded-xl shadow-sm p-5">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-bell text-danger mr-2"></i> 问题预警列表
	</h3>
	<div class="space-y-3">
	<div class="p-3 bg-red-50 border border-red-100 rounded-lg">
	<div class="flex items-start">
	<i class="fas fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
	<div>
	<p class="font-medium text-red-700">超预算风险</p>
	<p class="text-xs text-red-600">实际支出已超预算5.2%</p>
	</div>
	</div>
	</div>
	<div class="p-3 bg-orange-50 border border-orange-100 rounded-lg">
	<div class="flex items-start">
	<i class="fas fa-exclamation-triangle text-orange-500 mt-1 mr-2"></i>
	<div>
	<p class="font-medium text-orange-700">异常审批路径</p>
	<p class="text-xs text-orange-600">三次审批跳过部门负责人</p>
	</div>
	</div>
	</div>
	<div class="p-3 bg-yellow-50 border border-yellow-100 rounded-lg">
	<div class="flex items-start">
	<i class="fas fa-info-circle text-yellow-500 mt-1 mr-2"></i>
	<div>
	<p class="font-medium text-yellow-700">敏感供应商</p>
	<p class="text-xs text-yellow-600">供应商股东与公司员工有关联</p>
	</div>
	</div>
	</div>
	<div class="p-3 bg-blue-50 border border-blue-100 rounded-lg">
	<div class="flex items-start">
	<i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
	<div>
	<p class="font-medium text-blue-700">付款延迟</p>
	<p class="text-xs text-blue-600">9月份付款延迟15天</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 页面底部：辅助信息 -->
	<div class="bg-white rounded-xl shadow-sm p-6 mt-6">
	<h3 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-paperclip text-gray-500 mr-2"></i> 附件与操作
	</h3>

	<!-- 附件列表 -->
	<div class="mb-6">
	<h4 class="font-medium text-gray-700 mb-3">附件列表</h4>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div class="attachment-card border rounded-lg p-4 flex items-center hover:border-primary cursor-pointer">
	<div class="bg-blue-100 p-3 rounded-lg mr-3">
	<i class="fas fa-file-pdf text-blue-500 text-xl"></i>
	</div>
	<div>
	<p class="font-medium text-sm">合同扫描件.pdf</p>
	<p class="text-xs text-gray-500">2.5 MB · 2023-08-15</p>
	</div>
	</div>
	<div class="attachment-card border rounded-lg p-4 flex items-center hover:border-primary cursor-pointer">
	<div class="bg-green-100 p-3 rounded-lg mr-3">
	<i class="fas fa-file-word text-green-500 text-xl"></i>
	</div>
	<div>
	<p class="font-medium text-sm">评审意见.docx</p>
	<p class="text-xs text-gray-500">356 KB · 2023-08-10</p>
	</div>
	</div>
	<div class="attachment-card border rounded-lg p-4 flex items-center hover:border-primary cursor-pointer">
	<div class="bg-yellow-100 p-3 rounded-lg mr-3">
	<i class="fas fa-file-excel text-yellow-500 text-xl"></i>
	</div>
	<div>
	<p class="font-medium text-sm">变更记录.xlsx</p>
	<p class="text-xs text-gray-500">128 KB · 2023-09-01</p>
	</div>
	</div>
	</div>
	</div>

	<!-- 修改日志 -->
	<div class="mb-6">
	<h4 class="font-medium text-gray-700 mb-3">修改日志</h4>
	<div class="border rounded-lg overflow-hidden">
	<table class="w-full text-sm">
	<thead class="bg-gray-50">
	<tr>
	<th class="py-2 px-4 text-left">操作时间</th>
	<th class="py-2 px-4 text-left">操作人</th>
	<th class="py-2 px-4 text-left">操作内容</th>
	<th class="py-2 px-4 text-left">版本</th>
	</tr>
	</thead>
	<tbody>
	<tr class="border-t hover:bg-gray-50">
	<td class="py-2 px-4">2023-08-15 14:22</td>
	<td class="py-2 px-4">张经理</td>
	<td class="py-2 px-4">合同签署归档</td>
	<td class="py-2 px-4">V1.0</td>
	</tr>
	<tr class="border-t hover:bg-gray-50">
	<td class="py-2 px-4">2023-08-10 11:35</td>
	<td class="py-2 px-4">李律师</td>
	<td class="py-2 px-4">条款修订</td>
	<td class="py-2 px-4">V0.9</td>
	</tr>
	<tr class="border-t hover:bg-gray-50">
	<td class="py-2 px-4">2023-08-05 16:40</td>
	<td class="py-2 px-4">王主任</td>
	<td class="py-2 px-4">纪检审核通过</td>
	<td class="py-2 px-4">V0.8</td>
	</tr>
	<tr class="border-t hover:bg-gray-50">
	<td class="py-2 px-4">2023-08-01 10:15</td>
	<td class="py-2 px-4">张经理</td>
	<td class="py-2 px-4">创建合同草稿</td>
	<td class="py-2 px-4">V0.1</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- 按钮操作区 -->
	<div class="flex justify-end space-x-3">
	<button class="px-5 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
	<i class="fas fa-file-contract mr-2"></i> 查看原文
	</button>
	<button class="px-5 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
	<i class="fas fa-download mr-2"></i> 导出报告
	</button>
	<button class="px-5 py-2 bg-danger text-white rounded-lg hover:bg-red-700 flex items-center">
	<i class="fas fa-search mr-2"></i> 发起专项检查
	</button>
	</div>
	</div>
	</main>

	<!-- 页脚 -->
	<footer class="max-w-7xl mx-auto px-4 py-6 mt-8 text-center text-sm text-gray-500 border-t">
	<p>© 2023 国央企业务合规系统 · 纪检监察部 · 版本 2.1.5</p>
	<p class="mt-1">本系统数据仅限内部使用，严禁外传</p>
	</footer>
	<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/hetong2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>