7b9f2c7b41
- 更新技能文档，采用iframe平铺展示架构 - 重新生成资产租赁管理系统原型页面 - 优化文档系统路径处理 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
162 lines
6.7 KiB
HTML
162 lines
6.7 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
/* 平铺网格布局 */
|
||
.prototype-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
padding: 16px;
|
||
}
|
||
.prototype-iframe {
|
||
width: 100%;
|
||
height: 1000px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 12px;
|
||
background: white;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.prototype-label {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 20px;
|
||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||
color: white;
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
|
||
z-index: 10;
|
||
}
|
||
.iframe-container {
|
||
position: relative;
|
||
}
|
||
/* 大屏：3列平铺 */
|
||
@media (min-width: 1600px) {
|
||
.prototype-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
/* 小屏：1列平铺 */
|
||
@media (max-width: 768px) {
|
||
.prototype-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-100">
|
||
<!-- 顶部标题栏 -->
|
||
<header class="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-4 px-6">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h1 class="text-2xl font-bold">资产租赁管理系统 - 原型平铺展示</h1>
|
||
<p class="text-blue-100 text-sm mt-1">所有页面同时显示，一目了然 | 共 8 个页面</p>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<span class="bg-blue-500/30 px-3 py-1 rounded-full text-sm">
|
||
<i class="fas fa-th mr-1"></i>2列网格
|
||
</span>
|
||
<span class="bg-green-500/30 px-3 py-1 rounded-full text-sm">
|
||
<i class="fas fa-check-circle mr-1"></i>全部加载
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 页面导航 -->
|
||
<div class="bg-white border-b px-6 py-3">
|
||
<div class="flex flex-wrap gap-2">
|
||
<a href="#dashboard" class="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm hover:bg-blue-200">数据概览</a>
|
||
<a href="#project" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">项目信息</a>
|
||
<a href="#asset" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">资产台账</a>
|
||
<a href="#tenant" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">承租人管理</a>
|
||
<a href="#contract" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">合同管理</a>
|
||
<a href="#receivable" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">合同应收</a>
|
||
<a href="#verification" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">应收核销</a>
|
||
<a href="#statistics" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">统计报表</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 平铺网格容器 -->
|
||
<div class="prototype-grid">
|
||
<!-- 1. 数据概览 -->
|
||
<div class="iframe-container" id="dashboard">
|
||
<div class="prototype-label">
|
||
<i class="fas fa-chart-line mr-1"></i>数据概览
|
||
</div>
|
||
<iframe src="pages/admin/dashboard.html" class="prototype-iframe" title="数据概览"></iframe>
|
||
</div>
|
||
|
||
<!-- 2. 项目信息管理 -->
|
||
<div class="iframe-container" id="project">
|
||
<div class="prototype-label">
|
||
<i class="fas fa-project-diagram mr-1"></i>项目信息管理
|
||
</div>
|
||
<iframe src="pages/admin/project-info.html" class="prototype-iframe" title="项目信息管理"></iframe>
|
||
</div>
|
||
|
||
<!-- 3. 资产台账管理 -->
|
||
<div class="iframe-container" id="asset">
|
||
<div class="prototype-label">
|
||
<i class="fas fa-door-open mr-1"></i>资产台账管理
|
||
</div>
|
||
<iframe src="pages/admin/asset-info.html" class="prototype-iframe" title="资产台账管理"></iframe>
|
||
</div>
|
||
|
||
<!-- 4. 承租人管理 -->
|
||
<div class="iframe-container" id="tenant">
|
||
<div class="prototype-label">
|
||
<i class="fas fa-users mr-1"></i>承租人管理
|
||
</div>
|
||
<iframe src="pages/admin/tenant-info.html" class="prototype-iframe" title="承租人管理"></iframe>
|
||
</div>
|
||
|
||
<!-- 5. 合同管理 -->
|
||
<div class="iframe-container" id="contract">
|
||
<div class="prototype-label">
|
||
<i class="fas fa-file-contract mr-1"></i>合同管理
|
||
</div>
|
||
<iframe src="pages/admin/contract-mgmt.html" class="prototype-iframe" title="合同管理"></iframe>
|
||
</div>
|
||
|
||
<!-- 6. 合同应收 -->
|
||
<div class="iframe-container" id="receivable">
|
||
<div class="prototype-label">
|
||
<i class="fas fa-file-invoice-dollar mr-1"></i>合同应收
|
||
</div>
|
||
<iframe src="pages/admin/receivable.html" class="prototype-iframe" title="合同应收"></iframe>
|
||
</div>
|
||
|
||
<!-- 7. 应收核销 -->
|
||
<div class="iframe-container" id="verification">
|
||
<div class="prototype-label">
|
||
<i class="fas fa-check-double mr-1"></i>应收核销
|
||
</div>
|
||
<iframe src="pages/admin/verification.html" class="prototype-iframe" title="应收核销"></iframe>
|
||
</div>
|
||
|
||
<!-- 8. 统计报表 -->
|
||
<div class="iframe-container" id="statistics">
|
||
<div class="prototype-label">
|
||
<i class="fas fa-chart-bar mr-1"></i>统计报表
|
||
</div>
|
||
<iframe src="pages/admin/statistics.html" class="prototype-iframe" title="统计报表"></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-gray-800 text-gray-400 py-4 px-6 text-center text-sm">
|
||
<p>资产租赁管理系统原型 | AI 生成 | 共 8 个功能页面</p>
|
||
<p class="mt-1">基于《资产管理需求说明.pptx》生成</p>
|
||
</footer>
|
||
</body>
|
||
</html>
|