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

:host {
  background-color: #00253f;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  // 遮罩
  .mask{
    background-color: rgba(80, 80, 80, 0.5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
    .con-wrap{
      width: 480px;
      background: #fff;
      padding: 16px;
      border-radius: 5px;
      border: 1px solid #e5e9ed;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .con {
        background: #f9fafb;
        width: 100%;
        border-radius: 5px;
        border: 1px solid #e5e9ed;
        padding: 16px;
        &.bindingExtension {
          min-height: 246px;
          .bindingExtension_content {
            display: flex;
            flex-wrap: wrap;
          }
          .noContentFlex {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 136px;
            flex-direction: column;
            .noContent {
              width: 128px;
            }
            p {
              margin-top: 8px;
            }
          }
          .ant-checkbox-wrapper {
            font-size: 12px;
            width: 100%;
            display: flex;
            margin-top: 8px;
            justify-content: space-between;
            align-items: center;
            ::ng-deep .ant-checkbox {
              font-size: 12px;
              top: 0;
            }
            ::ng-deep .ant-checkbox + span {
              flex: 1;
            }
          }
        }

        &.tableCon {
          padding: 0;

          .table {
            font-size: 14px;

            tr {
              td {
                padding: 15px 6px;
                text-align: center;

                & > .tdiv {
                  overflow: hidden;

                  .name {
                    float: left;
                  }

                  .num {
                    float: right;
                    font-size: 12px;

                    span {
                      color: @primary-color;
                      font-size: 14px;
                    }
                  }
                }

                .notOpen {
                  color: #666;
                  font-size: 12px;

                  img {
                    margin-bottom: 8px;
                  }
                }
              }
            }
          }
        }

        .title {
          color: #333;
          text-align: center;
        }

        .conditions {
          & > .ant-row {
            margin: 8px 0;
            display: flex;
            align-items: center;

            .ant-row {
              .ant-col-6 {
                margin: 2px 0;
              }
            }

            .checkAll {
              width: 100%;
              border-bottom: 1px solid rgb(233, 233, 233);
              color: @primary-color;
            }
          }
        }

        .btns {
          padding: 5px 20px 0 20px;
        }
      }
    }
  }

  // 大屏
  .screen{
    // 头部
    .screen_head{
      height: 117px;
      padding-top: 21px;
      display: flex;
      justify-content: center;
      position: relative;

      .screen_head_txt{
        width: 855px;
        height: 52px;
        position: relative;

        h1{
          letter-spacing: 8px;
          font-weight: bold;
          color: #fff;
          font-size: 36px;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 11;
        }
        &::after{
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 1;
          width: 855px;
          background: linear-gradient(to bottom, #15B4ED, #09658E);
          clip-path: polygon(0 0, 100% 0, calc(100% - 52px) 100%, 52px 100%);
        }

        .left_oblique_line_image{
          position: absolute;
          left: 0;
          top: 18px;
          width: 413px;
          height: 41px;
          background: url(../../../assets/images/screen/left_oblique_line.png) no-repeat;
          background-size: contain;
          transform: translateX(-100%);
        }

        .right_oblique_line_image{
          position: absolute;
          right: 0;
          top: 18px;
          width: 413px;
          height: 41px;
          background: url(../../../assets/images/screen/right_oblique_line.png) no-repeat;
          background-size: contain;
          transform: translateX(100%);
        }
      }

      .left_line{
        position: absolute;
        left: 0;
        top: 21px;
        width: calc((100% - 855px) / 2 - 22px);
        height: 4px;
        background-color: #76A8BC;
      }

      .right_line{
        position: absolute;
        right: 0;
        top: 21px;
        width: calc((100% - 855px) / 2 - 22px);
        height: 4px;
        background-color: #76A8BC;
      }

      .left_oblique_line{
        position: absolute;
        left: calc((100% - 855px) / 2 - 22px - 17px);
        top: 54px;
        width: 89px;
        height: 4px;
        background-color: #76A8BC;
        transform: rotate(50deg);
      }

      // .left_oblique_line_common(@n){
      //   position: absolute;
      //   left: calc((100% - 855px) / 2 - 22px - 17px - 24px * (@n - 1));
      //   top: 41px;
      //   width: 12px;
      //   height: 45px;
      //   background-image: linear-gradient(to right bottom, rgba(0, 172, 221, 0.01) 70%, rgba(0, 172, 221, 0.5));
      //   transform: skewX(40deg);
      // }

      // @numList: {
      //   1: 1;
      //   2: 2;
      //   3: 3;
      //   4: 4;
      //   5: 5;
      //   6: 6;
      //   7: 7;
      //   8: 8;
      //   9: 9;
      //   10: 10;
      //   11: 11;
      //   12: 12;
      //   13: 13;
      //   14: 14;
      //   15: 15;
      // }

      // each(@numList, {
      //   .left_oblique_line@{key} {
      //     .left_oblique_line_common(@value);
      //   }
      // });

      .right_oblique_line{
        position: absolute;
        right: calc((100% - 855px) / 2 - 22px - 17px);
        top: 54px;
        width: 89px;
        height: 4px;
        background-color: #76A8BC;
        transform: rotate(-50deg);
      }

      .bottom_line{
        position: absolute;
        left: 50%;
        bottom: 25px;
        width: calc(855px - 52px * 2 + 20px * 2);
        height: 4px;
        background-color: #76A8BC;
        transform: translateX(-50%);
      }
    }
    // 内容
    .screen_body{
      .swiper-pagination{
        position: fixed;
        right: 0;
        bottom: 0;
        height: 70px;
        display: flex;
        align-items: center;
        .dit{
          width: 24px;
          height: 24px;
          background: #FFFFFF;
          border-radius: 50%;
          margin-right: 14px;
          cursor: pointer;
          &:last-of-type{
            margin-right: 20px;
          }
          &.active{
            background: #8AE4FF;
          }
        }
      }
      .screen_wrap{
        padding: 0 20px 70px;
        display: flex;
        .screen_list{
          min-width: 464px;
          flex: 1;
          .screen_list_head{
            height: 70px;
            background-color: #02356D;
            box-shadow: 0px 3px 6px 1px #092543;
            margin-left: 6px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            &::before{
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              width: 13px;
              height: 13px;
              border-top: 1px solid #B3ECFD;
              border-left: 1px solid #B3ECFD;
            }
            &::after{
              content: '';
              position: absolute;
              right: 0;
              bottom: 0;
              width: 13px;
              height: 13px;
              border-bottom: 1px solid #B3ECFD;
              border-right: 1px solid #B3ECFD;
            }
            .screen_list_title{
              font-size: 20px;
              font-weight: bold;
              color: #57D8FF;
            }
            .screen_list_column{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              text-align: center;
              .column{
                font-size: 18px;
                font-weight: 400;
                color: #75B2C4;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 20px;
              }
            }
          }
          .screen_list_body{
            margin-top: 20px;
            border: 6px solid #fff;
            border-right: none;
            height: calc(100vh - 289px);
            overflow: hidden;
            .screen_list_item{
              height: 80px;
              display: flex;
              cursor: pointer;
              &:nth-of-type(2n + 1){
                background-color: #043144;
              }
              &:nth-of-type(2n){
                background-color: #02374E;
              }
              .item_name{
                flex: 56;
                width: 56%;
                font-size: 21px;
                font-weight: 400;
                color: #B3ECFD;
                padding: 0 20px;
                line-height: 80px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .item_description{
                flex: 44;
                width: 44%;
                font-size: 17px;
                font-weight: 300;
                color: #FFFFFF;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 0 20px;
                .item_orderInfo{
                  display: flex;
                  align-items: center;
                }
                .item_remarks{
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
          }
          &:last-of-type .screen_list_body{
            border-right: 6px solid #fff;
          }
          &:last-of-type .screen_list_head{
            margin-right: 6px;
          }
        }
      }
    }
  }

  // 详情
  .detail{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    width: 620px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
    border-radius: 12px;

    .detail_head{
      padding: 33px 15px 19px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2{
        font-size: 23px;
        font-weight: bold;
        color: #0A3D74;
        line-height: 30px;
        margin: 0;
      }
      img{
        width: 16px;
        height: 16px;
        cursor: pointer;
        margin-right: 2px;
        margin-bottom: 13px;
      }
    }
    .detail_body{
      margin: 0 12px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #DCDCDC;
      padding: 9px 15px;
      .detail_body_item{
        display: flex;
        font-size: 18px;
        font-weight: 400;
        color: #02356D;
        padding: 6px 0;
        .detail_body_left{
          display: flex;
          align-items: center;
          text-align: justify;
          .detail_body_title{
            width: 94px;
            flex-shrink: 0;
            line-height: normal;
            height: 100%;
          }
          .detail_body_title_content{
            line-height: normal;
          }
        }
      }
    }

    .detail_foot{
      height: 91px;
      padding-top: 24px;
      display: flex;
      justify-content: center;
      .detail_btn{
        cursor: pointer;
        width: 139px;
        height: 41px;
        background: #0A3D74;
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
      }
    }
  }
}
