ylyx-cli 1.0.0

package/templates/vue-app/files/src/views/selfStatistics/index.scss

@@ -0,0 +1,447 @@
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+
+::v-deep .el-timeline-item__node {
+  background-color: #fff !important;
+  border: 4px solid #1890ff;
+}
+
+::v-deep .el-timeline-item__icon {
+  font-size: 20px;
+  color: #666;
+}
+
+::v-deep .el-timeline-item__tail {
+  border-left: 2px dotted #ccc;
+  top: 16px;
+}
+
+::v-deep .el-textarea__inner {
+  height: 120px;
+}
+
+::v-deep .el-button.filter-item {
+  color: #1890ff;
+  border: 1px solid #1890ff;
+}
+
+::v-deep .el-timeline-item__timestamp.is-top {
+  padding-top: 0;
+}
+
+::v-deep .el-timeline-item__node--normal {
+  top: 10px;
+}
+
+::v-deep .el-dialog__title {
+  font-size: 16px;
+  color: #111;
+  font-weight: 500;
+}
+
+::v-deep .is-scrolling-none + .el-table__fixed-right {
+  height: 100% !important;
+}
+
+/*::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {*/
+/*  height: 30px;*/
+/*  line-height: 30px;*/
+/*}*/
+.el-select,
+.el-cascader {
+  margin-right: 0.5rem;
+}
+
+.head-container {
+  padding-bottom: 0;
+}
+
+.self-statiscs {
+  display: flex;
+  width: 100%;
+  // justify-content: center;
+  align-items: center;
+  color: #333;
+  font-size: 14px;
+  > div {
+    display: flex;
+    box-sizing: border-box;
+    width: 19.5%;
+    height: 92px;
+    border-radius: 4px;
+    padding: 0 38px;
+    background: url('~@/assets/images/self-bg.png') no-repeat left center;
+    background-size: 100% 100%;
+    &:nth-child(2) {
+      width: 22%;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+    p {
+      display: flex;
+      align-items: center;
+      img {
+        width: 20px;
+        margin-right: 10px;
+      }
+    }
+    h3 {
+      color: #000;
+      font-size: 28px;
+      margin-left: 15%;
+    }
+  }
+
+  .one {
+    align-items: center;
+    padding: 3%;
+  }
+  .other {
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 3% 0 3% 2%;
+    position: relative;
+    box-sizing: border-box;
+    p {
+      display: flex;
+      color: #666;
+    }
+    .top {
+      color: #002858;
+      span {
+        font-size: 14px;
+        display: inline-block;
+        // color:
+        &:last-child {
+        }
+      }
+      .bold {
+        font-weight: bold;
+        color: #002858;
+        margin-left: 5%;
+        font-size: 20px;
+      }
+    }
+    .bottom {
+      margin-top: 3%;
+      color: #002858;
+      p {
+        font-size: 13px;
+        display: block;
+
+        color: #002858;
+        i {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: #1fc68e;
+          margin-right: 3px;
+          &.first {
+            background-color: #fd9f0b;
+          }
+        }
+      }
+      > span {
+        width: 110px;
+        &:last-child {
+          width: calc(100% - 110px);
+        }
+      }
+      .svg-icon {
+        margin-right: 5px;
+      }
+      .online {
+        color: green;
+      }
+      .offline {
+        color: red;
+      }
+      .bold {
+        color: #002858;
+        font-size: 14px;
+        font-weight: 600;
+        margin-left: 3%;
+      }
+    }
+    .special-bottom {
+      display: flex;
+      flex-wrap: wrap;
+      p {
+        width: 50%;
+      }
+    }
+    .offline-detail {
+      position: absolute;
+      right: 1.5%;
+      top: 3%;
+      width: 79px;
+      height: 23px;
+      color: #fff;
+      line-height: 23px;
+      text-align: center;
+      background: url('../../assets/images/offline-bg.png') no-repeat left center;
+      font-size: 12px;
+      background-size: 100% 100%;
+    }
+  }
+  .bg2 {
+    background: url('~@/assets/images/self-bg2.png') no-repeat left center;
+    background-size: 100% 100%;
+    .top {
+      color: #471300;
+    }
+  }
+  // :nth-child(1){
+  //   flex: 5;
+  // }
+
+  // :nth-child(1){
+  //   flex: 5;
+  // }
+
+  // .left::before{
+  //   content:'提示：以下数据不随查询时间变化';
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  //   width: 100%;
+  //   height: 28x;
+  //   background-color: #fff7f3;
+  //   font-size: 13px;
+  //   line-height: 28px;
+  //   color: #ff7b35;
+  //   padding: 0 12px;
+  //   display: flex;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   margin-bottom: 8px;
+  // }
+
+  > .keyWords {
+    flex: 5;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 1rem 0;
+    border: 1px solid #eee;
+    background-color: #fff;
+    //padding: 2rem 1rem;
+    height: 100%;
+
+    > div {
+      display: flex;
+      flex: 1;
+      text-align: center;
+      justify-content: center;
+      position: relative;
+
+      &::before {
+        content: '';
+        width: 1px;
+        height: 60%;
+        background-color: #ccc;
+        position: absolute;
+        right: 0;
+      }
+
+      &:last-child::before {
+        content: none;
+      }
+
+      > div {
+        .special {
+          color: #000;
+          margin-top: 5px;
+
+          span {
+            font-weight: 600;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+
+    .picture {
+      text-align: left;
+    }
+
+    img {
+      width: 20px;
+      height: 22px;
+    }
+  }
+}
+.export {
+  text-align: right;
+  width: 100%;
+  margin-bottom: 10px;
+}
+.changeBtns {
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  .frequency {
+    ul {
+      display: flex;
+      height: 36px;
+      background: #f0f2f5;
+      border-radius: 3px;
+      padding: 3px 5px;
+      li {
+        color: #303133;
+        line-height: 30px;
+        font-size: 14px;
+        text-align: center;
+        cursor: pointer;
+        padding: 0 8px;
+      }
+      .frequencyActive {
+        background: #ffffff;
+        box-shadow: 0px 2px 4px 0px #bbc5d5;
+        border-radius: 2px;
+        color: #1989fa;
+        font-weight: bold;
+      }
+    }
+  }
+  .radioBtn {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 2px;
+  }
+}
+.tableData {
+  background-color: #fff;
+  margin-top: 0.5rem;
+  padding: 1rem 0.5rem 3rem;
+  .cell {
+    i:first-child {
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background-color: #595959;
+      display: inline-block;
+    }
+    .normal {
+      color: #595959;
+    }
+    .warn {
+      color: #b40000;
+      i:first-child {
+        background-color: #b40000;
+      }
+    }
+    .stop {
+      color: #ff781e;
+      i:first-child {
+        background-color: #ff781e;
+      }
+    }
+  }
+}
+.queryCondition {
+  padding: 1rem 0;
+}
+
+.dialog-footer-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  span {
+    color: #000;
+  }
+  .el-icon-warning {
+    color: #faad14;
+  }
+
+  .el-button {
+    border: 1px solid #dcdfe6;
+    color: #111;
+    font-family: PingFangSC-Regular;
+    font-size: 12px;
+
+    &:last-child {
+      color: #fff;
+      border: none;
+    }
+  }
+}
+
+.total {
+  margin: 1rem 0;
+  color: #111;
+  font-family: DIN-Bold;
+
+  > span {
+    font-weight: bold;
+  }
+}
+
+.timeLine {
+  overflow: auto;
+  height: 25rem;
+
+  ul {
+    padding-left: 1px;
+  }
+
+  .content {
+    height: 108px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+    padding: 10px 13px 0;
+    overflow: auto;
+    font-size: 14px;
+    color: #666;
+
+    span {
+      font-weight: 600;
+      color: #333;
+    }
+
+    p {
+      margin-bottom: 10px;
+
+      &:last-child {
+        color: #333;
+      }
+    }
+  }
+}
+
+.sure span {
+  color: #fff;
+}
+
+.EmailSet {
+  .el-form {
+    padding: 0 120px 0 20px;
+    max-height: 60vh;
+    overflow: auto;
+
+    .testCron {
+      position: absolute;
+      top: 0;
+      right: -90px;
+    }
+
+    .cardForm {
+      position: relative;
+
+      .emailAdd {
+        position: absolute;
+        right: -70px;
+        top: 6px;
+        width: 60px;
+
+        .el-button + .el-button {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}