workApp/style/common.scss

page,
.uni-app,
uni-page,
uni-page-wrapper,
uni-page-body {
	font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
	text-size-adjust: 100% !important;
	-webkit-text-size-adjust: 100% !important;
	overflow: hidden;
	/* #ifdef MP-WEIXIN */
	overflow: auto;
	/* #endif */
	/* #ifdef APP */
	overflow: auto;
	/* #endif */
	// overflow-y: auto;
}
uni-page-body {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.page_login {
	width: 100%;
	height: 100%;

	background-image: url('@/static/image/bg/login_bg.jpg');
	background-size: 100% 320px;
	background-repeat: no-repeat;
	background-position: 0 0;
	.login_weclome {
		width: calc(100% - 48px);
		margin: auto;
		height: auto;
		font-size: 18px;
		font-weight: 400;
		color: #ffffff;
		padding-top: 68px;
	}
	.login_title {
		width: calc(100% - 48px);
		margin: auto;
		font-size: 28px;
		font-weight: 500;
		color: #ffffff;
		line-height: 40px;
		height: 180px;
		margin-top: 8px;
	}

	.login_content {
		width: 100%;
		height: calc(100vh - 300px);
		background: #fff;
		box-shadow: 0px -20px 40px 0px rgba(4, 112, 255, 0.2);
		border-radius: 20px 20px 0px 0px;
		padding-top: 32px;
		box-sizing: border-box;
		.user_name {
			width: calc(100% - 48px);
			margin: auto;
			height: 48px;
			line-height: 48px;

			position: relative;
			background-color: #ffffff;
			.input_name {
				width: 100%;
				height: 100%;
				// box-shadow: 0px -10px 20px 0px rgba(4,112,255,0.2);
				border-radius: 10px 10px 10px 10px;
				border: 1px solid #ebeef5;
				text-indent: 40px;

				background-image: url('@/static/image/icon/login_acount.png');
				background-size: 16px 16px;
				background-repeat: no-repeat;
				background-position: 16px 50%;
			}

			.clear_icon {
				position: absolute;
				top: 0;
				right: 0;
				width: 48px;
				height: 48px;
				background-image: url('@/static/image/icon/clear_icon.png');
				background-size: 16px 16px;
				background-repeat: no-repeat;
				background-position: 16px 50%;
			}
		}

		.user_pass {
			width: calc(100% - 48px);
			margin: auto;
			height: 48px;
			line-height: 48px;
			margin-top: 24px;
			position: relative;
			.input_name {
				width: 100%;
				height: 100%;
				// box-shadow: 0px -10px 20px 0px rgba(4,112,255,0.2);
				border-radius: 10px 10px 10px 10px;
				border: 1px solid #ebeef5;
				text-indent: 40px;

				background-image: url('@/static/image/icon/login_pass.png');
				background-size: 16px 16px;
				background-repeat: no-repeat;
				background-position: 16px 50%;
			}

			.eye_icon {
				position: absolute;
				top: 0;
				right: 0;
				width: 48px;
				height: 48px;
				background-image: url('@/static/image/icon/login_eye.png');
				background-size: 16px 16px;
				background-repeat: no-repeat;
				background-position: 16px 50%;
			}

			.eyes_icon {
				position: absolute;
				top: 0;
				right: 0;
				width: 48px;
				height: 48px;
				background-image: url('@/static/image/icon/login_eyes.png');
				background-size: 16px 16px;
				background-repeat: no-repeat;
				background-position: 16px 50%;
			}
		}

		.login_button {
			width: calc(100% - 48px);
			margin: auto;
			margin-top: 24px;
			height: 48px;
			background: #2e64fa;
			border-radius: 8px 8px 8px 8px;

			font-weight: 500;
			font-size: 16px;
			color: #ffffff;
			text-align: center;
			line-height: 48px;
		}
		.agreement {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px 24px;
			box-sizing: border-box;
			font-size: 24rpx;
			.uni-radio-input {
				width: 24rpx;
				height: 24rpx;
				margin-right: 4rpx;
				svg {
					font-size: 18rpx;
					transform: translate(-50%, -48%) scale(0.5);
				}
			}
			.text {
				display: inline-flex;
				align-items: center;
				gap: 6rpx;
				.color_999 {
					color: #999999;
					margin: 0 4rpx;
				}
				.color_blue {
					color: #2e64fa;
				}
			}
		}
	}
}


//我的页面
.page_my {
	width: 100%;
	height: 100%;
	position: relative;
	background: linear-gradient(180deg, #c7e0ff 0%, #f8f9fd 88.1%);
	.my_bg {
		width: 100%;
		height: 360rpx;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		z-index: 1;
	}
	.page_my_content {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0 48rpx;
		box-sizing: border-box;
	}

	.user_info {
		width: 100%;
		height: 250rpx;
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		.user_image {
			width: 160rpx;
			height: 160rpx;
			margin-right: 40rpx;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: 0 50%;
			flex-shrink: 0;
		}
		.default_user {
			width: 160rpx;
			height: 160rpx;
		}

		.user_info_content {
			flex: 1;

			.user_name {
				width: 100%;
				font-weight: 500;
				font-size: 56rpx;
				color: #000000;

				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1; /* 设置最多显示的行数 */
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all; /* 确保单词可以在任何字符断开 */
				// height: auto; /* 根据字体大小调整高度 */
				// line-height: 1.5em; /* 每行的高度 */
			}
			// .user_school
			// {
			// 	width: 100%;
			// 	font-weight: 400;
			// 	font-size: 32rpx;
			// 	color: #666666;
			// }

			.user_account {
				margin-top: 20rpx;
				width: 100%;
				font-weight: 400;
				font-size: 32rpx;
				color: #666666;
			}
		}
	}

	.user_menu {
		width: 100%;
		height: 140rpx;
		margin-top: 40rpx;
		padding: 0 48rpx;
		box-sizing: border-box;
		background: #f9fbff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&.top {
			margin-top: 0;
		}
		.menu_left {
			flex: 1;
			display: flex;
			align-items: center;
		}

		.iconfont {
			font-size: 36rpx;
		}
		.menu_icon {
			width: 40rpx;
			height: 40rpx;
		}
		.menu_text {
			font-weight: 400;
			font-size: 32rpx;
			margin-left: 16rpx;
			color: #333333;
		}
		.menu_right {
			font-size: 40rpx !important;
			color: #999999 !important;
		}
	}
}
//公共样式
.page_body {
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	background-color: #FFFFFF;
	//修改密码 协议
	.page_module {
		padding-top: 20rpx;
		padding-bottom: 10rpx;
		box-sizing: border-box;
		uni-button[type='primary'] {
			background-color: #2e64fa;
			font-weight: 400;
		}
	}
	.page_content{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		padding:0 24rpx;
		box-sizing: border-box;
		.no_data{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width:100%;
			height: 100%;
			.no_data_img{
				width: 464rpx;
				height: 278rpx;
			}
			.no_data_text{
				color: #999999;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 36rpx;
			}
		}
		//视频播放器样式
		// .uni-video-container{
		// 	background-color: #FFFFFF;
		// }
		.uni-video-cover-play-button{
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: rgba(0,0,0,0.8);
			font-size: 40rpx;
			border-radius: 50%;
			color: #FFFFFF;
		}
		.uni-video-cover{
			background-color:transparent;
		}
	}
	
	//底部tabbar样式
	.uv-tabbar{
		.uv-border-top{
			border-top-width:0 !important;
			box-shadow: inset 0px 2rpx 0px 0px #F3F3F3;
		}
	}
}
//定义表头样式 复杂表头样式
.custom_uni_nav_bar{
	.uni-navbar--border{
		border-bottom-color:#F3F3F3 !important;
	}
	&.custom_only_title_back_icon{
		.uni-navbar__header-btns-left{
			height: 96rpx;
		}
	}
	.uni-navbar__header-btns-left{
		position: absolute;
		top: 0;
		left: 0;
		z-index:10;
		height: 120rpx;
		.uni-icons{
			font-size: 48rpx !important;
		}
	}
	.uni-navbar__header-container{
		flex-direction: column;
	}
	.nav_head{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;
		padding: 0 24rpx 0 96rpx;
		box-sizing: border-box;
		box-shadow: 0px 4rpx 16rpx 0px rgba(0,0,0,0.02), inset 0px -2rpx 0px 0px #F3F3F3;
		&.only_title{
			padding: 0 96rpx;
			height: 96rpx;
			.nav_title{
				text-align: center;
			}
		}
		&.row_search_box{
			padding: 24rpx 24rpx 0;
			.search_box{
				width: 100%;
			}
		}
		// 标题
		.nav_title{
			font-weight: 600;
			font-size: 44rpx;
			color: #333333;
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		// 搜索
		.search_box {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 320rpx;
			.is-input-border{
				border-radius: 8rpx;
				border: 2rpx solid #DCDFE6;
				border-color: #DCDFE6 !important;
			}
			.search_icon {
				width: 32rpx;
				height: 32rpx;
				margin-left:24rpx;
			}
			.uni-easyinput__content-input {
				padding-left: 8rpx !important;
				font-size: 28rpx;
				color: #333333;
				height: 72rpx;
				.uni-easyinput__placeholder-class {
					font-size: 28rpx;
					color: #C0C4CC;
				}
			}
		}
		.upload_button{
			display: flex;
			align-items: center;
			height: 72rpx;
			padding: 0 28rpx;
			margin-right: 8rpx;
			background-color: #2E64FA;
			border-radius: 8rpx;
			border: 2rpx solid #2E64FA;
			.img{
				width: 28rpx;
				height: 28rpx;
			}
			.text{
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	//条件选择器
	.filter_picker {
		display: flex;
		width: 100%;
		gap: 32rpx;
		padding:24rpx 24rpx 0;
		box-sizing: border-box;
		background-color: #FFFFFF;
	
		.filter_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:16rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			height: 72rpx;
			box-sizing: border-box;
			border: 2rpx solid #DCDFE6;
			.filter_text {
				font-size: 28rpx;
				color: #333333;
				font-weight: 400;
				margin-right: 8rpx;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
}
//公共 tabs 样式
.scroll_tabs {
	display: flex;
	margin-top: 24rpx;
	height: 56rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
	.scroll_tabs_view{
		flex:1;
	}
	.uni-scroll-view-content {
		display: flex;
		gap: 48rpx;
	}
	.tab_item {
		display: inline-flex;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		position: relative;
		height: 100%;
		white-space: nowrap;
		&.selected {
			font-weight: 500;
			font-size: 32rpx;
			color: #2E64FA;
			&::after {
				content: '';
				position: absolute;
				bottom: 0rpx;
				left: 0;
				width: 100%;
				height: 4rpx;
				background-color: #2E64FA;
			}
		}
	}
}
//公共 tabBtns 样式
.scroll_tab_btn{
	display: flex;
	margin-top: 32rpx;
	height: 72rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
	> .uni-scroll-view{
		> .uni-scroll-view{
			> .uni-scroll-view-content {
				display: flex;
				gap: 24rpx;
			}
		}
	}
	.tab_item {
		flex:1;
		min-width: 128rpx;
		// display: inline-flex;
		// justify-content: center;
		// align-items: center;
		line-height: 68rpx;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		height: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #DCDFE6;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		&.selected {
			font-weight: 500;
			color: #2E64FA;
			background-color: rgba(46,100,250,0.1);
			border: 2rpx solid #2E64FA;
		}
	}
}
//定义只有标题时的表头样式
.custom_navbar_only_title{
	.uni-navbar--border{
		border-bottom-color:#F3F3F3 !important;
	}
	.uni-navbar__header-btns-left {
		.uni-icons{
			font-size: 40rpx !important;
		}
	}
	.uni-navbar__header-container{
		.uni-navbar__header-container-inner{
			font-size: 32rpx;
			.uni-nav-bar-text{
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
}
//表单样式
.forms_style {
	width: 100%;
	display: flex;
	flex-direction: column;
	&.view{
		.uni-forms-item {
			.uni-forms-item__label {
				min-height: auto;
				align-items: flex-start;
			}
			//文本
			.uni-forms-item__content{
				justify-content: flex-end;
				text-align: right;
			}
		}
	}
	.uni-forms-item {
		&.uni-forms-item--border{
			padding: 24rpx 0;
			border-top: 2rpx solid #F3F3F3;
		}
		.uni-forms-item__label {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			min-height: 72rpx;
			height: auto;
			padding: 0;
		}
		.uni-forms-item__content {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			//输入框
			.uni-easyinput {
				font-size: 28rpx;
				.is-input-border {
					border: 2rpx solid #E9E9E9 !important;
					border-radius: 8rpx;
				}
				.is-disabled {
					background-color: #F3F3F3 !important;
					border: 2rpx solid #DCDFE6 !important;
					color: #333333;
				}
				.uni-easyinput__content-input {
					height: 72rpx;
					min-height:72rpx;
					font-size: 28rpx;
					padding-left:24rpx !important;
					.uni-easyinput__placeholder-class {
						font-size: 28rpx;
						color: #909399 ;
					}
				}
				.uni-easyinput__content-textarea{
					padding-left:24rpx !important;
				}
				.content-clear-icon {
					font-size: 40rpx !important;
					padding: 0 10rpx;
				}
			}
			//checkbox  单选 多选
			.uni-data-checklist {
				.checklist-group {
					.checklist-box{
						margin: 12rpx 0;
						margin-right: 24rpx;
						.radio__inner{
							width: 32rpx;
							height: 32rpx;
							border: 2rpx solid rgba(0,0,0,0.2);
							border-radius: 32rpx;
							.radio__inner-icon{
								width: 20rpx;
								height: 20rpx;
								border-radius: 20rpx;
							}
						}
						.checklist-content {
							.checklist-text{
								font-weight: 400;
								font-size: 28rpx;
								color: #333333;
								margin-left: 8rpx;
								line-height: 28rpx;
							}
						}
					}
				}
			}
			//单选框
			.uni-stat__select {
				.uni-select {
					font-size: 28rpx;
					border: 2rpx solid #DCDFE6;
					border-radius: 8rpx;
					height: 72rpx;
					min-height: 72rpx;
					box-sizing: border-box;
					padding: 0 16rpx 0 24rpx;
					&.uni-select--disabled{
						background-color: #F3F3F3;
						border: 2rpx solid #DCDFE6;
					}
					.uni-select__input-box {
						height: 72rpx;
						.uni-select__input-text {
							font-size: 28rpx !important;
							color: #333333;
							&.uni-select__input-placeholder {
								font-size: 28rpx;
								color: #909399;
							}
						}
						.tag-calss {
							font-size: 24rpx;
							border-radius: 8rpx;
							height: 48rpx;
							line-height: 44rpx;
							padding: 0 4rpx 0 8rpx;
							margin: 4rpx 12rpx 4rpx 0;
							.text {
								font-size: 24rpx;
								line-height: 44rpx;
							}
						}
						.uniui-clear {
							font-size: 40rpx !important;
						}
					}
					.uniui-top,
					.uniui-bottom {
						color: #c0c4cc !important;
						font-size: 32rpx !important;
					}
					//下拉框样式
					.uni-select__selector {
						.uni-select__selector-item {
							font-size: 24rpx;
							color: #666666;
							line-height: 60rpx;
							padding: 0 20rpx;
						}
						.uni-select_selector-item_active {
							background-color: #fff;
							color: #2e64fa;
							font-weight: 400;
						}
					}
				}
			}
			//日期选择框
			.uni-date {
				.uni-date-x--border {
					border: 2rpx solid #E9E9E9;
					border-radius: 8rpx;
					.uni-date-x {
						font-size: 28rpx;
						color: #333333;
						border-radius: 8rpx;
						.uniui-calendar {
							font-size: 32rpx !important;
						}
						.icon-calendar {
							font-size: 36rpx !important;
						}
						.uni-date__x-input {
							height: 72rpx;
							line-height: 72rpx;
							font-size: 28rpx;
						}
					}
					.uni-date__icon-clear {
						padding-right: 10rpx;
					}
					.uniui-clear {
						font-size: 40rpx !important;
					}
				}
			}
		}
	}
}
// 提示框样式
.uni-popup-dialog {
	// width: 610rpx !important;
	border-radius: 20rpx !important;
	// background: linear-gradient(180deg, #dae4ff 0%, #ffffff 35.1%);
	&.white {
		background: #ffffff;
	}
	&.footBorder{
		.uni-dialog-button-group{
			border-top-color: #EBEEF5;
			border-top-width:1px !important;
			padding: 24rpx 40rpx;
			.uni-dialog-button{
				height: 80rpx;
				box-sizing: border-box;
				border-radius: 8rpx;
				&:first-child {
					border: 2rpx solid #DCDFE6;
					background-color: #FFFFFF;
					.uni-dialog-button-text {
						color: #666666 !important;
					}
				}
			}
		}
	}
	.uni-dialog-title {
		display: none !important;
	}
	.uni-dialog-content {
		flex-direction: column !important;
		padding: 0 !important;
	}
	//自定义标题样式
	.dialog_title {
		height: 96rpx;
		padding: 0 40rpx;
		width: 100%;
		background-color: #F5F7FA;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.dialog_title_lt {
			display: inline-flex;
			align-items: center;
			.title {
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #303133;
				font-weight: 500;
				font-size: 32rpx;
			}
		}
	}
	//自定义弹框内容
	.dialog_content {
		min-height: 160rpx;
		height: auto;
		display: flex;
		// overflow: auto;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10rpx;
		flex-wrap: wrap;
		&.alert{
			justify-content: center;
			align-items: center;
			color: #666666;
			font-size: 28rpx;
			line-height: 40rpx;
			text-align: center;
		}
	}
	.uni-dialog-button-group {
		border-top-width: 0 !important;
		padding: 40rpx 44rpx 28rpx;
		box-sizing: border-box;
		.uni-dialog-button {
			height: 72rpx;
			background-color: #f0f2f9;
			border-radius: 12rpx;
			font-size: 28rpx;
			&:first-child {
				margin-right: 20rpx;
				.uni-dialog-button-text {
					color: #606266 !important;
				}
			}
			&:last-child {
				margin-left: 20rpx;
				.uni-dialog-button-text {
					color: #ffffff !important;
				}
				background-color: #2e64fa;
			}
			&.uni-border-left {
				border-left-width: 0;
			}
		}
	}
}
// 提示框样式
.uni-tooltip-popup {
	padding: 8rpx 12rpx !important;
	max-width: 300rpx;
	// width: 120rpx;
	min-width: 100rpx;
	box-sizing: border-box;
	border-radius: 16rpx !important;
	line-height: 28rpx !important;
	font-size: 24rpx !important;
	text-align: center !important;
	white-space: nowrap;
}
// 我的荣誉头部下拉框
.my_honor_selector_popup{
	top:313rpx;
	z-index: 999;
	.maskClass{
		opacity: 0 !important;
	}
	[name="content"]{
		width: 196rpx;
		left: 24rpx !important;
		box-sizing: border-box;
		border: 1px solid #EBEEF5;
		border-radius: 6px !important;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		z-index: 3;
		padding: 4px 0;
		transition:none !important;
		transform: none !important;
	}
	.uni-popup__wrapper{
		.selector_item_active{
		    color: #2E64FA !important;
		    font-weight: 400;
			.selector_item_icon{
				color: #2E64FA !important;
			}
		}
		.selector_item{
		    justify-content: space-between;
		    align-items: center;
			display: flex;
			cursor: pointer;
			line-height: 70rpx;
			font-size: 28rpx;
			padding: 0px 20rpx;
			.selector_item_text{
				flex:1;
			}
			.selector_item_icon{
				font-size: 28rpx !important;
			}
		}
	}
}
.uni-calendar-item--multiple .uni-calendar-item--before-checked, .uni-calendar-item--multiple .uni-calendar-item--after-checked {
	background-color:#2E64FA !important;
}
.uni-datetime-picker--btn{
	background-color:#2E64FA !important;
}