/* 项目详情页面样式文件 - 简化版本,直接针对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; }