招聘端添加跨境标签功能

src/views/index/index.vue

@@ -74,7 +74,7 @@
 					<div :class="shotypeCurr == index && isShoType ?'typeBanner-box-l-item-active':''"
 						@mouseenter="mouseEnter(index)" class="typeBanner-box-l-item flex align-center justify-between"
 						v-for="(item,index) in bannerType" :key="index">
-						<div class="typeBanner-box-l-item-l flex align-center">
+						<!-- <div class="typeBanner-box-l-item-l flex align-center">
 							{{item?.ruleClassifyName}}
 							<div v-if="item.childrens.length>0" v-for="(ite,ind) in item.childrens" :key="ind">
 								<div class="typeBanner-box-l-item-l-i" v-if="ind<3">
@@ -83,7 +83,29 @@
 									</div>
 								</div>
 							</div>
+						</div> -->
+						<div>
+							<!-- 一级分类 -->
+							<div class="first-title">{{ item.ruleClassifyName }}</div>
+
+							<!-- 二级分类 -->
+							<div v-if="item.childrens && item.childrens.length" class="flex" style="flex-direction: column;gap: 20px;">
+								<div v-for="(child, cIndex) in item.childrens.slice(0, 7)" :key="cIndex" class="second-block flex align-center">
+									<div class="second-title" v-if="child.title">
+										{{ child.title }}
+									</div>
 
+									<!-- 三级分类 -->
+									<div class="third-list flex" v-if="child.childrens && child.childrens.length">
+										<div v-for="(sub, sIndex) in child.childrens.slice(0, 3)"
+											:key="sIndex"
+											class="third-item"
+											>
+											{{ sub.ruleClassifyName }}
+										</div>
+									</div>
+								</div>
+							</div>
 						</div>
 						<div class="typeBanner-box-l-item-r">
 							<el-icon :size="15" color="#333333">
@@ -1029,12 +1051,11 @@
 		}
 
 		.typeBanner-box-l {
+			padding:10px 0 10px 20px;
 			width: 550px;
 			height: 100%;
 			background-color: #ffffff;
 			border-radius: 24px 0 0 24px;
-			align-content: space-around;
-			padding: 10px 0;
 			overflow: hidden;
 			overflow-y: scroll;
 		}
@@ -1100,7 +1121,7 @@
 		}
 
 		.typeBanner-box-l-item-active {
-			box-shadow: 0 0 10px 0 rgba(153, 153, 153, 0.3);
+			// box-shadow: 0 0 10px 0 rgba(153, 153, 153, 0.3);
 
 			.typeBanner-box-l-item-r {
 				.el-icon {
@@ -1136,10 +1157,33 @@
 
 		.typeBanner-box-l-item {
 			width: calc(100% - 10px);
-			height: calc(100% / 7);
+			// height: calc(100% / 7);
 			border-radius: 14px;
 			cursor: pointer;
 		}
+		.first-title{
+			font-size: 16px;
+			margin-bottom: 30px;
+			margin-top: 10px;
+		}
+		.second-block{
+			.second-title {
+				flex-shrink: 0;
+				font-size: 14px;
+				color: #666666;
+				margin-right: 40px;
+				
+			}
+			.third-list{
+				overflow: hidden;
+				gap: 20px;
+				.third-item {
+					flex-shrink: 0;
+					
+				}
+			}
+		}
+		
 	}
 
 	.tuijian {

src/views/index/indexCompany.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="index" style="padding-bottom: 40px;">
 		<!-- 搜索 -->
-		<el-affix @change="change" :offset="60" z-index="2001" style="width: 100%;">
+		<el-affix @change="change" :offset="60" z-index="2000" style="width: 100%;">
 			<div :style="isTop==true?'background:#ffffff;box-shadow: 0 10px 8px rgba(153, 153, 153, 0.1);':''"
 				class="search flex align-center justify-center flex-direction">
 				<!-- 搜索 -->
@@ -14,7 +14,7 @@
 					</div>
 					<div class="search-box-c flex align-center justify-between">
 						<div class="search-box-c-l flex align-center justify-center">
-							<el-input @keyup.enter="goSearch()" v-model="keyWord" placeholder="根据职位搜人才" />
+							<el-input @keyup.enter="goSearch()" v-model="keyWord" placeholder="通过职位关键词搜索" />
 						</div>
 						<div @click="goSearch()" class="search-box-c-r flex align-center justify-center">
 							<el-image style="width: 20px; height: 20px;margin-right: 8px;"
@@ -45,7 +45,7 @@
 					</div>
 				</div>
 				
-				<div class="flex justify-between align-center aaa">
+				<div class="flex justify-between align-center width-style" style="padding: 20px 0 10px;">
 					<!-- 岗位 -->
 					<div class="tabs flex align-center justify-center">
 						<div class="tabs-box">
@@ -97,6 +97,31 @@
 					</div>
 				</div>
 				<!-- 跨境标签 -->
+				<div class="width-style">
+					<div class="flex" style="gap:16px;margin-bottom: 10px;">
+						<div class="label-box" :class="activeIndex == 1?'label-active':''" @click="changeLabelBox(1)">跨境标签</div>
+						<div class="label-box" :class="activeIndex == 2 ? 'label-active' : ''" @click="changeLabelBox(2)">最新</div>
+					</div>
+					<div class="flex align-center text-item">
+						<div style="color: rgba(51, 51, 51, 1);font-size: 16px;margin-right: 16px;">请筛选牛人的跨境标签</div>
+						<div>跨境标签将用于为您推荐更匹配的牛人</div>
+					</div>
+					<!-- 岗位对应的跨境标签 -->
+					<div class="flex align-center" style="margin-top: 16px;">
+						<div class="tag-list flex" v-if="tabs.length">
+							<span v-for="(tag, i) in ['不限', ...parseSkills(tabs[tabsCurr]?.positionTag)]" :key="i"
+								class="tag-item" :class="{ 'tag-item-active': selectedTags.includes(tag) }"
+								@click="selectTag(tag)">
+								{{ tag }}
+							</span>
+						</div>
+						<div style="margin-left: 16px;" @click="openIndustryDialog">
+							<el-icon>
+								<Plus />
+							</el-icon>
+						</div>
+					</div>
+				</div>
 			</div>
 		</el-affix>
 		<!-- banner/类型 -->
@@ -152,15 +177,6 @@
 				</div> -->
 			<!-- </div> -->
 		</div>
-		<!-- 推荐 -->
-		<div class="tuijian flex align-center justify-center">
-			<div class="tuijian-box flex align-center justify-between">
-				<div>
-					为你推荐
-					<div class="tuijian-box-line"></div>
-				</div>
-			</div>
-		</div>
 		<div class="list flex align-center justify-center">
 			<div v-loading="loading" class="list-box flex justify-between flex-wrap">
 				<div v-if="recommendList.length!=0" class="list-box-item" @click="goDetails(item)"
@@ -224,77 +240,6 @@
 				查看更多
 			</div>
 		</div>
-		<!-- 最新求职 -->
-		<div class="tuijian flex align-center justify-center">
-			<div class="tuijian-box flex align-center justify-between">
-				<div>
-					最新求职
-					<div class="tuijian-box-line"></div>
-				</div>
-
-			</div>
-		</div>
-		<div class="list flex align-center justify-center">
-			<div v-loading="loadings" class="list-box flex justify-between flex-wrap">
-				<div v-if="recommendLists.length!=0" @click="goDetails(item)" class="list-box-item"
-					v-for="(item,index) in recommendLists" :key="index">
-					<div class="list-box-item-title flex align-center justify-between">
-						<div class="list-box-item-title-name">
-							{{ item.userName }}
-							<!-- <el-divider direction="vertical" />
-							{{ item.onlineStatus == 'ONLINE' ? '在线' : '离线' }} -->
-							<el-divider direction="vertical" />
-							{{ item.userSex == 2 ? '女' : '男' }}
-							<el-divider direction="vertical" />
-							{{ item.school }}
-						</div>
-						<div class="list-box-item-title-price">
-							<img :src="item.userAvatar ? item.userAvatar : '/default.jpg'" alt="" />
-						</div>
-					</div>
-					<div class="list-box-item-label flex align-center flex-wrap">
-						<div class="list-box-item-label-item">
-							{{ item.userAge }}岁
-						</div>
-						<div class="list-box-item-label-item">
-							{{ item.resumesWorkExperience || 0 }}年
-						</div>
-						<div class="list-box-item-label-item">
-							{{ item.degree }}
-						</div>
-						<div class="list-box-item-label-item">
-							期望{{ item.minSalary }}-{{ item.maxSalary }}元
-						</div>
-					</div>
-					<div class="list-box-item-label" style="line-height: 40px;font-size: 13px;color: #999999;">
-						{{ item.companyName || '暂无公司' }}&nbsp;&nbsp;
-						{{ item.lastWorkStartTime ? item.lastWorkStartTime.slice(0, 10) : '' }}--{{ item.lastWorkEndTime ?
-							item.lastWorkEndTime.slice(0, 10) : '' }}
-					</div>
-					<div class="list-box-item-label flex align-center flex-wrap">
-						<div class="list-box-item-label-item" v-for="skillname in parseSkills(item.intentPostSkill)" :key="skillname">
-							{{ skillname }}
-						</div>
-					</div>
-					<div class="list-box-item-info flex align-center justify-between">
-						<div class="list-box-item-info-name">
-							期望岗位：{{ item.expectedPosition }}
-						</div>
-						<!-- <div class="list-box-item-info-price">
-							{{item.company.companyPeople}}
-						</div> -->
-					</div>
-				</div>
-				<div class="list-box-item" style="height: 0;padding: 0;"></div>
-			</div>
-		</div>
-		<el-empty v-if="recommendLists.length==0" description="暂无推荐" />
-		<!-- 查看更多 -->
-		<div v-if="recommendLists.length>0" class="moreData flex align-center justify-center">
-			<div @click="selectLabel('')" class="moreData-box flex align-center justify-center">
-				查看更多
-			</div>
-		</div>
 		<!-- 切换城市 -->
 		<el-dialog v-model="allCitys" :draggable="true" destroy-on-close align-center center>
 			<template #header>
@@ -352,6 +297,61 @@
 				</div>
 			</div>
 		</el-dialog>
+		<!-- 跨境标签选择 -->
+		<el-dialog class="workDialog" v-model="industryDialog" title="选择跨境标签" :draggable="true" destroy-on-close
+			align-center center>
+			<template #header>
+				<div class="my-header flex align-center">
+					<div class="my-header-title" style="font-weight: bold">
+						选择跨境标签
+					</div>
+					<div class="my-header-title flex align-center" style="margin-left: 40px; width: 600px">
+						<el-select @remove-tag="removeTag" :collapse-tags="true" :max-collapse-tags="5"
+							class="my-header-title-se" multiple-limit="20" v-model="selectedIndustryTags" multiple
+							placeholder="请选择跨境标签">
+							<el-option v-for="item in industryArrList" :key="item.postSkillName"
+								:label="item.postSkillName" :value="item.postSkillName" />
+						</el-select>
+						<span style="margin-left: 10px;font-size: 13px;color: #999999;">
+							{{ selectedIndustryTags.length }}/20
+						</span>
+						<el-button @click="addHangye" style="margin-left: 10px" type="primary">确定</el-button>
+					</div>
+				</div>
+			</template>
+
+			<div class="preference-grid">
+				<div v-for="(parent, pIndex) in industryList" :key="pIndex" class="preference-group">
+					<div class="preference-title">
+						<span>{{ parent.postSkillName }}</span>
+					</div>
+
+					<div class="preference-children">
+						<div v-for="(child, cIndex) in parent.childrenList" :key="cIndex" class="preference-tag"
+							:class="{ active: selectedIndustryTags.includes(child.postSkillName) }"
+							@click="togglePreference(child.postSkillName)">
+							<span>{{ child.postSkillName }}</span>
+						</div>
+					</div>
+				</div>
+
+				<!-- 自定义标签 -->
+				<div v-for="(item, index) in customTags" :key="index"
+					style="margin-right: 10px; display: inline-block;">
+					<el-tag size="large" closable :disable-transitions="false" @close="handleClose(index)">
+						{{ item }}
+					</el-tag>
+				</div>
+
+				<el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" style="width: fit-content;"
+					size="default" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
+				<el-button v-else class="button-new-tag ml-1" size="default" @click="inputVisible = true">
+					+ 新增
+				</el-button>
+
+				<el-empty v-if="industryList.length == 0" description="暂无从事方向" />
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
@@ -369,6 +369,14 @@
 		},
 		data() {
 			return {
+				industryDialog: false, // 控制弹窗
+				industryList: [], // 后端返回的完整行业树
+				selectedIndustryTags: [], // ✅ 用这个数组代替 postPushForm.positionTag
+				customTags: [], // 自定义标签
+				inputVisible: false,
+				inputValue: '',
+				selectedTags: ['不限'], // 默认选中“不限”
+				activeIndex:1,
 				size: 160, //二维码大小
 				qrColor: {
 					'background': '#ffffff'
@@ -398,18 +406,19 @@
 				cityGroupList: [], //按字母分组的城市列表
 				rmCity: [], //热门城市列表
 				companyId:'',//企业id
-			//筛选条件相关
-			experience: '', //工作经验
-			salaryRange: '', //薪资范围
-			education: '', //学历
-			experienceList: [],
-			moneyList: [],
-			schoolList: [],
-			searchCondizione: [
-				{name: '工作经验', isUp: false},
-				{name: '薪资待遇', isUp: false},
-				{name: '学历要求', isUp: false}
-			]
+				//筛选条件相关
+				experience: '', //工作经验
+				salaryRange: '', //薪资范围
+				education: '', //学历
+				experienceList: [],
+				moneyList: [],
+				schoolList: [],
+				searchCondizione: [
+					{name: '工作经验', isUp: false},
+					{name: '薪资待遇', isUp: false},
+					{name: '学历要求', isUp: false}
+				],
+				intentPostSkill: '', //跨境标签
 			}
 		},
 		mounted() {
@@ -437,6 +446,134 @@
 
 		},
 		methods: {
+			// 点击“+”打开行业标签弹窗
+			openIndustryDialog() {
+				// 打开弹窗
+				this.industryDialog = true;
+				// 获取当前岗位的 positionTag 字符串
+				const tagString = this.tabs[this.tabsCurr]?.positionTag || '';
+				// 调用回显方法，渲染出选中的系统标签和自定义标签
+				this.handleTagDisplay(tagString);
+			},
+			handleTagDisplay(tagString) {
+				const tagArray = tagString
+					.split(',')
+					.map(tag => tag.trim())
+					.filter(tag => tag && tag !== '不限');
+
+				const allSystemTags = [];
+				this.industryList.forEach(category => {
+					if (category.childrenList) {
+						category.childrenList.forEach(item => {
+							allSystemTags.push(item.postSkillName);
+						});
+					}
+				});
+
+				// 清空当前选中
+				this.selectedIndustryTags = [];
+				this.customTags = [];
+
+				tagArray.forEach(tag => {
+					if (allSystemTags.includes(tag)) {
+						// 系统标签
+						if (
+							!this.selectedIndustryTags.includes(tag) &&
+							this.selectedIndustryTags.length < 20
+						) {
+							this.selectedIndustryTags.push(tag);
+						}
+					} else {
+						// 自定义标签
+						if (
+							this.customTags.length < 5 &&
+							this.customTags.length + this.selectedIndustryTags.length < 20
+						) {
+							this.customTags.push(tag);
+						}
+					}
+				});
+			},
+			togglePreference(name) {
+				const index = this.selectedIndustryTags.indexOf(name);
+				if (index === -1) {
+					if (this.selectedIndustryTags.length >= 20) {
+						this.$message.warning('最多选择20个跨境标签');
+						return;
+					}
+					this.selectedIndustryTags.push(name);
+				} else {
+					this.selectedIndustryTags.splice(index, 1);
+				}
+			},
+			handleClose(index) {
+				this.customTags.splice(index, 1);
+			},
+			handleInputConfirm() {
+				const val = this.inputValue.trim();
+				if (val) {
+					if (
+						this.customTags.length < 5 &&
+						this.customTags.length + this.selectedIndustryTags.length < 20 &&
+						!this.customTags.includes(val)
+					) {
+						this.customTags.push(val);
+					} else {
+						this.$message.warning('最多可添加5个自定义标签，总数不超过20个');
+					}
+				}
+				this.inputVisible = false;
+				this.inputValue = '';
+			},
+			addHangye() {
+				// 合并系统 + 自定义标签
+				const mergedTags = [...this.selectedIndustryTags, ...this.customTags];
+				// 更新岗位标签数据
+				this.tabs[this.tabsCurr].positionTag = mergedTags.join(',');
+				// 关闭弹窗
+				this.industryDialog = false;
+			},
+			getIndustryList() {
+				let data = {
+					ruleClassifyId: this.tabs[this.tabsCurr].ruleClassifyId
+				};
+				this.$Request.get('/app/userFirst/getPostSkill', { params: data }).then(res => {
+					if (res.code === 0) {
+						this.industryList = res.data || [];
+					}
+				});
+			},
+			selectTag(tag) {
+				// 1. 如果点击的是“不限”
+				if (tag === '不限') {
+					this.selectedTags = ['不限'];
+				} else {
+					// 2. 否则处理多选逻辑
+					const index = this.selectedTags.indexOf(tag);
+					if (index === -1) {
+						// 新增选中
+						this.selectedTags.push(tag);
+						// 移除“不限”
+						this.selectedTags = this.selectedTags.filter(t => t !== '不限');
+					} else {
+						// 取消选中
+						this.selectedTags.splice(index, 1);
+					}
+
+					// 3. 如果全都取消了 → 默认选中“不限”
+					if (this.selectedTags.length === 0) {
+						this.selectedTags = ['不限'];
+					}
+				}
+
+				// 更新选择
+				this.intentPostSkill = this.selectedTags.join(',');
+				this.getRecommendJob();
+			},
+			changeLabelBox(val){
+				this.activeIndex = val;
+				this.getRecommendJob()
+			},
 			mouseovermy(item) {
 				this.mouseoutmy()
 				item.isUp = true
@@ -540,8 +677,7 @@
 					break;
 			}
 			//重新获取简历
-			this.getRecommendJob(1)
-			this.getRecommendJob(2)
+			this.getRecommendJob()
 		},
 			//选择热门搜索并跳转
 			selectLabel(item) {
@@ -581,16 +717,15 @@
 				})
 			},
 			//获取简历
-		getRecommendJob(type) {
-			let data = {}
-			if (Number(type) === 1) {
+			getRecommendJob() {
 				this.loading = true
-				data = {
+				let data = {
 					page: 1,
 					limit: 9,
 					postType: '', //工作性质
 					expectedPosition: this.tabs[this.tabsCurr]?.ruleClassifyName, //岗位名称
-					screen: 1, //1推荐 2最新
+					intentPostSkill:this.intentPostSkill == '不限' ? '' : this.intentPostSkill, //跨境标签
+					screen: this.activeIndex, //1推荐 2最新
 					city: this.city == '全国' ? '' : this.city, //城市
 					salaryRange: this.salaryRange == '不限' ? '' : this.salaryRange, //薪资范围
 					eduRange: this.education == '不限' ? '' : this.education, //学历
@@ -600,39 +735,40 @@
 					lat: this.latitude,
 					companyId: this.companyId
 				}
-			} else {
-				this.loadings = true
-				data = {
-					page: 1,
-					limit: 9,
-					postType: '', //工作性质
-					expectedPosition: this.tabs[this.tabsCurr]?.ruleClassifyName, //岗位名称
-					screen: 2, //1推荐 2最新
-					city: this.city == '全国' ? '' : this.city, //城市
-					salaryRange: this.salaryRange == '不限' ? '' : this.salaryRange, //薪资范围
-					eduRange: this.education == '不限' ? '' : this.education, //学历
-					expRange: this.experience == '不限' ? '' : this.experience, //经验
-					lng: this.longitude,
-					lat: this.latitude,
-					companyId: this.companyId
-				}
-			}
+			// if (Number(type) === 1) {
+				
+			// } else {
+			// 	this.loadings = true
+			// 	data = {
+			// 		page: 1,
+			// 		limit: 9,
+			// 		postType: '', //工作性质
+			// 		expectedPosition: this.tabs[this.tabsCurr]?.ruleClassifyName, //岗位名称
+			// 		screen: 2, //1推荐 2最新
+			// 		city: this.city == '全国' ? '' : this.city, //城市
+			// 		salaryRange: this.salaryRange == '不限' ? '' : this.salaryRange, //薪资范围
+			// 		eduRange: this.education == '不限' ? '' : this.education, //学历
+			// 		expRange: this.experience == '不限' ? '' : this.experience, //经验
+			// 		lng: this.longitude,
+			// 		lat: this.latitude,
+			// 		companyId: this.companyId
+			// 	}
+			// }
 				this.$Request.post('/app/resumes/selectResumesList', data,{type: 'json'}).then(res => {
 					if (res.code == 0) {
 						if (res.data && res.data.records) {
-							if (Number(type) == 1) {
-								this.recommendList = res.data.records
-								this.loading = false
-							} else {
-								this.recommendLists = res.data.records
-								this.loadings = false
-							}
+							this.recommendList = res.data.records
+							this.loading = false
+							// if (Number(type) == 1) {
+								
+							// } else {
+							// 	this.recommendLists = res.data.records
+							// 	this.loadings = false
+							// }
 						} else {
 							this.loading = false
 							this.loadings = false
 						}
-
-
 						console.log(this.recommendList, 'cccccccc')
 					}
 				})
@@ -647,6 +783,7 @@
 				}).then(res => {
 					if (res.code == 0) {
 						this.tabs = res.data;
+						this.getIndustryList();
 						localStorage.setItem('postPushId', this.tabs[this.tabsCurr].postPushId)
 						//定位
 						this.getLocation();
@@ -659,8 +796,7 @@
 				this.allCitys = false
 				localStorage.setItem('city', this.city)
 				//重新获取岗位
-				this.getRecommendJob(1)
-				this.getRecommendJob(2)
+				this.getRecommendJob()
 			},
 			//打开城市选择弹框
 			openCityDialog() {
@@ -751,8 +887,7 @@
 						if (res.code == 0) {
 							this.citys = res.data.city ? res.data.city : '未知';
 							//获取简历
-							this.getRecommendJob(1)
-							this.getRecommendJob(2)
+							this.getRecommendJob()
 							localStorage.setItem('city', this.city)
 						}
 					});
@@ -803,8 +938,7 @@
 				this.tabsCurr = index;
 				console.log(this.tabsCurr)
 				//重新获取岗位
-				this.getRecommendJob(1)
-				this.getRecommendJob(2)
+				this.getRecommendJob()
 			},
 			/**
 			 * @param {Boolean} e 
@@ -824,6 +958,24 @@
 		right: 0;
 		left: 0;
 	}
+	.tag-list{
+		flex-wrap: wrap;
+		gap: 10px;
+		.tag-item{
+			padding: 4px;
+			border-radius: 4px;
+			background: rgba(198, 198, 198, 0.1);
+			color: rgba(153, 153, 153, 1);
+			font-family: DM Sans;
+			font-size: 14px;
+			font-weight: 400;
+			cursor: pointer;
+		}
+		.tag-item-active {
+			color: rgba(6, 225, 171, 1);
+			background: rgba(6, 225, 171, 0.1);
+		}
+	}
 	.searchLabel {
 		width: 100%;
 
@@ -841,10 +993,11 @@
 	.my-header {
 		padding: 10px 10px 0 10px;
 	}
-
-	:deep(.el-input__wrapper) {
-		box-shadow: none;
-		border: none;
+	.search-box-c-l{
+		:deep(.el-input__wrapper) {
+			box-shadow: none;
+			border: none;
+		}
 	}
 
 	:deep(.el-dialog) {
@@ -1029,9 +1182,8 @@
 			}
 		}
 	}
-	.aaa{
+	.width-style{
 		width: calc(1600px - $marginTop-60 * 2);
-		padding: 20px 0 10px;
 	}
 
 	.tabs {
@@ -1561,4 +1713,70 @@
 	.clean:hover {
 		color: #00DD9A;
 	}
+	.label-box{
+		padding: 5px;
+		color: rgba(153, 153, 153, 1);
+		font-family: DM Sans;
+		font-size: 16px;
+		font-weight: 400;
+		box-sizing: border-box;
+		border-radius: 4px;
+		background: rgba(198, 198, 198, 0.1);
+		cursor: pointer;
+	}
+	.label-active{
+		color: rgba(6, 225, 171, 1);
+		background: rgba(6, 225, 171, 0.1);
+	}
+	.text-item{
+		color: rgba(153, 153, 153, 1);
+		font-family: DM Sans;
+		font-size: 14px;
+		font-weight: 400;
+	}
+	/* 从事方向选择样式 */
+	.preference-grid {
+		padding: 20px;
+		max-height: 400px;
+		overflow-y: auto;
+	}
+
+	.preference-group {
+		margin-bottom: 20px;
+	}
+
+	.preference-title {
+		font-size: 16px;
+		font-weight: bold;
+		margin-bottom: 10px;
+		color: #333;
+	}
+
+	.preference-children {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px;
+	}
+
+	.preference-tag {
+		padding: 8px 16px;
+		border: 1px solid #dcdfe6;
+		border-radius: 20px;
+		cursor: pointer;
+		transition: all 0.3s ease;
+		background-color: #fff;
+		font-size: 14px;
+		color: #606266;
+	}
+
+	.preference-tag:hover {
+		border-color: #00DD9A;
+		color: #00DD9A;
+	}
+
+	.preference-tag.active {
+		background-color: #00DD9A;
+		border-color: #00DD9A;
+		color: #fff;
+	}
 </style>

src/views/search/searchCom.vue

@@ -11,7 +11,7 @@
 							<div class="condizione-box-c-search flex justify-between">
 								<div class="condizione-box-c-search-in flex align-center justify-center">
 									<div class="condizione-box-c-search-ins flex align-center justify-center">
-										<el-input @keyup.enter="startSearch()" v-model="keyWord" placeholder="根据职位搜索" />
+										<el-input @keyup.enter="startSearch()" v-model="keyWord" placeholder="通过职位关键词搜索" />
 									</div>
 
 								</div>