interlock_client/src/assets/less/interLock.less

/**IoT Edge相关 修改框架 */
/**
  .iotmenu-content-layout{
    .ant-btn-primary{
      background: linear-gradient(0deg,rgba(1,159,243,.4),rgba(138,210,249,.4)) !important;
      background-color: #0fabfe!important;
      border-color: #0fabfe!important;
    }
    .ant-card:not(.topo-card){
      border: 1px solid #cadae6;
      box-shadow: 0 3px 8px 0 rgba(2,72,109,.15);
    }
  } 
*/

/* flex布局 */
.u-flex,.u-flex-jac,.u-flex-jab,.u-flex-jaa,.u-flex-cjac,.u-flex-cjab{ display: flex; }
.fd-column,.u-flex-cjac,.u-flex-cjab{ flex-direction: column; }
.jc-center,.u-flex-jac,.u-flex-cjac{ justify-content: center; }
.jc-sb,.u-flex-jab,.u-flex-cjab{ justify-content: space-between; }
.jc-sa,.u-flex-jaa{ justify-content: space-around; }
.jc-start{ justify-content: flex-start; }
.jc-end{ justify-content: flex-end; }
.ai-center,.u-flex-jab,.u-flex-jac,.u-flex-jaa,.u-flex-cjac{ align-items: center; }
.ai-start{ align-items: flex-start; }
.ai-end{ align-items: flex-end; }
.ai-stretch{ align-items: stretch; }
.f1{ flex: 1; }
.f-auto{ flex: auto; }

/**IoT TPM相关 修改框架 */
@iotTpmFontColor: #323233;
@iotTpmContentBg: #FAFAFA;

@iotHContentHeight: 48px;
@iotHLineHeight: 8px;
@iotHHeight: 56px;

/** 布局设置 */
.iotmenu{
  display: block !important;
  height: 100vh;
  overflow: hidden;
  background-color: #EDEDED !important;
  .ant-layout-header{
    background: transparent;
    height: @iotHHeight !important;
    .header{
      // height: 56px !important;
      background-color: #fff !important;
      color: rgba(0,0,0,65) !important;
      box-shadow: 0 2px 4px 0 rgba(50,50,51,.5) !important;
      z-index: 999 !important;
      padding: 0 !important;
    }
    .iotmenu-header{
      height: @iotHHeight !important;
      .top-line{
        width: 100%;
        height: @iotHLineHeight;
        background: linear-gradient(90deg,#019ff3,#004280);
      }
      .iotmenu-header-content{
        height: @iotHContentHeight !important;
        line-height: @iotHContentHeight !important;
        .user-wrapper{
          .avatar{
            margin: 0 10px 0 0 !important;
          }
        }
      }
      .iotmenu-header-text{
        font-size: 23px;
        font-weight: 700;
        color: #004280;
        letter-spacing: 1px;
      }
    }
  }
  .ant-layout-content{
    display: flex !important;
    height: calc(100vh - 56px) !important;
    overflow: hidden;
    .ant-layout-sider{
      height: 100%;
      overflow: auto;
    }
    .iotmenu-content-container{
      width: 100%;
      height: calc(100% - 6px);
      overflow: hidden;
    }
  }
}
/** 内容设置 */
.iotmenu-content-container, .iotmenu-modal-box{
  .iotmenu-content-layout{
    height: 100%;
    overflow: hidden;
    /** 系统自带的main */
    // .main{
    //   height: 100%;
    //   overflow: hidden;
    // }
    // .iotmenu-content-page{
    //   height: 100%;
    //   overflow: hidden;
    // }
    .iotmenu-content-header{
      width: 160px;
      // width: 210px;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px 16px 12px 24px;
      border-radius: 8px 8px 0 0 ;
      color: @iotTpmFontColor;
      background: @iotTpmContentBg;
      font-size: 16px;
      font-weight: 700;
      // color: #008cd6;
      // box-shadow: 0 0 8px 0 rgba(2,72,109,.15);
      .anticon{
        color: #008cd6;
        padding-right: 12px;
      }
    }
    .iotmenu-content{
      // height: calc(100% - 48px);
      height: calc(100vh - @iotHHeight - 48px - 6px);
      background: @iotTpmContentBg;
      overflow: auto;
    }
  }
  // primary状态按钮
  .ant-btn-primary{
     background: #008cd6 !important;
     border-color: #1890ff!important;
     font-size: 16px;
  }
  // 搜索
  .table-page-search-wrapper{
    .iotmenu-search-container{
      height: 48px !important;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      // border-bottom: 1px solid #e1e1e1;
      .item-search-btn{
        margin-right: 4px;
      }
      .item-search{
        flex: 1;
        margin-right: 4px;
        max-width: 220px;
      }
      .item-search:last-of-type{
        margin-right: 0;
      }
      // .query-group-cust{
      //   min-width: auto !important;
      // }
      .ant-select{
        width: 100%;
      }
      .ant-calendar-picker{
        min-width: auto !important;
        width: 100%;
      }
      .ant-btn-primary[disabled]{
        color: #fff !important;
      }
    }
    .ant-form{
      .ant-form-item{
        .ant-form-item-label label{
          color: @iotTpmFontColor;
          font-size: 16px;
          font-weight: 400;
        }
      }
    }
  }
  a{
    color: #008cd6;
  }
  // 
  .ant-input, .ant-select-selection{
    background: transparent;
    color: #323233;
  }
  // 表格
  .ant-table{
    background: transparent !important;
    .ant-table-thead{
      tr{
        th{
          color: @iotTpmFontColor !important;
          font-size: 16px !important;
          font-weight: 700 !important;
        }
      }
    }
    .ant-table-tbody{
      tr{
        td{
          color: @iotTpmFontColor !important;
          font-size: 15px;
        }
      }
    }
    .edit-btn{
      display: inline-block;
      width: 24px;
      height: 24px;
      margin: 4px 3px;
      cursor: pointer;
      background: url(../edit.svg);
    }
    .edit-btn:hover{
      background: url(../edit-hover.svg);
    }
    .delete-btn{
      display: inline-block;
      width: 24px;
      height: 24px;
      margin: 4px 3px;
      cursor: pointer;
      background: url(../delete.svg);
    }
    .delete-btn:hover{
      background: url(../delete-hover.svg);
    }
    // 取消行悬浮变色
    .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td{
      background: transparent;
    }
  }
  .ant-table-fixed-left table, .ant-table-fixed-right table{
    background: #FAFAFA;
  }
  // tab标签
  .ant-tabs{
    .ant-tabs-bar{
      margin: 0 !important;
      border: none;
      .ant-tabs-nav-container{
        height: 48px !important;
        margin: 0;
        // tab行
        .ant-tabs-nav-wrap{
          height: 48px !important;
          // 所有tab标签
          .ant-tabs-nav{
            // 每个tab标签
            .ant-tabs-tab{
              width: 160px;
              height: 48px !important;
              line-height: 48px;
              font-size: 16px;
              text-align: center;
              color: #89898a;
              padding: 0 24px;
              font-weight: 700;
              background: transparent;
              border: transparent;
              border-radius: 8px 8px 0 0;
            }
            // 选中的tab
            .ant-tabs-tab-active{
              color: @iotTpmFontColor;
              // color: #008cd6;
              background: #fafafa;
              border: transparent;
              box-shadow: 0 3px 8px 0 rgba(2,72,109,.15);
              .anticon{
                color: #008cd6;
              }
            }
          }
        }
      }
    }
    // 选中tab
    .ant-tabs-tab-active{

    }
  }
  // 详情页面头部
  .interlock-detail-header{
    font-size: 22px; 
    font-weight: 700;
    color: @iotTpmFontColor;
    padding: 8px 24px;
    line-height: 40px;
    .anticon{
      color: #008cd6;
      padding-right: 8px;
    }
  }
  .ant-card{
    background: @iotTpmContentBg;
    .ant-card-body{
      padding: 0 24px;
    }
  }
  /** tag不同样式 */
  .normal-tag{
    // color: #52c41a;

    // color: #52c41a;
    // background: #f6ffed;
    // border-color: #b7eb8f;

    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 15px;
    padding: 0 8px;
    border-radius: 16px;

    background: linear-gradient(0deg, rgba(182, 240, 211, 0.5), rgba(182, 240, 211, 0.5)), rgb(255, 255, 255);
    border: 1px solid rgb(182, 240, 211);
    color: rgb(0, 204, 102);
  }
  .abnormal-tag{
    // color: #fb6666;

    // color: #fa8c16;
    // background: #fff7e6;
    // border-color: #ffd591;

    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 15px;
    padding: 0 8px;
    border-radius: 16px;

    // background: linear-gradient(0deg, rgba(203, 54, 4, 0.5), rgba(205, 80, 36, 0.5)), #ffffff;
    background: linear-gradient(0deg, rgba(195, 65, 21, 0.5), rgba(197, 56, 7, 0.5)), #ffffff;
    border: 1px solid #D65F37;
    // border: 1px solid #D45930;
    color: #fff;
  }
}
.iotmenu-modal-box{
  .ant-modal{
    .ant-modal-title{
      font-size: 18px;
    }
    .ant-modal-body{
      .ant-form{
        label{
          font-size: 15px !important;
          color: #323233;
        }
        .ant-form-item-children{
          font-size: 15px;
        }
        .ant-form-item{
          .ant-form-item-label{
          }
          .ant-form-item-control{
            font-size: 15px !important;
          }
        }
      }
    }
    // 分割线
    .ant-divider{
      font-size: 14px;
    }
    // 表格
    .ant-table{
      // background: transparent !important;
      .ant-table-thead{
        tr{
          th{
            color: @iotTpmFontColor !important;
            font-size: 15px !important;
            font-weight: 700 !important;
          }
        }
      }
      .ant-table-tbody{
        tr{
          td{
            color: @iotTpmFontColor !important;
            font-size: 15px;
          }
        }
      }
    }
    .ant-table-fixed-left table, .ant-table-fixed-right table{
      background: #fff;
    }
  }
}
// 滚动条样式
::-webkit-scrollbar{
  width: 6px !important;
}
::-webkit-scrollbar-track{
  background: #FFFFFF !important;
}