| | |
| | | <template> |
| | | <div class="app-container metric-maintenance"> |
| | | <el-row :gutter="16" class="metric-maintenance-row"> |
| | | <!-- 左侧:检测标准列表 --> |
| | | <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="left-col"> |
| | | <div class="left-panel"> |
| | | <div class="toolbar"> |
| | | <div class="toolbar-left"></div> |
| | |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <!-- 右侧:标准参数列表 --> |
| | | <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="right-col"> |
| | | <div class="right-panel"> |
| | | <div class="right-header"> |
| | | <div class="title">标准参数</div> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <!-- 新增 / 编辑检测标准 --> |
| | | <StandardFormDialog |
| | |
| | | |
| | | <style scoped> |
| | | .metric-maintenance { |
| | | display: flex; |
| | | gap: 16px; |
| | | min-width: 0; /* 允许 flex 子元素收缩 */ |
| | | padding: 0; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .metric-maintenance-row { |
| | | width: 100%; |
| | | } |
| | | |
| | | .metric-maintenance-row .left-col, |
| | | .metric-maintenance-row .right-col { |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .left-panel, |
| | | .right-panel { |
| | | flex: 1; |
| | | min-width: 0; /* 允许 flex 子元素收缩 */ |
| | | min-width: 0; |
| | | background: #ffffff; |
| | | padding: 16px; |
| | | box-sizing: border-box; |
| | | overflow: hidden; /* 防止内容溢出 */ |
| | | } |
| | | |
| | | /* 低分辨率适配 */ |
| | | @media (max-width: 1400px) { |
| | | .metric-maintenance { |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .left-panel, |
| | | .right-panel { |
| | | width: 100%; |
| | | min-width: 0; |
| | | } |
| | | overflow: hidden; |
| | | height: 100%; |
| | | min-height: 400px; |
| | | } |
| | | |
| | | @media (max-width: 768px) { |
| | | .metric-maintenance { |
| | | gap: 12px; |
| | | } |
| | | |
| | | .left-panel, |
| | | .right-panel { |
| | | padding: 12px; |