垂直滚动条效果

schangxiang@126.com

2025-05-17 ba72e3d15c5e5336201ab2e48c040fcfde423fc7

 PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.module.scss

@@ -1,6 +1,9 @@
.pipeAccessoryAssemblyContent { 
  width: 100%; 
  height: 100%; 
  // height: 100% !important; 
  // overflow-y: auto !important; /* 内容超出时显示滚动条 */
  // padding-bottom: 20px; /* 避免内容被底部遮挡 */
 
  .pipeAccessoryAssemblyList { 
    width: 100%; 
@@ -18,6 +21,24 @@
    justify-content: flex-end; 
    align-items: center; 
  } 

  .h5Form {
    display: flex;
    flex-direction: column;
    gap: 20px; // 表单项之间的间距

    .el-form-item {
      margin-bottom: 0; // 移除默认的底部边距
      width: 100%; // 占满父容器宽度
    }

    .el-form-item__label {
      display: block;
      text-align: left;
      margin-bottom: 8px;
      font-weight: 500;
    }
  }
} 
 
.tagBox { 
@@ -112,46 +133,121 @@
  } 
} 
  
.pipeAccessoryAssemblyContent {
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  max-width: 500px; // 限制最大宽度
  margin: 0 auto; // 水平居中
  width: 90%; // 响应式宽度

  .h5Form {
    display: flex;
    flex-direction: column;
    gap: 20px; // 表单项之间的间距

    .el-form-item {
      margin-bottom: 0; // 移除默认的底部边距
      width: 100%; // 占满父容器宽度
.newPageContent {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background-color: white;

  .info-block {
    background-color: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    padding: 20px;
    width: calc(33.33% - 20px);

    .block-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .el-form-item__label {
      display: block;
      text-align: left;
      margin-bottom: 8px;
      font-weight: 500;
    .info-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      .info-tag {
        display: flex;
        align-items: center;
        gap: 5px;

        .tag-label {
          font-weight: bold;
        }
      }
    }

    .action-buttons {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }

    .equipment-image {
      width: 100%;
      height: auto;
      margin-top: 20px;
    }

    .status-normal {
      color: green;
    }
  }

  .formInput {
    width: 100%; // 输入框占满父容器宽度
  }
  .process-table {
    width: 100%;
    margin-top: 20px;

  .buttonGroup {
    display: flex;
    justify-content: center;
    gap: 16px; // 按钮间距
    margin-top: 16px;

    .actionButton {
      flex: 1; // 按钮平均分配空间
      max-width: 200px; // 限制按钮最大宽度
    .el-table {
      border: 1px solid #eaeaea;
      border-radius: 5px;
    }
  }
}
}


.modelRrow {
  display: flex; /* 弹性布局 */
  gap: 20px; /* 控件间距 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 12px; /* 底部间距 */
  width: 100%;

  .el-form-item {
    flex: 1 !important; /* 均分空间 */
    margin-bottom: 0;
    max-width: none; // 移除最大宽度限制
  }

  .el-select {
    width: 100%; // 确保Select占满父容器宽度
    
    // 移除可能影响宽度的内部样式
    .el-input__wrapper {
      width: 100%;
    }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .model-row {
      flex-wrap: wrap;
      
      .el-form-item {
        flex: 1 0 calc(50% - 10px); // 在中等屏幕上每行显示2个
        margin-bottom: 10px;
      }
    }
  }
  
  @media (max-width: 768px) {
    .model-row {
      flex-direction: column;
      
      .el-form-item {
        width: 100%; // 在小屏幕上每行显示1个
      }
    }
  }
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}