优化: 响应式布局走查修复(断点统一+窄屏适配)
- 统一断点: Dashboard/Ideas/Projects/ProjectDetail 的响应式断点 从 900px 改为 768px,与 AppLayout/AppSidebar 对齐(消除中间区间挤压) - filter-bar 全局加 flex-wrap:wrap(窄屏自动换行,Ideas/Tasks/AuditLog 受益) - IdeaDetail debate-container 窄屏双栏堆叠(@media 760px 切单列) - modal-box min-width 改用 min(360px,90vw)(超小窗口不撑破) - Tasks search-input 改 flex 布局(窄屏自适应宽度)
This commit is contained in:
@@ -850,4 +850,11 @@ watch(() => props.idea.id, loadHistory)
|
|||||||
border-color: var(--df-accent);
|
border-color: var(--df-accent);
|
||||||
background: var(--df-bg-raised);
|
background: var(--df-bg-raised);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══ 响应式:窄屏对抗式评估双栏堆叠 ═══ */
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.debate-container {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -193,7 +193,7 @@ html, body, #app {
|
|||||||
border: 0.5px solid var(--df-border);
|
border: 0.5px solid var(--df-border);
|
||||||
border-radius: var(--df-radius-lg);
|
border-radius: var(--df-radius-lg);
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
min-width: 360px;
|
min-width: min(360px, 90vw);
|
||||||
max-width: 90vw;
|
max-width: 90vw;
|
||||||
}
|
}
|
||||||
.modal-title { font-size: 18px; font-weight: 500; color: var(--df-text); margin-bottom: 16px; }
|
.modal-title { font-size: 18px; font-weight: 500; color: var(--df-text); margin-bottom: 16px; }
|
||||||
@@ -227,7 +227,7 @@ html, body, #app {
|
|||||||
.back-link:hover { text-decoration: underline; }
|
.back-link:hover { text-decoration: underline; }
|
||||||
|
|
||||||
/* — Filter Bar(列表页筛选 + 搜索)— Ideas / Tasks 共享 */
|
/* — Filter Bar(列表页筛选 + 搜索)— Ideas / Tasks 共享 */
|
||||||
.filter-bar { display: flex; gap: 8px; margin-bottom: var(--df-gap-page); align-items: center; }
|
.filter-bar { display: flex; gap: 8px; margin-bottom: var(--df-gap-page); align-items: center; flex-wrap: wrap; }
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
padding: 6px 14px;
|
padding: 6px 14px;
|
||||||
border: 0.5px solid var(--df-border);
|
border: 0.5px solid var(--df-border);
|
||||||
|
|||||||
@@ -140,8 +140,8 @@ onMounted(() => {
|
|||||||
|
|
||||||
/* ═══ Responsive ═══ */
|
/* ═══ Responsive ═══ */
|
||||||
|
|
||||||
/* 窄窗口:单栏 */
|
/* 窄窗口:单栏(与 AppLayout 768px 断点对齐) */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 768px) {
|
||||||
.dashboard { padding: 12px 14px 16px; }
|
.dashboard { padding: 12px 14px 16px; }
|
||||||
.dash-grid { grid-template-columns: 1fr; }
|
.dash-grid { grid-template-columns: 1fr; }
|
||||||
.dash-right { flex-direction: row; flex-wrap: wrap; gap: 10px; }
|
.dash-right { flex-direction: row; flex-wrap: wrap; gap: 10px; }
|
||||||
|
|||||||
@@ -498,14 +498,11 @@ watch(() => route.params.id, (id) => {
|
|||||||
/* empty-state / empty-icon 已提取到 global.css 全局 */
|
/* empty-state / empty-icon 已提取到 global.css 全局 */
|
||||||
|
|
||||||
/* ===== 响应式 ===== */
|
/* ===== 响应式 ===== */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 768px) {
|
||||||
.ideas { padding: 16px; }
|
.ideas { padding: 16px; }
|
||||||
.ideas-layout {
|
.ideas-layout {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
.filter-bar {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.search-box {
|
.search-box {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
order: -1;
|
order: -1;
|
||||||
|
|||||||
@@ -821,7 +821,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===== 响应式 ===== */
|
/* ===== 响应式 ===== */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 768px) {
|
||||||
.project-detail { padding: 16px; }
|
.project-detail { padding: 16px; }
|
||||||
.detail-grid {
|
.detail-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|||||||
@@ -496,7 +496,7 @@ async function runImport() {
|
|||||||
.trash-actions { display: flex; gap: 8px; }
|
.trash-actions { display: flex; gap: 8px; }
|
||||||
|
|
||||||
/* ===== 响应式 ===== */
|
/* ===== 响应式 ===== */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 768px) {
|
||||||
.projects { padding: 16px; }
|
.projects { padding: 16px; }
|
||||||
.project-grid {
|
.project-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|||||||
@@ -458,6 +458,8 @@ onUnmounted(() => {
|
|||||||
/* 搜索框 */
|
/* 搜索框 */
|
||||||
.search-input {
|
.search-input {
|
||||||
width: 220px;
|
width: 220px;
|
||||||
|
max-width: 100%;
|
||||||
|
flex: 1 1 220px;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
border: 0.5px solid var(--df-border);
|
border: 0.5px solid var(--df-border);
|
||||||
border-radius: var(--df-radius-sm);
|
border-radius: var(--df-radius-sm);
|
||||||
|
|||||||
Reference in New Issue
Block a user