@import "~@/mixins.less";

@box-bgColor: #fff;

.operationGuide {
  .size(100%, 100%);
  //   background: url(./assets/temp.jpg) no-repeat;
  // background-size: 100% 100%;
  display: grid;
  grid-template-columns: calc(80% - 15px) 20%;
  gap: 15px;

  &>div {
    box-shadow: 0 2px 12px 0 #eaeaea;
    background-color: @box-bgColor;
    padding: 10px;
    position: relative;
  }
}

.flowChartBox {
  :global {

    .loadingBox,
    .ant-spin-container {
      .size(100%, 100%);
    }

    .flowBody {
      .size(100%, 100%);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .workFront,
    .workCentre,
    .workLater {
      .flex();

      .gridView {
        .size(100%, 100%);
        display: grid;
        grid-template-columns: repeat(4, minmax(0px, 1fr));
        flex: 1;
        background-color: #fff;

        &>[col],
        .colExpire {
          .size(100%, 100%);
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
        }

        .cellBox {
          height: 52px;
        }

        .colExpire {
          // .size(100%,100%);
          // display: flex;
          // flex-direction: column;
          // justify-content: space-around;
          // align-items: center;
          padding: 50px 8px;
        }

        .hasShow {

          border-radius: 2px;
          width: 140px;
          padding: 8px 8px;
          text-align: center;
          // color: #fff;
          font-size: 16px;
          line-height: 1;
        }

        &.front .hasShow {
          background: #c3f1ec;
          border: 1px solid #61d9cb;
        }

        &.centre .hasShow {
          background: #d4dffb;
          border: 1px solid #7b9df0;
        }

        &.later .hasShow {
          background: #feebcf;
          border: 1px solid #fbbb5d;
        }
      }

      .texts {
        width: 80px;
        font-weight: 700;
        color: #fff;
        writing-mode: vertical-rl;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        letter-spacing: 6px;
      }
    }

    .workFront {
      height: 30%;
      gap: 10px;

      &>.texts {
        background-color: #35cebd;
      }

      &>.boxs {
        .size(100%, 100%);
        padding: 15px;
        border: 1px dashed #35cebd;
        background: #ecfdfb;
      }

      .front {
        background: #fff;
        border: 1px solid #35cebd;
      }
    }

    .workCentre {
      height: calc(47% - 15px);
      gap: 10px;

      &>.texts {
        background-color: #6f94ef;
      }

      &>.boxs {
        .size(100%, 100%);
        padding: 15px;
        border: 1px dashed #6f94ef;
        background: #f4f7fd;
      }

      .centre {
        border: 1px solid #6f94ef;
      }
    }

    .workLater {
      height: 23%;
      gap: 10px;

      &>.texts {
        background-color: #fbbb5d;
      }

      &>.boxs {
        .size(100%, 100%);
        padding: 15px;
        border: 1px dashed #fbbb5d;
        background: #fdf9f3;
      }

      .later {
        border: 1px solid #fbbb5d;
      }
    }

    #container {
      position: absolute;
      top: 0px;
      .size(100%, 100%);
      pointer-events: none;
      // z-index: -1;
    }

  }

}

@keyframes antLine {
  to {
    stroke-dashoffset: -1000
  }
}

.broadsideCardBox {
  .size();

  :global {
    .title1 {
      .size(100%, 40px);
      .flex(center);
      padding-left: 30px;
      font-size: 20px;
      color: #1890FF;
      font-weight: bold;
      background: url(./assets/title1.png) no-repeat left;
      background-size: 18px 20px;
    }

    .part1 {
      .size(100%, calc(33% - 70px));
      .flex();
      gap: 10px;

      >div {
        .size(50%, 100%);
        cursor: pointer;
      }

      .image1 {
        background: url(./assets/image1.png) no-repeat center;
        background-size: 100% 100%;
      }

      .image2 {
        background: url(./assets/image2.png) no-repeat center;
        background-size: 100% 100%;
      }

      .image3 {
        background: url(./assets/image3.png) no-repeat center;
        background-size: 100% 100%;
      }

      .image4 {
        background: url(./assets/image4.png) no-repeat center;
        background-size: 100% 100%;
      }
    }

    .fileName {
      .size(100%, 30px);
      .flex();

      >div {
        .size(50%, 100%);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 18px;
      }
    }
  }
}