From a8fcdba976de4b4d77282536e899f8a36318a461 Mon Sep 17 00:00:00 2001
From: jscyl13849007907 <13849007907@163.com>
Date: Thu, 16 Jan 2025 18:14:28 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FirstJob/joblist.vue |  82 +++---
 src/style/index.less                | 545 ++++++++++++++++++++++++++++++++++++
 src/views/main.vue                  |   6 +-
 3 files changed, 598 insertions(+), 35 deletions(-)

diff --git a/src/components/FirstJob/joblist.vue b/src/components/FirstJob/joblist.vue
index f1fce17..8b73ce0 100644
--- a/src/components/FirstJob/joblist.vue
+++ b/src/components/FirstJob/joblist.vue
@@ -34,30 +34,23 @@
 						<img src="//matripe.oss-cn-beijing.aliyuncs.com/bcSVG/dtLogo.png" class="icon" />
 					</router-link>
 				</span>
-				<div class="searchBox" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" outline="0" hidefocus="true">
-					<a-input :placeholder="jobNum ? `近48小时更新${jobNum}职位` : ''" @keyup.enter="onSearch" @input="resetsearch" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" v-model="searchValue" class="searchinput" style allow-clear>
-						<div slot="prefix" class="fsa w100" @focus.stop tabindex="0" @click.stop="visible = true">
-							<span class="dpib esl" style="width: 60px">{{ currentCity }}</span>
-							<div>
-								<i class="iconfont icon-sousuoxiala"></i>
-								<i class="iconfont icon-guanbishixin" v-show="currentCity != '全国'" @click.stop="resetCity"></i>
+				<div class="searchBox g_flex_row_start" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" outline="0" hidefocus="true">
+					<div class="g_flex_1">
+						<a-input :placeholder="jobNum ? `近48小时更新${jobNum}条招工信息` : ''" @keyup.enter="onSearch" @input="resetsearch" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" v-model="searchValue" class="searchinput g_w_all" style allow-clear>
+							<div slot="prefix" class="fsa w100" @focus.stop tabindex="0" @click.stop="visible = true">
+								<span class="dpib esl" style="width: 60px">{{ currentCity }}</span>
+								<div>
+									<i class="iconfont icon-sousuoxiala"></i>
+									<i class="iconfont icon-guanbishixin" v-show="currentCity != '全国'" @click.stop="resetCity"></i>
+								</div>
 							</div>
-						</div>
-						<button slot="suffix" @click="onSearch" style="border-radius: 0px 6px 6px 0">搜索</button>
-					</a-input>
-					<!-- v-show="isdownHotStoreShow" -->
-					<!-- <ul class="downHotStore" style="display: none">
-						<div>热门企业</div>
-						<li v-for="(item, index) in hotStoreList" :key="index" @click="getHotStoreList(item)">
-							{{ item.storeName }}
-						</li>
-          </ul>-->
-					<div class="hotStore">
-						<!-- <span>热门企业：</span> -->
-						<ul>
-							<li v-for="(item, index) in hotStoreList" :key="index" @click="getHotStoreList(item)">{{ item.storeName }}</li>
-							<!-- <li @click="resetResult" style="color: #aaa">重置</li> -->
-						</ul>
+							<button slot="suffix" @click="onSearch" style="border-radius: 0px 6px 6px 0">搜索</button>
+						</a-input>
+					</div>
+					<div class="g_flex_none g_ml_12">
+						<a style="font-size: 14px;" @click="hideFilterContent">
+							筛选 <a-icon type="down" style="font-size: 14px;" />
+						</a>
 					</div>
 				</div>
 				<ul class="hotTag" style="display: none">
@@ -86,16 +79,19 @@
     </a-breadcrumb>-->
 		<!-- #### 主体部分 ##### -->
 		<div class="w" id="maincontent">
-			<div class="maincontentleft" style="padding-top: 50px">
+			<div class="maincontentleft" style="padding-top: 16px">
 				<div class="tabBar" @click="changeTab($event)">
-					<div class="tabSubset" :class="{ active: signType == '' }" v-if="!hasTab" data-type="0">全部</div>
+					<div class="tabSubset" :class="{ active: signType == 0 }"  data-type="0">默认</div>
+					<div class="tabSubset" :class="{ active: signType == 1 }"  data-type="1">按距离</div>
+					<div class="tabSubset" :class="{ active: signType == 2 }"  data-type="2">按工价</div>
+					<div class="tabSubset" :class="{ active: signType == 3 }"  data-type="3">按佣金</div>
 					<!-- <div class="tabSubset" :class="{ active: signType == 1 }" v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" data-type="1">一才</div> -->
 					<!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" -->
 					<!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" -->
 					<!-- <div class="tabSubset" :class="{ active: signType == 2 }" data-type="2">三方</div> -->
 				</div>
 				<div class="filter" v-show="signType == ''" :class="[filterStatus == 0 ? '' : 'nobd']" style>
-					<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }">
+					<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }" v-if="false">
 						<span>
 							<span>
 								所有筛选
@@ -441,7 +437,7 @@
 										<span v-if="item.jobDesp" :class="'copyInfo' + index">{{ item.jobDesp }}</span
 										><span v-else>暂无详单</span>
                 </template>-->
-								<a>
+								<a v-if="false">
 									<button
 										type="primary"
 										class="jobDesp br4"
@@ -454,7 +450,29 @@
 									</button>
 								</a>
 								<!-- </a-popover> -->
-								<button class="apply br4" @click="torecord(item)" v-if="item.recruitment == '1'">报名</button>
+								<div class="g_flex_row_end">
+									<!-- <a-button shape="circle" type="danger" ghost>
+										<template #icon> -->
+											<div class="g_w_60 g_cursor_point">
+												<div class="g_text_c g_w_all" style="height: 18px;overflow: hidden;line-height: 18px;">
+													<a-icon type="message" class="g_fs_16" style="color: #666;" />
+												</div>
+												<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">联系客服</div>
+											</div>
+										<!-- </template>
+									</a-button>
+									<a-button shape="circle" type="danger" ghost @click="toggleGhost" class="g_ml_12">
+										<template #icon> -->
+											<div class="g_w_40 g_cursor_point">
+												<div class="g_text_c g_w_all" style="height: 18px;line-height: 18px;">
+													<a-icon class="g_fs_17" style="color:#666;" type="star" />
+												</div>
+												<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">收藏</div>
+											</div>
+										<!-- </template> -->
+									<!-- </a-button> -->
+								</div>
+								<a-button class="br4 g_ml_12" @click="torecord(item)" v-if="item.recruitment == '1'" type="primary">立即报名</a-button>
 								<button class="norecruitment" v-else>暂时停招</button>
 
 								<!-- <button @click="showmodal(item)" @click="">报名</button> -->
@@ -1228,7 +1246,6 @@ export default {
 		},
 		// 改变自营三方类型
 		changeTab(e) {
-			console.log(e.target.dataset.type);
 			if (e.target.dataset.type != undefined) {
 				this.formvalue.pageNum = 1;
 				if (e.target.dataset.type != 0) {
@@ -1837,7 +1854,7 @@ export default {
 
 <style scoped lang="less">
 .joblist-container {
-	background-color: #fff;
+	background-color: #f0f0f0;
 }
 // .dropdown {
 // 	display: inline-block;
@@ -1976,7 +1993,7 @@ export default {
 	// margin-top: -1px;
 	width: 100vw;
 	padding: 25px 0 64px 0;
-	background-color: #fff;
+	background-color: #f0f0f0;
 	// border: 1px solid #f6f6f6;
 	// height: 72px;
 	// margin-bottom: 10px;
@@ -2001,7 +2018,7 @@ export default {
 	}
 	> .w {
 		// height: 72px;
-		background-color: #fff;
+		background-color: #f0f0f0;
 		display: flex;
 		justify-content: center;
 		// flex-direction: column;
@@ -2409,6 +2426,7 @@ export default {
 	display: flex;
 	justify-content: center;
 	margin-top: 10px;
+	background-color: #f0f0f0;
 	.maincontentleft {
 		width: 800px;
 		margin-right: 16px;
diff --git a/src/style/index.less b/src/style/index.less
index 99606bc..d7a70d0 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -1077,3 +1077,548 @@ p.bottombox {
 .bd1 {
 	border: 1px solid #ddd;
 }
+
+
+
+.g_ {
+	&mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: transparent;
+		cursor: pointer;
+	}
+	&float {
+		&_left {
+			float: left;
+		}
+		&_right {
+			float: right;
+		}
+		&_none {
+			clear: both;
+		}
+	}
+	&flex {
+		// 弹性布局
+		&_1 {
+			// 示例：g_flex_1
+			flex: 1;
+		}
+		&_2 {
+			// 示例：g_flex_1
+			flex: 2;
+		}
+		&_3 {
+			// 示例：g_flex_1
+			flex: 3;
+		}
+		&_4 {
+			// 示例：g_flex_1
+			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: 600;
+		}
+		&_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;
+		}
+		&_8c {
+			color: #8c8c8c;
+		}
+		&_9 {
+			color: #999;
+		}
+		&_c {
+			color: #ccc;
+		}
+		&_f {
+			color: #fff;
+		}
+		&_04bc {
+			color: #004bbc;
+		}
+		&_d8 {
+			color: #d8d8d8;
+		}
+		&_d9 {
+			color: #d9d9d9;
+		}
+		&_57 {
+			color: #576b95;
+		}
+		&_0d {
+			color: #0d4c7f;
+		}
+		&_f52d {
+			color: #f5222d;
+		}
+		&_f40 {
+			color: #ff4400;
+		}
+		&_594e {
+			color: #594e4e;
+		}
+		&_c1e {
+			color: #52c41a;
+		}
+		&_26 {
+			color: #262626;
+		}
+		&_7 {
+			color: #777777;
+		}
+		&_8 {
+			color: #888888;
+		}
+		&_f0 {
+			color: #ff0000;
+		}
+		&_main {
+			color: #1677ff;
+		}
+	}
+	&bg {
+		// 背景色
+		&_f {
+			// 示例：g_bg_f
+			background-color: #fff;
+		}
+		&_0 {
+			// 示例：g_bg_f
+			background-color: #000;
+		}
+		&_f0 {
+			background-color: #f0f0f0;
+		}
+		&_e {
+			background-color: #eee;
+		}
+		&_f5 {
+			background-color: #f5f5f5;
+		}
+		&_main {
+			background-color: #1677ff !important;
+			background: #1677ff !important;
+		}
+		&_f40 {
+			background-color: #ff4400;
+		}
+	}
+	&text {
+		// 字体位置
+		&_l {
+			// 示例：g_text_l
+			text-align: left;
+		}
+		&_c {
+			text-align: center;
+		}
+		&_r {
+			text-align: right;
+		}
+		&_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%);
+			}
+		}
+	}
+	&cursor {
+		// 手势
+		&_point {
+			// 示例：g_cursor_point
+			cursor: pointer;
+		}
+		&_na {
+			cursor: not-allowed;
+		}
+		&_def {
+			cursor: default;
+		}
+	}
+	&border {
+		&_d {
+			border: 1px solid #ddd;
+		}
+		&_top_d {
+			border-top: 1px solid #ddd;
+		}
+		&_right_d {
+			border-right: 1px solid #ddd;
+		}
+		&_bottom_d {
+			border-bottom: 1px solid #ddd;
+		}
+		&_left_d {
+			border-left: 1px solid #ddd;
+		}
+		&_e {
+			border: 1px solid #eee;
+		}
+		&_top_e {
+			border-top: 1px solid #eee;
+		}
+		&_right_e {
+			border-right: 1px solid #eee;
+		}
+		&_bottom_e {
+			border-bottom: 1px solid #eee;
+		}
+		&_left_e {
+			border-left: 1px solid #eee;
+		}
+		&_9 {
+			border: 1px solid #999;
+		}
+		&_d9 {
+			border: 1px solid #d9d9d9;
+		}
+		&_main {
+			border: 1px solid #1677ff;
+		}
+	}
+	&clear_scroll::-webkit-scrollbar {
+		display: none;
+	}
+	&w {
+		&_all {
+			width: 100%;
+		}
+		&_pull {
+			width: 100vw;
+		}
+		&_three {
+			width: 33.3333%;
+		}
+	}
+	&h {
+		&_all {
+			height: 100%;
+		}
+		&_pull {
+			height: 100vh;
+		}
+		&_three {
+			width: 33.3333%;
+		}
+	}
+	// 全局表格的分页器样式处理
+	&pageBottom {
+		position: sticky;
+		bottom: -16px;
+		width: 100%;
+		background-color: #fff;
+		z-index: 999;
+	}
+	// 行高设置
+	&lh {
+		&_1 {
+			line-height: 1;
+		}
+	}
+}
+
+/* 内外边距 */
+.gmp(300);
+.gmp(@n, @i: -100) when (@i =< @n) {
+	.g_pl_@{i} {
+		// 示例：g_pl_1,g_pl_2...g_pl_200
+		padding-left: 0px + @i;
+	}
+	.g_pr_@{i} {
+		padding-right: 0px + @i;
+	}
+	.g_pt_@{i} {
+		padding-top: 0px + @i;
+	}
+	.g_pb_@{i} {
+		padding-bottom: 0px + @i;
+	}
+	.g_ml_@{i} {
+		margin-left: 0px + @i;
+	}
+	.g_mr_@{i} {
+		margin-right: 0px + @i;
+	}
+	.g_mt_@{i} {
+		margin-top: 0px + @i;
+	}
+	.g_mb_@{i} {
+		margin-bottom: 0px + @i;
+	}
+	.g_p_@{i} {
+		padding: 0px + @i;
+	}
+	.g_m_@{i} {
+		margin: 0px + @i;
+	}
+	.gmp(@n, (@i+1));
+}
+
+/* 字体 */
+.gfs(100);
+.gfs(@n, @i: 10) when (@i =< @n) {
+	.g_fs_@{i} {
+		font-size: 0px + @i;
+	}
+	.g_fsi_@{i} {
+		font-size: 0px + @i !important;
+	}
+	.gfs(@n, (@i+1));
+}
+/* dot点生成 */
+.gdot(50);
+.gdot(@n, @i: 0) when (@i =< @n) {
+	.g_dot_@{i} {
+		width: 0px + @i;
+		height: 0px + @i;
+		border-radius: 50%;
+	}
+	.gdot(@n, (@i+1));
+}
+/* 圆角 */
+.gradius(30);
+.gradius(@n, @i: 0) when (@i =< @n) {
+	.g_br_@{i} {
+		border-radius: 0px + @i;
+	}
+	.gradius(@n, (@i+1));
+}
+
+/* 尺寸 */
+.gSize(500);
+.gSize(@n, @i: 0) when (@i =< @n) {
+	.g_w_@{i} {
+		width: 0px + @i;
+	}
+	.g_h_@{i} {
+		height: 0px + @i;
+	}
+	.gSize(@n, (@i+1));
+}
+
+/* 最大最小宽度高度 */
+.gSize(500);
+.gSize(@n, @i: 0) when (@i =< @n) {
+	.g_minw_@{i} {
+		min-width: 0px + @i;
+	}
+	.g_maxw_@{i} {
+		max-width: 0px + @i;
+	}
+	.g_minh_@{i} {
+		min-height: 0px + @i;
+	}
+	.g_maxh_@{i} {
+		max-height: 0px + @i;
+	}
+}
+
diff --git a/src/views/main.vue b/src/views/main.vue
index 6c989a5..9db082a 100644
--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -22,7 +22,7 @@
 								<router-link to="/" :class="routertitleindex == 0 ? 'titleactive' : ''" rel="opener">首页</router-link>
 							</li>
 							<li>
-								<router-link to="/list" @click.native="toList" :class="routertitleindex == 1 ? 'titleactive' : ''" rel="opener">伯才职位</router-link>
+								<router-link to="/list" @click.native="toList" :class="routertitleindex == 1 ? 'titleactive' : ''" rel="opener">职位列表</router-link>
 							</li>
 							<li v-if="false">
 								<router-link to="/list?type=vocational" :class="routertitleindex == 8 ? 'titleactive' : ''" rel="opener">职教职培</router-link>
@@ -38,7 +38,7 @@
 									"
 								>
 									<span class="" style="cursor: pointer">
-										<div :class="routertitleindex == 5 ? 'titleactive' : ''">我的报名</div>
+										<div :class="routertitleindex == 5 ? 'titleactive' : ''">报名工单</div>
 									</span>
 									<div class="loginbox" style="" slot="overlay">
 										<router-link to="/mybill">
@@ -162,7 +162,7 @@
 							"
 						>
 							<span class="fsa fsa-box">
-								<span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
+								<span class="iconfont icon-morentouxiang mr4 f32" style="color: #ccc;" v-if="!userbaseInfo.imgSrc"></span>
 								<img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius: 50%; width: 28px; height: 28px" alt v-else />
 								<div class="ml4 f14 c6">{{ userbaseInfo.userName || userbaseInfo.nickName || "-" }}</div>
 							</span>