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: 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;}
	.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;}
	}