yizhizan-h5/pages/talentSearch/index.vue

<template>
	<view class="talent-search-page">
			<!-- <image class="top-bg" src="/static/images/index/index-bg1.png" mode="widthFix" /> -->
		<view class="topbg-sticky">
			<!-- <view class="top-bg"></view> -->
			<!-- 搜索框 -->
			<view class="search flex align-center justify-center"
				:style="{ paddingTop: (22 + statusBarHeight) + 'px' }">
				<view class="search-box">
					<view class="dropdown-btn" @click="showDropdown">
						<text class="dropdown-text">{{ selectedText||'请选择' }}</text>
						<u-icon name="arrow-down" color="#016BF6" size="16"></u-icon>
					</view>
					<view class="separator"></view>
					<input class="search-input" v-model="searchKeyword" placeholder="通过职位关键词查询" @confirm="custom" />
				</view>
				<view class="search-btn" @click="custom">搜索</view>
			</view>



			<!-- 筛选栏 -->
			<view class="qySx-sx-box flex justify-between align-center">
				<view class="qySx-sx-box-r flex align-center">
					<!-- 城市 -->
					<view class="qySx-sx-box-r-i flex align-center">
						<text style="margin-right: 10rpx;"
							@click="goNav('/package/jobIntention/city')">{{city?city:'选择城市'}}</text>
						<u-icon name="arrow-down" color="#00B78F" size="16"
							@click="goNav('/package/jobIntention/city')"></u-icon>
					</view>

					<!-- 筛选 -->
					<view class="qySx-sx-box-filter flex align-center">
						<text style="margin-right: 10rpx;" @click="goNav('/package/screen/screen?type=2')">筛选</text>
						<u-icon name="arrow-down" color="#999999" size="16"
							@click="goNav('/package/screen/screen?type=2')"></u-icon>
					</view>



					<view class="qySx-sx-box-filter flex align-center" v-if="education || salaryRange || experience">
						<text v-if="education" class="qySx-sx-box-filter-text">{{education}}</text>
						<text v-if="salaryRange" class="qySx-sx-box-filter-text">{{salaryRange}}</text>
						<text v-if="experience" class="qySx-sx-box-filter-text">{{experience}}</text>
					</view>


				</view>
			</view>

		</view>

		<!-- 人才列表 -->
		<!-- <view class="talent-list" :style="{ marginTop: talentListMarginTop }"> -->
			<view class="talent-list">
			<view class="talent-card" v-for="(talent, index) in talentList" :key="index"
				@click="goToResumeDetail(talent)">
				<view class="talent-content">
					<!-- 头像和基本信息 -->
					<view class="talent-header">
						<image :src="talent.userAvatar" class="talent-avatar" mode="aspectFill"></image>
						<view class="talent-info">
							<view class="talent-name-section">
								<view class="talent-name">{{ talent.maskedName }}</view>
								<view class="talent-tags">
									<view class="status-tag online" v-if="talent.isOnline">在线</view>
									<!-- 	<view class="status-tag hot" v-if="talent.isHot">热门搜索</view> -->
									<view class="status-tag active" v-if="talent.lastActive">{{ talent.lastActive }}
									</view>
								</view>
							</view>
							<!-- 经验和薪资 -->
							<view class="talent-experience">
								<text class="experience-text">{{ talent.resumesWorkExperience || 0 }}年</text>
								<text class="education-salary">{{ talent.minSalary }} -{{ talent.maxSalary }}</text>
								<text class="status-text">{{ jobStatusList[talent.resumesStatus].text}}</text>
							</view>
						</view>
					</view>

					<!-- 当前职位 -->
					<view class="current-job">
						<image src="../../static/images/aixin.svg" class="job-icon" mode="aspectFit"></image>
						<text class="job-text">{{ talent.companyName }}·{{ talent.lastWorkPosition }}</text>
					</view>

					<!-- 求职期望 -->
					<view class="job-expectation">
						<image src="../../static/images/xiangzi.svg" class="job-icon" mode="aspectFit"></image>
						<text class="expectation-text">求职期望: {{ talent.expectedPosition }}</text>
					</view>

					<!-- 跨境标签 -->
					<view class="skill-tags" v-if="talent.intentPostSkill">
						<view class="skill-tag" v-for="(text,i) in parseSkills(talent.intentPostSkill)" :key="i">
							{{ text }}
						</view>
					</view>

					<!-- 工作经历 -->
					<view class="job-description">
						<text class="description-text">{{ talent.lastWorkContent }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 职位选择弹窗 -->
		<view class="position-modal" v-if="showPositionModal" @click="hidePositionModal">
			<view class="position-modal-content" @click.stop>
				<!-- 拖拽条 -->
				<view class="position-modal-handle"></view>

				<!-- 标题 -->
				<view class="position-modal-title">选择职位</view>

				<!-- 职位选项 -->
				<view class="position-options">
					<view class="position-option" :class="selectedPosition === option.id ? 'active' : ''"
						@click="selectPosition(option)" v-for="(option, index) in positionOptions" :key="index">
						<view class="position-option-icon">
							<view class="check-icon" v-if="selectedPosition === option.id">✓</view>
						</view>
						<text class="position-option-text">{{ option.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				searchKeyword: '',
				currentSx: 0,
				sxTypeList: [{
						id: 1,
						name: '推荐',
					},
					{
						id: 2,
						name: '最新',
					}
				],
				city: '深圳',
				county: '',
				showSortModalFlag: false,
				selectedSort: 0,
				sortOptions: ['综合排序', '最新优先', '距离优先'],
				showPositionModal: false,
				selectedPosition: 0,
				positionOptions: '',
				selectedText: "",
				talentList: [],
				jobStatusList: [],
				token: '',
				page: 1,
				limit: 10,
				latitude: '',
				longitude: '',
				totlo: '',
				education: '', //学历
				experience: '', //经验
				industry: '', //行业
				salaryRange: '', //薪资
				companyPeople: '', //公司规模
				preference: [],
				domeWidth: 0,
				showModal: true,
				arr: [],
				companyStatus: '',
				XCXIsSelect: '是',
				bannerList: [], //企业端轮播图
				bannerListuser: [], //用户端轮播图
				gridlist: [], //用户端分类
				gongao: [], //公告
				tuiguang: '', //分享标题
				bgImg: '', //分享图片
				companList: [], //公司列表
				directionList: [ //方向列表
					{
						id: '不限',
						name: '不限'
					}
				],



			}
		},
		computed: {
			// 计算搜索框的总高度（px）
			searchBoxHeight() {
				// 动态 paddingTop (12 + statusBarHeight) + 搜索框内容高度 + paddingBottom
				// 搜索框内容约 52rpx ≈ 26px, paddingBottom 20rpx ≈ 10px
				return (12 + this.statusBarHeight + 26 + 10) + 'px';
			},
			// 计算人才列表的 margin-top（包括搜索框 + 筛选栏）
			talentListMarginTop() {
				// 搜索框高度 + 筛选栏高度（紧凑布局）
				// 筛选栏实际高度约 46px（按钮18px + 内边距16px + 外边距12px）
				return (1+ this.statusBarHeight) + 'px';
				//return '-69px';
			}
		},
		onLoad() {
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.getCompanyClassify()
			//this.getPeopList()
			this.jobStatusList = this.$queue.resumesStatus()
		},
		onShow() {
			if (uni.getStorageSync('city')) {
				this.city = uni.getStorageSync('city')
			} else {
				this.city = ''
			}
			//获取选中的筛选条件
			if (uni.getStorageSync('filter') && (uni.getStorageSync('filter')).length > 0) {
				let filter = uni.getStorageSync('filter')
				this.education = '' //学历
				this.experience = '' //经验
				this.industry = '' //行业
				this.salaryRange = '' //薪资
				this.companyPeople = '' //公司规模
				filter.map(item => {
					let arr = []
					item.list.map(ite => {
						if (ite.value != '不限') {
							arr.push(ite.value)
						}
					})
					console.log(item)

					switch (item.name) {
						case '学历要求':

							//this.education = arr.join(',')
							this.education = item.list[0].value == '不限' ? '' : item.list[0].value
							break;
						case '薪资范围（单选）':
							//this.salaryRange = arr.join(',')

							this.salaryRange = item.list[0].value == '不限' ? '' : item.list[0].value
							break;
						case '经验要求':
							//this.experience = arr.join(',')

							this.experience = item.list[0].value == '不限' ? '' : item.list[0].value
							break;
						case '公司规模':
							//this.companyPeople = arr.join(',')

							this.companyPeople = item.list[0].value == '不限' ? '' : item.list[0].value
							break;
						case '行业':
							//this.industry = arr.join(',')

							this.industry = item.list[0].value == '不限' ? '' : item.list[0].value
							break;
					}

				})
				console.log(this.experience)
				this.getPeopList()


			} else {
				this.education = '' //学历
				this.experience = '' //经验
				this.industry = '' //行业
				this.salaryRange = '' //薪资
				this.companyPeople = '' //公司规模
				// this.getCompanyClassify()
				this.getPeopList()
			}



		},
		methods: {
			parseSkills(str) {
				if (!str) return [];
				try {
					const parsed = JSON.parse(str);
					if (Array.isArray(parsed)) {
						return parsed;
					}
				} catch (e) {

				}
				str = str.replace(/，/g, ',');
				// 判断分隔符
				if (str.includes('/')) {
					return str.split('/').filter(Boolean);
				} else if (str.includes(',')) {
					return str.split(',').filter(Boolean);
				}
				return [str];
			},
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 显示下拉菜单
			showDropdown() {
				this.showPositionModal = true
			},

			// 隐藏职位选择弹窗
			hidePositionModal() {
				this.showPositionModal = false
			},

			/**
			 * 获取公司发布的岗位列表
			 */
			getCompanyClassify() {
				let data = {
					
				}
				if(uni.getStorageSync('companyId')&&uni.getStorageSync('companyId')!='null')
					data.companyId= uni.getStorageSync('companyId')
				this.$Request.getT('/app/postPush/getCompanyClassify', data).then(res => {
					if (res.code == 0) {
						let arr = [
							/* {
														projectName: '',
														name: '全部',
													}, */
						]
						if (res.data.length == 0) {
							if(uni.getStorageSync('companyId')&&uni.getStorageSync('companyId')!='null')
							uni.navigateTo({
								url: '/pages/my/jobPosting?companyId=' + uni.getStorageSync('companyId') + '&status=' + this
									.companyStatus + '&companyName=' + this.companyName
							})
							else
							this.$queue.showToast('请先进行企业认证')
						}
						if (res && res.data && Array.isArray(res.data)) {

							console.log(res.data,'啊啊啊')
							this.selectedPosition = res.data.length>0&&res.data[0].postPushId||''
							// 更新下拉按钮显示的文字
							this.selectedText = res.data.length>0&&res.data[0].ruleClassifyName || ''
							res.data.map(item => {
								let obj = {
									id: item.postPushId,
									projectName: item.ruleClassifyName,
									name: item.ruleClassifyName,
								}
								arr.push(obj)
							})
							console.log(arr)

							this.positionOptions = arr
							this.getPeopList()
						}

					}
				})
			},


			maskName(name) {
				// 处理空值或非字符串情况
				if (!name || typeof name !== 'string') {
					return '';
				}

				// 获取姓氏（第一个字符）
				const surname = name.charAt(0);

				// 计算需要替换的字符数（名字长度 - 1）
				const nameLength = name.length - 1;

				// 生成对应数量的星号
				const maskedPart = '*'.repeat(nameLength > 0 ? nameLength : 0);

				// 返回处理后的名字
				return surname + maskedPart;
			},


			/**
			 * 获取简历列表
			 */
			getPeopList() {
				if(!this.selectedText) return;
				let data = {
					page: this.page,
					limit: this.limit,
					lastWorkPosition: this.searchKeyword || "",
					expectedPosition: this.selectedText || "", //期望职位
					city: this.city || "", //期望城市
					salaryRange: this.salaryRange || "", //薪资
					resumesStatus: this.resumesStatus || "", //个人状态
					expRange: this.experience || "", //工作经验
					eduRange: this.education || "", //学历范围
				}



				this.$Request.postJson('/app/resumes/selectResumesList', data).then(res => {
					uni.stopPullDownRefresh()
					uni.hideLoading()
					if (res.code == 0 && res.data) {
						this.talentList = [] //清空下搜索和筛选之前的数据
						this.totalPage = res.data.totalPage
						// res.data.list.map(item => {
						// 	if (item.positionWelfare) {
						// 		item.positionWelfare = item.positionWelfare.split(',')
						// 	} else {
						// 		item.positionWelfare = []
						// 	}
						// })
						console.log(res.data);
						if (!res.data.records || !Array.isArray(res.data.records) || res.data.records.length === 0) {
							return uni.showToast({
								title: '暂无数据', // 提示文字
								icon: 'none', // 不显示图标（可选值：success / loading / none）
								duration: 2000, // 显示时长，单位毫秒（2000 = 2秒）
								mask: true // 是否显示透明蒙层，防止触摸穿透（可选）
							});
						}

						const list = res.data.records.map(item => {
							// 若技能字段为其他名称（如 skillTags），需映射为 skills
							// item.skills = item.skillName || ''; 
							item.skills = item.skillName ? item.skillName.split(',').map(skill => skill
								.trim()) : [];
							item.maskedName = this.maskName(item.userName);
							return item;
						});
						if (this.page == 1) {
							this.talentList = list
						} else {
							this.talentList = [...this.talentList, ...list]
						}
						this.totlo = list.totalPage
					} else {
						this.talentList = []
					}
				})
			},


			// 选择职位
			selectPosition(obj) {
				console.log(obj)
				this.selectedPosition = obj.id
				// 更新下拉按钮显示的文字
				const selectedTexts = obj.name
				this.selectedText = selectedTexts
				// 这里可以更新下拉按钮的显示文字
				/* uni.showToast({
					title: `已选择: ${selectedTexts}`,
					icon: 'none'
				}) */
				this.getPeopList()
				this.hidePositionModal()
			},

			// 搜索
			custom() {
				console.log('搜索关键词:', this.searchKeyword)
				// 这里可以添加搜索逻辑

				this.getPeopList()
			},

			// 跳转页面
			goNavs(url) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					// console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								// console.log(re)
							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
				}
				// #endif
				uni.navigateTo({
					url: url
				})
			},

			// 清空搜索
			clear() {
				this.searchKeyword = ''
			},

			// 跳转页面
			goNav(url) {
				if (uni.getStorageSync('token')) {
					// #ifdef MP-WEIXIN
					if (uni.getStorageSync('sendMsg')) {
						// console.log('授权+1')
						wx.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								// console.log(JSON.stringify(re), 111111111111)
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									// console.log(re)
								}
							},
							fail: (res) => {
								// console.log(res)
							}
						})
					}
					// #endif
					uni.navigateTo({
						url: url
					})
				} else {
					this.noLogin()
				}

			},



			// 未登录提示
			noLogin() {
				uni.showModal({
					title: '提示',
					content: '您还未登录,请先登录',
					confirmColor: '#016BF6',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/public/login'
							})
						}
					}
				})
			},

			// 显示排序弹窗
			showSortModal() {
				this.showSortModalFlag = true
			},

			// 隐藏排序弹窗
			hideSortModal() {
				this.showSortModalFlag = false
			},

			// 选择排序选项
			selectSort(index) {
				this.selectedSort = index
				uni.showToast({
					title: `已选择: ${this.sortOptions[index]}`,
					icon: 'none'
				})

				this.hideSortModal()
			},

			// 跳转到人才详情
			goToResumeDetail(talent) {
				console.log('查看人才详情:', talent,this.selectedPosition)
				if(!this.selectedPosition){
					uni.showToast({
						title:'请添加招聘岗位！',
						icon:'none'
					})
					return;
				}
				// 跳转到简历详情页面
				uni.navigateTo({
					url: `/pages/talentSearch/resumeDetail?resumesId=${talent.id || talent.resumesId || ''}&postPushId=${this.selectedPosition}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 激活状态样式
	.active3 {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 12rpx;
		border-radius: 12rpx;
		background: #FFFFFF !important;
		margin-right: 12rpx;
		border: 0.5px solid rgba(1, 107, 246, 1);

		color: rgba(1, 107, 246, 1) !important;
		font-family: DM Sans;
		font-size: 22rpx;
		font-weight: 400;
		line-height: 20rpx;
		letter-spacing: 0px;
		text-align: left;
	}

	.talent-search-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.topbg-sticky {
		display: flex;
		    flex-direction: column;
		    justify-content: space-around;
			background-image: url('/static/images/index/index-bg1.png');
			    background-repeat: no-repeat;
			    background-size: cover;
				    background-position-y: -38rpx;
					// border: #007AFF 1px solid;
	}

	.top-bg {

		position: relative;
		top: 0;
		z-index: 0;
		width: 100%;
	}

	.topbg-sticky-box {
		width: 100%;
		padding: 0 40rpx;
		position: relative;
		z-index: 1;
	}

	.topbg-sticky-title {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.topbg-sticky-title-left {
		color: rgba(255, 255, 255, 1);
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 36rpx;
		letter-spacing: 0%;
		text-align: left;
	}

	.xing-icon {
		width: 42rpx;
		height: 42rpx;
		margin-right: 12rpx;
	}

	.topbg-sticky-title-right {
		color: #ffffff;
	}

	.topbg-sticky-subtitle {
		color: rgba(255, 255, 255, 1);
		font-family: DM Sans;
		font-size: 30rpx;
		font-weight: 700;
		line-height: 36rpx;
		letter-spacing: 0%;
		text-align: left;
	}

	.qySx-sx-box {
		width: 94%;
		//margin-top: -60rpx;
		background-color: #fff;
		height: 82rpx;
		margin: 2px auto;

		
		border-radius: 8px;
		padding: 24rpx;

		.qySx-sx-box-l-i {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 36rpx;
			letter-spacing: 0%;
			text-align: center;
			margin-right: 20rpx;
			border-radius: 6px;
			background: rgba(198, 198, 198, 0.1);
			padding: 8rpx 12rpx;
			display: inline-block;
			min-width: 60rpx;
			white-space: nowrap;

			&.active3 {
				font-family: DM Sans;
				font-size: 24rpx !important;
				font-weight: 400 !important;
				line-height: 36rpx;
				letter-spacing: 0%;
				text-align: left;
				padding: 8rpx 12rpx !important;
				color: rgba(1, 107, 246, 1) !important;
				// background: #D6E7FD !important;
				background: rgba(252, 233, 220, 1);
				border: 1px solid rgba(1, 107, 246, 1);
			}
		}

		.qySx-sx-box-r-i {
			color: rgba(1, 107, 246, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 36rpx;
			letter-spacing: 0%;
			text-align: center;
			margin-right: 20rpx;
			border-radius: 6px;
			// background: #D6E7FD;
			background: rgba(252, 233, 220, 1);
			padding: 8rpx 12rpx;
			display: inline-block;
			min-width: 60rpx;
			white-space: nowrap;
			cursor: pointer;
			transition: all 0.3s ease;
			border: 0.5px solid rgba(1, 107, 246, 1);
		}

		.qySx-sx-box-filter {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 36rpx;
			letter-spacing: 0%;
			text-align: center;
			border-radius: 6px;
			background: rgba(198, 198, 198, 0.1);
			padding: 8rpx 12rpx;
			display: inline-block;
			min-width: 60rpx;
			white-space: nowrap;
			cursor: pointer;
			transition: all 0.3s ease;

			.qySx-sx-box-filter-text {
				border: 1px solid #016bf6;
				border-radius: 3px;
				padding: 2px;
				font-size: 11px;
				margin-left: 12px;
			}
		}
	}




	// 搜索框
	.search {
		// position: fixed;
		// top: 0;
		width: 100%;
		padding: 0rpx 20rpx 20rpx 20rpx;
		// padding-top 已改为动态计算，在模板中通过 :style 设置
		//background: linear-gradient(180.00deg, rgba(255, 102, 0, 1), rgba(255, 89, 89, 1) 83%);
		z-index: 99;

		.search-box {
			flex: 1;
			box-sizing: border-box;
			border: 1px solid rgba(227, 231, 236, 1);
			border-radius: 24px;
			background: rgba(241, 241, 241, 1);
			overflow: hidden;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			height: 72rpx;
		}

		.dropdown-btn {
			display: flex;
			align-items: center;
			padding: 14rpx 16rpx;
			background-color: #F1F1F1;
			border: 1rpx solid #016BF6;
			border-radius: 8rpx;
			margin-right: 12rpx;

			.dropdown-text {
				color: rgba(1, 107, 246, 1);
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 20rpx;
				letter-spacing: -0.5px;
				text-align: left;
				margin-right: 8rpx;
			}
		}

		.separator {
			width: 4rpx;
			height: 56rpx;
			background-color: rgba(153, 153, 153, 1);
			margin-right: 12rpx;
		}

		.search-input {
			flex: 1;
			height: 100%;
			background: transparent;
			color: #333;
			font-family: DM Sans;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 48rpx;
			letter-spacing: 0.5%;
			text-align: left;

			&::placeholder {
				color: rgba(182, 182, 182, 1);
				font-family: DM Sans;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 48rpx;
				letter-spacing: 0.5%;
				text-align: left;
			}
		}

		.search-btn {
			width: 80rpx;
			color: rgba(255, 255, 255, 1);
			font-family: DM Sans;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 48rpx;
			letter-spacing: 0.5%;
			text-align: center;
		}
	}


	.search-bar {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.search-input {
			flex: 1;
			height: 80rpx;
			background-color: #f8f8f8;
			border-radius: 40rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #333;
			margin-right: 20rpx;
		}

		.search-btn {
			width: 120rpx;
			height: 80rpx;
			background-color: #016BF6;
			color: #ffffff;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
		}
	}

	.filter-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;

		.filter-tag {
			padding: 12rpx 24rpx;
			background-color: #ffffff;
			border: 1rpx solid #e5e5e5;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #666;
		}
	}

	.active3 {
		color: #1A1A1A !important;
		font-size: 28rpx !important;
		font-weight: 800 !important;
	}

	.topbg-sx-box {
		position: fixed;
		// top: 160rpx; // 已改为动态计算，在模板中通过 :style 设置
		left: 0;
		right: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 98;
		padding: 20rpx;
		// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		.topbg-sx-box-l-i {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: 0%;
			text-align: center;
			margin-right: 20rpx;
			border-radius: 6px;
			background: rgba(198, 198, 198, 0.1);
			padding: 8rpx 12rpx;
			display: inline-block;
			min-width: 60rpx;
			white-space: nowrap;

			&.active3 {
				font-family: DM Sans;
				font-size: 24rpx !important;
				font-weight: 400 !important;
				line-height: 18px;
				letter-spacing: 0%;
				text-align: left;
				padding: 8rpx 12rpx !important;
				color: rgba(1, 107, 246, 1) !important;
				background: rgba(252, 233, 220, 1) !important;
				border: 1px solid rgba(1, 107, 246, 1);
			}
		}

		.topbg-sx-box-r-i {
			color: rgba(1, 107, 246, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: 0%;
			text-align: center;
			margin-right: 20rpx;
			border-radius: 6px;
			background: rgba(252, 233, 220, 1);
			padding: 8rpx 12rpx;
			display: inline-block;
			min-width: 60rpx;
			white-space: nowrap;
			cursor: pointer;
			transition: all 0.3s ease;
			border: 0.5px solid rgba(1, 107, 246, 1);
		}

		.topbg-sx-box-filter {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: 0%;
			text-align: center;
			border-radius: 6px;
			background: rgba(198, 198, 198, 0.1);
			padding: 8rpx 12rpx;
			display: inline-block;
			min-width: 60rpx;
			white-space: nowrap;
			cursor: pointer;
			transition: all 0.3s ease;
		}
	}

	.talent-list {
		// margin-top: 280rpx; // 已改为动态计算，在模板中通过 :style 设置
		padding: 20rpx;
		z-index: 100;
		position: relative;
		//border:1px solid red
	}

	.talent-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.talent-content {
		.talent-header {
			display: flex;
			align-items: flex-start;

			.talent-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.talent-info {
				flex: 1;

				.talent-name-section {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: 100%;
					margin-bottom: 6rpx;
				}

				.talent-name {
					color: rgba(51, 51, 51, 1);
					font-family: DM Sans;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 36rx;
					letter-spacing: 0.5%;
					text-align: left;
					margin-right: 16rpx;
				}

				.talent-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 10rpx;

					.status-tag {
						padding: 8rpx;
						border-radius: 12rpx;
						font-size: 18rpx;
						font-family: DM Sans;
						font-weight: 400;
						line-height: 20rpx;
						letter-spacing: -0.5px;
						text-align: left;

						&.online {
							background: rgba(213, 255, 231, 1);
							color: rgba(29, 209, 104, 1);
						}

						&.hot {
							background: rgba(252, 233, 220, 1);
							color: rgba(1, 107, 246, 1);
						}

						&.active {
							color: rgba(153, 153, 153, 1);
						}
					}
				}
			}
		}

		.talent-experience {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;
			gap: 16rpx;
			color: rgba(156, 164, 171, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 32rpx;
			letter-spacing: 0.5%;
			text-align: left;
		}

		.current-job {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;

			.job-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}

			.job-text {
				color: rgba(156, 164, 171, 1);
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				letter-spacing: 0.5%;
				text-align: left;
			}
		}

		.job-expectation {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			.job-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}

			.expectation-text {
				color: rgba(156, 164, 171, 1);
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				letter-spacing: 0.5%;
				text-align: left;
			}
		}

		.skill-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 8rpx;
			margin: 12rpx 0;

			.skill-tag {
				padding: 8rpx;
				background: rgba(198, 198, 198, 0.1);
				border-radius: 12rpx;
				color: rgba(153, 153, 153, 1);
				font-family: DM Sans;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 20rpx;
				letter-spacing: -0.5px;
				text-align: left;
			}
		}

		.job-description {
			// margin-bottom: 12rpx;
			width: 100%;

			.description-text {
				color: rgba(97, 110, 124, 1);
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 32rpx;
				letter-spacing: 0px;
				text-align: left;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 只显示2行 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				/* 隐藏超出内容 */
				text-overflow: ellipsis;
				/* 显示省略号 */
				white-space: pre-wrap;

			}
		}

		.work-period {
			text-align: right;

			.period-text {
				font-size: 22rpx;
				color: #999;
			}
		}
	}

	// 职位选择弹窗样式
	.position-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10001;
		display: flex;
		align-items: flex-end;

		.position-modal-content {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 20rpx 40rpx 40rpx 40rpx;
			max-height: 60vh;

			.position-modal-handle {
				width: 80rpx;
				height: 8rpx;
				background: #E5E5E5;
				border-radius: 4rpx;
				margin: 0 auto 30rpx auto;
			}

			.position-modal-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				text-align: center;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.25);
			}

			.position-options {
				.position-option {
					display: flex;
					align-items: center;
					padding: 24rpx 32rpx;
					margin-bottom: 16rpx;
					border-radius: 42rpx;
					border: 2rpx solid rgba(227, 231, 236, 1);

					&.active {
						background: #F0F8FF;
						border-color: #007AFF;

						.position-option-icon {
							background: #007AFF;
							border-color: #007AFF;

							.check-icon {
								color: #ffffff;
							}
						}

						.position-option-text {
							color: #007AFF;
							font-weight: 500;
						}
					}

					.position-option-icon {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						border: 2rpx solid #E5E5E5;
						background: #ffffff;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 24rpx;

						.check-icon {
							font-size: 24rpx;
							color: #ffffff;
							font-weight: bold;
						}
					}

					.position-option-text {
						font-size: 28rpx;
						color: #333333;
						flex: 1;
					}
				}
			}
		}
	}
</style>