.Home {


  :global {
    .homeMain {
      height: 100%;

      .title {
        width: 100%;
        height: 180px;
        background-color: #fff;
        border-radius: 5px;
        padding: 10px 40px;
        display: flex;
        justify-content: space-between;

        .titleL {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 10px 20px 10px 0px;
          width: 240px;
          border-right: 1px solid #999999;

          &>h3 {
            font-size: 20px;
            color: var(--themeColor);
          }
        }

        .titleR {
          width: calc(100% - 270px);
          display: flex;
          justify-content: space-around;
          padding: 20px 0;
          text-align: center;

          .row {
            cursor: pointer;

            &>div {
              width: 80px;
              height: 80px;
              background-size: 100% 100%;
            }

            .bac1 {
              background-image: url('../../assets/img/login/icon_1.png');
            }

            .bac2 {
              background-image: url('../../assets/img/login/icon_2.png');
            }

            .bac3 {
              background-image: url('../../assets/img/login/icon_3.png');
            }

            .bac4 {
              background-image: url('../../assets/img/login/icon_4.png');
            }

            .bac5 {
              background-image: url('../../assets/img/login/icon_5.png');
            }

            &>p {
              margin-top: 15px;
            }

            &:hover {
              color: var(--themeColor);
            }
          }
        }
      }

      .flooBox {
        margin-top: 35px;
        width: 100%;
        height: calc(100% - 220px);
        border-radius: 5px;
        display: flex;
        justify-content: space-between;

        &>div {
          background-color: #fff;
          border-radius: 5px;
          padding: 0px 30px;

          .flooTit {
            position: relative;
            padding-left: 50px;
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--themeColor);
            font-size: 22px;
            font-weight: 700;
            background: url('../../assets/img/login/Statistics.png') no-repeat left center;
            background-size: 36px 40px;

            &::before {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 2px;
              background-image: linear-gradient(to right, rgba(159, 25, 39, 1), rgba(159, 25, 39, .3));
            }
          }
        }

        .flooBoxL {
          width: 960px;

          .chartBox {
            width: 100%;
            height: calc(100% - 80px);
            position: relative;

            .chart {
              width: 100%;
              height: 100%;
            }

            .chartTit {
              position: absolute;
              z-index: 10;
              top: 15px;
              left: 17px;
            }
          }
        }

        .flooBoxR {
          width: 600px;

          .flooTit {
            background: url('../../assets/img/login/remind.png') no-repeat left center;
            background-size: 36px 40px;
          }

          .doneBox {
            padding: 20px 35px 0;
            width: 100%;
            height: calc(100% - 80px);
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 3%;

            .doneRow {
              cursor: pointer;
              padding: 15px;
              width: 50%;
              height: 30%;
              border-bottom: 1px solid #999999;

              .doneRow_tit {
                margin-bottom: 30px;
                font-weight: 700;
              }

              .doneRow_txt {
                &>span {
                  font-weight: 700;
                  font-size: 30px;
                  color: var(--themeColor);
                }
              }
            }

            .noneRow {
              border: none;
            }
          }
        }
      }
    }
  }
}