uniProject/common/styles/global/components.scss

/******************** 这里存放通用组件样式 ********************/

/********** uni-app基础组件 **********/
/*** lli-button--primary ***/
// lli-primary
.lli-btn {
    background-color: $uni-primary;
	color:#ffffff;
}
// lli-primary-hover
.button-hover.lli-btn{
  background-color: $lli-btn-hover;
  color: hsla(0,0%,100%,.6);
}
// lli-primary-disabled
.lli-btn[disabled]:not([type]){
	background-color: $lli-btn-disabled;
	color: hsla(0,0%,100%,.6);
}
// lli-primary-loading
.lli-btn[loading]{
	background-color: $uni-primary;
	color: hsla(0,0%,100%,.6);
}

/*** lli-button--plain ***/
//lli-primary-plain
.lli-btn[plain]{
  border-color: $uni-primary;
  color: $uni-primary;
}
// lli-primary-plain
.button-hover.lli-btn[plain]{
  border-color: $lli-btn-disabled;
  color: $lli-btn-disabled;
}
// lli-primary-disabled
.lli-btn[plain][disabled]:not([type]){
	background-color: #f7f7f7;
	color: rgba(0, 0, 0, 0.3);
}
.lli-btn[plain][loading]{
	background-color: transparent;
	border-color: $lli-btn-disabled;
	color: $lli-btn-disabled;
}
	
	
/***** 项目中组件 *****/
// view
view{box-sizing: border-box;}

// 对齐方式
.lli-tl{text-align: left;}
.lli-tc{text-align: center;}
.lli-tr{text-align: right;}

/*****describe:考试-单选题-组件 author: TX  date:2024-06-24*****/
.mta-question-radio {
  margin: 24px 20px 0 20px;
  //max-height: calc(100vh - 160px);
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
  font-family: "PingFang SC, element-icons, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif";
  color: #333;
  .row1-col-num{
    flex-shrink: 0;
  }
  .row1 {
    &-col {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      &-num {
        margin-right: 5px;
      }
    }
  }

  &__group {
    margin: 18px 16px 0 16px;
    &.showError {
      .van-radio {
        .isActive {
          background-color: red;
        }
      }
    }
    .van-radio {
      position: relative;
      margin-bottom: 24px;
      color: #666;
      font-size: 14px;

      .radio-item {
        background-color: #fff;
        width: 20px;
        display: inline-block;
        border-radius: 50%;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #ccc;
        position: absolute;
        top: 0px;
        left: 0;
      }

      .van-radio__label {
        margin-left: 30px;
        line-height: 22px;

        .radio-text {
          text-align: justify;
        }
      }

      .isActive {
        color: #fff;
        background-color: #0856e6;
        border: none;
      }
    }

  }

  img {
    max-width: 100%
  }
}

/*****describe:考试-多选题-组件 author: TX  date:2024-06-24*****/
.mta-question-checkbox {
  margin: 24px 20px 0 20px;
  //max-height: calc(100vh - 160px);
  overflow-y: auto;
  word-break: break-word;
  color: #333;
  .row1-col-num{
    flex-shrink: 0;
  }
  .row1 {
    &-col {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      &-num {
        margin-right: 5px;
      }
    }
  }

  &__group {
    margin: 18px 16px 0 16px;

    &.showError {
      .van-checkbox {
        .isActive {
          background-color: red;
        }
      }
    }

    .van-checkbox {
      position: relative;
      margin-bottom: 24px;
      color: #666;
      font-size: 14px;

      .checkbox-item {
        background-color: #fff;
        width: 20px;
        display: inline-block;
        //border-radius: 50%; //  describe: 修改bug区分单选和多选 author: Wgy date:2019-09-18
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #ccc;
        position: absolute;
        top: 0px;
        left: 0;
      }

      .van-checkbox__label {
        margin-left: 30px;
        line-height: 22px;

        .radio-text {
          text-align: justify;
        }
      }

      .isActive {
        color: #fff;
        background-color: #0856e6;
        border: none;
      }
    }
  }

  img {
    max-width: 100%
  }
}

/*****describe:考试-判断题-组件 author: TX  date:2024-06-24*****/
.mta-question-panduan {
  margin: 24px 20px 0 20px;
  //max-height: calc(100vh - 160px);
  overflow-y: auto;
  word-break: break-word;
  color: #333;
  .row1-col-num{
    flex-shrink: 0;
  }

  .row1 {
    &-col {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      &-num {
        margin-right: 5px;
      }
    }
  }

  &__group {
    /*margin-left: 5px;*/
    margin: 18px 16px 0 16px;

    &.showError {
      .van-radio {
        .van-radio__icon--checked .van-icon {
          background-color: red;
        }
      }
    }

    .van-radio {
      position: relative;
      margin-bottom: 24px;
      color: #666;
      font-size: 14px;

      .radio-item {
        background-color: #fff;
        width: 20px;
        display: inline-block;
        border-radius: 50%;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #ccc;
        position: absolute;
        top: 0;
        left: 0;
      }

      .van-radio__label {
        margin-left: 30px;

        .radio-text {
          text-align: justify;
        }
      }

      .van-radio__icon--checked .van-icon {
        background: #0856e6;
        border-color:#0856e6;
      }
    }

  }

  .van-radio__icon--disabled.van-radio__icon--checked .van-icon {
    color: #ffffff;
    background: #0856e6;
    border-color:#0856e6;
  }

  img {
    max-width: 100%
  }
}

/*****describe:考试-填空题-组件 author: TX  date:2024-06-24*****/
.mta-question-tiankong {
  margin: 24px 20px 0 20px;
  text-align: justify;
  //max-height: calc(100vh - 160px);
  overflow-y: auto;
  word-break: break-word;
  color: #333;
  .row1-col-num{
    flex-shrink: 0;
  }

  &-wrap.showError {
    .van-field__control {
      color: red;
    }
  }

  .row1 {
    &-col {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      &-num {
        margin-right: 5px;
      }

    }
  }

  &-content {
    line-height: 28px;
    margin-bottom: 10px;
  }

  .mta-tiankong-input {
    line-height: 22px;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    text-align: left;
    border: 0;
    resize: none;
    background: #FFF;
    border-radius: 4px;
    padding-left: 8px;
  }

  .noContent {
    //background-color: @components-color;
    border: 1px solid #ccc;


    &::-webkit-input-placeholder {
      color: #FFF;

    }

  }

  img {
    max-width: 100%
  }

  .tiankong-box {
  }
}

/*****describe:考试-简答题-组件 author: TX  date:2024-06-24*****/
.mta-question-jianda {
  margin: 24px 20px 0px 20px;
  //max-height: calc(100vh - 160px);
  overflow-y: auto;
  word-break: break-word;
  color: #333;
  .row1-col-num{
    flex-shrink: 0;
  }

  .row1 {

    &-col {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      &-num {
        margin-right: 5px;
      }

    }
  }

  .row2 {
    margin: 16px 16px 26px 16px;

    &-col {
      .van-field {
        border-radius: 4px;
      }
    }

  }

  .noContent {
    //background-color: @components-color;
    border: 1px solid #ccc;
    .van-field__control {
      &::-webkit-input-placeholder {
        color: #fff;
      }
    }
  }

  .van-field--disabled .van-field__control, .van-field__right-icon {
    color: #333;
  }

  img {
    max-width: 100%
  }
  .upload-image {
    .my-ul {
      .van-icon-delete{
        margin: 0 10px;
      }
    }
    //图片最大数量提示
    .photo-tip{
      color: #999;
      font-size: 10px;
      margin: 0;
      padding: 0;
      width: 100%;
    }
    .van-button--normal{
      margin: 16px 0;
    }
  }
}

/*****describe:考试-阅读题-组件 author: TX  date:2024-06-24*****/
.mta-question-yuedu {
  margin: 24px 20px 0px 20px;
  //max-height: calc(100vh - 160px);
  overflow-y: auto;
  word-break: break-word;
  color: #333;

  // 浮层
  .button-next-tip{
    position: absolute;bottom:36px;right:0;pointer-events: none;
    i{display:inline-block; border-width:10px; border-style:solid dashed dashed; border-color:#646566 transparent transparent ;font-size:0; line-height:0;right: 12px;position: absolute;}
    p{background: #646566;color: #fff;border-radius: 10px;margin: 0;padding: 16px;width: 130px;text-align: center;}
  }
  // 置灰隐藏
  .swiper-button-disabled .button-next-tip{display: none;}
  // 关闭按钮
  .button-next-em{width: 22px;height: 22px;position: absolute;right: 4px;top: -80px;background-image: url("../../assets/images/icons/close.svg");background-repeat: no-repeat;background-position: center;z-index: 9;}


  .row1-col-num{
    flex-shrink: 0;
  }
  .yuedu-question-row {
    max-height: 50%;
    overflow-y: auto;

    &-num {
      margin-right: 5px;
      /*margin-top: 14px;*/
    }

    &-col {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      word-break: break-all;
      margin: 24px 20px 0 20px;
    }
  }

  .yuedu-content-row {
    max-height: 50%;


    &-main {
      width: 100%;
      height: 100%;
    }

    &-swiper {
      width: 100%;
      height: 100%;
      overflow-y: auto;

      .swiper-button-prev {
        height: 20px;
        width: 26px;
        top: 60%
      }

      .swiper-button-next {
        height: 20px;
        width: 26px;
        top: 60%
      }
      .swiper-button-next,.swiper-button-prev{
        outline: none;
        &:active,&:focus-visible,&:hover,&:focus,&:visited,&:focus-within,&:target{outline: none;}
      }
    }
  }

  img {
    max-width: 100%
  }
}

/*****音频播放器 author: TX  date:2024-06-24*****/
.MtaBusAudioPlayerBox{
  position: relative;
  .st-aplayer{
    //position: relative;
  }
  .audio-mask {
    width: 30px;
    height: 30px;
    background: transparent;
    z-index: 99;
    position: absolute;
    top: 10px;
    right: 20px;
  }
}


/*****分类组件 author: TX  date:2024-06-24*****/
.lli-status-box{
  display: flex;justify-content: space-around;background: #fff;
  border-bottom:1px solid #f2f1f2;padding: 15px 10px;
  label{text-align: center;color: #333333;position: relative;}
  label.click:before{content: '';position: absolute;height: 2px;width: 80%;bottom: -15px;font-size: 14px;
	background-color: $uni-primary;
    left: 10%;border-radius: 2px;}
}