elementUI的el-tree，el-table和el-pagination，el-radio之魔改篇

1.el-tree

html

        

          
        
        

          
        
      

script

css
     
/* 修改el-tree样式 */
.el-tree {
  background: none !important;
  color: #A5CAE7 !important;
  font-size: 0.21875rem !important;
}

.el-tree-node:focus>.el-tree-node__content {
  background-image: linear-gradient(to right, #4491F9, #43BFFF) !important;
  color: #FFFFFF;
  font-size: 0.21875rem !important;
}

.el-tree-node__content:hover {
  background: #4491F9 !important;
}

.el-input__inner {
  margin-top: 0.15625rem;
  margin-left: 0.234375rem;
  background: #00253F !important;
  border: 1px solid #00253F !important;
  width: 90% !important;
  color: #A5CAE7 !important;
}

.el-input--small .el-input__inner {
  color: #A5CAE7 !important;
}

.el-input__icon {
  margin: 0.09375rem 0 0 0.25rem;
  color: #A5CAE7;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #A5CAE7 !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #A5CAE7 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #A5CAE7 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #A5CAE7 !important;
}

2.el-table，el-pagination，el-radio

html





  
  
  
  
  
  
  



  

    

    
能耗分析
    
    

      
      

        

          
{{company}}
          

            
              
                
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
            
            

              
              
            
          
        
      
      
      

        

          

            
主卡油耗趋势

            
              月
              年
            
          
          

          

        
      
    

  

css
/* 选择按钮 */

.el-radio-group {
  position: absolute;
  right: 2%;
  margin-top: -2%;
  border-radius: 0px !important;
}

.el-radio-button .el-radio-button__inner {
  border-radius: 0px !important;
}

.el-radio-button__inner {
  background-color: #151D39 !important;
  border: 1px solid #1868AE !important;
  color: #ffffff !important;
  font-size: 0.21875rem !important;
  padding: 0.078125rem 0.109375rem !important;
}

.el-radio-button {
  margin-left: 0.15625rem !important;
}

.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  background-color: #1868AE !important;
  box-shadow: none !important;
}

/* el-table样式*/

.table_box .el-table .success-row {
  background: #163E65;
}

.el-table__header {
  width: 4.8125rem !important;
}

.table_box .el-table__body {
  width: 4.8125rem !important;
}

.el-table__header tr,
.el-table__header th {
  padding: 0.12rem 0 !important;
}

.el-table__body tr,
.el-table__body td {
  padding: 0.12rem 0 !important;
  cursor: pointer !important;
}

.el-table .cell {
  padding-right: 0px !important;
}
/* .el-table tbody tr {
  pointer-events: none;
} */

.table_box .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #4C97E1 !important;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  z-index: 0 !important;
}


.table_box .el-table__body tbody tr:nth-child(even) {
  background: #0C2C56 !important;
}
.table_box .el-table td,
.table_box .el-table th.is-leaf,
.table_box .el-table--border,
.table_box .el-table--group {
  border-color: #0C2C56;
}

.table_box .el-table--border::after,
.table_box .el-table--group::after,
.table_box .el-table::before {
  background-color: #0C2C56;
}

.table_box .el-table td,
.table_box .el-table th.is-leaf {
  border: none !important;
}
.table_box .el-table__empty-block {
  background: #0C2C56 !important;
}
/*重写分页样式*/
.el-pagination.is-background .el-pager {
  background-color: #4C97E1 !important;
  color: #FFF !important;
}

.el-pagination__total {
  color: #fff;
}

.pager-box .el-pagination .el-input__inner {
  background: #4C97E1;
  border: 1px solid #4C97E1;
  color: #fff;
}

.el-pagination__jump {
  color: #fff;
}

.el-select .el-input .el-select__caret {
  color: #fff;
}

.pager-box {
  text-align: center;
  margin-top: 8px;
}

.el-pager li {
  min-width: 0.390625rem !important;
}

.pager-box .button,
.pager-box .el-pager li {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #4C97E1;
}

.pager-box .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #062244 !important;
}

.pager-box .button,
.pager-box .el-pager li:not(.disabled).active {
  background-color: #4C97E1 !important;
  color: #fff !important;
  border: 1px solid #4C97E1;
}

.pager-box .el-pagination button:disabled {
  color: #fff;
  background-color: #4C97E1;
}

.pager-box .el-pagination .btn-next,
.pager-box .el-pagination .btn-prev {
  background: #4C97E1 !important;
  color: #fff !important;
}
.pager-box .el-pagination__total {
  color: #ffffff !important;
}