@import '../mixins.less';
@import '../vars.less';

.panelTab {
  width: 100%;
  height: 100px;
  .screen-bg('right_top_bg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 24px;
}
.tabItem {
  cursor: pointer;
  color: #2EC1C2;
  opacity: 0.5;
}
.tabItem, .tabActive {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  align-self: stretch;
  flex: 1;
  justify-content: flex-end;
}
.tabActive {
  color: #32D3D4;
}
.tabTitle {
  margin-top: 13px;
}
.tabActiveBg {
  margin-top: 13px;
}
.tabImgActiveBg {
  width: 100%;
}

.repairItem, .warningItem, .defectItem {
  display: flex;
  width: 100%;
  height: 90px;
  align-items: center;
  .screen-bg('card_item_bg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 27px 0 52px;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}
.warningItem, .defectItem {
  padding: 0 27px 0 67px;
}
.cardItemLine {
  position: absolute;
  width: 25px;
  height: 1px;
  background: #31D4D5;
  left: 27px;
}
.warningItem {
  .screen-bg('card_warning_bg');
}
.defectItem {
  .screen-bg('card_defect_bg');
}
.taskStatus {
  color: #fff;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  width: 74px;
  height: 29px;
  line-height: 29px;
  background: #32D4D6;
  margin-right: 24px;
}
.taskContent, .warningContent, .defectContent {
  flex: 1;
}
.taskHead, .taskBottom,
.warningHead, .warningBottom,
.defectHead, .defectBottom {
  display: flex;
  justify-content: space-between;
}
.taskBottom, .warningBottom, .defectBottom {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  opacity: 0.5;
}
.taskTitle {
  cursor: pointer;
}
.taskTitle, .warningTitle, .defectTitle {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #32D4D6;
}
.warningTitle {
  color: #FF724E;
}
.defectTitle {
  color: rgba(255, 156, 0, 1);
}
.taskCreateTime, .warningCreateTime, .defectCreateTime {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}
.repairDoing {
  .taskTitle {
    color: @color-active;
  }
  .taskStatus {
    background: @color-active;
  }
}
.repairNoDispatch {
  .taskTitle {
    color: @color-normal;
  }
  .taskStatus {
    background: @color-normal;
  }
}
.repairPending {
  .taskTitle {
    color: @color-error;
  }
  .taskStatus {
    background: @color-error;
  }
}
.warningImg, .defectImg {
  margin-right: 36px;
  width: 36px;
  height: 36px;
}
.cardList {
  position: relative;
  .cardListLine {
    position: absolute;
    width: 1px;
    top: 45px;
    bottom: 45px;
    left: 27px;
    background: #31D4D5;
  }
}
.cardListLess {
  .cardListLine {
    display: none;
  }
  .cardItemLine {
    display: none;
  }
}

.panelTabWrapNormal {
  display: flex;
  height: 100%;
  flex-direction: column;
  .panelTab {
    width: 802px;
    height: 120px;
  }
  .tabItem, .tabActive {
    font-size: 30px;
  }
  .taskTitle {
    cursor: pointer;
  }
  .taskTitle, .warningTitle, .defectTitle {
    font-size: 26px;
  }
  .taskStatus,
  .taskBottom, .warningBottom, .defectBottom,
  .taskCreateTime, .warningCreateTime, .defectCreateTime {
    font-size: 26px;
  }
  .taskStatus {
    width: 148px;
    height: 45px;
    line-height: 45px;
  }
  .repairItem, .warningItem, .defectItem {
    height: 136px;
    margin-bottom: 20px;
  }
  .cardListLine {
    top: 68px;
    bottom: 68px;
  }
}
.panelTabWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.scrollWrapper {
  overflow-y: auto;
  flex: 1;
}
