forgeplus-react/src/forge/DevOps/ops.scss

.opsPanel
{
  margin:20px auto;
  width: 1200px;
  // 开始激活页面
  .activatePanel{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:60px 0px;
  }
  .disposePanel{
    .language{
      display: flex;
      li{
        margin-right: 20px;
      }
    }
    .editorBody{
      border:1px solid #ddd;
      margin:20px 0px;
      .editorHead{
        background-color: #F1F8FF;
        height: 48px;
        line-height: 48px;
        display: flex;
        justify-content: space-between;
        padding:0px 20px;
        border-bottom: 1px solid #ddd;
      }
      .monaco-editor{
        width:1138px!important;
      }
    }
    .ant-modal-close{
      top:7px;
    }
    .listPart{
      .listNav{
        display: flex;
        li{
          background-color: #fafafa;
          border:1px solid #eee;
          border-radius: 5px;
          height: 38px;
          line-height:38px;
          padding:0px 20px;
          color: #333;
          margin-right: 20px;
          cursor: pointer;
          &:last-child{
            margin-right: 0px;
          }
          &.active{
            border:1px solid #5091FF;
            color: #5091FF;
            background-color: #fff;
          }
        }
      }
      .normalTable{
        margin-top: 20px;
        .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
          padding:10px 5px;
          color:#333;
        }
        .ant-table-thead{
          border:1px solid rgba(238,238,238,1)
        }
      }
    }
  }
  // 列表
  .listPart{
    .statusTag{
      display: flex;
      padding:0px 16px;
      height: 32px;
      line-height: 32px;
      border-radius:20px;
      float: left;
      i{
        font-size: 20px!important;
        margin-right: 7px;
      }
      &.running{
        background:#F1F8FF;
        border:1px solid #5091FF;
        color: #5091FF;
      }
      &.Preparing{
        background:rgba(255,248,244,1);
        border:1px solid rgba(255,110,33,1);
        color:rgba(255,110,33,1) ;
      }
      &.pass{
        background:#EEFDF5;
        border:1px solid #28BD6C;
        color:#28BD6C ;
      }
      &.failed{
        background:#FCEEEE;
        border:1px solid #F73030;
        color:#F73030 ;
      }
    }
    
  }

}
// ops详情
.opsDetailPanel{
  height: 100vh;
  background-color: #114879;
  .opsInfos{
    height: 60px;
    background-color: #114879;
    color:#fff;
    padding:0px 20px;
  }
  .opsSection{
    height:calc( 100% - 60px );
    background-color: #fff;
    display: flex;
    section{
      height: 100%;
      float: left;
      &.leftSection{
        width:100%;
        .leftheader{
          background-color: #F1F8FF;
          padding:10px 20px;
          .nest{
            color: #888888;
            margin-right: 18px;
            &>span{
              color: #333;
            }
          }
        }
        .leftMainContent{
          padding:14px 20px;
          .contentBranch{
            border:1px solid #eee;
            background-color: #fafafa;
            padding:0px 18px;
            height: 40px;
            border-radius: 3px;
            color:#888;
            i{
              font-size: 16px;
              color:#BBB;
              margin-right: 10px;
            }
            .branchname{
              color:#333;
              margin-right: 15px;
            }
            .branchsha{
              color:#FF6E21;
            }
          }
        }
        .leftMenu{
          li.ant-menu-item,.ant-menu-submenu{
            padding:0px 13px 0px 20px!important;
            position: relative;
            color: #333;
          }
          .ant-menu-submenu-title{
            margin:0px;
            padding:0px 0px 0px 20px!important
          }
          .ant-menu-submenu-arrow{
            position: absolute;
            left: 2px;
          }
          .ant-menu.ant-menu-sub{
            .ant-menu-item:hover{
              background-color: #F1F8FF;
            }
          }
        }
        .statuslineColor{
          display: inline-block;
          height: 20px;
          line-height: 20px;
          padding:0px 10px;
          border-radius: 11px;
          font-size: 12px;
          margin-left: 6px;
          &.pass{
            border:1px solid rgba(40,189,108,1);
            color:rgba(40,189,108,1);
          }
          &.failed{
            border:1px solid #F73030;
            color:#F73030;
          }
          &.running{
            border:1px solid #5091FF;
            color:#5091FF;
          }
          &.Preparing{
            border:1px solid rgba(255,110,33,1);
            color:rgba(255,110,33,1);
          }
        }
      }
      &.rightSection{
        width:100%;
        background-color: #081930;
        .rightMainContent{
          padding:24px 30px;
          & > div{
            margin-bottom: 12px;
            .items{
              height: 45px;
              line-height: 45px;
              padding:0px 24px;
              background:rgba(24,41,62,1);
              border-radius:5px;
              color:#fff;
              cursor: pointer;
              i{
                font-size: 13px;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
    .Resizer.vertical{
      position: relative;
    }
    .Resizer.vertical:hover:before{
      background: #eee;
    }
    .Resizer.vertical:before {
      content: "";
      border-radius: 50%;
      background: hsla(0,0%,92.2%,.3);
      width: 24px;
      height: 24px;
      position: absolute;
      z-index: 999;
      top: 50%;
      margin-top: -12px;
      right: -12px;
    }
    .Resizer.vertical::after{
      position: absolute;
      content: "\e712";
      font-family: iconfont;
      font-size: 10px;
      transform: scale(.8);
      top: 50%;
      margin-top: -10px;
      color: #666;
      right: -12px;
      opacity: .3;
      z-index: 1000;
      cursor: col-resize;
    }
  }
}