park-application-fe/src/views/cons/screen/index.scss

.screen-container {
  position: relative;
  width: 100%;
  height: 100%;


  .screen-title-container {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    background: url("./img/screen-title-bg.png") 100% 100% no-repeat;
    background-size: 100% 100%;

    .title-content {
      font-family: AlimamaShuHeiTi-Bold;
      font-weight: 700;
      font-size: 20px;
      color: transparent;
      letter-spacing: 3px;
      text-align: center;
      background-image: linear-gradient(to bottom, #fefefe 60%, #4E86AA);
      -webkit-background-clip: text;
      margin-bottom: 20px;
    }
  }

  .screen-left-container {
    padding: 10px 15px;
    box-sizing: border-box;
    background: rgba(1, 11, 33, 0.91);
    border-radius: 6px;
    position: absolute;
    left: 1vw;
    width: 23vw;
    max-height: calc(100vh - 80px);
    top: 60px;

    > :not(:first-child) {
      margin-top: 20px;
    }

    .container-title {
      display: flex;
      justify-content: left;
      align-items: center;
      color: #fefefe;
      font-family: AlimamaShuHeiTi-Bold;
      width: 100%;
      height: 30px;
      font-size: 14px;
      background: url("./img/block-header-bg.png") 100% 100% no-repeat;
      background-size: 100% 100%;

    }

    .control-content {
      > :not(:first-child) {
        margin-top: 5px;
      }

      .ctl-item {
        font-size: 12px;

        ::v-deep {
          .el-input__inner {
            background: transparent;
            border: 1px solid #4EBBCD;
            border-radius: 4px;
            font-size: 12px;
            color: #fefefe;
          }

          .el-input-group__append {
            background-image: linear-gradient(180deg, #3AA8E9 0%, #4E7ACD 100%);
            border: none;
            color: #fefefe;
          }

          .vue-treeselect__control {
            background: transparent;
            border: 1px solid #4EBBCD;

            .vue-treeselect__single-value {
              color: #fefefe;
            }
          }
        }
      }
    }

    .machine-list {
      box-shadow: inset 0 0 2px 1px #31b9fd66;
      padding: 10px 10px 20px 10px;
      box-sizing: border-box;


      > div:not(:first-child) {
        margin-top: 10px;
      }

      .list-container-title {
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 14px;
        color: #98CDFB;
        letter-spacing: 0;
      }

      .content-list {
        min-height: 250px;
        max-height: 65vh;
        overflow: hidden;
        overflow-y: scroll;
        color: #fefefe;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        .list-item {
          width: 100%;
          height: 25px;
          font-size: 12px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 0 5px;
          box-sizing: border-box;
          letter-spacing: 1px;
          cursor: pointer;

          &.selected-item {
            border: 1px solid #4EBBCD;
            border-radius: 4px;
          }

          .machine-status {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            margin-right: 10px;
          }

          &:nth-child(odd) {
            background: #012748;
          }
        }

        .no-more {
          color: #707070C5;
          font-size: 10px;
          width: 100%;
          text-align: center;
        }

        &::-webkit-scrollbar {
          display: none;
        }
      }
    }


  }

  .screen-right-container {
    position: absolute;
    right: 1vw;
    width: 23vw;
    top: 60px;

    > :not(:first-child) {
      margin-top: 20px;
    }

    .pile-status-legend {
      position: absolute;
      right: 23vw;
      width: 8vw;
      top: 0;

      .legend-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #fefefe;
        font-family: AlimamaShuHeiTi-Bold;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

        &:not(:first-child) {
          margin-top: 5px;
        }

        i {
          display: inline-block;
          width: 14px;
          height: 14px;
          border-radius: 14px;
          margin-right: 10px;
          border: 1px solid #4EBBCD;
        }
      }
    }
  }

  .online-summery {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

    .machine-pie-chart {
      height: 100px;
      width: 100px;
      background: url("./img/pie-bg.png") 100% 100% no-repeat;
      background-size: 100% 100%;
    }

    .machine-pie-legend {
      color: #fefefe;
      width: calc(80% - 100px);

      .legend-item {
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        > i {
          display: inline-block;
          width: 10px;
          height: 10px;
        }
      }
    }
  }

  .online-list {
    width: 100%;
    height: 120px;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    > :not(:first-child) {
      margin-top: 10px;
    }

    .list-item {
      box-sizing: border-box;
      padding: 0 10px;
      color: #fefefe;
      width: 100%;
      height: 30px;
      box-shadow: inset 0 0 1px 1px #31b9fd66;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .offset-status {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    > :not(:first-child) {
      margin-top: 10px;
    }

    .offset-title {
      height: 20px;
      font-weight: 600;
      font-size: 15px;
      color: #98CDFB;
      letter-spacing: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .verticality-tolerance {
        font-size: 12px;

        &.warning {
          .value {
            color: #FF0000;
          }
        }
      }
    }

    .offset-item {
      width: 140px;
      height: 140px;
      background: url("./img/target.svg") 100% 100% no-repeat;
      background-size: 100% 100%;
      position: relative;

      .deviation-point {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        position: absolute;
        background-color: #13ce66;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .label {
        position: absolute;
        color: #fefefe;
        width: 65px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 12px;

        &.tilt-angle {
          left: 100%;
          top: 50%;
          transform: translate(0%, -50%);
        }

        &.forward-tilt-angle {
          top: 100%;
          left: 50%;
          transform: translate(-50%, 0%);
        }
      }

    }
  }

}


.screen-dialog {
  ::v-deep {
    .el-dialog {
      background: #02102C;
      border: solid 2px rgba(49, 185, 253, 0.8);
      box-sizing: border-box;
      border-radius: 4px;
      width: fit-content;
    }

    .el-dialog__header {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;


      .el-dialog__headerbtn {
        position: unset;

        .el-dialog__close {
          color: #fefefe;
          font-size: 20px;
        }

      }
    }

    .el-dialog__title {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 1px;
      color: #FFFFFF;
    }

    .el-dialog__body {
      box-sizing: border-box;
      padding: 20px;
    }
  }

  .dialog-content {
    width: 45vw;

    ::v-deep {
      .el-descriptions__body {
        background: transparent;
        color: #BCC8DD;

        .el-descriptions-item__container .el-descriptions-item__content {
          justify-content: flex-end;
          margin-right: 10px;
          font-family: Helvetica-BoldOblique;
          font-weight: BoldOblique;
          color: #4FDFFF;
        }
      }
    }

    .machine-realtime-container {
      width: 100%;
      height: 250px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;

      > :not(:first-child) {
        margin-top: 10px;
      }

      .realtime-title {
        height: 20px;
        width: 100%;
        color: #98CDFB;
        font-weight: 600;
        letter-spacing: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .realtime-chart {
        flex: 1;
        width: 100%;
      }
    }
  }
}