Merge branch 'master' of http://222.71.245.114:9086/r/HIA24016N_PipeLineDemo

zs

2025-05-18 4b3fd35893972bb05fd7ab89dc624ab805093ff3

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,253 @@
.pipeAccessoryAssemblyContent { 
  width: 100%; 
  height: 100%; 
  // height: 100% !important; 
  // overflow-y: auto !important; /* å†…容超出时显示滚动条 */
  // padding-bottom: 20px; /* é¿å…å†…容被底部遮挡 */
 
  .pipeAccessoryAssemblyList { 
    width: 100%; 
    height: calc(100% - 70px); 
  } 
  .headerContent { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 43px; 
  } 
  .header { 
    margin-bottom: 12px; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
  } 

  .h5Form {
    display: flex;
    flex-direction: column;
    gap: 20px; // è¡¨å•é¡¹ä¹‹é—´çš„间距

    .el-form-item {
      margin-bottom: 0; // ç§»é™¤é»˜è®¤çš„底部边距
       width: 100% !important; // å æ»¡çˆ¶å®¹å™¨å®½åº¦
    }

    .el-form-item__label {
      display: block;
      text-align: left;
      margin-bottom: 8px;
      font-weight: 500;
    }
  }
} 
 
.tagBox { 
  width: auto; 
  min-width: 80px; 
  height: 24px; 
  background: #ffffff; 
  border-radius: 19px 19px 19px 19px; 
  opacity: 1; 
  border: 1px dashed #bcc4cc; 
  width: 50px; 
  height: 20px; 
  font-size: 14px; 
  font-family: PingFang SC, PingFang SC; 
  font-weight: 400; 
  color: #5a84ff; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  // cursor: pointer; 
} 
 
.group { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
} 
 
.groupTable { 
  width: 100%; 
} 
 
.overBox { 
  width: 100%; 
  height: calc(100% - 20px); 
  overflow: auto; 
  :global(.cs-collapse-item__header) { 
    background-color: #f1f1f1; 
    padding: 0 20px; 
    height: 35px; 
    font-size: 16px; 
    font-family: PingFang SC, PingFang SC; 
    font-weight: 500; 
  } 
  :global(.cs-collapse-item__content) { 
    padding-bottom: 0px; 
  } 
} 
.groupHeader { 
  width: 100%; 
  height: 30px; 
  background: #ccc; 
} 
 
.hideBlock { 
  display: none; 
} 
.queryForm { 
  padding: 10px; 
  background: #f5f7fa; 
  margin-bottom: 0px; 
  border-radius: 4px; 
   
  .el-form-item { 
    margin-right: 20px; 
    margin-bottom: 0; 
     
    // ç»Ÿä¸€è¾“入框和选择框的宽度 
    .el-input, .el-select { 
      width: 200px; // è®¾ç½®ç»Ÿä¸€çš„宽度 
    } 
     
    // é€‰æ‹©æ¡†å†…部输入框样式 
    .el-select .el-input__wrapper { 
      height: 32px; // ä¸Žè¾“入框高度一致 
      padding: 1px 11px; // ä¸Žè¾“入框内边距一致 
    } 
     
    // æ—¥æœŸé€‰æ‹©å™¨å®½åº¦ 
    .el-date-editor { 
      width: 220px; 
    } 
  } 
} 
 
// å¦‚果需要更精确的控制，可以单独设置 
.formItem { 
  width: 200px; 
   
  &.el-input, &.el-select { 
    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;
    }

    .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;
    }
  }

  .process-table {
    width: 100%;
    margin-top: 20px;

    .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;
}