/* 项目详情页面样式文件 - 简化版本,直接针对HTML元素 */ @use '../ios-theme.scss' as *; /* 重置所有可能冲突的样式 */ * { box-sizing: border-box; } /* 全局侧边栏彻底隐藏 - 高优先级规则 */ .sidebar { display: none !important; width: 0 !important; visibility: hidden !important; } /* 主容器样式 - 确保内容区域占满整个屏幕 */ .content-wrapper { width: 100% !important; margin-left: 0 !important; padding: 0 !important; } /* 主内容区域样式 - 重置为默认值 */ .main-content { padding: 0 !important; margin: 0 !important; } /* 项目详情容器 */ .project-detail-container { padding: 20px; background-color: #f5f7fa; color: #333; min-height: 100vh; } /* 项目标题栏 */ .project-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background-color: white; padding: 20px; border-radius: 8px; width: 100% !important; } /* 强制覆盖主内容布局样式 - 使用最高优先级 */ .progress-tab-content > .main-content-layout { display: flex !important; gap: 20px !important; margin-top: 20px !important; width: 100% !important; background-color: rgba(200, 200, 255, 0.5) !important; /* 明显的背景色 */ } /* 强制覆盖左侧列样式 - 使用最高优先级 */ .progress-tab-content > .main-content-layout > .left-column { width: 33.333% !important; display: flex !important; flex-direction: column !important; gap: 20px !important; background-color: rgba(255, 200, 200, 0.3) !important; /* 左侧列背景色 */ } /* 强制覆盖右侧列样式 - 使用最高优先级 */ .progress-tab-content > .main-content-layout > .right-column { width: 66.667% !important; display: flex !important; flex-direction: column !important; gap: 20px !important; background-color: rgba(200, 255, 200, 0.3) !important; /* 右侧列背景色 */ } /* 确保响应式布局正常工作 */ @media (max-width: 1024px) { .progress-tab-content > .main-content-layout { flex-direction: column !important; } .progress-tab-content > .main-content-layout > .left-column, .progress-tab-content > .main-content-layout > .right-column { width: 100% !important; } } .header-content{display:flex;flex-direction:column;gap:$ios-spacing-sm} .project-header h1{font-size:$ios-font-size-xl;font-weight:$ios-font-weight-bold;color:$ios-text-primary;margin:0} .project-meta{display:flex;align-items:center;gap:$ios-spacing-lg;font-size:$ios-font-size-sm;color:$ios-text-secondary} .project-id{font-weight:$ios-font-weight-medium} .project-status{padding:$ios-spacing-xs $ios-spacing-md;border-radius:$ios-radius-full;background-color:#e8f0fe;color:$ios-primary} /* 按钮样式 */ .header-actions{display:flex;gap:$ios-spacing-md;align-items:center} .back-btn{background-color:$ios-primary;color:white;border:none;padding:$ios-spacing-sm $ios-spacing-lg;border-radius:$ios-radius-md;font-size:$ios-font-size-sm;font-weight:$ios-font-weight-medium;cursor:pointer;white-space:nowrap} .back-btn:hover{background-color:#0056b3;transform:translateY(-1px)} .project-switcher{position:relative} .switch-btn{background-color:$ios-background-tertiary;color:$ios-text-primary;border:none;padding:$ios-spacing-sm $ios-spacing-lg;border-radius:$ios-radius-md;font-size:$ios-font-size-sm;font-weight:$ios-font-weight-medium;cursor:pointer;white-space:nowrap} .switch-btn:hover{background-color:#f0f0f0;transform:translateY(-1px)} .switch-dropdown{position:absolute;top:100%;right:0;margin-top:$ios-spacing-xs;background-color:$ios-background-secondary;border-radius:$ios-radius-md;overflow:hidden;min-width:200px;max-height:300px;overflow-y:auto;z-index:1000} .project-item{display:flex;justify-content:space-between;align-items:center;padding:$ios-spacing-md;cursor:pointer;border-bottom:1px solid $ios-border} .project-item:last-child{border-bottom:none} .project-item:hover{background-color:$ios-background} .project-item.active{background-color:#e8f0fe} .project-name{font-size:$ios-font-size-sm;color:$ios-text-primary;font-weight:$ios-font-weight-medium} .project-status-badge{font-size:$ios-font-size-xs;padding:$ios-spacing-xs $ios-spacing-sm;border-radius:$ios-radius-full;background-color:$ios-background-tertiary;color:$ios-text-secondary} .project-status-badge.ongoing{background-color:#e8f0fe;color:$ios-primary} .project-status-badge.completed{background-color:#e6f7e6;color:$ios-success} .project-status-badge.pending{background-color:#fff3cd;color:$ios-warning} .stagnation-btn{background-color:$ios-warning;color:white;border:none;padding:$ios-spacing-sm $ios-spacing-md;border-radius:$ios-radius-md;font-size:$ios-font-size-sm;cursor:pointer;font-weight:$ios-font-weight-medium} .stagnation-btn:hover{background-color:#d4a72c;transform:translateY(-1px)} /* 顶部导航标签页样式 */ .project-tabs{ display:flex; margin-bottom:$ios-spacing-xl; border-bottom:1px solid $ios-border; background-color:$ios-background-secondary; border-radius:$ios-radius-lg $ios-radius-lg 0 0; padding:$ios-spacing-xs 0; } .tab-item{ padding:$ios-spacing-md $ios-spacing-xl; font-size:$ios-font-size-base; font-weight:$ios-font-weight-medium; color:$ios-text-secondary; cursor:pointer; transition:all 0.2s ease; border-bottom:2px solid transparent; background-color:transparent; border:none; } .tab-item:hover{ color:$ios-text-primary; background-color:$ios-background; } .tab-item.active{ color:$ios-primary; border-bottom-color:$ios-primary; background-color:$ios-background; } /* 标签页内容容器样式 */ .tab-content{ background-color:$ios-background; border-radius:0 0 $ios-radius-lg $ios-radius-lg; padding:$ios-spacing-xl; min-height:calc(100vh - 320px); } .tab-content.hidden{ display:none; } /* 项目成员列表样式 */ .member-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:$ios-spacing-lg; margin-bottom:$ios-spacing-xl; } .member-card{ background-color:$ios-background-secondary; border-radius:$ios-radius-lg; padding:$ios-spacing-lg; display:flex; align-items:center; gap:$ios-spacing-lg; transition:transform 0.2s ease, box-shadow 0.2s ease; } .member-card:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.05); } .member-avatar{ width:64px; height:64px; border-radius:50%; background-color:$ios-primary; color:white; display:flex; align-items:center; justify-content:center; font-size:$ios-font-size-lg; font-weight:$ios-font-weight-semibold; flex-shrink:0; } .member-info{ flex:1; min-width:0; } .member-name{ font-size:$ios-font-size-base; font-weight:$ios-font-weight-semibold; color:$ios-text-primary; margin-bottom:$ios-spacing-xs; } .member-role{ font-size:$ios-font-size-sm; color:$ios-text-secondary; margin-bottom:$ios-spacing-md; } .member-metrics{ display:flex; gap:$ios-spacing-md; flex-wrap:wrap; } .metric-item{ display:flex; flex-direction:column; gap:$ios-spacing-xs; } .metric-label{ font-size:$ios-font-size-xs; color:$ios-text-secondary; } .metric-value{ font-size:$ios-font-size-sm; color:$ios-text-primary; font-weight:$ios-font-weight-medium; } /* 团队协作时间轴样式 */ .team-timeline{ position:relative; padding-left:$ios-spacing-xxl; margin-bottom:$ios-spacing-xl; } .timeline-item{ position:relative; padding-bottom:$ios-spacing-xl; } .timeline-item:last-child{ padding-bottom:0; } .timeline-item::before{ content:''; position:absolute; left: -$ios-spacing-lg; top:$ios-spacing-sm; width:12px; height:12px; border-radius:50%; background-color:$ios-primary; border:3px solid #e8f0fe; } .timeline-item:not(:last-child)::after{ content:''; position:absolute; left:-$ios-spacing-lg + 4px; top:24px; bottom:0; width:2px; background-color:$ios-border; } .timeline-time{ font-size:$ios-font-size-sm; color:$ios-text-secondary; margin-bottom:$ios-spacing-xs; } .timeline-content{ background-color:$ios-background-secondary; border-radius:$ios-radius-md; padding:$ios-spacing-md; } .timeline-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:$ios-spacing-sm; } .timeline-title{ font-size:$ios-font-size-base; font-weight:$ios-font-weight-medium; color:$ios-text-primary; } .timeline-action{ font-size:$ios-font-size-xs; background-color:$ios-primary; color:white; padding:$ios-spacing-xs $ios-spacing-sm; border-radius:$ios-radius-full; } .timeline-description{ font-size:$ios-font-size-sm; color:$ios-text-secondary; line-height:1.5; } /* 项目文件列表样式 */ .file-list{ background-color:$ios-background-secondary; border-radius:$ios-radius-lg; overflow:hidden; margin-bottom:$ios-spacing-xl; } .file-header{ display:flex; justify-content:space-between; align-items:center; padding:$ios-spacing-lg; border-bottom:1px solid $ios-border; background-color:$ios-background-tertiary; } .file-header h3{ margin:0; font-size:$ios-font-size-base; } .file-upload-btn{ background-color:$ios-primary; color:white; border:none; padding:$ios-spacing-sm $ios-spacing-lg; border-radius:$ios-radius-md; font-size:$ios-font-size-sm; font-weight:$ios-font-weight-medium; cursor:pointer; display:flex; align-items:center; gap:$ios-spacing-xs; } .file-upload-btn:hover{ background-color:#0056b3; transform:translateY(-1px); } .file-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:$ios-spacing-md; padding:$ios-spacing-lg; } .file-item{ background-color:$ios-background; border-radius:$ios-radius-md; padding:$ios-spacing-md; text-align:center; transition:transform 0.2s ease, box-shadow 0.2s ease; cursor:pointer; } .file-item:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.05); } .file-icon{ font-size:$ios-font-size-xl; color:$ios-primary; margin-bottom:$ios-spacing-sm; } .file-name{ font-size:$ios-font-size-sm; color:$ios-text-primary; margin-bottom:$ios-spacing-xs; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .file-meta{ font-size:$ios-font-size-xs; color:$ios-text-secondary; } /* 任务卡片样式优化 */ .stage-specific-card{ background-color:$ios-background-secondary; border-radius:$ios-radius-lg; padding:$ios-spacing-lg; margin-bottom:$ios-spacing-xl; border-left:4px solid $ios-primary; } .stage-specific-card.warning{ border-left-color:$ios-warning; } .stage-specific-card.danger{ border-left-color:$ios-danger; } .stage-specific-card.success{ border-left-color:$ios-success; } /* 整理按钮样式 */ .organize-btn{ background-color:$ios-background-tertiary; color:$ios-text-primary; border:none; padding:$ios-spacing-sm $ios-spacing-lg; border-radius:$ios-radius-md; font-size:$ios-font-size-sm; font-weight:$ios-font-weight-medium; cursor:pointer; margin-right:$ios-spacing-md; display:flex; align-items:center; gap:$ios-spacing-xs; } .organize-btn:hover{ background-color:#f0f0f0; transform:translateY(-1px); } /* 技能匹配度样式 */ .skills-match-bar{ width:100%; height:8px; background-color:$ios-background-tertiary; border-radius:$ios-radius-full; overflow:hidden; margin-bottom:$ios-spacing-sm; } .skills-match-fill{ height:100%; background-color:$ios-primary; border-radius:$ios-radius-full; } .skills-match-text{ font-size:$ios-font-size-sm; color:$ios-text-secondary; text-align:right; } /* 主内容布局样式 - 强制使用主容器内的布局定义 */ .progress-tab-content > .main-content-layout { display: flex !important; gap: $ios-spacing-xl !important; margin-top: $ios-spacing-xl; width: 100% !important; background-color: rgba(200, 200, 255, 0.2) !important; /* 临时背景色用于调试 */ } .progress-tab-content > .main-content-layout > .left-column { width: 33.333% !important; display: flex !important; flex-direction: column !important; gap: $ios-spacing-xl !important; } .progress-tab-content > .main-content-layout > .right-column { width: 66.667% !important; display: flex !important; flex-direction: column !important; gap: $ios-spacing-xl !important; } /* 标题样式 */ h2{font-size:$ios-font-size-lg;font-weight:$ios-font-weight-semibold;color:$ios-text-primary;margin-top:0;margin-bottom:$ios-spacing-lg;padding-bottom:$ios-spacing-sm;border-bottom:1px solid $ios-border} h3{font-size:$ios-font-size-base;font-weight:$ios-font-weight-medium;color:$ios-text-primary;margin-top:$ios-spacing-lg;margin-bottom:$ios-spacing-md} h4{font-size:$ios-font-size-sm;font-weight:$ios-font-weight-medium;color:$ios-text-primary;margin-top:$ios-spacing-md;margin-bottom:$ios-spacing-sm} /* 项目基本信息卡片 */ .project-info-card .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:$ios-spacing-md} .info-item{display:flex;flex-direction:column;gap:$ios-spacing-xs} .info-item label{font-size:$ios-font-size-sm;color:$ios-text-secondary;font-weight:$ios-font-weight-medium} .info-item span{font-size:$ios-font-size-base;color:$ios-text-primary;font-weight:$ios-font-weight-regular} .stage-tag{display:inline-block;padding:$ios-spacing-xs $ios-spacing-md;border-radius:$ios-radius-full;background-color:#e6f7e6;color:$ios-success;font-size:$ios-font-size-sm;font-weight:$ios-font-weight-medium} /* 客户画像卡片 */ .warning-banner{background-color:#ffebee;color:$ios-danger;padding:$ios-spacing-md $ios-spacing-lg;border-radius:$ios-radius-md;margin-bottom:$ios-spacing-xl;border-left:4px solid $ios-danger;font-size:$ios-font-size-base;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:$ios-spacing-md} .warning-content{display:flex;align-items:center;gap:$ios-spacing-sm;flex:1} .warning-icon{font-size:$ios-font-size-lg} .contact-leader-btn{background-color:$ios-danger;color:white;border:none;padding:$ios-spacing-xs $ios-spacing-md;border-radius:$ios-radius-md;font-size:$ios-font-size-sm;cursor:pointer;font-weight:$ios-font-weight-medium} .contact-leader-btn:hover{background-color:#c62828;transform:translateY(-1px)} /* 标签样式 */ .tags-container{display:flex;flex-direction:column;gap:$ios-spacing-lg} .tag-section{margin-bottom:$ios-spacing-md} .tag-section h3{margin-top:0;font-size:$ios-font-size-base} .tags-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:$ios-spacing-md} .tag-item{display:flex;flex-direction:column;gap:$ios-spacing-xs} .tag-label{font-size:$ios-font-size-xs;color:$ios-text-secondary;font-weight:$ios-font-weight-medium} .tag{display:inline-block;padding:$ios-spacing-xs $ios-spacing-md;border-radius:$ios-radius-full;background-color:$ios-background-tertiary;color:$ios-text-primary;font-size:$ios-font-size-sm;font-weight:$ios-font-weight-medium;align-self:flex-start} .tags-flex{display:flex;flex-direction:column;gap:$ios-spacing-md} .tag-group{display:flex;flex-direction:column;gap:$ios-spacing-sm} .group-label{font-size:$ios-font-size-sm;color:$ios-text-secondary;font-weight:$ios-font-weight-medium} .tags{display:flex;flex-wrap:wrap;gap:$ios-spacing-sm} .priority-tag,.skill-tag{display:inline-block;padding:$ios-spacing-xs $ios-spacing-sm;border-radius:$ios-radius-full;background-color:$ios-background-tertiary;color:$ios-text-primary;font-size:$ios-font-size-xs;font-weight:$ios-font-weight-medium} .priority-tag{background-color:#fff3cd;color:$ios-warning} .skill-tag{background-color:#e8f0fe;color:$ios-primary} /* 项目进度看板 - 支持10个阶段的横向进度展示 */ .stage-progress-container{ margin-bottom:$ios-spacing-xl; background-color:$ios-background-secondary; border-radius:$ios-radius-lg; padding:$ios-spacing-lg; box-shadow:0 2px 8px rgba(0,0,0,0.03); } /* 进度条容器 - 支持滚动查看所有10个阶段 */ .stage-progress-wrapper{ position:relative; overflow-x:auto; padding-bottom:$ios-spacing-md; /* 隐藏滚动条但保持功能 */ scrollbar-width:none; /* Firefox */ -ms-overflow-style:none; /* IE and Edge */ } .stage-progress-wrapper::-webkit-scrollbar{ display:none; /* Chrome, Safari, Opera */ } /* 进度条容器内部样式 */ .stage-progress{ display:flex; align-items:center; position:relative; padding:$ios-spacing-sm 0; min-width:100%; } /* 进度线 */ .stage-progress::before{ content:''; position:absolute; top:50%; left:22px; /* 图标宽度的一半 */ right:22px; height:3px; background-color:$ios-border; transform:translateY(-50%); z-index:1; } .progress-line{ position:absolute; top:50%; left:22px; /* 图标宽度的一半 */ height:3px; background:linear-gradient(90deg, $ios-success, $ios-primary); transform:translateY(-50%); z-index:2; transition:width 0.3s ease; } /* 阶段样式 - 10个阶段均匀分布 */ .stage{ display:flex; flex-direction:column; align-items:center; z-index:3; position:relative; flex-shrink:0; width:100px; cursor:pointer; transition:transform 0.2s ease; padding:0 $ios-spacing-sm; } .stage:hover{ transform:translateY(-2px); } /* 阶段图标 - 现代化设计 */ .stage-icon{ width:44px; height:44px; border-radius:50%; background-color:$ios-border; color:$ios-text-secondary; display:flex; justify-content:center; align-items:center; font-weight:$ios-font-weight-semibold; margin-bottom:$ios-spacing-sm; transition:all 0.3s ease; box-shadow:0 2px 4px rgba(0,0,0,0.05); } /* 已完成阶段样式 */ .stage.completed .stage-icon{ background:linear-gradient(135deg, $ios-success, #2e7d32); color:white; box-shadow:0 0 0 4px #e6f7e6, 0 4px 12px rgba(46, 125, 50, 0.2); } /* 当前阶段样式 - 强调设计 */ .stage.active .stage-icon{ background:linear-gradient(135deg, $ios-primary, #0056b3); color:white; box-shadow:0 0 0 4px #e8f0fe, 0 4px 16px rgba(0, 123, 255, 0.3); animation:pulse 2s infinite; } @keyframes pulse { 0% { box-shadow:0 0 0 4px #e8f0fe, 0 4px 16px rgba(0, 123, 255, 0.3); } 50% { box-shadow:0 0 0 6px #e8f0fe, 0 4px 20px rgba(0, 123, 255, 0.4); } 100% { box-shadow:0 0 0 4px #e8f0fe, 0 4px 16px rgba(0, 123, 255, 0.3); } } /* 未开始阶段样式 */ .stage.pending .stage-icon{ background-color:$ios-background-tertiary; color:$ios-text-secondary; } /* 阶段名称样式 - 响应式设计 */ .stage-name{ font-size:$ios-font-size-xs; color:$ios-text-secondary; text-align:center; white-space:nowrap; font-weight:$ios-font-weight-medium; max-width:100%; overflow:hidden; text-overflow:ellipsis; transition:color 0.3s ease; } .stage.completed .stage-name, .stage.active .stage-name{ color:$ios-text-primary; font-weight:$ios-font-weight-semibold; } /* 当前阶段操作区域 */ .current-stage-actions{ background-color:$ios-background; padding:$ios-spacing-lg; border-radius:$ios-radius-md; text-align:center; margin-top:$ios-spacing-lg; border-left:4px solid $ios-primary; box-shadow:0 2px 8px rgba(0,0,0,0.05); } .current-stage-info h3{margin-top:0;margin-bottom:$ios-spacing-md;font-size:$ios-font-size-base} .stage-highlight{color:$ios-primary;font-weight:$ios-font-weight-semibold} /* 按钮样式 */ .primary-btn,.secondary-btn{border:none;padding:$ios-spacing-sm $ios-spacing-lg;border-radius:$ios-radius-md;font-size:$ios-font-size-sm;cursor:pointer;font-weight:$ios-font-weight-medium;white-space:nowrap} .primary-btn{background-color:$ios-primary;color:white} .primary-btn:hover{background-color:#0056b3;transform:translateY(-1px)} .primary-btn:disabled{background-color:$ios-border;color:$ios-text-secondary;cursor:not-allowed;transform:none} .secondary-btn{background-color:$ios-background-tertiary;color:$ios-text-primary} .secondary-btn:hover{background-color:#f0f0f0;transform:translateY(-1px)} /* 渲染进度卡片 */ .loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:$ios-spacing-xl;text-align:center;gap:$ios-spacing-md} .loading-spinner{width:40px;height:40px;border:3px solid $ios-border;border-top:3px solid $ios-primary;border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} .timeout-warning{background-color:#fff3cd;color:$ios-warning;padding:$ios-spacing-md;border-radius:$ios-radius-md;margin-bottom:$ios-spacing-lg;display:flex;align-items:center;gap:$ios-spacing-sm;border-left:4px solid $ios-warning} .warning-title{font-weight:$ios-font-weight-medium;display:block} .warning-time{font-size:$ios-font-size-sm;display:block} /* 渲染异常反馈模块样式 */ .render-exception-section { background-color: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 24px; } /* 客户反馈和设计师变更记录卡片并排布局 */ .additional-info-section { display: flex; gap: $ios-spacing-xl; margin-bottom: $ios-spacing-xl; margin-top: $ios-spacing-xxl; /* 增加与上方内容的间距 */ width: 100%; align-items: flex-start; padding: $ios-spacing-xl; /* 添加内边距 */ background-color: $ios-background-secondary; /* 添加矩形背景 */ border-radius: $ios-radius-lg; /* 添加圆角 */ border: 1px solid $ios-border; /* 添加边框 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* 添加轻微阴影增加层次感 */ } .feedback-card, .designer-change-card { width: 50%; margin: 0 !important; min-height: 400px; /* 设置最小高度确保两个卡片高度一致 */ display: flex; flex-direction: column; } /* 优化客户反馈卡片内部布局 */ .feedback-card .card-content { flex: 1; display: flex; flex-direction: column; } .feedback-item { background-color: $ios-background; border-radius: $ios-radius-md; padding: $ios-spacing-md; margin-bottom: $ios-spacing-md; border: 1px solid $ios-border; } .feedback-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: $ios-spacing-sm; } .feedback-meta { display: flex; gap: $ios-spacing-sm; flex-wrap: wrap; } /* 优化设计师变更记录卡片内部布局 */ .designer-change-card .card-content { flex: 1; display: flex; flex-direction: column; } .designer-change-card .change-actions { display: flex; gap: $ios-spacing-md; margin-bottom: $ios-spacing-md; flex-wrap: wrap; } .change-item { background-color: $ios-background; border-radius: $ios-radius-md; padding: $ios-spacing-md; margin-bottom: $ios-spacing-md; border: 1px solid $ios-border; } .change-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: $ios-spacing-sm; } /* 空状态样式优化 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: $ios-spacing-xl; height: 200px; background-color: $ios-background-tertiary; border-radius: $ios-radius-md; margin-top: $ios-spacing-md; } .empty-icon { font-size: 48px; margin-bottom: $ios-spacing-md; opacity: 0.6; } /* 响应式调整 */ @media (max-width: 768px) { .additional-info-section { flex-direction: column; } .feedback-card, .designer-change-card { width: 100%; margin-bottom: $ios-spacing-xl !important; } } /* 模型误差检查清单在制作流程进度卡片中的样式 */ .model-check-section { margin-top: $ios-spacing-lg; padding: $ios-spacing-lg; background-color: $ios-background; border-radius: $ios-radius-md; border-left: 4px solid $ios-primary; } .model-check-section h3 { margin-top: 0; margin-bottom: $ios-spacing-md; color: $ios-text-primary; font-size: $ios-font-size-base; font-weight: $ios-font-weight-medium; } .model-check-section .checklist { gap: $ios-spacing-sm; } .model-check-section .checklist-item { padding: $ios-spacing-sm $ios-spacing-md; background-color: $ios-background-tertiary; transition: all 0.2s ease; } .model-check-section .checklist-item:hover { background-color: #f0f0f0; transform: translateX(4px); } .model-check-section .custom-checkbox { width: 18px; height: 18px; } .model-check-section .checklist-text { font-size: $ios-font-size-sm; } .model-check-section .check-status { font-size: $ios-font-size-xs; } .render-exception-section h3 { margin-top: 0; margin-bottom: 16px; color: #333; font-size: 18px; font-weight: 600; } .exception-feedback-form { background-color: white; padding: 16px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 6px; color: #555; font-weight: 500; font-size: 14px; } .exception-select { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background-color: white; cursor: pointer; } .exception-textarea { width: 100%; min-height: 120px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical; font-family: inherit; } .screenshot-upload { display: none; } .upload-btn { display: inline-block; padding: 8px 16px; background-color: #007bff; color: white; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color 0.2s; } .upload-btn:hover { background-color: #0056b3; } .screenshot-preview { margin-top: 12px; position: relative; max-width: 200px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; } .screenshot-preview img { width: 100%; display: block; } .clear-screenshot-btn { position: absolute; top: 5px; right: 5px; background-color: rgba(0, 0, 0, 0.5); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .clear-screenshot-btn:hover { background-color: rgba(0, 0, 0, 0.7); } .submit-feedback-btn { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; } .submit-feedback-btn:hover:not(:disabled) { background-color: #218838; } .submit-feedback-btn:disabled { background-color: #6c757d; cursor: not-allowed; } /* 历史反馈记录样式 */ .exception-history { background-color: white; padding: 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .exception-history h4 { margin-top: 0; margin-bottom: 12px; color: #555; font-size: 16px; font-weight: 600; } .history-list { max-height: 300px; overflow-y: auto; } .history-item { padding: 12px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 12px; transition: border-color 0.2s; } .history-item:hover { border-color: #ddd; } .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .history-type { font-weight: 600; color: #333; font-size: 14px; } .history-time { font-size: 12px; color: #999; } .history-description { font-size: 14px; color: #555; margin-bottom: 8px; line-height: 1.4; } .history-status { font-size: 12px; padding: 4px 8px; border-radius: 3px; display: inline-block; } .history-status.status-pending { background-color: #fff3cd; color: #856404; } .history-status.status-processing { background-color: #d1ecf1; color: #0c5460; } .history-status.status-resolved { background-color: #d4edda; color: #155724; } /* 响应式设计 */ @media (max-width: 768px) { .render-exception-section { padding: 16px; } .form-group { margin-bottom: 12px; } .screenshot-preview { max-width: 150px; } } .progress-bar-container{position:relative;margin-bottom:$ios-spacing-lg} .progress-bar{width:100%;height:12px;background-color:$ios-background-tertiary;border-radius:$ios-radius-full;overflow:hidden} .progress-fill{height:100%;background-color:$ios-primary;border-radius:$ios-radius-full} .progress-percentage{position:absolute;right:0;top:-$ios-spacing-md;font-size:$ios-font-size-sm;font-weight:$ios-font-weight-medium;color:$ios-text-secondary} .progress-details{display:grid;grid-template-columns:1fr 1fr;gap:$ios-spacing-md} .progress-info{display:flex;flex-direction:column;gap:$ios-spacing-xs} .info-label{font-size:$ios-font-size-xs;color:$ios-text-secondary} .info-value{font-size:$ios-font-size-base;color:$ios-text-primary;font-weight:$ios-font-weight-medium} .checklist{display:flex;flex-direction:column;gap:$ios-spacing-md} .checklist-item{display:flex;align-items:center;padding:$ios-spacing-md;border-radius:$ios-radius-md;background-color:$ios-background-tertiary} .custom-checkbox{margin-right:$ios-spacing-md;width:20px;height:20px;accent-color:$ios-primary;border-radius:$ios-radius-sm} .checklist-text{color:$ios-text-primary;font-size:$ios-font-size-base;flex:1} .check-status{font-size:$ios-font-size-sm;font-weight:$ios-font-weight-medium;padding:$ios-spacing-xs $ios-spacing-sm;border-radius:$ios-radius-full} .check-status.passed{background-color:#e6f7e6;color:$ios-success} .check-status.failed{background-color:#ffebee;color:$ios-danger} .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:$ios-spacing-xl;text-align:center;gap:$ios-spacing-md;color:$ios-text-secondary} .empty-icon{font-size:$ios-font-size-xl} .feedback-item{background-color:$ios-background-tertiary;border-radius:$ios-radius-md;padding:$ios-spacing-lg;margin-bottom:$ios-spacing-md} .feedback-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:$ios-spacing-md} .feedback-meta{display:flex;align-items:center;gap:$ios-spacing-sm} .feedback-type{font-size:$ios-font-size-sm;font-weight:$ios-font-weight-medium;color:$ios-text-primary} .feedback-tag{font-size:$ios-font-size-xs;background-color:#e8f0fe;color:$ios-primary;padding:$ios-spacing-xs $ios-spacing-sm;border-radius:$ios-radius-full;font-weight:$ios-font-weight-medium} .feedback-date{font-size:$ios-font-size-xs;color:$ios-text-secondary} .feedback-content{margin-bottom:$ios-spacing-md} .feedback-status{display:flex;align-items:center;gap:$ios-spacing-xs;margin-bottom:$ios-spacing-sm;font-size:$ios-font-size-sm} .status-label{color:$ios-text-secondary} .status-value{color:$ios-text-primary;font-weight:$ios-font-weight-medium} .feedback-countdown{display:flex;align-items:center;gap:$ios-spacing-xs;padding:$ios-spacing-xs $ios-spacing-sm;background-color:#fff3cd;color:$ios-warning;border-radius:$ios-radius-full;font-size:$ios-font-size-xs;margin-bottom:$ios-spacing-md} .countdown-icon{font-size:$ios-font-size-sm} .feedback-details{display:flex;flex-direction:column;gap:$ios-spacing-xs} .detail-item{display:flex;gap:$ios-spacing-sm;font-size:$ios-font-size-sm} .detail-label{color:$ios-text-secondary;width:80px;flex-shrink:0} .detail-value{color:$ios-text-primary;flex:1} .feedback-actions{display:flex;gap:$ios-spacing-md;justify-content:flex-end} .change-actions{display:flex;gap:$ios-spacing-md;margin-bottom:$ios-spacing-lg;flex-wrap:wrap} .change-item{background-color:$ios-background-tertiary;border-radius:$ios-radius-md;padding:$ios-spacing-lg;margin-bottom:$ios-spacing-md} .change-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:$ios-spacing-md} .change-time{font-size:$ios-font-size-sm;color:$ios-text-secondary;font-weight:$ios-font-weight-semibold} .accept-change-btn{background-color:$ios-success;color:white;border:none;padding:$ios-spacing-xs $ios-spacing-md;border-radius:$ios-radius-md;font-size:$ios-font-size-sm;cursor:pointer;font-weight:$ios-font-weight-medium} .accept-change-btn:hover{background-color:#2e7d32;transform:translateY(-1px)} .designer-change-info{display:grid;grid-template-columns:1fr;gap:$ios-spacing-sm;margin-bottom:$ios-spacing-md} .designer-change{display:flex;gap:$ios-spacing-sm;align-items:center} .designer-label{color:$ios-text-secondary;font-size:$ios-font-size-sm;width:80px;flex-shrink:0} .designer-name{color:$ios-text-primary;font-size:$ios-font-size-base;font-weight:$ios-font-weight-medium} .workload-info{font-size:$ios-font-size-sm;color:$ios-text-secondary;margin-bottom:$ios-spacing-md} .achievements{margin-bottom:$ios-spacing-md} .achievements ul{margin:0;padding-left:$ios-spacing-lg} .achievements li{color:$ios-text-primary;font-size:$ios-font-size-sm;margin-bottom:$ios-spacing-xs;position:relative} .change-status{font-size:$ios-font-size-sm;color:$ios-text-secondary;background-color:$ios-background;padding:$ios-spacing-sm;border-radius:$ios-radius-md} /* 分阶段结算记录卡片 */ .settlement-table{overflow-x:auto;border-radius:$ios-radius-md;background-color:$ios-background;border:1px solid $ios-border} .settlement-table table{width:100%;border-collapse:collapse} .settlement-table th,.settlement-table td{padding:$ios-spacing-md;text-align:left;border-bottom:1px solid $ios-border;font-size:$ios-font-size-sm} .settlement-table th{background-color:$ios-background-secondary;font-weight:$ios-font-weight-semibold;color:$ios-text-primary;position:sticky;top:0;z-index:10} .settlement-table td{color:$ios-text-primary;font-weight:$ios-font-weight-regular} .settlement-table tr:last-child td{border-bottom:none} .settlement-table tr:hover td{background-color:#f5f5f5} .status-badge{padding:$ios-spacing-xs $ios-spacing-sm;border-radius:$ios-radius-full;font-size:$ios-font-size-xs;font-weight:$ios-font-weight-medium} .status-pending{background-color:#fff3cd;color:$ios-warning} .status-settled{background-color:#e6f7e6;color:$ios-success} /* 响应式设计 */ @media (max-width: 768px){ .project-detail-container{padding:$ios-spacing-md} .main-content-layout { flex-direction: column; } .left-column, .right-column { width: 100%; } .project-header{flex-direction:column;align-items:flex-start;gap:$ios-spacing-md} .header-actions{width:100%;justify-content:flex-end} .project-info-card .info-grid{grid-template-columns:1fr;gap:$ios-spacing-md} .stage-progress{flex-direction:column;gap:$ios-spacing-lg} .stage-progress::before{display:none} .stage{flex-direction:row;gap:$ios-spacing-md;width:100%;justify-content:flex-start} .stage-icon{margin-bottom:0;width:36px;height:36px;font-size:$ios-font-size-sm} .progress-details{grid-template-columns:1fr;gap:$ios-spacing-md} .feedback-actions,.change-actions{flex-direction:column} .feedback-actions button,.change-actions button{width:100%} .tags-grid{grid-template-columns:1fr} .settlement-table th,.settlement-table td{padding:$ios-spacing-sm;font-size:$ios-font-size-xs} .stage-tag{font-size:$ios-font-size-xs} } /* 滚动条样式 */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:$ios-scrollbar-track;border-radius:$ios-radius-full} ::-webkit-scrollbar-thumb{background:$ios-scrollbar-thumb;border-radius:$ios-radius-full} ::-webkit-scrollbar-thumb:hover{background:$ios-scrollbar-thumb-hover} /* 上传与缩略图样式(新增) */ .upload-section { margin-top: 16px; padding: 12px; background: #fafbfc; border: 1px dashed #e0e3e8; border-radius: 8px; } .upload-header { display:flex; align-items:center; gap:12px; margin-bottom: 8px; } .upload-header h4 { margin:0; font-size:$ios-font-size-base; } .upload-header .hint { color:$ios-text-secondary; font-size:$ios-font-size-xs; } .upload-actions { margin-bottom: 12px; } .thumb-list { display:flex; gap:12px; flex-wrap:wrap; } .thumb-item { width:120px; background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; } .thumb-item img { width:100%; height:88px; object-fit:cover; background:#f2f2f2; } .thumb-meta { display:flex; flex-direction:column; gap:4px; padding:6px 8px; } .thumb-meta .name { font-size:$ios-font-size-xs; color:$ios-text-primary; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .thumb-meta .size { font-size:$ios-font-size-xs; color:$ios-text-secondary; } button.link { background:none; border:none; color:$ios-primary; cursor:pointer; padding:6px 8px; text-align:left; } button.link.danger { color:$ios-danger; } /* 弹窗样式(新增) */ .modal-backdrop { position:fixed; inset:0; background: rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; z-index: 999; } .modal { width: 720px; max-width: calc(100% - 48px); background:#fff; border-radius:12px; box-shadow: 0 12px 24px rgba(0,0,0,0.15); overflow:hidden; } .modal-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid $ios-border; } .modal-body { padding:16px; } .modal-footer { padding:12px 16px; border-top:1px solid $ios-border; display:flex; gap:12px; justify-content:flex-end; } /* 兼容暗色系(若未来启用) */ @media (prefers-color-scheme: dark) { .upload-section { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); } .thumb-item { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } .modal { background: #111315; } } /* 阶段详情:与上方阶段横向对齐的横向卡片列表 */ .stage-details-grid{ display:flex; gap:$ios-spacing-md; align-items:stretch; padding-top:$ios-spacing-md; overflow-x:auto; scrollbar-width:none; /* Firefox */ -ms-overflow-style:none; /* IE and Edge */ } .stage-details-grid::-webkit-scrollbar{ display:none; } .stage-details-cell{ flex:0 0 280px; } @media (max-width: 768px){ .stage-details-grid{flex-direction:column;overflow-x:visible} .stage-details-cell{flex:1 1 auto} } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; } .stage-details-cell{ flex:1 1 auto; }