openatc-components 0.5.18 → 0.5.20

package/static/styles/channelizatioon.scss

@@ -1,434 +1,434 @@
-// 渠化图组件
-.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;
-    }
-  }
+// 渠化图组件
+.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;
+    }
+  }
 }