yizhizan-pc/src/views/index/index.vue

<template>
	<div class="index" style="padding-bottom: 40px;">
		<!-- 搜索 -->
		<el-affix @change="change" :offset="60" 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">
				<div class="search-box flex align-center justify-between">
					<div class="search-box-l flex align-center" @click="openCityDialog">
						<el-image style="width: 16px; height: 18px;margin-right: 5px;"
							src="/images/index/addressIcon.png" fit="cover" />
						<el-text style="color: #00DD9A;font-size: 16px;margin-right: 10px;">{{city}}</el-text>
						[切换城市]
					</div>
					<div class="search-box-c flex align-center justify-between">
						<div class="search-box-c-l flex align-center justify-center">
							<el-popover :show-arrow="false" :visible="visible" placement="bottom" title="热门搜索"
								width="calc(55vw - 100px)">
								<template #reference>
									<el-input @focus="Myfocus" @blur="visible = false" @keyup.enter="goSearch()"
										v-model="keyWord" placeholder="搜索职位、公司" />
								</template>
								<div class="searchLabel flex algin-center flex-wrap">
									<div class="searchLabel-item" @click="selectLabel(item.keyWord)"
										v-for="(item,index) in searchList" :key="index">
										{{item.keyWord}}
									</div>
								</div>
							</el-popover>

						</div>
						<div @click="goSearch()" class="search-box-c-r flex align-center justify-center">
							<el-image style="width: 20px; height: 20px;margin-right: 8px;"
								src="/images/index/search.png" fit="cover" />
							搜索
						</div>
					</div>
					<div class="search-box-r flex align-center justify-center">
						<el-image style="width: 20px; height: 30px;margin-right: 10px;" src="/images/index/phone.png"
							fit="cover" />
						<div class="search-box-r-c">
							<div class="search-box-r-c-t">
								扫描二维码
							</div>
							<div class="search-box-r-c-b">
								不错过每条消息
							</div>
						</div>
						<div class="search-box-r-rq">
							<div class="search-box-r-rq-img">
								<img :src="options" style="width: 160px;height: auto;" />
							</div>

							<div class="search-box-r-rq-txt">
								微信扫描二维码
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-affix>
		<!-- 切换类型 -->
		<div class="tabs flex align-center justify-center">
			<div class="tabs-box">
				<div @click="selectTabs(index)" :class="tabsCurr == index?'tabs-box-item-active':''"
					class="tabs-box-item" v-for="(item,index) in tabs" :key="index">
					{{item.name}}
				</div>
			</div>
		</div>
		<!-- banner/类型 -->
		<div v-if="bannerType.length>0" class="typeBanner flex align-center justify-center">
			<div @mouseleave="mouseLeave" class="typeBanner-box flex align-center justify-center">
				<div class="typeBanner-box-l ">
					<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">
							{{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">
									<div>
										{{ite.title}}
									</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">
								<CaretRight />
							</el-icon>
						</div>
					</div>
				</div>
				<div class="typeBanner-box-r" v-if="isShoType == false">
					<el-carousel :interval="6000" trigger="click" style="height: 470px;" autoplay>
						<el-carousel-item v-for="item in bannerListuser" style="height: 470px;" :key="item">
							<el-image style="width: 100%; height: 470px;border-radius: 0 24px 24px 0;"
								:src="item.imageUrl" fit="fill" />
						</el-carousel-item>
					</el-carousel>

				</div>
				<div class="typeBanner-box-r typeBanner-box-c" v-else>
					<div class="typeBanner-box-c-title">
						{{bannerType[shotypeCurr]?.ruleClassifyName}}
					</div>
					<div class="typeBanner-box-c-item flex justify-between flex-wrap"
						v-for="(ite,ind) in bannerType[shotypeCurr].childrens" :key="ind">
						<div class="typeBanner-box-c-item-l">
							{{ite.title}}
						</div>
						<div v-if="ite.childrens.length>0" class="typeBanner-box-c-item-r flex align-center flex-wrap">
							<div @click="selectLabel(it?.ruleClassifyName)" class="typeBanner-box-c-item-r-i"
								v-for="(it,ins) in ite.childrens" :key="ins">
								{{it?.ruleClassifyName}}
							</div>
						</div>
					</div>

				</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 v-if="jobTypeList.citys" class="tuijian-r flex align-center">
					<el-image style="width: 26px; height: 26px;border-radius: 50%;margin-right: 10px;" :src="avatar"
						fit="cover" />
					根据求职期望匹配：{{jobTypeList.citys}}<el-divider
						direction="vertical" />{{jobTypeList?.ruleClassifyName}}<el-divider
						direction="vertical" />{{jobTypeList.salaryRange}}
				</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)"
					v-for="(item,index) in recommendList" :key="index">
					<div class="list-box-item-title flex align-center justify-between">
						<div class="list-box-item-title-name">
							{{ item?.ruleClassifyName }}
						</div>
						<div class="list-box-item-title-price">
							{{ item.salaryRange }}
						</div>
					</div>
					<!-- 公司名称-公司人数 -->
					<div class="list-box-item-title flex align-center justify-between">
						<div style="margin: 10px 0;">
							<span class="company-name" style="margin-right: 8rpx;">{{ item.company?.companyName || item.company?.companyAllName }}</span>&nbsp;
							<span class="company-people" v-if="item.company">{{ item.company ?
								item.company.companyPeople : '0人' }}</span>
						</div>
					</div>
					<!-- 职位标签 -->
					<div class="gwList-box-item-box-label flex align-center flex-wrap">
						<span class="job-tag">{{ item.education }}</span>
						<span class="job-tag">{{ item.experience }}</span>
						<span class="job-tag" v-for="(ite, ind) in parseWelfareTag(item.welfareTag)" :key="ind">{{ ite
							}}</span>
					</div>
					<!-- 公司简介-位置 -->
					<div class="list-box-item-info flex align-center justify-between">
						<div class="gwList-box-item-box-info-l flex align-center">
							<img :src="item.hr && item.hr.hrImg ? item.hr.hrImg : '/default.jpg'"
								style="width: 40px;height: 40px;border-radius: 50%;" mode="">
							</img>
							<div class="company-info-text">
								{{ item.user && item.user.userName || '未知' }}·{{ item.hr && item.hr.hrPosition || '未知' }}
							</div>
							<div v-if="item.respondTime" class="reply-time">{{ item.respondTime }}
							</div>
						</div>
						<div class="location-text">
							{{ formatDistance(item.distance) }} {{ item.county }}
						</div>
					</div>
				</div>
				<div class="list-box-item" style="height: 0;padding: 0;"></div>
			</div>
		</div>
		<el-empty v-if="recommendList.length==0" description="暂无推荐" />
		<!-- 查看更多 -->
		<div v-if="recommendList.length!=0" class="moreData flex align-center justify-center">
			<div @click="selectLabel('')" class="moreData-box flex align-center justify-center">
				查看更多
			</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?.ruleClassifyName }}
						</div>
						<div class="list-box-item-title-price">
							{{ item.salaryRange }}
						</div>
					</div>
					<!-- 公司名称-公司人数 -->
					<div class="list-box-item-title flex align-center justify-between">
						<div style="margin: 10px 0;">
							<span class="company-name" style="margin-right: 8rpx;">{{ item.company?.companyName || item.company?.companyAllName }}</span>&nbsp;
							<span class="company-people" v-if="item.company">{{ item.company ?
								item.company.companyPeople : '0人' }}</span>
						</div>
					</div>
					<!-- 职位标签 -->
					<div class="gwList-box-item-box-label flex align-center flex-wrap">
						<span class="job-tag">{{ item.education }}</span>
						<span class="job-tag">{{ item.experience }}</span>
						<span class="job-tag" v-for="(ite, ind) in parseWelfareTag(item.welfareTag)" :key="ind">{{ ite
							}}</span>
					</div>
					<!-- 公司简介-位置 -->
					<div class="list-box-item-info flex align-center justify-between">
						<div class="gwList-box-item-box-info-l flex align-center">
							<img :src="item.hr && item.hr.hrImg ? item.hr.hrImg : '/default.jpg'"
								style="width: 40px;height: 40px;border-radius: 50%;" mode="">
							</img>
							<div class="company-info-text">
								{{ item.user && item.user.userName || '未知' }}·{{ item.hr &&
								item.hr.hrPosition || '未知' }}
							</div>
							<div v-if="item.respondTime" class="reply-time">{{ item.respondTime }}
							</div>
						</div>
						<div class="location-text">
							{{ formatDistance(item.distance) }} {{ item.county }}
						</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>
		<!-- 暂无简历提示框 -->
		<resumeTipsComp v-if="shoModal" :show="shoModal" @close="shoModal = false" @addResume="addResume" />
		<!-- 切换城市 -->
		<el-dialog v-model="allCitys" :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" style="margin-left: 40px; width: 300px">
						<el-input v-model="search" prefix-icon="Search" size="default" placeholder="请输入城市名称"
							@keyup.enter="handleSearch()" class="inputClass">
						</el-input>
						<el-button @click="handleSearch" style="margin-left: 10px" type="primary">搜索</el-button>
					</div>
				</div>
			</template>
			<div class="city flex align-center justify-center">
				<div class="city-box">
					<div class="city-box-city">
						<div class="city-box-cityt flex align-center justify-between">
							定位城市
							<div @click="getLocation()" class="city-box-cityt-r flex align-center">
								<el-icon :size="14" name="RefreshRight" />
								重新定位
							</div>
						</div>
						<div @click="selectCity(citys)" class="city-box-citys">{{ citys }}</div>
					</div>
					<div class="city-box-list">
						<ul class="city-box-lists" style="overflow: auto">
							<li class="city-box-lists-title">热门城市</li>
							<li class="city-box-lists-title-cs flex align-center flex-wrap">
								<div @click="selectCity(item)" class="city-box-lists-title-css"
									v-for="(item, index) in rmCity" :key="index">
									{{ item }}
								</div>
							</li>
							<li v-for="(item, index) in cityGroupList" :key="index" class="city-box-lists-item">
								<div v-if="item.city.length > 0">
									<div class="city-box-lists-item-title">
										{{ item.letter }}
									</div>
									<div class="flex align-center flex-wrap">
										<div class="city-box-lists-item-titles flex align-center"
											v-for="(ite, ind) in item.city" :key="ind">
											<div @click="selectCity(ite)">
												{{ ite }}
											</div>
										</div>
									</div>
								</div>
							</li>
							<el-empty v-if="cityGroupList.length == 0" description="暂无城市" />
						</ul>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import cityJs from '../../publicJs/city.js'
	import citySelect from '../../publicJs/citySelect.js'
	import axios from 'axios';
	import jsonp from 'axios-jsonp'
	import VueQrcode from 'vue-qrcode'
	import resumeTipsComp from '../../components/resumeTipsComp/resumeTipsComp.vue'
	export default {
		components: {
			VueQrcode,
			resumeTipsComp
		},
		data() {
			return {
				visible: false, //是否显示热门搜索
				size: 160, //二维码大小
				qrColor: {
					'background': '#ffffff'
				},
				options: '', //生成二维码的内容
				allCitys: false, //是否显示全部城市弹框
				keyWord: '', //搜索内容
				isTop: false,
				searchBg: 'background:#ffffff',
				tabsCurr: 0,
				tabs: [{ name: '全日制', id: 1 },{ name: '兼职', id: 0 },{ name: '校招', id: 2 }, { name: '社招', id: 3 }],
				bannerType: [], //岗位分类
				recommendList: [], //推荐岗位
				recommendLists: [], //最新岗位
				isShoType: false,
				shotypeCurr: 0,
				isResume: false, //是否有简历
				shoModal: false, //暂无简历提示弹窗
				city: '', //当前选择的城市
				citys: '', //定位的城市
				longitude: '',
				latitude: '',
				cityList: cityJs, //所有的城市
				//城市选择弹框相关
				search: '', //城市搜索关键字
				cityGroupList: [], //按字母分组的城市列表
				rmCity: [], //热门城市列表
				jobTypeList: {}, //求职意向第一个
				loading: false,
				loadings: false,
				bannerListuser: [], //用户端轮播图
				searchList: [], //热门搜索列表
			}
		},
		computed: {
			avatar() {
				return this.$store.state.avatar;
			},
		},
		mounted() {
			if (localStorage.getItem('city')) {
				this.city = localStorage.getItem('city')
			}
			let inviterCode = this.$route.query.inviterCode
			if (inviterCode) {
				localStorage.setItem('inviterCode', inviterCode)
			}
			//app下载地址
			this.getAppDown()
			//获取热门搜索
			this.getMyRecordList();
			//岗位分类
			this.getJobTypeList();
			//banner
			this.getBannerList();
			//所有城市的列表
			// this.getAllCityList();
			if (localStorage.getItem('token')) {
				//求职意向
				this.getJobYx();
				//简历详情
				this.getJlInfo();
			}


		},
		methods: {
			//获取app下载地址
			getAppDown() {
				this.$Request.get('/app/common/type/423').then(res => {
					if (res.code == 0) {
						this.options = res.data.value
					}
				})

			},
			//选择热门搜索并跳转
			selectLabel(item) {
				this.keyWord = item
				this.goSearch()
			},
			//显示热门搜索
			Myfocus() {
				if (this.searchList.length > 0) {
					//有热门搜索才显示
					this.visible = true
				} else {
					//没有热门搜索不显示
					this.visible = false
				}
			},
			//获取热门搜索
			getMyRecordList() {
				let data = {
					userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : '1'
				}
				this.$Request.get('/app/record/getMyRecordList', {
					params: data
				}).then(res => {
					if (res.code == 0 && res.data) {
						this.searchList = res.data.records
					}
				})
			},
			//去搜索页面
			goSearch() {
				this.$router.push({
					name: 'search',
					query: {
						keyWord: this.keyWord
					}
				})
			},
			//获取banner
			getBannerList() {
				this.$Request.get('/app/banner/selectBannerList?classify=1').then(res => {
					if (res.code == 0) {
						this.bannerListuser = res.data
					} else {
						this.bannerListuser = [
							'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2007-11-7%2F200711072147151187.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674883340&t=4b9cbb7796600699ac28f75cd138ba04'
						]
					}
				})
			},
			//获取岗位分类
			getJobTypeList() {
				this.$Request.get('/app/rule/getClassifyList').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.bannerType = res.data
						}

					}
				})
			},
			//获取简历
			getJlInfo() {
				this.$Request.get("/app/userFirst/getUserResumes").then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.isResume = true
							//缓存简历id
							localStorage.setItem('resumeId', res.data.resumeList.resumesId)
						} else {
							this.isResume = false
						}

					} else {
						this.isResume = false
					}
				})
			},
			//获取职位 type: 1、推荐 2、最新
			getRecommendJob(type) {
				let data = {}
				if (Number(type) === 1) {
					this.loading = true
					data = {
						page: 1,
						limit: 9,
						type: this.tabs[this.tabsCurr].id, //工作性质
						ruleClassifyName: this.jobTypeList?.ruleClassifyName, //岗位名称
						screen: 1, //1推荐 2最新
						city: this.city || '', //城市
						salaryRange: this.formatSalaryRange(this.jobTypeList.salaryRange), //薪资范围
						education: '', //学历
						experience: '', //经验
						industry:'', //行业
						preference: '',//this.jobTypeList.industry || '',//偏好
						companyPeople: '', //公司规模
						lng: this.longitude,
						lat: this.latitude,
						// userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : ''
					}
				} else {
					this.loadings = true
					data = {
						page: 1,
						limit: 9,
						type: this.tabs[this.tabsCurr].id, //工作性质
						ruleClassifyName: '', //岗位名称
						screen: 2, //1推荐 2最新
						city: this.city || '', //城市
						salaryRange: '', //薪资范围
						education: '', //学历
						experience: '', //经验
						industry: '', //行业
						preference: '',//偏好
						companyPeople: '', //公司规模
						lng: this.longitude,
						lat: this.latitude,
						// userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : ''
					}
				}

				this.$Request.get('/app/postPush/userGetPostPushList', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						// recommendList
						res.data.records.map(item => {
							if (item.positionWelfare) {
								item.positionWelfare = item.positionWelfare.split(',')
							} else {
								item.positionWelfare = []
							}
						})
						if (Number(type) == 1) {
							this.recommendList = res.data.records
							this.loading = false
						} else {
							this.recommendLists = res.data.records
							this.loadings = false
						}


					}
				})
			},
			//获取求职意向
			getJobYx() {
				this.$Request.get('/app/intention/getIntentionList').then(res => {
					if (res.code == 0 && res.data.length > 0) {
						res.data.map(item => {
							if (item.isDefault == 1) { //拿出第一意向
								this.jobTypeList = item
							}
						})
						this.getLocation();
					}
				})
			},
			//选择城市
			selectCity(city) {
				this.city = city
				this.allCitys = false
				localStorage.setItem('city', this.city)
				//重新获取岗位
				this.getRecommendJob(1)
				this.getRecommendJob(2)
			},
			//打开城市选择弹框
			openCityDialog() {
				this.allCitys = true;
			},
			//打开城市选择弹框
			openCityDialog() {
				this.allCitys = true;
				this.search = '';
				//获取热门城市列表
				this.getRmCityList();
				//获取按字母分组的城市列表
				this.getCityGroupList();
			},
			//获取热门城市列表
			getRmCityList() {
				let data = {
					limitCount: 10
				};
				this.$Request
					.get('/app/postPush/getHotCity', { params: data })
					.then(res => {
						if (res.code == 0) {
							this.rmCity = res.data;
						}
					});
			},
			//获取按字母分组的城市列表
			getCityGroupList(keyword = '') {
				const grouped = {};
				// 过滤：如果有关键字，就按城市名模糊匹配
				const filtered = keyword
					? cityJs.filter(item => item.label.includes(keyword))
					: cityJs;

				// 遍历城市数据
				filtered.forEach(item => {
					// 按字母分组
					const letterObj = citySelect.getFirstLetter(item.label);
					const letter = letterObj.firstletter.toUpperCase();
					if (!grouped[letter]) grouped[letter] = [];
					grouped[letter].push(item.label);
				});

				// 生成按字母分组的城市列表
				const sortedLetters = Object.keys(grouped).sort();
				this.cityGroupList = sortedLetters.map(letter => ({
					letter,
					city: grouped[letter]
				}));
			},
			//搜索城市
			handleSearch() {
				this.getCityGroupList(this.search.trim());
			},
			//使用jsonp请求从腾讯地图获取经纬度
			getLocation() {
				let data = {
					key: "ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75", //申请的密钥
					output: "jsonp",
				};
				let url = "https://apis.map.qq.com/ws/location/v1/ip"
				axios.get(url, {
					params: data,
					adapter: jsonp
				}).then(res => {
					this.longitude = res.data.result.location.lng
					this.latitude = res.data.result.location.lat
					this.citys = res.data.result.ad_info.city
					if (!this.city) {
						this.city = this.citys
					}
					this.getRecommendJob(1)
					this.getRecommendJob(2)
					localStorage.setItem('city', this.city)
				}).catch(err => {
					console.log(err)
				})
			},
			//去添加简历
			addResume() {
				this.shoModal = false
				this.$router.push({
					name: 'addResume'
				})
			},
			/**
			 * @param {Object} item 详情参数
			 * 去详情
			 */
			goDetails(item) {
				if (localStorage.getItem('token')) {
					if (this.isResume) { //有简历
						this.$router.push({
							name: 'postInfo',
							query: {
								postPushId: item.postPushId
							}
						})
					} else { //无简历
						this.shoModal = true
					}
				} else {
					this.$router.push({
						name: 'login'
					})
				}

			},
			//鼠标移入事件
			mouseEnter(index) {
				this.shotypeCurr = index;
				this.isShoType = true
			},
			//鼠标移出事件
			mouseLeave() {
				this.shotypeCurr = 0;
				this.isShoType = false
			},
			/**
			 * @param {Number} index 选择的索引
			 * 切换类型
			 */
			selectTabs(index) {
				this.tabsCurr = index
				//重新获取岗位
				this.getRecommendJob(1)
				this.getRecommendJob(2)
			},
			/**
			 * @param {Boolean} e 
			 * 是否触顶
			 */
			change(e) {
				this.isTop = e
			},
			formatSalaryRange(range) {
				if (!range || !range.includes('-')) return range

				const [min, max] = range.split('-').map(v => parseInt(v.trim()))
				if (isNaN(min) || isNaN(max)) return range

				// 除以1000并去掉小数点后多余的0
				const formatNum = num => {
					const val = num / 1000
					return val % 1 === 0 ? val.toFixed(0) + 'k' : val.toFixed(1) + 'k'
				}

				return `${formatNum(min)}-${formatNum(max)}`
			},
			parseWelfareTag(tagStr) {
				return tagStr ? tagStr.split(';').filter(Boolean) : []
			},
			formatDistance(distance) {
				if (distance == null || distance === '') return ''
				const num = parseFloat(distance)
				if (isNaN(num)) return ''
				// 小于1000显示米，否则显示千米
				if (num < 1000) {
					return `${num}m`
				} else {
					const km = num / 1000
					// 去掉多余的小数（保留一位小数）
					const formatted = km % 1 === 0 ? km.toFixed(0) : km.toFixed(1)
					return `${formatted}km`
				}
			},
		},
	}
</script>
<style lang="scss" scoped>
	$marginTop-60: 120px;
	:deep(.el-affix--fixed){
		width: 100% !important;
		right: 0;
		left: 0;
	}
	.searchLabel {
		width: 100%;

		.searchLabel-item {
			cursor: pointer;
			margin-right: 10px;
			margin-top: 10px;
		}

		.searchLabel-item:hover {
			color: #00DD9A;
		}
	}

	:deep(.el-input__wrapper) {
		box-shadow: none;
		border: none;
	}

	.my-header {
		padding: 10px 10px 0 10px;
	}

	:deep(.el-dialog) {
		border-radius: 14px !important;
		padding: 0;
	}

	:deep(.el-dialog__body) {
		padding-top: 10px !important;

	}

	:deep(.el-dialog__header) {
		background: linear-gradient(45deg, #f2fffa, #FFFFFF);
		border-radius: 14px 14px 0 0;
	}

	.citys {
		width: calc(100% - 20px);
		height: 300px;
		overflow: hidden;
		overflow-y: scroll;
		padding: 0 10px 10px 10px;

	}

	.citys-item {
		display: flex;
		flex-wrap: wrap;

		.citys-item-citys {
			background-color: #F2F2F7;
			width: fit-content;
			padding: 4px 10px;
			cursor: pointer;
			border-radius: 4px;
			margin-top: 20px;
			margin-right: 20px;
		}

		.citys-item-citys:hover {
			background-color: #00DD9A;
			color: #FFFFFF;
		}
	}


	.citys-top {
		width: 100%;


		.citys-top-cityt {
			font-weight: bold;
			color: #333333;
		}

		.citys-top-cityt-r {
			font-weight: 500;
			color: #999999;
			font-size: 12px;
			cursor: pointer;
		}


		.citys-top-citys {
			background-color: #F2F2F7;
			width: fit-content;
			padding: 4px 10px;
			margin-top: 10px;
			cursor: pointer;
			border-radius: 4px;
			margin-right: 20px;
			margin-bottom: 20px;
		}

		.citys-top-citys:hover {
			background-color: #00DD9A;
			color: #FFFFFF;
		}
	}

	.search {
		width: 100%;
		height: 110px;
		background-color: #F5F5F5;


		.search-box {
			width: calc(1600px - $marginTop-60 * 2);
			height: 50px;

			.search-box-l {
				font-size: 16px;
				color: #333333;
				cursor: pointer;
				flex-shrink: 0;
				
			}

			.search-box-c {
				margin:0 30px;
				flex: 1;
				// width: 70vw;
				height: 100%;
				background-color: #00DD9A;
				border-radius: 12px;
			}

			.search-box-c-l {
				width: calc(100% - 100px);
				height: calc(100% - 2px);
				background-color: #ffffff;
				border-radius: 12px;
				border: 1px solid #00DD9A;
			}

			.search-box-c-r {
				width: 100px;
				height: 100%;
				color: #ffffff;
				font-size: 16px;
				cursor: pointer;
			}

			.search-box-r {
				width: 200px;
				height: 100%;
				background-color: #ffffff;
				border-radius: 12px;
				cursor: pointer;
				position: relative;
			}

			.search-box-r:hover {
				.search-box-r-rq {
					display: inline-block;
				}
			}

			.search-box-r-rq {
				display: none;
				position: absolute;
				width: 200px;
				// height: 280px;
				background-color: #ffffff;
				border-radius: 8px;
				border: 1px solid #F0F0F0;
				top: 55px;
				right: 0px;
				z-index: 999;
				align-content: center;
				padding: 20px 0;

				.search-box-r-rq-img {
					width: 160px;
					height: 160px;
					margin-left: 20px;
				}

				img {
					width: 100%;
					height: 100%;
				}

				.search-box-r-rq-txt {
					width: 100%;
					text-align: center;
					color: #00DD9A;
					font-size: 16px;
					margin-top: 20px;
				}
			}

			.search-box-r-c-t {
				color: #333333;
				font-size: 16px;
				font-weight: 400;
			}

			.search-box-r-c-b {
				color: #999999;
				font-size: 14px;
				font-weight: 400;
			}
		}
	}

	.tabs {
		width: 100%;
		height: 40px;

		.tabs-box {
			width: calc(100% - $marginTop-60 * 2);
			height: 100%;
			overflow-x: auto;
			white-space: nowrap;
			position: relative;
		}

		.tabs-box::-webkit-scrollbar {
			/* Chrome, Safari, Opera */
			height: 0px !important;
		}

		.tabs-box::-webkit-scrollbar-thumb {
			background-color: #cccccc;
			/* 滚动条颜色 */
		}

		.tabs-box::-webkit-scrollbar-track {
			background-color: #ffffff;
			/* 轨道颜色 */
		}

		.tabs-box-item {
			display: inline-block;
			min-width: 80px;
			padding: 0 5px;
			height: 100%;
			text-align: center;
			line-height: 40px;
			font-size: 16px;
			color: #333333;
			font-weight: 400;
			margin-right: 10px;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			z-index: 1;
		}

		.tabs-box-item:hover {
			color: #06E1AB;
		}

		.tabs-box-item-active {
			color: #FFFFFF !important;
			background-color: #06E1AB !important;
			transition: background-color color 0.5s; // 添加过渡效果
		}
	}

	.typeBanner {
		width: 100%;
		height: auto;
		margin-top: 50px;

		.typeBanner-box {
			width: calc(100% - $marginTop-60 * 2);
			height: 450px;
			background-color: #ffffff;
			border-radius: 24px;
		}

		.typeBanner-box-l {
			padding:10px 0 10px 20px;
			width: 550px;
			height: 100%;
			background-color: #ffffff;
			border-radius: 24px 0 0 24px;
			overflow: hidden;
			overflow-y: scroll;
		}

		.typeBanner-box-r {
			width: calc(100% - 550px);
			height: calc(100% + 20px);
			background-color: #ffffff;
			border-radius: 0 24px 24px 0;
		}

		.typeBanner-box-c::-webkit-scrollbar {
			/* Chrome, Safari, Opera */
			width: 0px;
		}

		.typeBanner-box-c::-webkit-scrollbar-thumb {
			background-color: #cccccc;
			/* 滚动条颜色 */
		}

		.typeBanner-box-c::-webkit-scrollbar-track {
			background-color: #ffffff;
			/* 轨道颜色 */
		}

		.typeBanner-box-c {
			// padding: 20px;
			overflow: hidden;
			overflow-y: scroll;

			.typeBanner-box-c-title {
				font-size: 16px;
				padding: 20px;
			}

			.typeBanner-box-c-item {
				padding: 0 20px;
				margin-bottom: 10px;
			}

			.typeBanner-box-c-item-l {
				font-size: 14px;
				color: #666666;
			}

			.typeBanner-box-c-item-r {
				width: 80%;
				border-bottom: 1px solid #F5F5F5;
			}

			.typeBanner-box-c-item-r-i:hover {
				color: #00DD9A;
				cursor: pointer;
			}

			.typeBanner-box-c-item-r-i {

				margin-right: 20px;
				margin-bottom: 20px;
			}

		}

		.typeBanner-box-l-item-active {
			// box-shadow: 0 0 10px 0 rgba(153, 153, 153, 0.3);

			.typeBanner-box-l-item-r {
				.el-icon {
					color: #00DD9A;
				}
			}
		}

		.typeBanner-box-l-item-l-i:hover {
			color: #00DD9A;
		}

		.typeBanner-box-l-item-l {
			width: 100%;
			padding-left: 20px;
			font-size: 16px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;

		}

		.typeBanner-box-l-item-l-i {
			font-size: 14px;
			margin-left: 20px;
			color: #666666;
		}

		.typeBanner-box-l-item-r {
			padding-right: 20px;
		}

		.typeBanner-box-l-item {
			width: calc(100% - 10px);
			// 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 {
		width: 100%;
		margin-top: 65px;

		.tuijian-box {
			width: calc(100% - $marginTop-60 * 2);
			color: #333333;
			font-size: 18px;
		}

		.tuijian-box-line {
			width: 24px;
			height: 2px;
			background-color: #00DD9A;
			margin-top: 4px;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.tuijian-r {
			font-size: 14px;
			color: #666666;
		}
	}

	.list {
		width: 100%;
		min-height: 100px;
		margin-top: 20px;

		.list-box {
			width: calc(100% - $marginTop-60 * 2);
			// height: 100%;
			min-height: 100px;
			border-radius: 10px;
		}

		.list-box-item:hover {
			box-shadow: 0 10px 10px 0 rgba(153, 153, 153, 0.3);

			.list-box-item-title-name {
				color: #00DD9A;
			}
		}

		.list-box-item {
			width: calc((100% - 40px) / 3);
			height: 100%;
			background-color: #ffffff;
			border-radius: 10px;
			padding: 20px 0;
			cursor: pointer;
			margin-bottom: 20px;
		}

		.list-box-item-title {
			font-size: 16px;
			padding: 0 20px;

			.list-box-item-title-name {
				color: #333333;
			}

			.list-box-item-title-price {
				font-size: 18px;
				color: #FF0000;
			}
		}

		.list-box-item-label {
			width: calc(100% - 40px);
			height: 40px;
			padding: 0 20px;
			overflow: hidden;

			.list-box-item-label-item {
				padding: 4px 10px;
				border-radius: 5px;
				background-color: #F5F5F5;
				color: #666666;
				font-size: 14px;
				margin-right: 10px;
				margin-top: 10px;
			}
		}

		.list-box-item-info {
			margin-top: 20px;
			border-top: 1px solid #F5F5F5;
			padding: 0 20px;
			padding-top: 20px;

			.list-box-item-info-name:hover {
				color: #00DD9A;
			}

			.list-box-item-info-name {
				font-size: 16px;
				color: #333333;
			}

			.list-box-item-info-price {
				font-size: 16px;
				color: #999999;
			}
		}
	}

	.moreData {
		width: 100%;
		height: auto;
		margin-top: 10px;

		.moreData-box:hover {
			background-color: #00DD9A;
			color: #ffffff;
		}

		.moreData-box {
			width: 180px;
			height: 40px;
			border-radius: 35px;
			background-color: rgba(0, 221, 154, 0.1);
			color: #00DD9A;
			font-size: 14px;
			cursor: pointer;
			transition: background-color 0.5s;
		}
	}

	.showModal-img {
		width: 100%;
		height: 300px;

		img {
			width: 400px;
			height: 300px;

		}
	}
	.city {
		width: 100%;
		height: 500px;

		.city-box {
			width: 100%;
			padding: 0 20px;
			height: 100%;
		}

		.city-box-city {
			.city-box-cityt {
				width: 100%;
				font-weight: bold;

				.city-box-cityt-r {
					font-weight: 500;
					color: #999999;
					font-size: 12px;
					cursor: pointer;
				}
			}

			.city-box-citys {
				background-color: #F2F2F7;
				width: fit-content;
				padding: 4px 10px;
				margin-top: 10px;
				cursor: pointer;
				border-radius: 4px;
			}

			.city-box-citys:hover {
				background-color: #00DD9A;
				color: #FFFFFF;
			}
		}

		.city-box-list {
			width: 100%;
			height: 420px;
			margin-top: 20px;
			overflow-y: scroll;
		}

		.city-box-lists {
			width: 100%;
			height: 100%;
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.city-box-lists-title {
			font-weight: bold;

		}

		.city-box-lists-title-css {
			background-color: #F2F2F7;
			width: fit-content;
			padding: 4px 10px;
			margin-top: 10px;
			cursor: pointer;
			border-radius: 4px;
			margin-right: 20px;
			margin-bottom: 20px;
		}

		.city-box-lists-title-css:hover {
			background-color: #00DD9A;
			color: #FFFFFF;
		}

		.city-box-lists-item-title {
			font-weight: bold;
		}

		.city-box-lists-item-titles {
			background-color: #F2F2F7;
			width: fit-content;
			padding: 4px 10px;
			margin-top: 10px;
			cursor: pointer;
			border-radius: 4px;
			margin-right: 20px;
			margin-bottom: 20px;
		}

		.city-box-lists-item-titles:hover {
			background-color: #00DD9A;
			color: #FFFFFF;
		}
	}
	.company-name,.company-people{
		font-size: 14px;
		font-weight: 400;
		color: rgba(156, 164, 171, 1);
	}
	.gwList-box-item-box-label{
		padding: 0 20px;
		gap: 12px;
		overflow: hidden;
		height: 60px;
		.job-tag{
			padding: 4px;
			background: rgba(198, 198, 198, 0.1);
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
	}
	.gwList-box-item-box-info-l{
		.company-info-text{
			margin: 0 10px;
			color: rgba(156, 164, 171, 1);
			font-size: 12px;
			font-weight: 400;
		}
		.reply-time{
			border-radius: 4px;
			background: rgba(236, 225, 253, 1);
			padding: 4px;
			color: rgba(106.94, 84.63, 214.02, 0.96);
			font-size: 12px;
			font-weight: 400;
		}
	}
	.location-text{
		color: rgba(156, 164, 171, 1);
		font-size: 12px;
		font-weight: 400;
	}
</style>