dandelionPlatformToB-uni-v3/static/css/base.scss

$test: env("VITE_APP_THEMECOLOR");
// 稻田的
// $main: #ff4400;
// $filter_bg_color: #ff440011;
// 其他的
$main: #F9AA16;
$filter_bg_color: #F9AA1621;
$main_bg_color: $main;
$page_bg_color: #ededed;
$main_color: $main;
image {
	vertical-align: top;
}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
	font-family: "阿里妈妈数黑体 Bold";
	font-weight: 700;
	src: url("https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/iconfont/almm/AlimamaShuHeiTi-Bold.woff2") format("woff2"), url("https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/iconfont/almm/AlimamaShuHeiTi-Bold.woff") format("woff");
	font-variation-settings: normal;
	font-display: swap;
}

.webfont {
	font-family: "阿里妈妈数黑体 Bold";
	font-variation-settings: normal; /* Chrome 140 以下版本需要 */
}
page {
	height: 100%;
	font-family: PingFang SC Medium, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
}

button {
	outline: none;
	&::after {
		border: none;
	}
}

.g_ {
	&border {
		&_c {
			border: 1rpx solid #ccc;
			&_t {
				border-top: 1rpx solid #ccc;
			}
			&_r {
				border-right: 1rpx solid #ccc;
			}
			&_b {
				border-bottom: 1rpx solid #ccc;
			}
			&_l {
				border-left: 1rpx solid #ccc;
				&_2 {
					border-left: 2px solid #ccc;
				}
			}
		}
		&_d {
			border: 1rpx solid #ddd;
			&_t {
				border-top: 1rpx solid #ddd;
			}
			&_r {
				border-right: 1rpx solid #ddd;
			}
			&_b {
				border-bottom: 1rpx solid #ddd;
			}
			&_l {
				border-left: 1rpx solid #ddd;
				&_2 {
					border-left: 2px solid #ddd;
				}
			}
		}
		&_e {
			border: 1rpx solid #eee;
			&_t {
				border-top: 1rpx solid #eee;
			}
			&_r {
				border-right: 1rpx solid #eee;
			}
			&_b {
				border-bottom: 1rpx solid #eee;
			}
			&_l {
				border-left: 1rpx solid #eee;
			}
		}
		&_main {
			border: 1rpx solid $main_color;
		}
		&_f {
			border: 1rpx solid #fff;
		}
		&_f5 {
			border: 1rpx solid #f5f5f5;
			&_t {
				border-top: 1rpx solid #f5f5f5;
			}
			&_r {
				border-right: 1rpx solid #f5f5f5;
			}
			&_b {
				border-bottom: 1rpx solid #f5f5f5;
			}
			&_l {
				border-left: 1rpx solid #f5f5f5;
			}
		}
		&_0 {
			&_b {
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}
		}
	}
	&flex {
		// 弹性布局
		&_1 {
			flex: 1;
		}
		&_2 {
			flex: 2;
		}
		&_3 {
			flex: 3;
		}
		&_4 {
			flex: 4;
		}
		&_none {
			flex: none;
		}
		&_c {
			display: flex;
			display: -webkit-flex;
			justify-content: center;
			align-items: center;
		}
		&_rowRight_columnCenter {
			display: flex;
			display: -webkit-flex;
			justify-content: flex-end;
			align-items: center;
		}

		&_rowRight_columnEnd {
			display: flex;
			display: -webkit-flex;
			justify-content: flex-end;
			align-items: flex-end;
		}
		&_row_start {
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
		}
		&_row_start_none {
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
		}
		&_row_start_c {
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;
		}
		&_row_between {
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		&_row_around {
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		&_row_center {
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
		}
		&_row_end {
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-end;
		}
		&_column_start {
			display: flex;
			display: -webkit-flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: flex-start;
		}
		&_column_between {
			display: flex;
			display: -webkit-flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		&_column_around {
			display: flex;
			display: -webkit-flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		&_column_end {
			display: flex;
			display: -webkit-flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: flex-end;
		}
		&_column_center {
			display: flex;
			display: -webkit-flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: center;
		}
	}
	&ell {
		// 多行省略
		&_1 {
			// 示例：g_ell_1
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			word-break: break-all;
		}
		&_2 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-break: break-all;
		}
		&_3 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			word-break: break-all;
		}
		&_4 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			word-break: break-all;
		}
	}

	&fw {
		// 加粗
		&_100 {
			// 示例：g_fw_100
			font-weight: 100;
		}
		&_200 {
			font-weight: 200;
		}
		&_300 {
			font-weight: 300;
		}
		&_400 {
			font-weight: 400;
		}
		&_500 {
			font-weight: 500;
		}
		&_600 {
			font-weight: bold;
		}
		&_700 {
			font-weight: 700;
		}
		&_800 {
			font-weight: 800;
		}
		&_900 {
			font-weight: 900;
		}
		&_bold {
			font-weight: bold;
		}
	}
	&c {
		// 字体颜色
		&_0 {
			// 示例：g_c_0
			color: #000;
		}
		&_3 {
			color: #333;
		}
		&_6 {
			color: #666;
		}
		&_7 {
			color: #777777;
		}
		&_8 {
			color: #888888;
		}
		&_9 {
			color: #999;
		}

		&_c0 {
			color: #c0c4cc;
		}
		&_c {
			color: #ccc;
		}
		&_f {
			color: #fff;
		}
		&_f0 {
			color: #ff0000;
		}
		&_f40 {
			color: #ff4400;
		}
		&_b1 {
			color: #b1b1b1;
		}
		&_fa2b {
			color: #fa2b2b;
		}
		&_a {
			color: #aaaaaa;
		}
		&_5e {
			color: #5e5e5e;
		}
		&_ff4d {
			color: #ff4d4f;
		}
		&_main {
			color: $main_color;
		}
		&_09f {
			color: #0091ff;
		}
		&_027 {
			color: #027aff;
		}
		&_sub {
			color: #576b95;
		}
		&_pink {
			color: pink;
		}
		&_ffc {
			color: #ffc300;
		}
	}
	&bg {
		// 背景色
		&_f {
			// 示例：g_bg_f
			background-color: #fff;
			&_2 {
				background-color: #f2f2f2;
			}
			&_5 {
				background-color: #ededed;
			}
			&_7 {
				background-color: #f7f7f7;
			}
			&_9 {
				background-color: #f9f9f9;
			}
		}
		&_page {
			background-color: $page_bg_color;
			min-height: 100vh;
		}
		&_f0a {
			background-color: #ff0a0a;
		}
		&_f40 {
			background-color: #ff4400;
			&_7 {
				background-color: rgba(255, 68, 0, 0.07);
			}
		}
		&_f0 {
			background-color: #f0f0f0;
		}
		&_e {
			background-color: #eee;
		}
		&_c {
			background-color: #ccc;
		}
		&_d {
			background-color: #ddd;
		}
		&_0 {
			background-color: #000;
		}
		&_f5 {
			background-color: #ededed;
		}
		&_f9 {
			background-color: #f9f9f9;
		}
		&_main {
			background-color: $main_color;
		}
		&_09f {
			background-color: #0091ff;
		}
		&_e7 {
			background-color: #e7f8f1;
		}
		&_ed {
			background-color: #ededed;
		}
		&_b1 {
			background-color: #b1b1b1;
		}
		&_trans_main {
			background-color: $filter_bg_color;
		}
	}
	&text {
		// 字体位置
		&_l {
			// 示例：g_text_l
			text-align: left;
		}
		&_c {
			text-align: center;
		}
		&_r {
			text-align: right;
		}
		&_word_c {
			text-align: justify;
			text-align-last: justify;
		}
		&_underline {
			text-decoration: underline;
		}
		&_unset {
			text-decoration: unset;
		}
	}
	&position {
		// 定位
		&_rela {
			// 示例：g_position_rela
			position: relative;
		}
		&_abso {
			position: absolute;
			&_c {
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
		&_fixed {
			position: fixed;
			&_c {
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
		&_c {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
		&_sticky {
			position: sticky;
			top: 0px;
			left: 0;
		}
	}
	&clear_scroll::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	&w {
		&_all {
			width: 100%;
		}
		&_pull {
			width: 100vw;
		}
		&_three {
			width: 33.3333%;
		}
		&_four {
			width: 25%;
		}
	}
	&h {
		&_all {
			height: 100%;
		}
		&_pull {
			height: 100vh;
		}
		&_three {
			width: 33.3333%;
		}
		&_four {
			width: 25%;
		}
	}
	// 行高设置
	&lh {
		&_1 {
			line-height: 1;
			&_2 {
				line-height: 1.2 !important;
			}
		}
	}
	&animate {
		transition: all 2s;
	}
}

// 字体
$min-font-size: 1;
$max-font-size: 44;
@for $i from $min-font-size through $max-font-size {
	.g_fs_#{$i} {
		font-size: #{$i}px !important;
	}
	.g_fsi_#{$i} {
		font-size: #{$i}px !important;
	}
}
.g_fs_10 {
	font-size: 12px;
	zoom: 0.9;
}
.g_fs_11 {
	font-size: 12px;
	zoom: 0.95;
}
// 尺寸
$min-size: 0;
$max-size: 200;
@for $i from $min-size through $max-size {
	.g_w_#{$i} {
		width: #{$i}px !important;
	}
}
// 尺寸
$min-height: 0;
$max-height: 100;
@for $i from $min-height through $max-height {
	.g_h_#{$i} {
		height: #{$i}px !important;
	}
}
.g_h_184 {
	height: 184px !important;
}
// 内外边距
$min-mp: 0;
$max-mp: 90;
@for $i from $min-mp through $max-mp {
	.g_pt_#{$i} {
		padding-top: #{$i}px;
	}
	.g_pb_#{$i} {
		padding-bottom: #{$i}px;
	}
	.g_mt_#{$i} {
		margin-top: #{$i}px;
	}
	.g_mb_#{$i} {
		margin-bottom: #{$i}px;
	}
}
// 内外边距
$min-mp: 0;
$max-mp: 24;
@for $i from $min-mp through $max-mp {
	.g_p_#{$i} {
		padding: #{$i}px;
	}
	.g_pr_#{$i} {
		padding-right: #{$i}px;
	}
	.g_pl_#{$i} {
		padding-left: #{$i}px;
	}
	.g_m_#{$i} {
		margin: #{$i}px;
	}
	.g_ml_#{$i} {
		margin-left: #{$i}px;
	}
	.g_mr_#{$i} {
		margin-right: #{$i}px;
	}
}
// 单独的内外边距设置
.g_mb_130 {
	margin-bottom: 130px;
}
.g_pb_120 {
	padding-bottom: 120px;
}
.g_pl_40 {
	padding-left: 40px;
}
.g_pr_40 {
	padding-right: 40px;
}
// 圆角
$min-radius: 0;
$max-radius: 25;
@for $i from $min-radius through $max-radius {
	.g_radius_#{$i} {
		border-radius: #{$i}px;
	}
}
.g_radius_50 {
	border-radius: 50%;
}
.flex_center {
	align-items: center;
}
.g_bg_f_5 {
	background-color: #ededed;
}
.flex_end {
	align-items: flex-end;
}
.r_box {
	border-radius: 8px;
	background-color: #fff;
}
//职位排序样式
.sortMask {
	position: absolute;
	top: 43px;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999999;
	background-color: rgba(0, 0, 0, 0.8);
}
.sortContainer {
	padding: 0 24px;
	animation: filterBox 0.35s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
	box-sizing: border-box;
	background-color: #ededed;
	padding-bottom: 4px;
	border-radius: 0 0 8px 8px;
	height: 40% !important;
}
.flex_nw {
	flex-wrap: nowrap;
}
//职位筛选开始
.filterTag {
	// display: flex;
	// background-color: #ededed;
	border-top: 1rpx solid #eee;
	.brandTag,
	.specialTag {
		display: flex;
		/* width: 200vw; */
		position: relative;
		justify-content: start;
		align-items: center;
		flex-wrap: nowrap;
		padding-right: 8px;
		/* border-right: 1px solid #ccc; */
		& > view {
			position: relative;
			height: 28px;
			line-height: 26px;
			border-radius: 999px;
			margin-right: 8px;
			font-size: 12px;
			border: 1px solid $main_color;
			background-color: $filter_bg_color;
			color: $main_color;
			/* min-width: 100px; */
			text-align: center;
			white-space: nowrap;
			padding: 0px 12px;
			box-sizing: border-box;
			&:last-child {
				margin-right: 0px;
			}
		}
	}

	.genderTag {
		// width: 80px;
		padding-left: 8px;
		justify-content: center !important;
		.por {
			position: relative;
			height: 28px;
			line-height: 26px;
			border-radius: 999px;
			margin-right: 8px;
			font-size: 12px;
			color: $main_color;
			border: 1px solid $main_color;
			background-color: $filter_bg_color;
			/* min-width: 100px; */
			text-align: center;
			white-space: nowrap;
			padding: 0px 12px;
			box-sizing: border-box;
		}
	}

	.clear {
		position: sticky;
		right: 0px;
		top: 0px;
		height: 44px;
		min-width: 60px;
		text-align: center;
		line-height: 44px;
		font-size: 14px;
		background: linear-gradient(180deg, #f5f5f5, #ffffff 23%, #ffffff 79%, #f5f5f5);
		box-shadow: -12px 0px 8px -4px rgba(206, 206, 206, 0.6);
	}

	.clear_icon {
		position: absolute;
		display: inline-block;
		width: 12px;
		height: 12px;
		line-height: 10px;
		border-radius: 50%;
		background-color: #fff;
		right: -2px;
		top: -2px;
		color: #aaa;
		/* font-size: 12px; */
	}
}
// 职位筛选样式结束