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:
@@ -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>全部加载
|
||||
|
||||
Reference in New Issue
Block a user