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

/***** 页面高度 *****/
/*  #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;
}

/***** 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 46rpx;
	}	
	.tabbar-item{width: 135rpx;height: 144rpx;@include ezy-no-repeat-cover;z-index: 2;}
}
.ezy-custom-tabbar::before{
	content: '';width: 750rpx;height: 100rpx;left: 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;box-sizing: border-box;
	.nav-bar-icon{
		width: 63rpx;height: 63rpx;
		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;
		.key-note{color: #ffff01;}
	}
}
// 两个元素
.icon-title-navBar-box{
	display: flex;align-items: center;justify-content: center;
	padding: 0 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: 63rpx;height: 63rpx;position: absolute;left: 20rpx;top: 0;
		background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
	}
}

/***** 单选题 *****/
.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-question{
		margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx 0 20rpx;box-sizing: border-box;
		text-align: justify;word-wrap: break-word;word-break: break-all;
	}
	.danxuan-option{
		width: 596rpx;height: 93rpx;line-height:96rpx;background-color:#fff;border-radius: 8px;margin-bottom: 20rpx;
		font-size: 32rpx;color: #333;box-sizing: border-box;padding: 0 24rpx;@include ezy-no-repeat-cover();
	}
	.danxuan-option.active{
		color: #fff;background-color: transparent;background-image: url("@/static/images/exam/option-active.png");
	}
	.danxuan-option.showError{
		color: #fff;background-color: transparent;background-image: url("@/static/images/exam/option-error.png");
	}
	.danxuan-option.active_right{
		color: #fff;background-color: transparent;background-image: url("@/static/images/exam/option-right.png");
	}
}

/***** 试题白色的框 *****/
.shiti-frame-box{
	flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px;
	margin: 32rpx auto;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;
  }