@import "../../../../src/theme.less";

:host {
  .quiltWashingTrendAnalysis ::ng-deep .ant-table-small > .ant-table-content > .ant-table-body{
    margin: 0;
  }
  .quiltWashingTrendAnalysis ::ng-deep thead{
    background-color: #F9F9FB;
    border-bottom: none;
  }
  .quiltWashingTrendAnalysis{
    min-height: 100%;
    background-color: #F1F2F2;
    .main{
      margin-left: 10px;
      .head{
        margin-top: 8px;
        height: 60px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        .search{
          display: flex;
          .searchItem{
            margin-left: 16px;
            &:first-of-type{
              margin-left: 0;
            }
          }
        }
        .btns{
          display: flex;
        }
      }
      .body{
        margin-top: 8px;
        background-color: #fff;
        padding-bottom: 30px;
        .body_tabs_wrap{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .body_tabs{
            display: flex;
            .tab{
              width: 106px;
              height: 50px;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #F9FAFB;
              color: #6E6E6E;
              font-size: 22px;
              font-weight: bold;
              cursor: pointer;
              &.active{
                background-color: @primary-color;
                color: #fff;
              }
            }
          }
          .compareDate{
            font-size: 22px;
            font-weight: bold;
            margin-right: 24px;
          }
        }

        .total{
          height: 105px;
          padding: 0 16px;
          border-bottom: 1px solid #CECECE;
          display: flex;
          justify-content: space-between;
          align-items:center;
          .total_list{
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items:center;
            padding-right: 30px;
            position: relative;
            &:after{
              content: '';
              position:absolute;
              right: -1px;
              top: 50%;
              transform: translateY(-50%);
              width: 2px;
              height: 42px;
              background-color: #D9D9D9;
            }
            &:last-of-type{
              padding-left: 30px;
              &:after{
                display: none;
              }
            }
            .total_item{
              display: flex;
              flex-direction: column;
              align-items: center;
              .name{
                font-size: 32px;
                font-weight: bold;
                &.green{
                  color: @primary-color;
                }
                &.red{
                  color: red;
                }
              }
              .value{
                font-size: 16px;
                color: #8F8F8F;
              }
            }
          }
        }

        .boxwrap{
          display: flex;
          .box{
            flex: 1;
            margin: 0 8px;
            .box-head{
              height: 46px;
              padding: 0 24px;
              display: flex;
              align-items: center;
              font-size: 16px;
              font-weight: bold;
              position: relative;
              &:before{
                content: '';
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: @primary-color;
                position: absolute;
                top: 50%;
                left: 8px;
                transform: translateY(-50%);
              }
            }
            .table{
              th,td{
                text-align: center;
              }
            }
          }
        }

        .echarts{
          flex: 1;
          margin: 0 8px;
          .echart-head{
            height: 46px;
            padding: 0 24px;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            position: relative;
            &:before{
              content: '';
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: @primary-color;
              position: absolute;
              top: 50%;
              left: 8px;
              transform: translateY(-50%);
            }
          }
          .echart{

          }
        }
      }
    }
  }
}