fix: 修改原型平铺布局为单列,避免页面被挤压

- 改为单列布局,每个页面有完整桌面宽度
- iframe 高度调整为 800px
- 最大宽度限制为 1400px

Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
D8D Developer
2026-03-24 10:51:53 +00:00
parent 7b9f2c7b41
commit 409675a806
2 changed files with 8 additions and 18 deletions

View File

@@ -7,16 +7,18 @@
<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;
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
max-width: 1400px;
margin: 0 auto;
}
.prototype-iframe {
width: 100%;
height: 1000px;
height: 800px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: white;
@@ -38,18 +40,6 @@
.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">
@@ -62,7 +52,7 @@
</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列网格
<i class="fas fa-list mr-1"></i>单列平铺
</span>
<span class="bg-green-500/30 px-3 py-1 rounded-full text-sm">
<i class="fas fa-check-circle mr-1"></i>全部加载