/******************** 这里放组件样式 ********************/ /***** view *****/ view{box-sizing: border-box;} /***** 对齐方式 *****/ .ezy-tl{text-align: left;} .ezy-tc{text-align: center;} .ezy-tr{text-align: right;} /***** 状态栏 *****/ .ezy-status-bar{height: var(--status-bar-height);width: 100%;background-color: red;} /***** 超出省略 *****/ // 文本超出省略号显示 (一行) @mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;} // 文本超出省略号显示 (多行) @mixin multi-line-ellipsis($rows: 3){-webkit-line-clamp:$rows;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;display: -webkit-box;white-space: normal !important;-webkit-box-orient: vertical;} /***** 页面高度 *****/ /* #ifdef H5 */ //标题栏 $titleBar-page: calc(100vh - var(--status-bar-height)); //tabBar $titleBar-page: calc(100vh - var(--window-bottom)); //标题栏 + tabBar $titleBar-tabBar-page: calc(100vh - var(--status-bar-height) - var(--window-bottom)); /* #endif */ /* #ifdef APP-PLUS */ //标题栏 $titleBar-page: calc(100vh - var(--status-bar-height)); //tabBar $titleBar-page: 100vh; //标题栏 + tabBar $titleBar-tabBar-page: calc(100vh - var(--status-bar-height)); /* #endif */ /***** 页面背景图 *****/ // no-repeat cover @mixin ezy-no-repeat-cover($position: center) { background-position: $position;background-size: cover;background-repeat: no-repeat; } // no-repeat contain @mixin ezy-no-repeat-contain($position: center) { background-position: $position;background-size: contain;background-repeat: no-repeat; } /***** 富文本处理 *****/ @mixin ezy-rich-text() { div,p,span{margin: 0;padding: 0;} img{max-width: 100%;} } // 全屏的popup弹窗 .ezy-popup-width-all{ width: 100%; .uni-popup__wrapper{width: 100%;} } /***** tabbar *****/ .ezy-custom-tabbar{ width: 100%;height: 150rpx;position: fixed;left: var(-window-left);right: var(-window right); bottom: var(--window-bottom);padding-bottom: env(safe-area-inset-bottom);box-sizing: border-box;z-index: 9; .tabbar-item-box{display: flex;flex-wrap: nowrap;justify-content: space-evenly; box-sizing: border-box;padding: 0 96rpx; } .tabbar-item{width: 135rpx;height: 144rpx;@include ezy-no-repeat-cover;z-index: 2;} } .ezy-custom-tabbar::before{ content: '';width:100%;height: 100rpx;left: 0;right:0;bottom: 0;position: absolute; background-image: url("@/static/images/tabbar/tabbar-bg.png");@include ezy-no-repeat-cover(top); } /***** 标题栏 *****/ // 三个元素 .ezy-navBar-box{ display: flex;align-items: center;justify-content: space-between; padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative; .nav-bar-icon{ width: 24rpx;height: 38rpx; background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover(); } .nav-bar-title{font-size: 36rpx;color: #fff;} // 考试数字 .nav-bar-other{ font-size: 30rpx;color: #fff;margin-right: 2%; .key-note{color: #ffff01;} } // 文字按钮 .text-btn{font-size: 26rpx;color: #fff;padding-top: 4rpx;box-sizing: border-box;} } // 两个元素 .icon-title-navBar-box{ display: flex;align-items: center;justify-content: center; padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative; .nav-bar-title{ font-size: 36rpx;height: 63rpx;line-height: 63rpx;color: #fff;max-width: 70%; } .nav-bar-icon{ width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: 12rpx; background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover(); } } // 仅一个返回按钮 .ezy-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height); background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover(); } /***** 试题---题干 *****/ .ezy-shiti-question{ margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx;box-sizing: border-box; text-align: justify;word-wrap: break-word;word-break: break-all;display: block;@include ezy-rich-text; } /***** 单选题 *****/ .ezy-danxuan-box{ margin: 0 10rpx; .danxuan-title{ width: 231rpx;height: 63rpx; background-image: url("@/static/images/exam/danxuan-title.png");@include ezy-no-repeat-cover(); } .danxuan-option-box{ width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx; font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx; display: flex; .option-change{ width: 48rpx;height: 48rpx;line-height: 48rpx;box-sizing: border-box; flex-shrink: 0;border-radius: 50%;border: 1rpx solid;margin-right: 16rpx; display: flex;align-items: center;justify-content: center; } .option-question{font-size: 32rpx;line-height: 1.6;margin-left: 6rpx;@include ezy-rich-text; text-align: justify;word-wrap: break-word;word-break: break-all;display: block;} } .danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;} .danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;} .danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;} } /***** 判断题 *****/ .ezy-panduan-box{ margin: 0 10rpx; .panduan-title{ width: 231rpx;height: 63rpx; background-image: url("@/static/images/exam/panduan-title.png");@include ezy-no-repeat-cover(); } .danxuan-option-box{ width: 100%;line-height:96rpx;border-radius: 8px;margin-bottom: 20rpx; font-size: 32rpx;color: #333;box-sizing: border-box;padding: 10rpx 24rpx; } .uni-radio-input{ width: 56rpx;height: 56rpx;border: 0;@include ezy-no-repeat-cover(); background-image: url("@/static/images/exam/option-bj.png");} .option-question{display: flex;} .option-question.active .uni-radio-input{ background-image: url("@/static/images/exam/option-active-img.png"); background-color: transparent!important; svg{display: none;} } .option-question.showError .uni-radio-input{ background-image: url("@/static/images/exam/option-error-img.png"); background-color: transparent!important; svg{display: none;} } .option-question.active_right .uni-radio-input{ background-image: url("@/static/images/exam/option-right-img.png"); background-color: transparent!important; svg{display: none;} } } /***** 填空题 *****/ .ezy-tiankong-box{ .tiankongn-title{ width: 231rpx;height: 63rpx; background-image: url("@/static/images/exam/tiankong-title.png");@include ezy-no-repeat-cover; } .tiankong-input {width: 50px;height: 32rpx;border: 1px solid #999;} .tk-input-box{display: inline-block;position: relative;font-size: 0;margin: 0 4rpx;} .tiankong-input{text-align: center;} .tiankong-input.showError{color: #ff5757;} .tiankong-input.active_right{color: green;} .tk-input-box.showError::after{ content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx; background-image: url("@/static/images/exam/option-error-img.png");@include ezy-no-repeat-cover; } .tk-input-box.active_right::after{ content: '';width: 30rpx;height: 30rpx;display: block;position: absolute;top: -12rpx;right: -6rpx; background-image: url("@/static/images/exam/option-right-img.png");@include ezy-no-repeat-cover; } .ezy-shiti-question li{margin: 20rpx 0;} } /***** 试题白色的框 *****/ .shiti-frame-box{ flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px; margin: 12rpx auto 32rpx;position: relative;padding: 10% 0 6%;box-sizing: border-box;display: flex;flex-direction: column; } .shiti-frame-box::before{ content: "";display: block;background-color: rgba(255, 255, 255, 0.6);border-radius: 0 0 10rpx 10rpx; position: absolute;top: 20rpx;left: 20rpx;right: 20rpx;bottom: 30rpx;z-index: 1; } /***** 模拟标题栏 *****/ .ezy-title-bar { height: calc(44px + env(safe-area-inset-top)); position: fixed;top: var(--status-bar-height);left: var(--window-left);right: var(--window-right); background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box; display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998; } // 小的提示弹窗 .ezy-tip-dialog{ .tip-content-box{@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;} .tip-title{ color: #343434;font-size: 38rpx;margin-bottom: 24rpx; } .tip-content{ color: #666;font-size: 32rpx;padding-bottom: 42rpx; border-bottom: 1px dashed #70cbf4;line-height: 1.6; } .tip-btn-box{ width: 100%;display: flex;justify-content: space-between; .not-confirm-btn,.confirm-btn{ width: 208rpx;height: 83rpx;@include ezy-no-repeat-cover;margin: 30rpx 32rpx 0; } .not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");} .confirm-btn{background-image: url("@/static/images/common/tip-confirm-btn.png");} } } .tip-small-dialog{ .tip-content-box{ width: 625rpx;height: 365rpx;padding: 42rpx 48rpx; background-image: url("@/static/images/common/tip-small-bj.png"); } } .tip-middle-dialog{ .tip-content-box{ width: 625rpx;height: 423rpx;padding: 42rpx 48rpx; background-image: url("@/static/images/common/tip-middle-bj.png"); } } .tip-big-dialog{ .tip-content-box{ width: 625rpx;height: 519rpx;padding: 42rpx 48rpx; background-image: url("@/static/images/common/tip-big-bj.png"); } .tip-content{min-height: 240rpx;text-align: justify;} } /*积分框*/ .ezy-jf-box{ width: 142rpx;height: 46rpx;display: flex;align-items: center;line-height: 1.2;font-size: 26rpx; @include ezy-no-repeat-cover;background-image: url("@/static/images/common/jf-bj.png");margin-top: 20rpx; .jf-icon{width: 35rpx;height: 35rpx;margin:0 4rpx 0 10rpx;flex-shrink: 0; @include ezy-no-repeat-cover;background-image: url("@/static/images/my/jf-qb.png");} .jf-text{min-width: 60rpx;text-align: center;color: #fff;} } // tab页面 .ezy-tab-border{ flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px; margin: 12rpx auto 32rpx;position: relative;box-sizing: border-box;display: flex;flex-direction: column; } .ezy-tab-box{ height: 82rpx!important; background-color: rgba(255, 255, 255, 0.6);z-index: 3;margin: 20rpx 20rpx 0; box-sizing: border-box;padding: 10rpx 12rpx;border-radius: 8rpx; .segmented-control__text{color: #333!important;} .segmented-control__item--button,.segmented-control__item--button--last{height: 62rpx;border: 0;border-width: 0!important;border-radius: 8rpx;} .segmented-control__item--button--active .segmented-control__text{color: #fff!important;} } //视频 .ezy-video-box{ width: 606rpx;height: 394rpx;@include ezy-no-repeat-cover;margin: 0 auto 42rpx; background-image: url("@/static/images/exam/video-frame-bj.png");position: relative; box-sizing: border-box;padding: 18rpx; .ezy-video{ width: 100%;height: 100%!important; .prism-big-play-btn{ width: 87rpx;height: 87rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/course/video-play-btn.png"); top: 50%;left: 50%!important;transform: translate(-50%, -50%);z-index: 20; .outter{border: 0;} } .prism-info-display{display: none;} .prism-time-display .time-bound,.prism-time-display .duration{color: #fff;} } }