react页面布局

.dailyTrain-safety{
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url('/src/assets/safetyManage/bjt.png');
  background-repeat: no-repeat;

     .dailyTrain-safty-content {
        height: 100%;
        .dailyTrain-top{
          height: 2%;
          width: 100%;
        
        }

        .dailyTrain-bottom{
          height: 93%;
          width:100%;
          position: relative;
         
         

          .dailyTrain-bottom-left {
               height: 98%;
               width: 47%;
               position: absolute;
               left: 2.6%;
               border:2px solid rgba(0,185,255,0.3);
                .dailyTrain-bottom-left-content {
                    height: 100%;

                    .one-div {
                      height: 9%;
                      // border:2px solid blue;
                      width: 100%;
                      display: flex;
                      background: #222b51 !important;
                      
                        .search-one {
                          height: 100%;
                          width: 30%;
                          position: relative;
                          text-align: center;
                          /* vertical-align: middle; */
                          top: 29%;


                           
                           .search-one-button{
                              background-image: url('/src/assets/safetyManage/sousuo.png');
                              background-repeat: no-repeat !important;
                              right: 26%;
                              height: 20px;
                              position: relative;
                              width: 20px;
                              /* margin-top: 10%; */
                              margin-top: -1%;
                              float: right;
                              /* padding-left: 8%; */
                              top: 11%;
                          
                             
                           }

                           .search-one-input{
                              width: 100%;

                              .ant-input-affix-wrapper .ant-input-suffix{
                                position: absolute;
                                padding-right: 24px;
                                top: 50%;
                                transform: translateY(-50%);
                                line-height: 0;
                                color: rgba(0, 0, 0, 0.65);
                              }

                              .ant-input-affix-wrapper {
                                padding: 0;
                                margin: 0;
                                font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
                                font-size: 12px;
                                font-variant: tabular-nums;
                                line-height: 1.5;
                                color: rgba(0, 0, 0, 0.65);
                                list-style: none;
                                box-sizing: border-box;
                                position: relative;
                                display: inline-block;
                                width: 50;
                                padding-left: 24px;
                                padding-right: 24px;
                            }

                              .ant-input-search {
                                .anticon-search {
                                  &::before {
                                    position: relative;
                                    display: inline-block;
                                    background: url('/src/assets/safetyManage/sousuo.png') no-repeat;
                                    width: 20px;
                                    height: 20px;
                                    background-size: 100% 100%;
                                   
                                    top: 0px;
                                    content: '' !important;
                                  }
                                }
                              }

                              .ant-input {
                                // width: 10.7rem;
                                height: 30px;
                                // position: relative;
                                font-size:10px;
                                font-family:Microsoft YaHei;
                                font-weight:bold;
                            // line-height:50px;
                                 color:rgba(225,231,232,1);
                                 -webkit-text-stroke:1 rgba(0,0,0,0.00);
                                 text-stroke:1 rgba(0,0,0,0.00);
                                 opacity:1;
                                background: rgba(0,185,255,0.3) !important;
                                border-radius: 17px;
                                left: 34%;
                                .anticon:before {
                                  margin-top: 1px;
                                }
                                border-color:rgba(0,185,255,0.3)
                              }
                              
                           }

                         
                          
                        }

                        .search-two {
                          height: 100%;
                          width: 30%;
                          // border:2px solid red;               
                          left: 2%;
                          position: relative;
                          top: 29%;

                          .amos-popover-trigger {
                            border-color:rgba(0,185,255,0.3);
                            font-size:10px;
                            font-family:Microsoft YaHei;
                            font-weight:bold;
                            // line-height:50px;
                            color:rgba(225,231,232,1);
                            -webkit-text-stroke:1 rgba(0,0,0,0.00);
                            text-stroke:1 rgba(0,0,0,0.00);
                            opacity:1;
                            width: 74%;
                            
                          }
                     

                           .aficon-down:before {
                            position: relative;
                            display: inline-block;
                            background: url('/src/assets/safetyManage/xiangxia.png') no-repeat;
                            width: 20px;
                            height: 20px;
                            background-size: 100% 100%;                      
                            top: 4px;
                            content: '' !important;
                          }
                          .search-select-style {
                            background:rgba(0,185,255,0.3);
                            opacity:1;
                            border-radius:17px;
                            background:rgba(0,185,255,0.3);
                            
                           

                         

                            
                          }
                        }
                        .search-three {
                          position: relative;
                          height: 100%;
                          width: 41%;
                          top: 29%;
                          margin-left: -3%;

                          .ant-calendar-picker-input{
                            background-color: rgba(0,185,255,0.3);
                            border-color:rgba(0,185,255,0.3)
                            
                          }

                          .ant-input {
                            font-size:10px;
                            font-family:Microsoft YaHei;
                            font-weight:bold;
                            // line-height:50px;
                            color:rgba(225,231,232,1);
                            -webkit-text-stroke:1 rgba(0,0,0,0.00);
                            text-stroke:1 rgba(0,0,0,0.00);
                            border-radius: 17px;
                            width: 102%;
                          }

                          .ant-calendar-picker-icon:after {
                            position: relative;
                            display: inline-block;
                            background: url('/src/assets/safetyManage/rjd.png') no-repeat;
                            background-size: 100% 100%;
                            width: 18px;
                            height: 20px;
                            bottom: 4px;
                            right: -2px;
                            content: '' !important;
                        }
                          .three-font {
                            font-size:15px;
                            font-family:Microsoft YaHei;
                            font-weight:400;
                            line-height: 23px;
                            color:rgba(255,255,255,1);
                          }
                          .ant-calendar-picker-icon{
                            // background-image: url('/src/assets/safetyManage/sousuo.png');
                            // background-repeat: no-repeat !important;
                            border-color:rgba(0,185,255,0.3)
                          
                          }
                         }

                      

                    }

                    .two-div {
                      height: 91%;
                      // border:2px solid green;
                   

                    }

                }
               
              
              
          }

          .dailyTrain-bottom-right {
   
               height: 98%;
               width: 47%;
               left: 51%;
               border:2px solid rgba(0,185,255,0.3);
               position: absolute;
               .dailyTrain-bottom-right-content {
                height: 100%;

                .one-div {
                  height: 9%;
                  // border:2px solid blue;
                  width: 100%;
                  display: flex;
                  background: #222b51 !important;
                  
                   .content-font-wenzi {
                    font-size:10px;
                    font-family:Microsoft YaHei;
                    font-weight:bold;
                    // line-height:50px;
                    color:rgba(225,231,232,1);
                    display: inline-block;
                    margin-top: 4%;
                    margin-left: 4%;
                   }

                  

                }

                .two-div {
                  height: 91%;
                  // border:2px solid green;
                  .ant-table-content {
                    height: 100%;
                
                    //滚动条特殊调整
                    .ant-table-body {
                      // max-height: 500px !important ;
                      overflow-y: scroll !important; 
                      background:transparent!important;
                
                      table {
                        width: 300px;
                        border-color: transparent !important;
                
                        td {
                          border-color: transparent !important;
                
                        }
                      }
                    }
                  }
                   
                 
                
               

                }

            }
              
          }
        }
        
        
     }
     
}