uniProject/common/styles/global/components.scss

/******************** 这里放组件样式 ********************/
	
/***** 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: 0;right: 0;
	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 64rpx;
	}	
	.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: 72rpx;height: 63rpx;position: absolute;left: 0;top: var(--status-bar-height);}
.ezy-nav-bar-icon::after{
	width: 24rpx;height: 38rpx;content: '';display: block;margin: 12rpx auto;
	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;}
}
/***** 英语题 *****/
.ezy-yingyu-danxuan-box{
	.yingyu-danxuan-title{
		width: 231rpx;height: 63rpx;
		background-image: url("@/static/images/exam/danxuan-title.png");@include ezy-no-repeat-cover();
	}
	.yingyu-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;}
	}
	.yingyu-danxuan-option-box.active .option-change{color: #FFF;background-color:#0589e9;border-color:#0589e9;}
	.yingyu-danxuan-option-box.showError .option-change{color: #FFF;background-color:#ff5757;border-color:#ff5757;}
	.yingyu-danxuan-option-box.active_right .option-change{color: #FFF;background-color:#1ac136;border-color:#1ac136;}
}
/***** 英语题播放按钮 *****/
.yingyu-canplay-img,.yingyu-playing-img{
	width: 48rpx;height: 48rpx;display: inline-block;margin: 0 24rpx 3rpx;
	vertical-align: middle;@include ezy-no-repeat-cover();
}
.yingyu-canplay-img{background-image: url("@/static/images/exam/yingyu-canplay-img.png");}
.yingyu-playing-img{background-image: url("@/static/images/exam/yingyu-playing-img.gif");}

/***** 试题白色的框 *****/
.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-img{
	  width: 260rpx;height: 260rpx;@include ezy-no-repeat-contain;margin: 0 auto;
	  background-image: url("@/static/images/common/dialog-login-img.png");
	 }
	.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;}
}

.sxtk-sc-dialog{
	.tip-title{color: #343434;font-size: 38rpx;margin-bottom: 24rpx;}
	.tip-content-box{
		width: 625rpx;height: 587rpx;padding: 42rpx 48rpx;box-sizing: border-box;
		background-image: url("@/static/images/my/tk-dialog-bj.png");
		@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;
	}
	.tip-content{
		min-height: 180rpx;text-align: justify;border-bottom: 1px dashed #70cbf4;
		margin-bottom: 30rpx;color: #666;font-size: 32rpx;padding-bottom: 42rpx;
		border-bottom: 1px dashed #70cbf4;line-height: 1.8;}
	.not-confirm-btn,.confirm-btn{
		width: 519rpx;height: 98rpx;line-height: 98rpx;@include ezy-no-repeat-cover;
		color: #fff;
		}
	.not-confirm-btn{background-image: url("@/static/images/my/tk-dialog-qx.png");margin-top: 16rpx;}
	.confirm-btn{background-image: url("@/static/images/my/tk-dialog-sc.png");}
}

/*积分框*/
.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: 365rpx;@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;background-color: transparent;
		.prism-big-play-btn{
			width: 87rpx;height: 87rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/course/video-play-btn.png");
			top: 52%;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;}
		// 播放按钮动画
		.play-apply-animation{animation:unset;}
	}
}

// 底部支付
.footer-mall-pay-box{
	width: 100%;background-color: #fff;position: absolute;bottom: 0;
	display: flex;align-items: center;justify-content: space-between;
	box-sizing: border-box;padding: 16rpx 12rpx  calc(16rpx + var(--window-bottom));
	.mall-left-box{
		font-size: 22rpx;color: #afafaf;
		.price-icon-box{margin-bottom: 6rpx;}
		.red-price{font-size: 56rpx;color:#ff0101;font-weight: bold;margin-right: 10rpx;}
		.fh-text{font-size: 32rpx;margin-right: 0;}
		.mxjt-sq-icon,.mxjt-zk-icon{
			width: 18rpx;height: 18rpx;@include ezy-no-repeat-cover;margin-left: 4rpx;
			background-image: url("@/static/images/common/jt-up-icon.svg");
		}
		.mxjt-zk-icon{transform: rotate(180deg);}
	}
	.pay-status-box{
		width: 200rpx;display: flex;align-items: center;border-left: 1rpx solid #ccc;
		padding:2rpx 0 2rpx 16rpx;color: #666;margin-left: 4rpx;
		icon{width: 42rpx;height: 42rpx;@include ezy-no-repeat-cover;margin-right: 8rpx;}
		.wx-icon{background-image: url("@/static/images/pay/svip-wx-icon.png");}
		.zfb-icon{background-image: url("@/static/images/pay/svip-zfb-icon.png");}
		.apple-icon{background-image: url("@/static/images/common/apple-icon.png");}
	}
	.pay-status-box::after{
		content:'';width: 24rpx;height: 24rpx;margin-left: 4rpx;
		@include ezy-no-repeat-cover;background-image: url("@/static/images/common/qiehuan-icon.svg");
	}
	.apple-status-box{align-items: center;justify-content: center;}
	.apple-status-box::after{display: none;}
	.pay-btn{
		width: 200rpx;height: 80rpx;font-size: 28rpx;line-height: 80rpx;text-align: center;color: #fff;
		@include ezy-no-repeat-cover;background-image: url("@/static/images/mall/mall-btn.png");
	}
}
.footer-mall-pay-box::before{content:'';width: 100%;height: 4rpx;background-color: rgba(0, 0, 0, 0.4);
position: absolute;left: 0;top: -4rpx;opacity: 0.4;}


// 明细弹窗
.mall-detail-dialog{
	width: 100%;height: 100vh;display: flex;align-items: flex-end;
	.detail-content-box{
		width: 750rpx;height: 90vh;@include ezy-no-repeat-cover(top);
		background-image: url("@/static/images/mall/cpmx-border-bj.png");
		box-sizing: border-box;padding: 84rpx 32rpx 0;position: relative;
		display: flex;flex-direction: column;
	}
	.yfmx-title,.cpmx-title{
		width: 231rpx;height: 58rpx;@include ezy-no-repeat-cover;
		background-image: url("@/static/images/mall/yfmx-text.png");
		display: block;margin: 0 auto 42rpx;
	}
	.cpmx-title{background-image: url("@/static/images/mall/cpmx-text.png");}
	.dialog-close-btn{
		width: 60rpx;height: 60rpx;
		background-image: url("@/static/images/catalog/catalog-close-btn.png");@include ezy-no-repeat-cover;
		position: absolute;top: 64rpx;right: 36rpx;
	}
	
	.content-yuanjia{font-size: 46rpx;color: #ff0101;}
	.select-all-box{
		text{padding-left: 200rpx;margin-left: -200rpx;display: inline-block;vertical-align: middle;}
	}
	.detail-checkbox{
		.uni-checkbox-input{
			width: 48rpx;height: 48rpx;@include ezy-no-repeat-cover;margin: 0 12rpx 0 0;
			background-image: url("@/static/images/pay/svip-radio.png");flex-shrink: 0;
			background-color:transparent;border:0; pointer-events: none;
			svg{
				width: 48rpx;height: 48rpx;transform: unset;left: 0;top:0;
				@include ezy-no-repeat-cover;background-image: url("@/static/images/pay/svip-radio-checked.png");
			}
		}
	}
	.detail-checkbox.checkbox-checked .uni-checkbox-input{
		background-image: url("@/static/images/pay/svip-radio-checked.png");
	}
	.detail-body-box{height: calc(90vh - 420rpx);overflow-y: auto;}
	.detail-item-box{
		display: flex;align-items: center;margin-top: 10rpx;border-bottom: 1px dashed #ccc;
		box-sizing: border-box;padding-bottom:32rpx;margin-bottom: 32rpx;
		.mall-image{width: 220rpx;height: 220rpx;margin-right: 16rpx;flex-shrink: 0;}
		.mt-20{margin-right: 20rpx;}
		.content-body-box{height: 220rpx;display: flex;flex-direction: column;justify-content: space-between;flex: 1;}
		.content-name{
			font-size: 36rpx;color: #000;margin-bottom: 12rpx;display: flex;align-items: center;
			.name-text{@include single-line-ellipsis;max-width: 320rpx;margin-right: 10rpx;}
		}
		.content-text{font-size: 24rpx;color: #666;@include multi-line-ellipsis(3);line-height: 1.5;}
	}
	.detail-bottom-box{
		width: 100%;display: flex;justify-content: space-between;color: #666;padding: 10rpx 0;
		.bottom-text-row{display: flex;align-items: center;}
	}
	
	.product-body-box{
		height: calc(90vh - 220rpx);overflow-y: auto;
		.content-body-box{justify-content: center;}
	}
}

// 升级提醒弹窗
.phone-tip-dialog{
	width: 580rpx;border-radius: 12rpx;background-color: #fff;padding: 24rpx;
	.tip-title{padding-top: 24rpx;font-size: 34rpx;color: #333;text-align: center;}
	.tip-content{font-size: 32rpx;color: #666;margin:32rpx 32rpx 56rpx;line-height: 1.6;text-align: justify;}
}