psychological-competence/src/style/public.scss

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt40 {
  margin-top: 40px;
}

.mt100 {
  margin-top: 100px;
}

.mb10 {
  margin-bottom: 10px;
}

.ml10 {
  margin-left: 10px;
}

.txt-center {
  text-align: center;
}

.wrap {
  width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 1024px) {
  .wrap {
    width: 100%;
    margin: 0;
  }
}

@media screen and (min-width:600px) and (max-width:1024px) {
  .activeTask {
    overflow-y: scroll;
  }
}

.glass {
  width: 932px;
  height: 593px;
  background: rgba(255, 255, 255, 0.39);
  border: 3px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0px 3px 6px rgb(0, 0, 0);
  border-radius: 12px;
  position: relative;
  margin: 10vh auto;
}

/* 任务介绍样式 */
.desc_wrap {
  width: 100%;
  height: 780px;
  margin: 30px auto;
}

#title {
  padding-top: 49px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 48px;
  color: #FFFFFF;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  text-align: center;
}

.right_part {
  float: right;
  width: 45%;
  height: 100%;
  background-size: 100% 100%;
  border-radius: 0 12px 12px 0;
  position: relative;

  #title {
    width: calc(100% - 20px);
    margin-left: 10px;
  }
}

.left_part {
  float: left;
  width: 55%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  #left_top {
    margin-top: 30px;

    .setting {
      width: 24px;
      height: 24px;
      margin-left: 36px;
    }

    .text {
      width: 150px;
      height: 32px;
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 32px;
      color: #57ACBB;
      margin-left: 16px;
    }

    .voiceBg {
      width: 36px;
      height: 36px;
      background: url(../assets/voice.png);
      background-size: cover;
      float: left;
      margin-left: 60px;
      cursor: pointer;
    }

    .voiceBg.active {
      width: 36px;
      height: 36px;
      background: url(../assets/voice.gif);
      background-size: cover;
    }
  }

  .left-desc-80 {
    width: calc(100% - 72px);
    overflow-y: auto;
    height: 3.12rem;
    margin-top: 30px;
    margin-left: 36px;
    text-indent: 2em;
    font-size: 0.1rem;
    line-height: 1.75;
  }
}

.desc_content {
  width: 70%;
  height: 100%;
  background: rgb(248, 248, 248);
  opacity: 1;
  border-radius: 12px;
  margin: 0 auto;
}

.el-button.start {
  border: 2px solid rgb(255, 255, 255);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 39px;
  height: 0.24rem;
  line-height: 0.24rem;
  font-size: 0.098rem;
  padding: 0 26px;
}

.el-progress-bar__innerText {
  color: #333333;
}

.taskHead {
  position: absolute;
  right: 140px;
  top: 104px;
  z-index: 999;

  .scale {
    width: 0.18rem;
    height: 0.18rem;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }

  &:hover {
    scale: 1.15;
  }

  .scale:active {
    transform: scale(0.95);
    opacity: 0.9;
  }
}

.countdownStr {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 70px;
  text-align: center;
  line-height: 100px;
}

/* 认知任务结果显示公共样式 */
.test_result {
  text-align: center;
  width: 500px;
  margin-top: 200px;
}

.test_result th {
  width: 50%;
  background: #57acbb;
  color: #ffffff;
  border: 1px solid #57acbb;
  font-size: 16px;
  line-height: 48px;
}

.test_result td {

  width: 50%;
  border: 1px solid #cccccc;
  font-size: 16px;
  line-height: 48px;
}

/* 表头样式统一处理 */
.el-table th {
  background: rgba(0, 0, 0, 0.01);
  font-family: PingFang SC;
  color: #101010;
}

.modelName {
  font-size: 18px;
  color: #222222;
  margin: 20px 0 0 20px;
}

.display-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.w100 {
  width: 100%;
}

.bgC {
  background-color: #57acbb;

}

.bdc {
  border-color: #57acbb;
}

.color_b {
  color: #57acbb;
}

.main_progress {

  .el-progress-bar__inner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #ff3c3c !important;
    text-align: right;
    border-radius: 100px;
    line-height: 0.84;
    white-space: nowrap;
    transition: width 0.6s ease;
    background-image: linear-gradient(to right, #ffd650, #ff8431) !important;

    .el-progress-bar__innerText {
      color: white !important;
    }
  }
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: transparent; /* 轨道背景色 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(136, 136, 136, 0.6); /* 滑块背景色 */
}

/* 滚动条滑块在鼠标悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(136, 136, 136, 0.8); /* 悬停时滑块背景色 */
}

.content-container {
  position: fixed;
  left: 0;
  top: 72px;
  width: 100vw;
  height: calc(100vh - 74px);
  margin: 0;
  background-color: transparent;
  overflow: hidden;
}

.content-outline {
  position: absolute;
  left: 50%;
  top: calc(50% - 20px);
  transform: translate(-50%, -50%);
  width: 72%;
  margin: 0 auto;
  height: 3.85rem;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;

  &.result-card-outline {
    top: 50%;
    width: 68%;
    height: 680px;
  }
}

.left-desc {
  width: 100%;
  font-size: 12px;
  overflow-y: auto;
  height: 440px;
}

/*全局处理el-dialog的内边距过大，导致内容空白区域大*/
.el-dialog {
  .el-dialog__header {
    padding: 12px 12px 8px;

    .el-dialog__title {
      font-size: 0.106rem;
    }
  }

  .el-dialog__close {
    font-size: 0.143rem;
  }

  .el-dialog__body {
    padding: 12px 16px 10px;

    .el-form {
      .el-form-item {
        margin-bottom: 0.128rem;

        .el-form-item__label {
          font-size: 0.092rem;
        }

        .el-form-item__content {

          .el-form-item__error {
            font-size: 0.086rem;
            height: 0.108rem;
          }
        }
      }
    }

    .el-input {
      font-size: 0.083rem;

      .el-input__inner {
        height: 40px;
        line-height: 40px;
      }
    }

    .el-radio {
      .el-radio__input {

        .el-radio__original {
          width: 14px;
          height: 14px;
        }
      }
      .el-radio__label {
        font-size: 0.083rem;
      }
    }

    .el-checkbox {
      .el-checkbox__inner,
      .el-checkbox__label {
        font-size: 0.086rem;
      }
    }

    .el-select {
      .el-tag {
        font-size: 0.088rem;
      }
    }

    .el-table {
      font-size: 0.083rem;

      .el-table__cell {
        padding: 6px 0;
      }

      .el-button {
        padding: 6px 12px;
        font-size: 0.08rem;
      }

      .el-tag {
        height: 28px;
        line-height: 28px;
        font-size: 0.08rem;
      }
    }

    .el-pagination {
      .el-pagination__total,
      .el-pagination__jump {
        font-size: 0.083rem !important;
        height: 40px !important;
        line-height: 40px !important;
      }

      button {
        height: 40px;
        line-height: 40px;
      }
    }

    .el-pager li {
      font-size: 0.083rem;
      height: 36px;
      line-height: 36px;
    }
  }

  .el-button {
    height: 40px;
    font-size: 0.083rem;
    padding: 2px 18px;
  }
}

.el-pagination {
  .el-pagination__total,
  .el-pagination__jump {
    font-size: 0.083rem !important;
    height: 0.24rem !important;
    line-height: 0.24rem !important;
  }

  button {
    height: 0.24rem !important;
    line-height: 0.24rem !important;
  }
}

.el-pager li {
  font-size: 0.083rem;
  height: 0.24rem !important;
  line-height: 0.24rem !important;
}

.el-input--suffix .el-input__inner,
.el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item {
  font-size: 0.084rem;
}

.el-pagination {
  height: 42px;

  &.pagination-sty {
    width: 80%;
    margin: 8px auto 4px;
    text-align: center;
  }


  span {
    font-size: 12px !important;
  }

  li {
    width: 26px;
    height: 26px;
  }

  input {
    height: 26px;
    line-height: 26px;
  }

  button {
    height: 26px;
    line-height: 26px;
  }
}

.el-page-header {
  height: 26px;
  line-height: 26px;
  margin-bottom: 12px;

  .el-icon-back {
    font-size: 14px;
  }

  .el-page-header__title {
    font-size: 12px;
  }

  .el-page-header__content {
    font-size: 16px;
  }
}

.sys-container {
  .el-menu {
    padding: 0 !important;

    .el-menu--horizontal {
      border-bottom: transparent;
    }

    .el-dropdown-menu__item, .el-menu-item {
      font-size: 0.083rem;
    }

    .el-submenu__title,
    .el-submenu__title.is-active {
      font-size: 0.083rem;
      height: 50px;
      line-height: 50px;
      border-bottom: transparent !important;
    }

    .el-menu-item-group__title {
      padding: 0 !important;
    }
  }

  .el-form {
    .el-form-item {
      margin-bottom: 0.108rem;

      .el-form-item__label {
        font-size: 0.083rem;
      }

      .el-form-item__content {

        .el-form-item__error {
          font-size: 0.086rem;
          padding-top: 2px;
          height: 0.108rem;
        }

        .el-button {
          height: 40px;
          font-size: 0.078rem;
        }
      }
    }
  }

  .el-input {
    font-size: 0.086rem;

    .el-input__inner {
      height: 36px;
      line-height: 36px;
    }
  }

  .el-radio {
    .el-radio__input {

      .el-radio__original {
        width: 14px;
        height: 14px;
      }
    }
    .el-radio__label {
      font-size: 0.083rem;
    }
  }

  .main-header {
    height: 40px !important;
  }

  .el-table {
    font-size: 0.083rem;

    .el-table__cell {
      padding: 6px 0;
    }

    .el-button {
      padding: 6px 12px;
      font-size: 0.08rem;
    }

    .el-tag {
      height: 28px;
      line-height: 28px;
      font-size: 0.08rem;
    }

    &.center-table {
      height: calc(100vh - 1.3rem);

      .el-table__body-wrapper {
        height: calc(100% - 0.125rem);
        overflow: auto;
        overflow-x: hidden;
      }
    }
  }

  .el-input .el-input__inner {
    font-size: 0.083rem;
  }

  .headerRow {
    .el-input {
      min-width: 210px;

      .el-input__inner {
        height: 40px;
        line-height: 40px;
      }

      .el-input__suffix {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }


    .el-date-editor {
      height: 40px;
      line-height: 40px;

      .el-range__icon,
      .el-range-separator {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .el-range-input {
        height: 38px;
        line-height: 38px;
        font-size: 0.083rem;
      }
    }

    .el-select {
      min-width: 210px;
    }

    .el-button {
      height: 40px;
      padding: 9px 16px;
      font-size: 0.083rem;
    }
  }

  .el-button--small {
    height: 40px;
    font-size: 0.083rem;
  }

  h5 {
    font-size: 0.086rem
  }
}

.el-picker-panel {
  .el-date-range-picker__header {
    div {
      font-size: 0.084rem;
    }
  }

  .el-date-table {
    font-size: 0.083rem;
  }
}

.el-range-editor--small.el-input__inner {
  height: 40px;
  line-height: 40px;

  .el-range-input {
    font-size: 0.083rem;
  }
}

.el-date-editor .el-range__icon {
  font-size: 0.083rem;
}

.el-upload__tip,
.el-page-header .el-page-header__title {
  font-size: 0.078rem;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input {
  border: none
}