Sinopec-Anxin/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss

.box {
  width: 100%;
  height: 700px;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.titlebox {
  width: 100%;
  height: 48px;
  background: #041d3c;
  display: flex;
  align-items: center;

  .title {
    width: 100%;
    height: 32px;
    background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
    display: flex;
    justify-content: center;

    div {
      width: 120px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-family: sybold;
      font-size: 16px;
      position: relative;
      cursor: pointer;
      margin: 0 18px;

      .border {
        position: absolute;
        bottom: -7px;
        left: -18px;
        width: 120px;
        height: 4px;
      }
    }

    .selected {
      background: linear-gradient(90deg, #1662a9 0%, #25b7d4 50%, #1662a9 100%);

      .border {
        background: linear-gradient(90deg, rgba(35, 217, 255, 0) 0%, #25b7d4 50%, rgba(35, 217, 255, 0) 100%);
      }

    }
  }
}

.ant-modal-close {
  color: #fff;
}

.content {
  flex: 1;
  box-sizing: border-box;
  padding: 18px;
  overflow: hidden;

  .imgbox {
    display: flex;
    width: 100%;
    height: 100%;

    .imglist {
      display: flex;
      flex-direction: column;
      width: 196px;
      height: 100%;
      overflow-y: auto;
      box-sizing: border-box;
      padding-right: 12px;
      border-right: 1px solid rgba(145, 204, 255, 0.3);

      .imglisttitle {
        font-size: 16px;
        font-family: sybold;
        margin-bottom: 16px;
      }

      .img {
        width: 178px;
        height: 108px;
        margin-bottom: 8px;

        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
    }

    .bigimg {
      flex: 1;
      box-sizing: border-box;
      padding-left: 13px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }


  .oilbox {
    display: flex;
    width: 100%;
    height: 100%;

    .imgDetailsbox {
      width: 280px;
      height: 100%;
      box-sizing: border-box;
      padding-right: 12px;
      border-right: 1px solid rgba(145, 204, 255, 0.3);
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;

      .bigimage {
        width: 264px;
        height: 264px;
        border: 1px solid #FF4B65;
        box-shadow: 0px 0px 12px #FF4B65;
        opacity: 1;
        border-radius: 0px;
        // margin-top: 40px;
        margin-bottom: 24px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      h1 {
        font-weight: bold;
        font-size: 24px;
        color: #FF4B65;
        margin-bottom: 32px;
        margin-top: 36%;
      }

      h3 {
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
      }
    }

    .flowpathbox {
      flex: 1;
      box-sizing: border-box;
      padding-left: 73px;
      position: relative;

      // border: 1px solid red;
      .name {
        color: rgba(145, 204, 255, 1);
        font-size: 15px;
        margin-bottom: 12px;
      }

      .flowpathlist {
        display: flex;
        flex-wrap: wrap;

        .flowpathimgbox {
          width: 160px;
          height: 200px;
          display: flex;
          flex-direction: column;

          img {
            width: 158px;
            height: 158px;
            border: 1px solid rgba(0, 0, 0, 0);
            cursor: pointer;
          }

          span {
            text-align: center;
            margin-top: 6px;
          }
        }

        .arrowsbox {
          width: 40px;
          height: 200px;
          display: flex;
          justify-content: center;

          img {
            width: 38px;
            height: 38px;
            margin-top: 65px;
          }
        }
      }

      .leftimg {
        display: block;
        position: absolute;
        left: 20px;
        bottom: 76px
      }

      .rightimg {
        display: block;
        position: absolute;
        right: -3px;
        top: 99px;
      }
    }
  }
}