/******************** 这里存放通用组件样式 ********************/ /********** 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; .status-item{text-align: center;color: #333333;position: relative;} .status-item.click:before{content: '';position: absolute;height: 2px;width: 80%;bottom: -15px;font-size: 14px; background-color: $uni-primary; left: 10%;border-radius: 2px;} }