// 渠化图组件
.custom-cross-part {
  // padding-left: 28PX;
  height: 100%;
  .first-import-crossmap {
    height: 100%;
    background-color: $--color-white;
    position: relative;
    margin-left: 20PX;
    .import-btn {
      min-width: 218PX;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .el-button {
        width: 220PX;
        height: 60PX;
        border-radius: 4PX;
        line-height: 60PX;
        padding: 0;
        font-size: 20PX;
        font-weight: 400;
      }
      .tip {
        font-size: 14PX;
        font-weight: 400;
        color: $--color-text-regular;
        line-height: 22PX;
        margin-top: 22PX;
      }
    }
  }
  .custom-cross {
    height: 100%;
    .custom-main {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .drawPanelAnimation {
      transition-property: opacity , width;
      transition-duration: 0.5s , 0.5s;
    }
    .custom-group {
      // width: 980PX;
      width: calc(64% - 20PX);
      height: calc(100% - 20PX);
      margin-left: 20PX;
      float: left;
      background-color: $--color-white;
      border: solid 1PX $--border-color-lighter;
      // margin-right: 20PX;
      // height: 870PX;
      overflow-y: auto;
      .draw-function {
        overflow: hidden;
        padding: 20PX;
        .again-import {
          float: left;
          .import-label {
            font-size: 14PX;
            font-weight: 400;
            color: $--color-text-primary;
            margin-right: 23PX;
          }
          .again-import-btn {
            padding: 0;
            line-height: 32PX;
            width: 90PX;
            height: 32PX;
          }
          .lock-map {
            cursor: pointer;
            margin: 0 5PX;
            font-size: 18PX;
          }
          .el-icon-lock {
            color: $--color-text-secondary;
          }
          .el-icon-unlock {
            color: rgb(242, 121, 121);
          }
        }
        .draw-to-sketchpad {
          float: right;
          overflow: hidden;
          .drawtip {
            float: left;
            font-size: 14PX;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #909399;
            line-height: 22PX;
            margin-right: 14PX;
            line-height: 32PX;
          }
          .draw-operation {
            float: left;
          }
        }
      }
      .sketchpad-area {
        position: relative;
        // min-height: 702PX;
        height: 652PX;
        overflow: auto;
        .cross-map-part {
          position: relative;
          min-height: 650PX;
        }
        /* 删除hover的虚线框 */
        .drr:hover:before {
          outline: none;
        }
        .drr.active:before {
          outline: 2PX dashed lightskyblue;
        }
        .channelization-elements-components {
          border: 1px solid $--border-color-base;
          margin: 0 auto;
          .detector-chart-icon {
            .detector-rect {
              width: 20PX;
              height: 20PX;
              border: 2px solid #0080FF;
              margin: 0 auto;
            }
          }
        }
      }
      .draw-end-function {
        text-align: center;
        padding-bottom: 60PX;
        margin-top: 52PX;
        .el-button {
          width: 90PX;
          height: 32PX;
          padding: 0;
          line-height: 32PX;
        }
      }
    }
    #sketchpadArea{
      cursor: default;
      overflow: hidden;
    }
    .custom-edit {
      float: left;
      // width: calc(100% - 980PX - 20PX);
      // width: 515PX;
      width: calc(36% - 20PX);
      height: calc(100% - 20PX);
      margin-left: 20PX;
      background-color: $--color-white;
      border: solid 1PX $--border-color-lighter;
      padding: 22PX;
      padding-right: 0PX;
      // height: 870PX;
      overflow-y: auto;
      .each-icon {
        float: left;
        .single-icon {
          margin-right: 10PX;
          text-align: center;
          cursor:pointer;
          width: 70PX;
          height: 70PX;
          background-color: #edf6ff;
          border-radius: 6PX;
          line-height: 1.15;
          .patternWalk{
            left: 14PX !important;
          }
          .closephase-icon {
            margin-top: 10PX;
            width: 56PX;
            height: 24PX;
          }
          .direction-icon {
            margin-top: 22PX;
            width: 30PX;
            height: 30PX;
          }
          .type-icon {
            margin-top: 11PX;
            width: 48PX;
            height: 48PX;
          }
          .ped-icon {
            margin-top: 11PX;
            width: 48PX;
            height: 48PX;
          }
        }
        .single-icon-select {
          text-align: center;
          cursor:pointer;
          width: 70PX;
          height: 70PX;
          background-color: #a2cfff;
          border-radius: 6PX;
        }
        .single-icon-name {
          width: 70PX;
          margin-top: 3PX;
          font-size: 12PX;
          font-weight: normal;
          font-stretch: normal;
          line-height: 22PX;
          letter-spacing: 0PX;
          color: $--color-text-regular;
          text-align: center;
          height: 40PX;
        }
      }
      .tittle {
        height: 20PX;
        font-size: 20PX;
        font-weight: 400;
        color: $--color-text-primary;
        line-height: 22PX;
        margin-bottom: 17PX;
      }
      .lane-edit-panel {
        position: relative;
        max-height: 87vh;
        // overflow-y: auto;
        .edit-id {
          position: absolute;
          right: 30PX;
          top: 0PX;
          color: $--color-text-primary;
          font-size: 20PX;
        }
        .directions, .position, .lane-types, .ped-type, .ped-position, .detector-type, .detector-associated {
          overflow: hidden;
          margin-bottom: 55PX;
        }
        .delete-drawed-item {
          text-align: center;
          padding-top: 37PX;
          padding-bottom: 39PX;
          button {
            width: 90PX;
            height: 32PX;
            padding: 0;
          }
        }
        .detector-threshold {
          margin-bottom: 55px;
          .detector-threshold-formtext {
            color: $--color-text-regular;
          }
          .flow-separator {
            color: $--color-text-regular;
          }
          .el-select {
            width: 120PX;
          }
        }
        .overlap-associated {
          margin-bottom: 30px;
        }
        .position {
          .position-options {
            .el-radio-group {
              width: 90%;
              .el-radio {
                margin-bottom: 10PX;
                margin-right: 5PX;
              }
            }
            .el-radio__label {
              display: inline-block;
              width: 80PX;
            }
          }
        }
      }
      .phase-associated-component {
        width: 100%;
        height: auto;
        overflow: hidden;
        .phase-box {
          float: left;
          margin-top: 10PX;
            .single-phase {
              margin-right: 10PX;
              text-align: center;
              cursor:pointer;
              width: 70PX;
              height: 70PX;
              background-color: #edf6ff;
              border-radius: 6PX;
              line-height: 1.15;
              position: relative;
              .phase-icon {
                position: absolute;
                left: 14PX;
                top: 15PX;
              }
              .ped-icon {
                position: absolute;
                left: 14PX;
                top: 15PX;
              }
              .patternWalk{
                left: 14PX !important;
              }
              .delete-phase-icon {
                position: absolute;
                right: 3PX;
                top: 0PX;
                z-index: 99;
                .el-icon-close {
                  font-size: 6PX;
                }
              }
            }
            .single-phase-select {
              background-color: #a2cfff;
            }
            .single-phase-name {
              width: 70PX;
              margin-top: 3PX;
              font-size: 12PX;
              font-weight: normal;
              font-stretch: normal;
              line-height: 22PX;
              letter-spacing: 0PX;
              color: $--color-text-regular;
              text-align: center;
              height: 40PX;
            }
        }
      
        .add-phase {
          padding-top: 23PX;
        }
        .icon-fangda {
          font-size: 24PX;
          color: #299BCC;
        }
        .add-disabled {
          color: #bcbec2;
          background-color: #f4f4f5;
        }
        .special-lane {
          display:flex;
          flex-direction:row;
          justify-content:center;
          align-items:center;
        }
      }
    }
    .footer-btn {
      margin-bottom: 20PX;
    }
    .phaseText {
      // color: $--color-text-regular;
      color: #fff;
      position: absolute;
      height: 14PX;
      font-size: 14PX;
    }
    .edit-icon-btn {
      min-width: 128PX;
      height: 32PX;
      border: 1PX solid $--border-color-base;
      border-radius: 4PX;
      padding: 0;
      color: $--color-text-regular;
      &:hover {
        color: $--color-text-regular;
      }
      .lane-icon-svg {
        float: left;
        position: relative;
        top: 1PX;
        left: 13PX;
        > div {
          float: left;
        }
      }
      .btn-label {
        float: left;
        position: relative;
        top: 2PX;
        left: 23PX;
      }
      .highlightColor {
        color: $--color-primary;
      }
      .defaultColor {
        color: $--color-text-regular;
      }
    }
    .phase-table {
      margin-top: 20PX;
    }
  }
}
.show-channelization {
  .channelization-elements-components {
    .cross-map-part {
      position: relative;
      min-height: 650PX;
    }
    .drr:hover:before {
      outline: none;
    }
    .drr.active:before {
      outline: 2PX dashed lightskyblue;
    }
    .phaseText {
      // color: $--color-text-regular;
      color: #fff;
      position: absolute;
      height: 14PX;
      font-size: 14PX;
    }
    .customText {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 9;
      align-items: center;
      color: #fff;
    }
  }
}