|
@@ -998,4 +998,51 @@
|
|
|
width: 100%;
|
|
|
height: 240px;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+// 在文件末尾追加覆盖样式:让项目监控大盘四列等分占满卡片内容
|
|
|
+.project-kanban {
|
|
|
+ // 让头部与主体容器使用可用宽度而非max-content,避免不必要的横向滚动
|
|
|
+ .kanban-scroll {
|
|
|
+ .kanban-header, .kanban-body { width: 100%; }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用grid使四列等分,并确保头部与主体列宽对齐
|
|
|
+ .kanban-header {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: $ios-spacing-md;
|
|
|
+
|
|
|
+ .kanban-column-header {
|
|
|
+ // 取消固定180px,允许自适应
|
|
|
+ flex: 1 1 auto;
|
|
|
+ min-width: 0;
|
|
|
+ max-width: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .kanban-body {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: $ios-spacing-md;
|
|
|
+
|
|
|
+ .kanban-column {
|
|
|
+ // 取消固定180px,允许自适应
|
|
|
+ min-width: 0;
|
|
|
+ max-width: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 响应式:中屏降为两列,小屏单列,避免过窄
|
|
|
+@media (max-width: 1200px) {
|
|
|
+ .project-kanban {
|
|
|
+ .kanban-header, .kanban-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 640px) {
|
|
|
+ .project-kanban {
|
|
|
+ .kanban-header, .kanban-body { grid-template-columns: 1fr; }
|
|
|
+ }
|
|
|
}
|