$filter_bg_color: #00b66611; $main_bg_color: #00b666; $page_bg_color: #ededed; $main_color: #00b666; image { vertical-align: top; } button { outline: none; /* #ifdef MP-KUAISHOU */ box-shadow: none; /* #endif */ &::after { border: none; } } /* #ifdef MP-KUAISHOU */ scroll-view::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } /* #endif */ .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: 2rpx 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: 2rpx 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; } &_f5 { border: 1rpx solid #ededed; &_t { border-top: 1rpx solid #ededed; } &_r { border-right: 1rpx solid #ededed; } &_b { border-bottom: 1rpx solid #ededed; } &_l { border-left: 1rpx solid #ededed; } } &_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; } &_10a { color: #10aeff; } &_027 { color: #027aff; } &_sub { color: #576b95; } } &bg { // 背景色 &_f { // 示例:g_bg_f background-color: #fff; &_2 { background-color: #f2f2f2; } &_5 { background-color: #ededed; } &_7 { background-color: #f7f7f7; } &_9 { background-color: #f9f9f9; } } &_f0a { background-color: #ff0a0a; } &_f40 { background-color: #ff4400; &_7 { background-color: rgba(255, 68, 0, 0.07); } } &_f0 { background-color: #f0f0f0; } &_f2 { background-color: #f2f2f2; } &_e { background-color: #eee; } &_c { background-color: #ccc; } &_0 { background-color: #000; } &_main { background-color: $main_color; } &_e7 { background-color: #e7f8f1; } &_page { background-color: $page_bg_color; min-height: 100vh; } } &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; } } &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%); } } &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: 28; @for $i from $min-font-size through $max-font-size { .g_fs_#{$i} { font-size: #{$i}px; } .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-size: 0; $max-size: 140; @for $i from $min-size through $max-size { .g_h_#{$i} { height: #{$i}px !important; } } .g_w_260 { width: 260px !important; } .g_w_250 { width: 250px !important; } .g_w_240 { width: 240px !important; } .g_w_220 { width: 240px !important; } .g_w_220 { width: 240px !important; } $min-mp: 0; $max-mp: 27; @for $i from $min-mp through $max-mp { .g_pt_#{$i} { padding-top: #{$i}px !important; } .g_pr_#{$i} { padding-right: #{$i}px !important; } .g_pb_#{$i} { padding-bottom: #{$i}px !important; } .g_pl_#{$i} { padding-left: #{$i}px !important; } .g_mt_#{$i} { margin-top: #{$i}px !important; } .g_mr_#{$i} { margin-right: #{$i}px !important; } .g_mb_#{$i} { margin-bottom: #{$i}px !important; } } $min-mp: 0; $max-mp: 20; @for $i from $min-mp through $max-mp { .g_ml_#{$i} { margin-left: #{$i}px; } .g_p_#{$i} { padding: #{$i}px; } } .g_pt_32 { padding-top: 32px; } .g_pt_40 { padding-top: 40px; } .g_pr_40 { padding-right: 40px; } .g_pr_32 { padding-right: 32px; } .g_pb_40 { padding-bottom: 40px; } .g_pb_32 { padding-bottom: 32px; } .g_pb_42 { padding-bottom: 42px; } .g_pb_48 { padding-bottom: 48px; } .g_pl_32 { padding-left: 32px; } .g_pl_40 { padding-left: 40px; } .g_mt_32 { margin-top: 32px; } .g_mt_90 { margin-top: 90px; } .g_mb_32 { margin-bottom: 32px; } .g_mb_40 { margin-bottom: 40px; } .g_mt_42 { margin-top: 42px; } .g_mt_65 { margin-top: 42px; } .g_mt_40 { margin-top: 40px; } .g_m_10 { margin: 10px; } // 圆角 $min-radius: 0; $max-radius: 49; @for $i from $min-radius through $max-radius { .g_radius_#{$i} { border-radius: #{$i}px; } } .g_radius_50 { border-radius: 50%; } .g_dot_18 { width: 18px; height: 18px; border-radius: 50%; } .flex_center { align-items: center; } .flex_end { align-items: end; align-items: flex-end; } .flex_nw { flex-wrap: nowrap; } .thover { opacity: 0.8; } .btnHoverBg { background-color: #ededed; } .videoContainer { position: relative; } .videoContainer::after { content: ""; width: 0; height: 0; border: 10px solid #ffffffbb; border-right-color: transparent; border-top-color: transparent; border-left-width: 16px; border-right-width: 0px; border-bottom-color: transparent; left: 50%; top: 50%; border-radius: 3px; transform: translate(-50%, -50%); /* background-color: #ffffff; */ position: absolute; z-index: 10; } .dib { display: inline-block; } .g_kuaishou { /* #ifdef MP-KUAISHOU */ min-height: 100vh !important; /* #endif */ } .r_box { border-radius: 8px; background-color: #fff; } .pri { white-space: pre-line; } .csbf { padding: 0px 8px; height: 28px; background-color: #fff; border-radius: 16px; text-align: center; font-size: 14px; font-weight: 400; color: #333333; line-height: 28px; box-sizing: border-box; // margin-top: 6px; margin-right: 12px; } //职位筛选开始 .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; background-color: #e3ecfd; border: 1px solid #3578f6; border-radius: 999px; margin-right: 8px; font-size: 12px; color: #3578f6; /* 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; background-color: #e3ecfd; border: 1px solid #3578f6; border-radius: 999px; margin-right: 8px; font-size: 12px; color: #3578f6; /* 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, #ededed, #ffffff 23%, #ffffff 79%, #ededed); 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; */ } } // 职位筛选样式结束 // 职位排序样式开始 .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; } // 职位排序样式结束 .g_mb_50 { margin-bottom: 50px; } .biggerSize::after { content: ""; /* display: inline-block; */ width: 150%; height: 140%; position: absolute; left: 50%; top: 50%; z-index: 99; transform: translate(-50%, -50%); }