<template>
	<div class="search" style="padding-bottom: 40px;">
		<!-- 条件筛选区域 -->
		<el-affix @change="change" z-index="10" :offset="60" style="width: 100%;">
			<div :style="isTop ? 'background-color:#ffffff;' : 'margin-top: 20px;'"
				class="condizione flex align-center justify-center">
				<div class="condizione-box flex align-center justify-center">
					<div class="condizione-box-c">
						
						<!-- 搜索框 -->
						<div class="condizione-box-c-searchc flex align-center justify-between">
							<!-- 切换类型 -->
							<div class="tabs flex align-center">
								<!-- 可横向滚动区域 -->
								<div class="tabs-box">
									<div class="tabs-box-inner" ref="tabsBoxInner">
										<div v-for="(item, index) in tabs" :key="index" class="tabs-box-item"
											:class="tabsCurr === index ? 'tabs-box-item-active' : ''"
											@click="selectTabs(index)">
											{{ item.ruleClassifyName }}
										</div>
									</div>
								</div>

								<!-- 固定右侧按钮 -->
								<div @click="goToPage" class="add flex align-center">
									<el-icon><circle-plus /></el-icon>
									<div>添加求职期望</div>
								</div>
							</div>

							<div class="condizione-box-c-search flex justify-between">
								<div class="condizione-box-c-search-in flex align-center justify-center">
									<el-dropdown style="flex-shrink: 0;margin-left: 10px;line-height:32px;">
										<span class="el-dropdown-link">
											{{ searchType }}
											<el-icon class="el-icon--right">
												<arrow-down />
											</el-icon>
										</span>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item @click="changeType('职位')">职位</el-dropdown-item>
												<el-dropdown-item @click="changeType('公司')">公司</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
									<div class="condizione-box-c-search-ins flex align-center justify-center">
										<el-input @keyup.enter="startSearch()" v-model="keyWord" placeholder="搜索职位、公司" />
									</div>
								</div>
								<div @click="startSearch()" class="condizione-box-c-search-btn flex justify-center">
									<el-image style="width: 20px; height: 20px;margin-right: 8px;"
										src="/images/index/search.png" fit="cover" />
									搜索
								</div>
							</div>
							<div class="condizione-box-c-downApp flex align-center justify-center">
								<el-image style="width: 20px; height: 30px;margin-right: 10px;"
									src="/images/index/phone.png" fit="cover" />
								<div class="condizione-box-c-downApps">
									<div class="condizione-box-c-downAppst">
										扫描二维码
									</div>
									<div class="condizione-box-c-downAppsb">
										不错过每条消息
									</div>
								</div>
								<div class="condizione-box-c-downApp-rq">
									<div class="condizione-box-c-downApp-rq-img">
										<img :src="options" style="width: 160px;height: auto;" />
									</div>

									<div class="condizione-box-c-downApp-rq-img-txt">
										微信扫描二维码
									</div>
								</div>
							</div>
						</div>
						<div class="flex">
							<div class="condizione-box-c-city-title" :class="activeIndex == 1 ? 'condizione-box-c-city-title-active' : ''"
								@click="activeIndex = 1">
								跨境标签
							</div>
							<div class="condizione-box-c-city-title"
								:class="activeIndex == 2 ? 'condizione-box-c-city-title-active' : ''"
								@click="activeIndex = 2">
								城市和地区
							</div>
						</div>
						<!-- 跨境标签选择 -->
						<div class="condizione-box-c-city" v-if="activeIndex == 1">
							<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 style="margin-top: 20px;" class="flex align-center">
								<div class="tag-list flex" v-if="tabs.length">
									<span v-for="(tag, i) in ['不限', ...parseSkills(tabs[tabsCurr]?.industry)]"
										: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 class="condizione-box-c-city" v-if="activeIndex == 2">
							<div class="condizione-box-c-city-s flex flex-wrap">
								<div class="condizione-box-c-city-s-i flex align-center" @click="openCityDialog()">
									<el-text style="color: #00DD9A;font-size: 14px;margin-right: 10px;">{{
										cityList[cityIndex]?.city
										|| city }}</el-text>
									[切换城市]
								</div>
							</div>
							<div class="condizione-box-c-city-d flex flex-wrap">
								<div @click="selectCity(item)" :style="county == item ? 'color:#00DD9A;' : ''"
									class="condizione-box-c-city-d-i" v-for="(item, index) in countyList" :key="index">
									{{ item }}
								</div>
							</div>
						</div>
						<!-- 行业筛选 -->
						<div class="condizione-box-c-hy flex align-center justify-between">
							<div class="condizione-box-c-hy-l flex align-center">
								<div v-on:mouseover="mouseovermy(item)" v-on:mouseout="() => mouseoutmy()"
									class=" flex align-center" v-for="(item, index) in searchCondizione" :key="index">
									<el-popover placement="bottom-start" width="auto" trigger="hover" hide-after="0">
										<template #reference>
											<div class="condizione-box-c-hy-l-i flex align-center">
												{{ item.name }}
												<span v-if="item.num > 0">({{ item.num }})</span>
												<el-icon :size="14" style="margin-left: 4px;" v-if="item.isUp == false">
													<CaretBottom />
												</el-icon>
												<el-icon :size="14" style="margin-left: 4px;" v-else>
													<CaretTop />
												</el-icon>
											</div>
										</template>
										<!-- 综合排序 -->
										<div class="jobType" v-if="index == 0">
											<div :style="postType == item ? 'color:#00DD9A' : ''" class="jobType-item"
												@click="selectCondition(item, 0)" v-for="(item, index) in sortOptions"
												:key="index">
												{{ item }}
											</div>
										</div>
										<!-- 工作经验 -->
										<div class="jobType" v-if="index == 1">
											<div class="jobType-item"
												:style="experience == item.value ? 'color:#00DD9A' : ''"
												@click="selectCondition(item.value, 1)" v-for="(item, index) in jyList"
												:key="index">
												{{ item.value }}
											</div>
										</div>
										<!-- 薪资 -->
										<div class="jobType" v-if="index == 2">
											<div class="jobType-item"
												:style="salaryRange == item.value ? 'color:#00DD9A' : ''"
												@click="selectCondition(item.value, 2)"
												v-for="(item, index) in moneyList" :key="index">
												{{ item.value }}
											</div>
										</div>
										<!-- 学历 -->
										<div class="jobType" v-if="index == 3">
											<div class="jobType-item"
												:style="education == item.value ? 'color:#00DD9A' : ''"
												@click="selectCondition(item.value, 3)"
												v-for="(item, index) in schoolList" :key="index">
												{{ item.value }}
											</div>
										</div>
										<!-- 公司规模 -->
										<div class="jobType" v-if="index == 4">
											<div class="jobType-item"
												:style="companyPeople == item.value ? 'color:#00DD9A' : ''"
												@click="selectCondition(item.value, 4)"
												v-for="(item, index) in compList" :key="index">
												{{ item.value }}
											</div>
										</div>
									</el-popover>
								</div>
							</div>
							<div class="condizione-box-c-hy-r" @click="cleanSecect()">
								清空筛选条件
							</div>
						</div>

					</div>
				</div>
			</div>
		</el-affix>

		<!-- 岗位列表主体 -->
		<div class="content flex align-center justify-center">
			<div class="content-box flex justify-between">
				<div v-show="isNoList == false" class="content-l" v-loading="loading">
					<div @click="goDetails(item)"
						v-for="(item, index) in jobDataList" :key="index">
						<div v-if="searchType == '职位'" class="content-l-item flex justify-between">
							<div class="content-l-item-l">
								<div class="content-l-item-title">
									{{ item.ruleClassifyName }}
									<span>
										【{{ item.city }} {{ item.county }}】
									</span>
								</div>
								<div class="content-l-item-info flex align-center flex-wrap">
									<div class="content-l-item-infomoney">
										{{ item.salaryRange }}
									</div>
									<div class="content-l-item-infolabel">
										{{ item.experience }}
									</div>
									<div class="content-l-item-infolabel">
										{{ item.education }}
									</div>
									<div class="content-l-item-infolabel" v-for="(ite, ind) in item.positionWelfare"
										:key="ind">
										{{ ite }}
									</div>
								</div>
								<div class="content-l-item-btn flex align-center">
									<div class="content-l-item-btn-item"
										v-for="(ite, ind) in item.industry.slice(0, 4)">
										{{ ite }}<el-divider
											v-if="ind < item.industry.slice(0, 4).length - 1 && item.industry.length > 1"
											direction="vertical" />

									</div>
								</div>
							</div>
							<div v-if="item.company" class="content-l-item-r">
								<div class="content-l-item-r-title flex algin-center">
									<img :src="item.company.companyLogo?item.company.companyLogo:'/default.jpg'" alt="" />
									<div class="content-l-item-r-title-r">
										<div class="content-l-item-r-title-r-t">
											{{ item.company?.companyName || item.company?.companyAllName }}
										</div>
										<div class="content-l-item-r-title-r-b flex align-center">
											<div class="content-l-item-r-title-r-b-i">
												{{ item.company.companyScope }}
											</div>
											<div class="content-l-item-r-title-r-b-i">
												{{ item.company.companyPeople }}
											</div>
										</div>
									</div>
								</div>
								<div class="content-l-item-r-bom flex align-center">
									<el-icon size="13" style="margin-right: 10px;" name="MapLocation" />
									<div class="content-l-item-r-bomtxt">
										{{ item.address }}
									</div>
								</div>
							</div>
						</div>
						<div v-if="searchType == '公司'" class="content-l-item flex" style="padding: 20px;width: initial;">
							<el-image style="width: 56px; height: 56px;border-radius: 10px;margin-right: 10px;" loading="lazy"
								:src="item.companyLogo?item.companyLogo:'/default.jpg'" fit="cover" />
							<div>
								<div class="list-box-item-top-r-name">
									{{ item.companyName || item.companyAllName }}
								</div>
								<div class="list-box-item-top-r-label flex flex-wrap align-center">
									<div style="color: #666666;font-size: 13px;">{{ item.companyPeople }} ·</div>
									<div v-if="item.companyScope">
										<span v-for="item in item.companyScope" :key="index"
											class="list-box-item-top-r-label-i">
											{{ item }}
										</span>
									</div>
								</div>
								<div style="color: #9ca4ab;font-size: 12px;margin-top: 5px;">{{ item.workTime }} · {{
									item.welfare }}</div>
							</div>
						</div>
					</div>
					<!-- 分页 -->
					<div class="content-l-item-pag flex align-center justify-center">
						<el-pagination @current-change="currentChange" v-model="page" :page-count="pages"
							:default-page-size="limit" background layout="prev, pager, next" />
					</div>


				</div>
				<div class="content-l" v-if="isNoList">
					<el-empty description="暂无匹配岗位" />
				</div>
				<div class="content-r">
					<recommend :city="getCity" @goDetails="goDetails" />
				</div>
			</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 title="城市选择">
			<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="请输入城市名称"
							class="input-with-select" @input="handleSearch" />
						<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="18">
									<Location />
								</el-icon>
								重新定位
							</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 cityList" :key="index" class="city-box-lists-item">
								<div v-if="item.city.length > 0">
									<div class="city-box-lists-item-title">
										{{ item.letter.toUpperCase() }}
									</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>
						</ul>
					</div>
					<el-empty v-if="cityList.length == 0" description="暂无城市" />
				</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 :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>



				<el-empty v-if="industryList.length == 0" description="暂无从事方向" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
import axios from 'axios';
import jsonp from 'axios-jsonp'
import VueQrcode from 'vue-qrcode'
import recommend from '../../components/recommend/recommend.vue'
import resumeTipsComp from '../../components/resumeTipsComp/resumeTipsComp.vue'
import cityJs from '../../publicJs/city.js';
import citySelect from '../../publicJs/citySelect.js';
import citysData from '../../components/header/citys.json'
export default {
	components: {
		VueQrcode,
		recommend,
		resumeTipsComp
	},
	data() {
		return {
			industryDialog: false, // 控制弹窗
			industryList: [], // 后端返回的完整行业树
			industryArrList: [],
			selectedIndustryTags: [], // ✅ 用这个数组代替 postPushForm.positionTag
			tabs: [],
			tabsCurr:0,
			size: 160, //二维码大小
			qrColor: {
				'background': '#ffffff'
			},
			options: '', //生成二维码的内容
			keyWord: '', //搜索内容
			cityList: [], //按字母分组的城市列表，用于渲染
			originalCityList: [], //原始格式的城市列表，用于比对和获取区县
			cityIndex: 0,
			search: '', //城市搜索关键字
			rmCity: [], //热门城市列表
			searchCondizione: [
			{
				name: '综合排序',
				num: 0,
				isUp: false
			},
			{
				name: '工作经验',
				num: 0,
				isUp: false
			},
			{
				name: '薪资待遇',
				num: 0,
				isUp: false
			},
			{
				name: '学历要求',
				num: 0,
				isUp: false
			},
			{
				name: '公司规模',
				num: 0,
				isUp: false
			}
			], //筛选条件
			sortOptions: ['综合排序', '最新优先'],
			moneyList: [], //薪资列表
			jyList: [], //工作经验
			schoolList: [], //学历列表
			compList: [], //公司规模
			city: '', //当前选中的地区
			jobDataList: [], //岗位列表
			page: 1, //分页
			limit: 5, //每页条数
			pages: 1, //总页数
			loading: false, //加载工
			isTop: false,
			isNoList: false,
			postType: '综合排序', //综合排序
			experience: '', //工作经验
			salaryRange: '', //薪资
			education: '', //学历
			companyPeople: '', //公司规模
			isResume: false, //是否有简历
			shoModal: false, //是否显示暂无简历弹窗
			county: '', //区域
			allCitys: false, //是否显示全部城市弹框
			citys: '', //定位城市
			searchType: '职位', //搜索类型，默认职位
			activeIndex: 1, // 当前选中的标签类型（1: 跨境标签, 2: 城市和地区）
			selectedTags: ['不限'], // 当前选中的跨境标签
		}
	},
	computed: {
		//计算城市区县列表
		countyList() {
			// 确保originalCityList不为空且cityIndex在有效范围内
			if (this.originalCityList.length > 0 && this.cityIndex >= 0 && this.cityIndex < this.originalCityList.length) {
				return ['全部', ...this.originalCityList[this.cityIndex].countyList]
			}
			return ['全部']
		},
		getCity() {
			// 确保originalCityList不为空且cityIndex在有效范围内
			if (this.originalCityList.length > 0 && this.cityIndex >= 0 && this.cityIndex < this.originalCityList.length) {
				return this.originalCityList[this.cityIndex].city
			}
			return ''
		},

	},
	mounted() {
		this.keyWord = this.$route.query.keyWord
		//app下载地址
		this.getAppDown()
		//获取城市列表
		this.getList()
		//薪资
		this.getMoneyList()
		//工作经验
		this.getjyList()
		//学历
		this.getschoolList()
		//公司规模
		this.getscompList()
		if (localStorage.getItem('token')) {
			//简历详情
			this.getJlInfo();
		}
		this.getRmCityList();
		this.getCitysList();
		// 获取求职期望
		this.getJobType();

	},
	methods: {
		// 点击“+”打开行业标签弹窗
		openIndustryDialog() {
			// 打开弹窗
			this.industryDialog = true;
			// 获取当前岗位的 industry 字符串
			const tagString = this.tabs[this.tabsCurr]?.industry || '';
			// 调用回显方法，渲染出选中的系统标签
			this.handleTagDisplay(tagString);
		},
		handleTagDisplay(tagString) {
			if (!tagString) return;

			tagString = tagString.replace(/，/g, ',');

			let tagArray = [];
			if (tagString.includes('/')) {
				tagArray = tagString.split('/').map(tag => tag.trim()).filter(tag => tag && tag !== '不限');
			} else if (tagString.includes(',')) {
				tagArray = tagString.split(',').map(tag => tag.trim()).filter(tag => tag && tag !== '不限');
			} else {
				tagArray = [tagString];
			}

			const allSystemTags = [];
			this.industryList.forEach(category => {
				if (category.childrenList) {
					category.childrenList.forEach(item => {
						allSystemTags.push(item.postSkillName);
					});
				}
			});
			this.selectedIndustryTags = [];

			tagArray.forEach(tag => {
				if (allSystemTags.includes(tag) && !this.selectedIndustryTags.includes(tag)) {
					this.selectedIndustryTags.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);
			}
		},

		addHangye() {
			// 更新岗位标签数据
			this.tabs[this.tabsCurr].industry = this.selectedIndustryTags.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 || [];
					this.industryArrList = [];
					this.flattenIndustryList(this.industryList);
				}
			});
		},
		flattenIndustryList(list) {
			for (const item of list) {
				// 添加当前节点
				this.industryArrList.push(item);
				// 递归处理子节点
				if (item.childrenList && item.childrenList.length > 0) {
					this.flattenIndustryList(item.childrenList);
				}
			}
		},
		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();
		},
		changeType(type){
			this.searchType = type;
			this.page = 1
			this.getUserList()
		},
		goToPage() {
			this.$router.push({
				path: '/addResume',
				query: {
					isExpand: 1
				}
			})
		},
		selectTabs(index) {
			this.tabsCurr = index;
			
			// 滚动到选中的标签页，确保其在可视区域内
			this.$nextTick(() => {
				if (this.$refs.tabsBoxInner) {
					const tabsBoxInner = this.$refs.tabsBoxInner;
					const selectedTab = tabsBoxInner.children[index];
					if (selectedTab) {
						selectedTab.scrollIntoView({
							behavior: 'smooth',
							block: 'nearest',
							inline: 'center'
						});
					}
				}
			});
			this.getIndustryList();
			//重新获取岗位
			this.page = 1
			this.getUserList()
		},
		// 获取求职期望
		getJobType() {
			this.$Request.get('/app/intention/getIntentionList').then(res => {
				console.log(res)
				if (res.code == 0 && res.data.length > 0) {
					this.tabs = res.data;
					this.getIndustryList();
					//获取岗位列表
					this.getUserList()
				}else{
					//获取岗位列表
					this.getUserList()
				}
			})
		},
		selectCity(item) {
			console.log(item)
			// 判断是选择城市还是区域
			const index = this.originalCityList.findIndex(cityItem => cityItem.city === item);

			if (index !== -1) {
				// 城市选择：更新cityIndex和city值
				this.cityIndex = index;
				this.city = item;

				// 更新county为默认值"全部"
				this.county = '全部';

				// 关闭城市选择弹窗
				this.allCitys = false;
			} else if (this.countyList.includes(item)) {
				// 区域选择：更新county值
				this.county = item;
			}

			// 重置页码并重新获取职位列表
			this.page = 1;
			this.getUserList();
		},
		//打开城市选择弹窗
		openCityDialog() {
			this.allCitys = true;
		},
		//获取热门城市列表
		getRmCityList() {
			let data = {
				limitCount: 10
			};
			this.$Request
				.get('/app/postPush/getHotCity', { params: data })
				.then(res => {
					if (res.code == 0) {
						this.rmCity = res.data;
					}
				});
		},
		//使用经纬度获取城市
		getSelectCity(longitude, latitude) {
			let data = {
				lat: latitude,
				lng: longitude
			};
			this.$Request
				.get('/app/Login/selectCity', { params: data })
				.then(res => {
					if (res.code == 0) {
						this.citys = res.data.city ? res.data.city : '未知';
					}
				});
		},
		//使用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.getSelectCity(this.longitude, this.latitude);
				})
				.catch(err => {
					console.log('获取位置失败');
				});
		},
		//获取城市列表（按ABC排序）
		getCitysList(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);

				// 查找对应的区县列表
				let foundCountyList = [];
				for (const province of citysData) {
					// 省份级别的检查
					if (province.label === item.label) {
						// 获取省份下的区县列表
						if (province.children && province.children.length > 0) {
							const firstLevel = province.children[0];
							if (firstLevel.children && firstLevel.children.length > 0) {
								foundCountyList = firstLevel.children.map(county => county.label || '');
							}
						}
						break;
					}

					// 城市级别的检查
					if (province.children && province.children.length > 0) {
						for (const cityItem of province.children) {
							if (cityItem.label === item.label) {
								// 获取城市下的区县列表
								if (cityItem.children && cityItem.children.length > 0) {
									foundCountyList = cityItem.children.map(county => county.label || '');
								}
								break;
							}
						}
					}
				}
			});

			// 生成按字母分组的城市列表
			const sortedLetters = Object.keys(grouped).sort();
			this.cityList = sortedLetters.map(letter => ({
				letter,
				city: grouped[letter]
			}));
		},
		//搜索事件
		handleSearch() {
			this.getCitysList(this.search.trim());
		},
		//获取二维码地址
		getAppDown() {
			this.$Request.get('/app/common/type/423').then(res => {
				if (res.code == 0) {
					this.options = res.data.value
				}
			})

		},
		//去添加简历
		addResume() {
			this.shoModal = false
			this.$router.push({
				name: 'addResume'
			})
		},
		//获取简历
		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
				}
			})
		},
		/**
		 * @param {Object} item 详情参数
		 * 去详情
		 */
		goDetails(item) {
			if (localStorage.getItem('token')) {
				if(this.searchType == '职位'){
					if (this.isResume) { //有简历
						this.$router.push({
							name: 'postInfo',
							query: {
								postPushId: item.postPushId
							}
						})
					} else { //无简历
						this.shoModal = true
					}
				}else{
					this.$router.push({
						name: 'enterpriseInfo',
						query: {
							companyId: item.companyId
						}
					})
				}
				
			} else {
				this.$router.push({
					name: 'login'
				})
			}

		},
		//开始搜索
		startSearch() {
			this.tabsCurr = null
			this.page = 1
			this.getUserList()
		},
		//选择筛选条件
		selectCondition(ite, type) {
			switch (type) {
				case 0: //综合排序
					this.postType = ite
					this.searchCondizione[0].name = ite
					break;
				case 1: //工作经验
					this.experience = ite
					this.searchCondizione[1].name = ite
					break;
				case 2: //薪资
					this.salaryRange = ite
					this.searchCondizione[2].name = ite
					break;
				case 3: //选择学历
					this.education = ite
					this.searchCondizione[3].name = ite
					break;
				case 4: //公司规模
					this.companyPeople = ite
					this.searchCondizione[4].name = ite
					break;
				default:
					break;
			}
			this.page = 1
			this.getUserList()
		},
		//清空筛选条件
		cleanSecect() {
			this.keyWord = '' //岗位名称
			this.postType = '综合排序' //综合排序
			this.experience = '' //工作经验
			this.salaryRange = '' //薪资范围
			this.education = '' //学历
			this.companyPeople = '' //公司规模
			this.page = 1
			this.getUserList()
			this.searchCondizione[0].name = '综合排序'
			this.searchCondizione[1].name = '工作经验'
			this.searchCondizione[2].name = '薪资待遇'
			this.searchCondizione[3].name = '学历要求'
			this.searchCondizione[4].name = '公司规模'
		},
		//分页
		currentChange(e) {
			this.page = e
			this.getUserList()
		},
		/**
		 * @param {Boolean} e 
		 * 是否触顶
		 */
		change(e) {
			this.isTop = e
		},
		/**
		 * 获取岗位列表
		 */
		getUserList() {
			this.loading = true
			let data = {
				page: this.page,
				limit: this.limit,
				postType: '', //求职类型
				ruleClassifyName: this.keyWord?this.keyWord: this.tabs[this.tabsCurr]?.ruleClassifyName || '',//岗位名称, //岗位名称
				screen: this.postType == '综合排序' ? 1 : 2, //1推荐 2最新
				county: this.county == '全部' ? '' : this.county || '', //区
				city: this.originalCityList[this.cityIndex]?.city || '', //城市
				salaryRange: this.salaryRange == '不限' ? '' : this.salaryRange || '', //薪资范围
				education: this.education == '不限' ? '' : this.education || '', //学历
				experience: this.experience == '不限' ? '' : this.experience || '', //经验
				companyPeople: this.companyPeople == '不限' ? '' : this.companyPeople || '', //公司规模
				// lng: this.longitude,
				// lat: this.latitude,
				userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : '',
				preference: this.selectedTags.includes('不限') ? '' : this.selectedTags.filter(tag => tag !== '不限').join(',') //跨境标签
		}
			let url = '';
			if(this.searchType == '职位'){
				url = '/app/postPush/userGetPostPushList'
			}else{
				url = '/app/company/getCompanyPostPush'
				data = {
					...data,
					key: this.keyWord
				}
			}
			this.$Request.get(url, {
				params: data
			}).then(res => {
				this.loading = false
				if (res.code == 0) {
					this.pages = res.data.pages
					res.data.records.map(item => {
						if (item.positionWelfare) {
							item.positionWelfare = item.positionWelfare.split(',')
						} else {
							item.positionWelfare = []
						}
						if (item.industry) {
							item.industry = item.industry.split(',')
						} else {
							item.industry = []
						}
						if (item.companyScope) {
							item.companyScope = item.companyScope.split(',')
						} else {
							item.companyScope = []
						}
					})
					this.jobDataList = res.data.records
					if (this.jobDataList.length > 0) {
						this.isNoList = false
					} else {
						this.isNoList = true
					}
					console.log(this.jobDataList)
				}
			})
		},
		mouseovermy(item) {
			this.mouseoutmy()
			item.isUp = true
		},
		mouseoutmy() {
			this.searchCondizione.map(item => {
				item.isUp = false
			})
		},
		/**
		 * 公司规模
		 */
		getscompList() {
			let data = {
				type: '公司规模'
			}
			this.$Request.get('/app/dict/list', {
				params: data
			}).then(res => {
				if (res.code == 0) {
					this.compList = [{
						value: '不限',
						code: '不限'
					}, ...res.data]
				}
			})
		},
		/**
		 * schoolList
		 * 学历列表
		 */
		getschoolList() {
			let data = {
				type: '学历'
			}
			this.$Request.get('/app/dict/list', {
				params: data
			}).then(res => {
				if (res.code == 0) {
					this.schoolList = [{
						value: '不限',
						code: '不限'
					}, ...res.data]
				}
			})
		},
		/**
		 * jyList
		 * 工作经验
		 */
		getjyList() {
			let data = {
				type: '工作经验'
			}
			this.$Request.get('/app/dict/list', {
				params: data
			}).then(res => {
				if (res.code == 0) {
					this.jyList = [{
						value: '不限',
						code: '不限'
					}, ...res.data]
				}
			})
		},
		/**
		 * 薪资
		 */
		getMoneyList() {
			let data = {
				type: '薪资'
			}
			this.$Request.get('/app/dict/list', {
				params: data
			}).then(res => {
				if (res.code == 0) {
					this.moneyList = [{
						value: '不限',
						code: '不限'
					}, ...res.data]
				}
			})
		},
		/**
		 * 获取地址数据
		 */
		getList() {
			this.cityList = []
			// 清空并初始化originalCityList
			this.originalCityList = []
			// 定义直辖市列表
			const municipalities = ['北京市', '上海市', '天津市', '重庆市']
			// 遍历省份
			citysData.forEach(province => {
				// 遍历城市
				province.children.forEach(city => {
					// 提取区域列表
					const countyList = city.children.map(county => county.label)

					// 确定城市名称
					let cityName = city.label

					// 如果是直辖市，取上一级的label（即省份名称）
					if (municipalities.includes(province.label) && city.label === '市辖区') {
						cityName = province.label
					}

					// 添加到cityList
					this.cityList.push({
						city: cityName,
						countyList: countyList
					})
					// 添加到originalCityList
					this.originalCityList.push({
						city: cityName,
						countyList: countyList
					})
				})
			})

			// 设置默认城市（如果没有本地存储的城市）
			if (!this.city && this.originalCityList.length > 0) {
				// 默认选择第一个城市
				this.city = this.originalCityList[0].city
				this.cityIndex = 0
				// 设置默认区县为"全部"
				this.county = '全部'
			}

			// 处理localStorage中存储的城市名称匹配
			if (localStorage.getItem('city')) {
				const storedCity = localStorage.getItem('city')
				// 设置city值
				this.city = storedCity

				// 匹配选中项
				this.originalCityList.forEach((item, index) => {
					if (item.city === storedCity) {
						this.cityIndex = index
					}
				})
				// 设置默认区县为"全部"
				this.county = '全部'
			}
			this.getLocation()
		},
		// 解析技能标签字符串为数组
		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];
		},
		// 选择跨境标签
		selectTag(tag) {
			if (tag === '不限') {
				// 如果选择'不限'，则只保留'不限'
				this.selectedTags = ['不限'];
			} else {
				if (this.selectedTags.includes('不限')) {
					// 如果当前包含'不限'，则移除'不限'并添加新标签
					this.selectedTags = [tag];
				} else if (this.selectedTags.includes(tag)) {
					// 如果已经包含该标签，则移除
					this.selectedTags = this.selectedTags.filter(item => item !== tag);
					// 如果移除后没有标签，则添加'不限'
					if (this.selectedTags.length === 0) {
						this.selectedTags = ['不限'];
					}
				} else {
					// 添加新标签
					this.selectedTags.push(tag);
				}
			}
			// 重新获取岗位列表
			this.page = 1;
			this.getUserList();
		}
	}
}
</script>

<style lang="scss" scoped>
$marginTop-60: 120px;
:deep(.el-affix--fixed) {
	width: 100% !important;
	right: 0;
	left: 0;
}
.content {
	width: 100%;
	margin-top: 20px;

	.content-box {
		width: calc(100% - $marginTop-60 * 2);

	}

	.content-l {
		width: 65%;
	}

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

	.content-l-item {
		width: 100%;
		background-color: #ffffff;
		border-radius: 13px;
		margin-bottom: 20px;
		cursor: pointer;
	}

	.content-l-item-pag {
		width: 100%;
		padding: 20px 0;
	}

	.content-l-item-l {
		width: 55%;
	}

	.content-l-item-r {
		width: 45%;
		position: relative;
	}

	.content-l-item-r-title {
		width: 100%;
		height: 54px;
		margin-top: 20px;

		img {
			width: 54px;
			height: 54px;
			border-radius: 12px;
		}

		.content-l-item-r-title-r {
			margin-left: 10px;
		}

		.content-l-item-r-title-r-t {
			color: #222222;
			font-size: 16px;
			font-weight: 500;
		}

		.content-l-item-r-title-r-b-i {
			background-color: #f8f8f8;
			color: #666666;
			font-size: 13px;
			padding: 4px 10px;
			border-radius: 4px;
			margin-right: 10px;
			margin-top: 6px;
		}
	}

	.content-l-item-r-bom {
		width: calc(100% - 40px);
		height: 48px;
		background: linear-gradient(to bottom, #f5fcfc, #fcfbfa);
		padding: 0 20px;
		border-radius: 0 0 13px 0;
		position: absolute;
		bottom: 0%;

		.content-l-item-r-bomtxt {
			width: 340px;
			color: #666666;
			font-size: 13px;
			overflow: hidden;
			/* 添加省略号 */
			text-overflow: ellipsis;
			/* 防止文本换行 */
			white-space: nowrap;
		}
	}

	.content-l-item-title {
		font-weight: 500;
		font-size: 16px;
		color: #222222;
		padding: 20px 20px 10px 20px;
	}

	.content-l-item-info {
		padding: 0 20px;
		padding-bottom: 10px;

		.content-l-item-infomoney {
			color: #fe574a;
			font-size: 16px;
			font-weight: 500;
			margin-right: 10px;
			margin-bottom: 10px;
		}

		.content-l-item-infolabel {
			background-color: #f8f8f8;
			// margin-left: 10px;
			margin-right: 10px;
			border-radius: 4px;
			padding: 4px 10px;
			color: #666666;
			font-size: 13px;
			margin-bottom: 10px;
		}
	}

	.content-l-item-btn {
		width: calc(100% - 40px);
		height: 48px;
		background: linear-gradient(to bottom, #f5fcfc, #fcfbfa);
		padding: 0 20px;
		border-radius: 0 0 0 13px;

		.content-l-item-btn-item {
			color: #666666;
			font-size: 13px;

		}
	}

	.content-r {
		width: calc(35% - 20px);
		height: fit-content;
		border-radius: 13px;
		background-color: #ffffff;
	}

}

.jobType {
	.jobType-item {
		// width: 100%;
		text-align: center;
		line-height: 38px;
		cursor: pointer;
	}

	.jobType-item:hover {
		background-color: #f8f8f8;
		border-radius: 4px;
		color: #00DD9A;
	}
}

.zhiwei {
	width: 400px;
	max-height: 400px;
	overflow: hidden;
	overflow-y: scroll;

	.zhiwei-item {
		width: 100%;
	}

	.zhiwei-item-l {
		width: 40%;
		font-weight: 500;
	}

	.zhiwei-item-r {
		width: 60%;
	}

	.zhiwei-item-r-txt {
		width: 100%;
		font-weight: 500;
		color: #999999;
	}

	.zhiwei-item-r-i {

		margin-bottom: 10px;
	}

	.zhiwei-item-r-i-i {
		margin-top: 10px;
		margin-right: 10px;
		cursor: pointer;
		font-size: 14px;
	}

	.zhiwei-item-r-i-i:hover {
		color: #00DD9A;
	}
}

::-webkit-scrollbar {
	/* Chrome, Safari, Opera */
	width: 4px;
}

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

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

.hangye {
	width: 400px;
	max-height: 400px;
	overflow: hidden;
	overflow-y: scroll;


	.hangye-item {

		.hangye-l {
			width: 40%;
			font-weight: 500;
		}

		.hangye-r {
			width: 60%;

			.hangye-r-item {
				margin-right: 10px;
				cursor: pointer;
				margin-bottom: 10px;
			}

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

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

.condizione {
	width: 100%;
	height: auto;


	.condizione-box {
		width: calc(1600px - $marginTop-60 * 2);
		height: 100%;
		background-color: #ffffff;
		border-radius: 13px;

		.condizione-box-c {
			width: calc(100% - 60px);
		}

		.condizione-box-c-searchc {
			width: 100%;
			height: 48px;
			margin-top: 30px;
		}

		.condizione-box-c-search {
			width: 50%;
			height: 100%;
			background-color: #00DD9A;
			border-radius: 13px;
			align-items: center;
		}

		.condizione-box-c-search-in {
			width: calc(90% - 2px);
			height: 44px;
			background-color: #ffffff;
			margin-left: 2px;
			border-radius: 13px;
		}

		.condizione-box-c-search-ins {
			width: calc(100% - 4px);
		}

		.condizione-box-c-search-btn {
			width: 10%;
			height: 48px;
			align-items: center;
			color: #ffffff;
			cursor: pointer;
			padding:0 10px;
		}

		.condizione-box-c-downApp {
			color: #00DD9A;
			cursor: pointer;
			position: relative;
		}

		.condizione-box-c-downApp-rq {
			display: none;
			position: absolute;
			bottom: -260px;
			background-color: #ffffff;
			padding: 10px 20px 20px 20px;
			border-radius: 13px;
			border: 1px solid #f5f5f5;
		}

		.condizione-box-c-downApp-rq-img-txt {
			text-align: center;
		}

		.condizione-box-c-downApp:hover {
			.condizione-box-c-downApp-rq {
				display: block;
			}
		}
	}
	.condizione-box-c-city-title {
		width: fit-content;
		border-bottom: 4px solid #fff;
		font-weight: 400;
		cursor: pointer;
		margin-right: 20px;
		color: rgba(153, 153, 153, 1);
	}
	.condizione-box-c-city-title-active{
		color: #00DD9A;
		border-bottom: 4px solid #00DD9A;
	}
	.condizione-box-c-city {
		// width: 100%;
		height: auto;
		margin-top: 10px;

		

		.condizione-box-c-city-s {
			margin-top: 18px;

			.condizione-box-c-city-s-i {
				font-weight: 400;
				font-size: 14px;
				color: #333;
				margin-left: 10px;
				margin-bottom: 10px;
				cursor: pointer;
			}

			.condizione-box-c-city-s-i:hover {
				color: #00DD9A;
			}
		}

		.condizione-box-c-city-d {
			background-color: #f8f8f8;
			border-radius: 4px;
			margin-top: 8px;
			padding: 8px 0 0 0;

			.condizione-box-c-city-d-i {
				font-weight: 400;
				font-size: 14px;
				color: #333;
				margin-left: 10px;
				margin-bottom: 10px;
				cursor: pointer;
			}

			.condizione-box-c-city-d-i:hover {
				color: #00DD9A;
			}
		}
	}

	.condizione-box-c-hy {
		margin-top: 18px;
		width: 100%;

		// height: 32px;
		.condizione-box-c-hy-l {

			.condizione-box-c-hy-l-i {
				padding: 6px 12px;
				background-color: #f8f8f8;
				font-weight: 400;
				font-size: 14px;
				color: #222222;
				cursor: pointer;
				margin-right: 18px;
				border-radius: 4px;
				margin-bottom: 10px;
			}

			.condizione-box-c-hy-l-i:hover {
				color: #00DD9A;
			}
		}

		.condizione-box-c-hy-r {
			margin-bottom: 10px;
			font-size: 14px;
			font-weight: 400;
			color: #999999;
			cursor: pointer;
		}

		.condizione-box-c-hy-r:hover {
			color: #00DD9A;
		}
	}

}

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

.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;
	}
}
.tabs {
	//width: 100%;
	max-width: 30%;
	height: 40px;

	.tabs-box {
		overflow: auto;
		display: flex;
		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; // 添加过渡效果
	}
}
.add{
	flex-shrink: 0;
	margin-left: 10px;
	cursor: pointer;
}
.list-box-item-top-r-name {
	// width: 100%;
	font-size: 16px;
	font-weight: 500;
}

.list-box-item-top-r-label-i {
	background-color: #f8f8f8;
	color: #666666;
	padding: 0 8px;
	line-height: 22px;
	border-radius: 4px;
	font-size: 13px;
	margin-right: 10px;
	margin-top: 10px;
}

/* 跨境标签样式 */
.label-box {
	padding: 4px 12px;
	background-color: #f8f8f8;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}

.label-active {
	background-color: #00DD9A;
	color: #ffffff;
}

.tag-list {
	flex-wrap: wrap;
	gap: 10px;
}

.tag-item {
	padding: 4px 12px;
	background-color: #f8f8f8;
	border-radius: 4px;
	// margin-right: 10px;
	// margin-bottom: 10px;
	cursor: pointer;
	font-size: 14px;
	color: #333333;
	cursor: pointer;
}

.tag-item-active {
	background-color: #00DD9A;
	color: #ffffff;
}
.text-item {
	color: rgba(153, 153, 153, 1);
	font-family: DM Sans;
	font-size: 14px;
	font-weight: 400;
	margin-top: 18px;
}
/* 从事方向选择样式 */
.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>