JG-BASE-SERVICE-WEB/packages/Basic/assets/styles/tableBase.scss

@mixin button{
  width: 75px ;
    height: 28px ;
    border-radius: 4px ;
    border-width: 1px;
    border-style: solid;
    padding-left: 0px ;
    padding-right: 0px;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 12px;
    font-family: Microsoft Yahei UI;
    
}
@mixin scrollBar {
  &:hover{
    &::-webkit-scrollbar-thumb {
      background-color: hsla(220, 100%, 62%, .3);
    }
  }
  
  &::-webkit-scrollbar-track-piece {
    background: rgba(255,255,255,0);
    
  }
  &::-webkit-scrollbar {
    width: 7px ;
    
  }
  &::-webkit-scrollbar-thumb {
    background-color: hsla(220, 100%, 62%, 0);
    transition: all .25s;
    -webkit-transition: all .25s ease-in-out 0s;
    border-radius: 20px;
    &:hover{
      background-color: hsla(220, 100%, 62%, .6);
    }
  }
}
.Myel-button{
   
    @include button;
  
}
.Myel-row{
  margin-bottom: 8px;
  &>button{
    @include button;
  }
}
 .Myel-dialog{
  // .el-dialog{
  //   height:80%
  // }
  @include scrollBar();
  border-radius: 8px !important;
  
  .el-dialog__footer{
    margin-bottom: 0px;
    .el-button{
      border-radius: 4px;
      @include button;
    }
    .el-button--default{
      
      color: hsla(220, 100%, 62%, 1);
      border-color: hsla(220, 100%, 62%, 1);
      
    
    }
    
  }
  .el-dialog__body{
    padding: 16px;
    height: 550px;
    overflow: auto;
    @include scrollBar()
  }
  .el-dialog__header{
    height: 40px;
    margin: 0px ;
    padding:0px;
    span{
      line-height: 40px;
      font-size: 14px;
      margin-left: 16px;
      font-weight: bold;
      color: hsla(0, 0%, 100%, 1);
    }
    button{
      
       transform: scale((20/16),(20/16));
      top: 10px;
      i{
        color: hsla(0, 0%, 100%, 1) ;
      }
     
    }
  }
}
 .Myel-form{
   position: relative;
  #right{
    width: 220px;
    height: 35px;
    .el-form-item__content{
      position: absolute;
      text-align: right;
    right: 0px;
    }
    
  }
  .el-form-item{
    margin-bottom: 16px;
    margin-right: 0px;
    text-align: left;
    .el-form-item__label{
      color: hsla(222, 15%, 50%, 1);
      width: 120px ;
      padding-right: 16px;;
      height: 30px;
    }
    
    .el-form-item__content{
      width: 220px;
      height: auto;
      &>.el-input{
        width: 220px;
        &>input{
          width: 220px;
        height: 30px ;
        border-radius: 4px;
        border:1px solid hsla(212, 26%, 80%, 1);
        }
      }
      .el-date-editor{
        width: 100%;
        height: 30px;
        line-height: 30px;
        &>i{
          height: 30px;
          line-height: 30px;
        }
        &>span{
          height: 30px;
          line-height: 30px;
        }
      }
      textarea{
        width: 220px;
        height: 60px;

        border-radius: 4px;
        border:1px solid hsla(212, 26%, 80%, 1);
      }
      &>button{
        @include button;
      }
      .el-button--default{
        
        color: hsla(220, 100%, 62%, 1);
        border-color: hsla(220, 100%, 62%, 1);
      }
      &>.el-select{
        line-height: 30px;
        .el-select__tags{
          height: 30px;
          line-height: 30px;
        }
        &>.el-input{
            width: 220px;
            height: 30px ;
          .el-input__suffix{
            line-height: 30px;
          }
          input{
            width: 220px;
            height: 30px ;
            border-radius: 4px;
            border:1px solid hsla(212, 26%, 80%, 1);
            line-height: 30px;
            }
        }
        
      }
      
    }
  }
}
  #Mypagination-container{
    height: 32px !important;
    margin-top: 0px !important;
    padding-top: 0px !important;
    padding-right: 0px !important;
    
    .el-pagination{
      &>span{
        margin: 0px;
        font-size: 14px !important;
      }
      &>ul{
        
        &>li{
          font-size: 14px !important;
          padding: 0px;
          margin:0px 2px
        }
      }
      
      transform: scale(0.7,0.7) !important;
      transform-origin: 100% 0;
      .active{
        background-color: hsla(220, 100%, 62%, 1) !important;
        
      }
    }
  }
  


 .Myel-table{
   
  tr.el-table__row.el-table__row--striped{
    
    td.el-table__cell{
      background:  hsla(220, 33%, 98%, 1);
      line-height: 38px;
  }
  }
  .el-table__fixed-right{
    height: 100% !important;
    tr.el-table__row--striped{
      td.el-table__cell{
        background:  hsla(220, 33%, 98%, 1);
        line-height: 38px;
    }
    }
    
  }
  .el-table__fixed{
    height: 100% !important;
    tr.el-table__row--striped{
      td.el-table__cell{
        background:  hsla(220, 33%, 98%, 1);
        line-height: 38px;
    }
    }
  }
  td.el-table__cell{
    height: 38px !important;
    padding:0px;
    font-family: 'Microsoft Yahei UI';
    font-size: 14px ;
    line-height: 38px;
    .cell{
      padding: 0px;
      height: 38px;
      line-height: 38px !important;
      
    }
    
    
  }
  
  border-radius: 8px;
  .el-table__header{
    .el-table__cell{
      height: 40px !important;
      background-color: hsla(222, 33%, 92%, 1);
      color: hsla(222, 15%, 50%, 1);
      font-family: 'Microsoft Yahei UI';
      font-weight: bold;
      font-size: 14px ;
      .cell{
        padding: 0px !important;
      }
    }
  }
  .el-table__body-wrapper{
    @include scrollBar();
    &::-webkit-scrollbar{
     height: 12px; 
    }
     color: hsla(255, 24%, 16%, 1);
    
    // tr.el-table__row--striped.el-table__row{
    //   td.el-table__cell{
    //     background-color: hsla(220, 33%, 98%, 1) ;
    //   }
        
      
    // }
  }
}
.Myavue{
  .avue-crud__pagination{
    @extend #Mypagination-container
  }
  .el-table{
    tr.el-table__row.el-table__row--striped{
    
      td{
        background:  hsla(220, 33%, 98%, 1);
        line-height: 38px;
    }
    }
    .el-table__fixed-right{
      height: 100% !important;
      tr.el-table__row--striped{
        td{
          background:  hsla(220, 33%, 98%, 1);
          line-height: 38px;
      }
      }
      
    }
    .el-table__fixed{
      height: 100% !important;
      tr.el-table__row--striped{
        td{
          background:  hsla(220, 33%, 98%, 1);
          line-height: 38px;
      }
      }
    }
    td.el-table__cell{
      height: 38px !important;
      padding:0px;
      font-family: 'Microsoft Yahei UI';
      font-size: 14px ;
      line-height: 38px;
      .cell{
        padding: 0px;
        height: 38px;
        line-height: 38px !important;
        
      }
      
      
    }
    
    border-radius: 8px;
    .el-table__header{
      .el-table__cell{
        height: 40px !important;
        background-color: hsla(222, 33%, 92%, 1);
        color: hsla(222, 15%, 50%, 1);
        font-family: 'Microsoft Yahei UI';
        font-weight: bold;
        font-size: 14px ;
        .cell{
          padding: 0px !important;
        }
      }
    }
    .el-table__body-wrapper{
      @include scrollBar();
      &::-webkit-scrollbar{
       height: 12px; 
      }
       color: hsla(255, 24%, 16%, 1);
      
      // tr.el-table__row--striped.el-table__row{
      //   td.el-table__cell{
      //     background-color: hsla(220, 33%, 98%, 1) ;
      //   }
          
        
      // }
    }
    
  }
  .avue-form__group{
    display: flex !important;
    position: relative !important;
    flex-wrap: wrap;
    .el-col{
      width: 320px ;
      .el-form-item__content{
        width: 220px;
        input{
          height: 30px;
        }
      }
      input{
        width: 220px;
        
      }
    }
    .el-col:nth-last-child(1){
      width: 180px;
      height: 46px;
      position: static !important;
      .el-form-item{
        width: 180px;
        position: absolute;
        text-align: right;
        right: 0px;
        .el-form-item__content{
          width: 180px;
          
          
        }
      }
      
      .el-button{
        @extend .Myel-button
      }
      .el-button--default{
        color: hsla(220, 100%, 62%, 1);
        border-color: hsla(220, 100%, 62%, 1);
      }
    }
    }
    
    
  // }
  // .el-dialog{
  //   @extend .Myel-dialog
  // }
  
    
  
}
body>.atooltip{
  border-width: 0px !important;
  border-radius: 4px;
  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.2);
}