openatc-components 0.1.24 → 0.1.26

package/static/styles/overview.scss

@@ -1,372 +1,372 @@
-
- 
-// 总览页面
-.container-main {
-  width: 100%;
-  // height: 880PX;
-  height: 100%;
-  // min-width: 1250PX;
-  background: $--background-color-base;
-  .iconfont {
-    font-family: "iconfont" !important;
-    font-size: 34PX;
-    text-align: center;
-    font-weight: 500;
-    color: #000000;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .container-left {
-    float: left;
-    margin-top: 20PX;
-    margin-left: 20PX;
-    width: 76.8%;
-    height: 880PX;
-    background-color: $--color-white;
-    border: solid 1PX $--border-color-lighter;
-  }
-  .container-right {
-    float: left;
-    margin-top: 20PX;
-    margin-left: 20PX;
-    width: 20%;
-    height: 880PX;
-    background-color: $--color-white;
-    border: solid 1PX $--border-color-lighter;
-  }
-  .container-left-top {
-    width: 100%;
-    height: 420PX;
-  }
-  .container-left-bottom {
-    width: 100%;
-    height: 400PX;
-    background-color: $--color-white;
-  }
-  .curr-order {
-    float: left;
-    margin-left: 20PX;
-    margin-top: 1PX;
-  }
-  .control-right {
-    margin-top: 40PX;
-    margin-left: 20PX;
-  }
-  .agent-div {
-    float: left;
-    width: 28%;
-    height: 420PX;
-    border-bottom: solid 0.5PX $--border-color-lighter;
-  }
-  .other-div {
-    float: left;
-    width: 24%;
-    height: 210PX;
-    border-left: solid 1PX $--border-color-lighter;
-    border-bottom: solid 1PX $--border-color-lighter;
-    .model-icon {
-      width: 20PX;
-      height: 20PX;
-    }
-  }
-  .agent-icon {
-    position:relative;
-    float: left;
-    width: 50%;
-    height: 210PX;
-  }
-  .agent-num {
-    float: left;
-    width: 50%;
-    height: 210PX;
-  }
-  .lianji-success {
-    position:relative;
-    float: right;
-    right: 30PX;
-    top: 25PX;
-    text-align: center;
-    width: 81PX;
-    height: 34PX;
-    background-color: $--color-primary;
-    border-radius: 4PX;
-    font-size: 14PX;
-    padding:10PX 0;
-    color: $--color-white;
-  }
-  .lianji-fail {
-    position:relative;
-    float: right;
-    right: 30PX;
-    top: 25PX;
-    text-align: center;
-    width: 81PX;
-    height: 34PX;
-    background-color: #909399;
-    border-radius: 4PX;
-    font-size: 14PX;
-    padding:10PX 0;
-    color: $--color-white;
-  }
-  .lianji-wait {
-    position:relative;
-    float: right;
-    right: 30PX;
-    top: 25PX;
-    text-align: center;
-    width: 110PX;
-    height: 34PX;
-    background-color: #e6a23c;
-    border-radius: 4PX;
-    font-size: 14PX;
-    padding:10PX 0;
-    color: $--color-white;
-  }
-  .agent-id {
-    margin-top: 20PX;
-    margin-right: 30PX;
-    text-align: right;
-    font-size: 14PX;
-    font-weight: normal;
-    font-stretch: normal;
-    letter-spacing: 0PX;
-    color: $--color-text-secondary;
-  }
-  .agent-number {
-    margin-top: 10PX;
-    margin-right: 30PX;
-    text-align: right;
-    font-size: 16PX;
-    font-weight: normal;
-    font-stretch: normal;
-    letter-spacing: 0PX;
-    color: $--color-text-primary;
-  }
-  .agent-port {
-    margin-top: 20PX;
-    margin-right: 30PX;
-    text-align: right;
-    font-size: 14PX;
-    font-weight: normal;
-    font-stretch: normal;
-    letter-spacing: 0PX;
-    color: $--color-text-secondary;
-  }
-  .port-number {
-    margin-top: 10PX;
-    margin-right: 30PX;
-    text-align: right;
-    font-size: 16PX;
-    font-weight: normal;
-    font-stretch: normal;
-    letter-spacing: 0PX;
-    color: $--color-text-primary;
-  }
-  .model-name {
-    float: left;
-    margin-top: 32PX;
-    font-size: 14PX;
-    font-weight: normal;
-    font-stretch: normal;
-    letter-spacing: 0PX;
-    color: $--color-text-regular;
-    margin-right: 10PX;
-  }
-  .model-tupian {
-    float: left;
-    margin-top: 30PX;
-    margin-left: 20PX;
-    margin-right: 10PX;
-  }
-  .to-detail {
-    float: left;
-    margin-top: 35PX;
-    line-height: 10PX;
-    font-size: 14PX;
-    font-weight: normal;
-    font-stretch: normal;
-    letter-spacing: 0PX;
-    color: $--color-primary;
-    padding-left: 10PX;
-    border-left: 1PX solid $--color-primary;
-    cursor: pointer;
-  }
-
-  .control-center {
-    // float: left;
-    text-align: center;
-    margin-top: 40PX;
-    font-size: 30PX;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 20PX;
-    letter-spacing: 0PX;
-    color: $--color-text-primary;
-  }
-  .curr-grade {
-    margin-top: 30PX;
-    font-size: 24PX;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 14PX;
-    letter-spacing: 0PX;
-    color: $--color-text-regular;
-  }
-  .curr-num {
-    margin-top: 20PX;
-    font-size: 14PX;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 14PX;
-    letter-spacing: 0PX;
-    color: $--color-text-secondary;
-  }
-  .icon-ziyuan:before {
-    content: "\e670";
-    position:absolute;
-    z-index:2;
-    left: 45PX;
-    top: 72PX;
-    // color: #$--color-primary;
-  }
-  .yuanxing {
-    position:absolute;
-    left: 20PX;
-    top: 50PX;
-    z-index:1;
-    width: 90PX;
-    height: 90PX;
-    // background-color: #459ffc;
-    opacity: 0.2;
-    border-radius: 50%;
-  }
-  .dev-status {
-    position:absolute;
-    // text-align: center;
-    // margin-top: 150PX;
-    // left: 30PX;
-    top: 150PX;
-    height: 21PX;
-    font-size: 22PX;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 14PX;
-    letter-spacing: 0PX;
-    // color: $--color-primary;
-  }
-  .tuxing-left {
-    float: left;
-    // margin-top: 20PX;
-    margin-left: 1%;
-    width: 62%;
-    // height: 860PX;
-    background-color: $--color-white;
-    border: solid 1PX $--border-color-lighter;
-  }
-  .tuxing-right {
-    float: left;
-    margin-left: 1%;
-    width: 35%;
-    box-sizing: border-box;
-    background-color: $--color-white;
-    border: solid 1PX $--border-color-lighter;
-    position: relative;
-    overflow-x: auto;
-  }
-
-  .pattern-status {
-    min-height: 200PX;
-    margin-left: 20PX;
-    margin-top: 20PX;
-    margin-right: 20PX;
-    margin-bottom: 86PX;
-    .overLap{
-      width: 100% !important;
-    }
-  }
-  .pattern-name {
-    display: inline;
-    font-size: 20PX;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 22PX;
-    letter-spacing: 0PX;
-    color: $--color-text-primary;
-  }
-  .pattern-message {
-    display: inline;
-    margin-left: 10PX;
-    font-size: 14PX;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 22PX;
-    letter-spacing: 0PX;
-    color: $--color-text-regular;
-  }
-
-  .cross-mess {
-    margin-left: 15PX;
-    margin-top: 15PX;
-    height: 20PX;
-    font-size: 20PX;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 22PX;
-    letter-spacing: 0PX;
-    color: $--color-text-primary;
-  }
-  
-
-  .el-tag {
-    margin-right: 4PX;
-    margin-bottom: 4PX;
-  }
-  .sloat-icon {
-    cursor:pointer;
-    margin-top: 15PX;
-  }
-  .control-time {
-    margin-top: 40PX;
-    font-size: 30PX;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 20PX;
-    letter-spacing: 0PX;
-    color: $--color-text-primary;
-  }
-  .control-time .time {
-    width: 50%;
-    display: inline-block;
-    text-align: center;
-  }
-  .control-time span:first-of-type {
-    border-right: 1PX solid #e5e5e5;
-  }
-  .pattern-explain {
-    float: right;
-    color: $--color-text-regular;
-    .el-checkbox__label {
-      font-size: 16PX;
-      color: $--color-text-regular;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 22PX;
-      letter-spacing: 0PX;
-    }
-  }
- .jsontextarea {
-  textarea {
-    min-height: 200PX !important;
-    max-height:300PX;
-  }
- }
- .wenzijiemian {
-   .container-left {
-     margin-top: 0;
-   }
-   .container-right {
-     margin-top: 0;
-   }
- }
+
+ 
+// 总览页面
+.container-main {
+  width: 100%;
+  // height: 880PX;
+  height: 100%;
+  // min-width: 1250PX;
+  background: $--background-color-base;
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 34PX;
+    text-align: center;
+    font-weight: 500;
+    color: #000000;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .container-left {
+    float: left;
+    margin-top: 20PX;
+    margin-left: 20PX;
+    width: 76.8%;
+    height: 880PX;
+    background-color: $--color-white;
+    border: solid 1PX $--border-color-lighter;
+  }
+  .container-right {
+    float: left;
+    margin-top: 20PX;
+    margin-left: 20PX;
+    width: 20%;
+    height: 880PX;
+    background-color: $--color-white;
+    border: solid 1PX $--border-color-lighter;
+  }
+  .container-left-top {
+    width: 100%;
+    height: 420PX;
+  }
+  .container-left-bottom {
+    width: 100%;
+    height: 400PX;
+    background-color: $--color-white;
+  }
+  .curr-order {
+    float: left;
+    margin-left: 20PX;
+    margin-top: 1PX;
+  }
+  .control-right {
+    margin-top: 40PX;
+    margin-left: 20PX;
+  }
+  .agent-div {
+    float: left;
+    width: 28%;
+    height: 420PX;
+    border-bottom: solid 0.5PX $--border-color-lighter;
+  }
+  .other-div {
+    float: left;
+    width: 24%;
+    height: 210PX;
+    border-left: solid 1PX $--border-color-lighter;
+    border-bottom: solid 1PX $--border-color-lighter;
+    .model-icon {
+      width: 20PX;
+      height: 20PX;
+    }
+  }
+  .agent-icon {
+    position:relative;
+    float: left;
+    width: 50%;
+    height: 210PX;
+  }
+  .agent-num {
+    float: left;
+    width: 50%;
+    height: 210PX;
+  }
+  .lianji-success {
+    position:relative;
+    float: right;
+    right: 30PX;
+    top: 25PX;
+    text-align: center;
+    width: 81PX;
+    height: 34PX;
+    background-color: $--color-primary;
+    border-radius: 4PX;
+    font-size: 14PX;
+    padding:10PX 0;
+    color: $--color-white;
+  }
+  .lianji-fail {
+    position:relative;
+    float: right;
+    right: 30PX;
+    top: 25PX;
+    text-align: center;
+    width: 81PX;
+    height: 34PX;
+    background-color: #909399;
+    border-radius: 4PX;
+    font-size: 14PX;
+    padding:10PX 0;
+    color: $--color-white;
+  }
+  .lianji-wait {
+    position:relative;
+    float: right;
+    right: 30PX;
+    top: 25PX;
+    text-align: center;
+    width: 110PX;
+    height: 34PX;
+    background-color: #e6a23c;
+    border-radius: 4PX;
+    font-size: 14PX;
+    padding:10PX 0;
+    color: $--color-white;
+  }
+  .agent-id {
+    margin-top: 20PX;
+    margin-right: 30PX;
+    text-align: right;
+    font-size: 14PX;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0PX;
+    color: $--color-text-secondary;
+  }
+  .agent-number {
+    margin-top: 10PX;
+    margin-right: 30PX;
+    text-align: right;
+    font-size: 16PX;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0PX;
+    color: $--color-text-primary;
+  }
+  .agent-port {
+    margin-top: 20PX;
+    margin-right: 30PX;
+    text-align: right;
+    font-size: 14PX;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0PX;
+    color: $--color-text-secondary;
+  }
+  .port-number {
+    margin-top: 10PX;
+    margin-right: 30PX;
+    text-align: right;
+    font-size: 16PX;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0PX;
+    color: $--color-text-primary;
+  }
+  .model-name {
+    float: left;
+    margin-top: 32PX;
+    font-size: 14PX;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0PX;
+    color: $--color-text-regular;
+    margin-right: 10PX;
+  }
+  .model-tupian {
+    float: left;
+    margin-top: 30PX;
+    margin-left: 20PX;
+    margin-right: 10PX;
+  }
+  .to-detail {
+    float: left;
+    margin-top: 35PX;
+    line-height: 10PX;
+    font-size: 14PX;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0PX;
+    color: $--color-primary;
+    padding-left: 10PX;
+    border-left: 1PX solid $--color-primary;
+    cursor: pointer;
+  }
+
+  .control-center {
+    // float: left;
+    text-align: center;
+    margin-top: 40PX;
+    font-size: 30PX;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 20PX;
+    letter-spacing: 0PX;
+    color: $--color-text-primary;
+  }
+  .curr-grade {
+    margin-top: 30PX;
+    font-size: 24PX;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 14PX;
+    letter-spacing: 0PX;
+    color: $--color-text-regular;
+  }
+  .curr-num {
+    margin-top: 20PX;
+    font-size: 14PX;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 14PX;
+    letter-spacing: 0PX;
+    color: $--color-text-secondary;
+  }
+  .icon-ziyuan:before {
+    content: "\e670";
+    position:absolute;
+    z-index:2;
+    left: 45PX;
+    top: 72PX;
+    // color: #$--color-primary;
+  }
+  .yuanxing {
+    position:absolute;
+    left: 20PX;
+    top: 50PX;
+    z-index:1;
+    width: 90PX;
+    height: 90PX;
+    // background-color: #459ffc;
+    opacity: 0.2;
+    border-radius: 50%;
+  }
+  .dev-status {
+    position:absolute;
+    // text-align: center;
+    // margin-top: 150PX;
+    // left: 30PX;
+    top: 150PX;
+    height: 21PX;
+    font-size: 22PX;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 14PX;
+    letter-spacing: 0PX;
+    // color: $--color-primary;
+  }
+  .tuxing-left {
+    float: left;
+    // margin-top: 20PX;
+    margin-left: 1%;
+    width: 62%;
+    // height: 860PX;
+    background-color: $--color-white;
+    border: solid 1PX $--border-color-lighter;
+  }
+  .tuxing-right {
+    float: left;
+    margin-left: 1%;
+    width: 35%;
+    box-sizing: border-box;
+    background-color: $--color-white;
+    border: solid 1PX $--border-color-lighter;
+    position: relative;
+    overflow-x: auto;
+  }
+
+  .pattern-status {
+    min-height: 200PX;
+    margin-left: 20PX;
+    margin-top: 20PX;
+    margin-right: 20PX;
+    margin-bottom: 86PX;
+    .overLap{
+      width: 100% !important;
+    }
+  }
+  .pattern-name {
+    display: inline;
+    font-size: 20PX;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22PX;
+    letter-spacing: 0PX;
+    color: $--color-text-primary;
+  }
+  .pattern-message {
+    display: inline;
+    margin-left: 10PX;
+    font-size: 14PX;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22PX;
+    letter-spacing: 0PX;
+    color: $--color-text-regular;
+  }
+
+  .cross-mess {
+    margin-left: 15PX;
+    margin-top: 15PX;
+    height: 20PX;
+    font-size: 20PX;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22PX;
+    letter-spacing: 0PX;
+    color: $--color-text-primary;
+  }
+  
+
+  .el-tag {
+    margin-right: 4PX;
+    margin-bottom: 4PX;
+  }
+  .sloat-icon {
+    cursor:pointer;
+    margin-top: 15PX;
+  }
+  .control-time {
+    margin-top: 40PX;
+    font-size: 30PX;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 20PX;
+    letter-spacing: 0PX;
+    color: $--color-text-primary;
+  }
+  .control-time .time {
+    width: 50%;
+    display: inline-block;
+    text-align: center;
+  }
+  .control-time span:first-of-type {
+    border-right: 1PX solid #e5e5e5;
+  }
+  .pattern-explain {
+    float: right;
+    color: $--color-text-regular;
+    .el-checkbox__label {
+      font-size: 16PX;
+      color: $--color-text-regular;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 22PX;
+      letter-spacing: 0PX;
+    }
+  }
+ .jsontextarea {
+  textarea {
+    min-height: 200PX !important;
+    max-height:300PX;
+  }
+ }
+ .wenzijiemian {
+   .container-left {
+     margin-top: 0;
+   }
+   .container-right {
+     margin-top: 0;
+   }
+ }
 }