yizhizan-pc/src/views/search/searchCom.vue

<template>
	<div class="search" style="padding-bottom: 40px;">
		<!-- 条件筛选区域 -->
		<el-affix @change="change" z-index="10" :offset="60">
			<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="condizione-box-c-search flex justify-between">
								<div class="condizione-box-c-search-in flex align-center justify-center">
									<div class="condizione-box-c-search-ins flex align-center justify-center">
										<el-input @keyup.enter="startSearch()" v-model="keyWord" placeholder="根据职位搜索" />
									</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">
										<!-- <VueQrcode type="image/png" :color="qrColor" :value="options" :margin="0"
											errorCorrectionLevel="quartile" :width="size" /> -->
										<img :src="options" style="width: 160px;height: auto;" />
									</div>

									<div class="condizione-box-c-downApp-rq-img-txt">
										微信扫描二维码
									</div>
								</div>
							</div>
						</div>
						<!-- 地区选择 -->
					<div class="condizione-box-c-city">
						<div class="condizione-box-c-city-title">
							城市和地区
						</div>
						<div class="condizione-box-c-city-s flex flex-wrap">
							<div class="condizione-box-c-city-s-i flex align-center" @click="allCitys = true">
								<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(item)"
									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="hangye" v-if="index==0">
											<div v-if="itemList.length>0" class="hangye-item flex justify-between"
												v-for="(item,index) in itemList" :key="index">
												<div class="hangye-l">
													{{item.industryName}}
												</div>
												<div class="hangye-r flex flex-wrap">
													<div @click="selectHy(ite.industryName)"
														:style="isSelectHy(ite.industryName)?'color:#00DD9A':''"
														class="hangye-r-item" v-for="(ite,ind) in item.childrenList">
														{{ite.industryName}}
													</div>
												</div>
											</div>
											<el-empty v-else description="暂无数据" />
										</div>
										<div class="zhiwei" v-if="index == 1">
											<div v-if="jobList.length>0" class="zhiwei-item flex justify-between"
												v-for="(item,index) in jobList" :key="index">
												<div class="zhiwei-item-l">
													{{item.ruleClassifyName}}
												</div>
												<div class="zhiwei-item-r">
													<div class="zhiwei-item-r-i flex flex-wrap"
														v-for="(ite,ind) in item.childrens" :key="ind">
														<div class="zhiwei-item-r-txt">
															{{ite.title}}
														</div>
														<div :style="keyWord==it.ruleClassifyName?'color:#00DD9A':''"
															class="zhiwei-item-r-i-i"
															@click="selectCondition(it.ruleClassifyName,1)"
															v-for="(it,ins) in ite.childrens" :key="ins">
															{{it.ruleClassifyName}}
														</div>
													</div>
												</div>
											</div>
											<el-empty v-else description="暂无数据" />
										</div>
										<!-- 工作经验 -->
										<div class="jobType" v-if="index==2">
											<div class="jobType-item" :style="experience==item.value?'color:#00DD9A':''"
												@click="selectCondition(item.value,2)" v-for="(item,index) in jyList"
												:key="index">
												{{item.value}}
											</div>
										</div>
										<!-- 薪资 -->
										<div class="jobType" v-if="index==3">
											<div class="jobType-item"
												:style="salaryRange==item.value?'color:#00DD9A':''"
												@click="selectCondition(item.value,3)" v-for="(item,index) in moneyList"
												:key="index">
												{{item.value}}
											</div>
										</div>
										<!-- 学历 -->
										<div class="jobType" v-if="index==4">
											<div class="jobType-item" :style="education==item.value?'color:#00DD9A':''"
												@click="selectCondition(item.value,4)"
												v-for="(item,index) in schoolList" :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 class="content-l-item flex justify-between" @click="goDetails(item)"
						v-for="(item,index) in jobDataList" :key="index">
						<div class="content-l-item-l">
							<div class="content-l-item-title flex align-center">
								<img style="width: 50px;height: 50px;border-radius: 50%;margin-right: 10px;"
									:src="item.userAvatar?item.userAvatar:'/logo.png'" alt="" />
								{{item.userName}}
								<span>
									【{{item.city}}】
								</span>
							</div>
							<div class="content-l-item-info flex align-center flex-wrap">
								<div class="content-l-item-infomoney">
									{{item.resumesCompensation}}
								</div>
								<div class="content-l-item-infolabel">
									{{item.resumesWorkExperience}}
								</div>
								<div class="content-l-item-infolabel">
									{{item.resumesSex==1?'男':'女'}}
								</div>
								<div class="content-l-item-infolabel">
									{{item.resumesAge}}岁
								</div>
								<div class="content-l-item-infolabel">
									{{item.resumesMarriage}}
								</div>
								<div class="content-l-item-infolabel">
									{{item.resumesPost}}
								</div>

							</div>
							<div class="content-l-item-btn flex align-center">
								<div class="content-l-item-btn-item" v-for="(ite,ind) in item.industryName">
									{{ite}}<el-divider v-if="ind+1<item.industryName.length" direction="vertical" />
								</div>
							</div>
						</div>
						<div class="content-l-item-r">
							<div class="content-l-item-r-title flex algin-center">
								<!-- <img :src="item.company.companyLogo" alt="" /> -->
								<div class="content-l-item-r-title-r">
									<div class="content-l-item-r-title-r-t">
										{{item.school}}
									</div>
									<div style="margin-top: 20px;" class="content-l-item-r-title-r-b flex align-center">
										<div class="content-l-item-r-title-r-b-i">
											{{item.resumesEducation}}
										</div>
										<div class="content-l-item-r-title-r-b-i">
											{{item.major}}
										</div>
									</div>
								</div>
							</div>
							<div class="content-l-item-r-bom flex align-center">
								<el-icon size="13" style="margin-right: 10px;">
									<MapLocation />
								</el-icon>
								<div class="content-l-item-r-bomtxt">
									毕业时间：{{item.graduationTime}}
								</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">
					<resume :city="city" @goDetails="goDetails" />
				</div>
			</div>

		</div>
		<!-- 切换城市 -->
		<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>
			</template>
			<div class="citys">
				<div class="citys-item">
					<div @click="selectCity(item.city)" v-for="(item,index) in cityList" :key="index"
						class="citys-item-citys">
						{{item.city}}
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import VueQrcode from 'vue-qrcode'
	import resume from '../../components/resume/resume.vue'
	import axios from 'axios';
	import jsonp from 'axios-jsonp'
	import citysData from '../../components/header/citys.json'
	export default {
		components: {
			VueQrcode,
			resume
		},
		data() {
			return {
				size: 160, //二维码大小
				qrColor: {
					'background': '#ffffff'
				},
				options: '', //生成二维码的内容
				keyWord: '', //搜索内容
				cityList: [], //城市列表
				cityIndex: 0,
				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
					}
				], //筛选条件
				itemList: [], //行业数据
				jobList: [], //岗位列表
				jobTypeList: [], //工作性质
				moneyList: [], //薪资列表
				jyList: [], //工作经验
				schoolList: [], //学历列表
				city: '', //当前选中的地区
        		allCitys: false, //是否显示全部城市弹框
        		citys: '', //定位城市
        		jobDataList: [], //岗位列表
				page: 1, //分页
				limit: 10, //每页条数
				pages: 1, //总页数
				loading: false, //加载工
				isTop: false,
				isNoList: false,
				industry: [], //行业
				postType: '', //求职类型
				experience: '', //工作经验
				salaryRange: '', //薪资
				education: '', //学历
				companyPeople: '', //公司规模
			}
		},
		computed: {
			//计算城市
		countyList() {
			return this.cityList.length > 0 ? ['全部', ...this.cityList[this.cityIndex].countyList] : ['全部']
		},
		},
		mounted() {
			this.city = ''
			this.keyWord = this.$route.query.keyWord
			//app下载地址
			this.getAppDown()
			//获取城市列表
			this.getList()
			//获取行业列表
			this.getIndustryList()
			//获取岗位列表
			this.getJobList()
			//工作性质
			this.getPostType()
			//薪资
			this.getMoneyList()
			//工作经验
			this.getjyList()
			//学历
			this.getschoolList()
			//获取简历列表
			// this.getUserList()
		},
		methods: {
			//获取app下载地址
			getAppDown() {
				this.$Request.get('/app/common/type/423').then(res => {
					if (res.code == 0) {
						this.options = res.data.value
					}
				})

			},
			/**
			 * @param {Object} item 详情参数
			 * 去详情
			 */
			goDetails(item) {
				if (localStorage.getItem('token')) {
					this.$router.push({
						name: 'resumeInfo',
						query: {
							resumesId: item.resumesId
						}
					})
				} else {
					this.$router.push({
						name: 'login'
					})
				}

			},
			//开始搜索
			startSearch() {
				this.page = 1
				this.getUserList()
			},
			//选择筛选条件
			selectCondition(ite, type) {
				switch (type) {
					case 1: //职位
						this.keyWord = ite
						this.searchCondizione[1].name = ite
						break;
					case 2: //工作经验
						this.experience = ite
						this.searchCondizione[2].name = ite
						break;
					case 3: //薪资
						this.salaryRange = ite
						this.searchCondizione[3].name = ite
						break;
					case 4: //选择学历
						this.education = ite
						this.searchCondizione[4].name = ite
						break;
					default:
						break;
				}
				this.page = 1
				this.getUserList()
			},
			//选中行业
			selectHy(ite) {
				let index = this.industry.findIndex(item => item == ite)
				if (index == -1) { //没有则加入
					this.industry.push(ite)
					this.searchCondizione[0].name = this.industry[0]
				} else { //有则取消
					this.industry.splice(index, 1)
					if (this.industry.length == 0) {
						this.searchCondizione[0].name = '公司行业'
					} else {
						this.searchCondizione[0].name = this.industry[0]
					}
				}
				this.page = 1
				this.getUserList()
			},
			//判断是否选中
			isSelectHy(ite) {
				let index = this.industry.findIndex(item => item == ite)
				return index == -1 ? false : true
			},
			//清空筛选条件
			cleanSecect() {
				this.industry = [] //行业
				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()
			},
			//选择城市
			selectCity(item) {
				// 查找选中城市的索引
				const index = this.cityList.findIndex(city => city.city === item)
				if (index !== -1) {
					this.cityIndex = index
					this.county = this.countyList[0]
					this.page = 1
					this.allCitys = false
					this.getUserList();
				}
			},
			/**
			 * @param {Boolean} e 
			 * 是否触顶
			 */
			change(e) {
				this.isTop = e
			},
			/**
			 * 获取岗位列表
			 */
			getUserList() {
				// debugger;
				this.loading = true
				let data = {
					page: this.page,
					limit: this.limit,
					resumesPost: this.keyWord, //岗位名称
					screen: 2, //1推荐 2最新
					// resumesIntention: this.city, //城市
					city: this.city, //城市
					resumesCompensation: this.salaryRange, //薪资范围
					resumesEducation: this.education, //学历
					resumesWorkExperience: this.experience, //经验
					industryName: this.industry.join(','), //行业
					companyId: localStorage.getItem('companyId'),
					userId: localStorage.getItem('userId') ? localStorage.getItem('userId') : ''
				}
				this.$Request.post('/app/resumes/selectResumesList', data,{type: 'json'}).then(res => {
					console.log(res)
					this.loading = false
					if (res.code == 0) {
						this.pages = res.data.total

						res.data.records.map(item => {
							if (item.industryName) {
								item.industryName = item.industryName.split(',')
							} else {
								item.industryName = []
							}
						})
						this.jobDataList = res.data.records
						if (this.jobDataList.length > 0) {
							this.isNoList = false
						} else {
							this.isNoList = true
						}
					}
				})
			},
			mouseovermy(item) {
				this.mouseoutmy()
				item.isUp = true
			},
			mouseoutmy() {
				this.searchCondizione.map(item => {
					item.isUp = false
				})
			},
			/**
			 * schoolList
			 * 学历列表
			 */
			getschoolList() {
				let data = {
					type: '学历'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.schoolList = res.data
					}
				})
			},
			/**
			 * jyList
			 * 工作经验
			 */
			getjyList() {
				let data = {
					type: '工作经验'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.jyList = res.data
					}
				})
			},
			/**
			 * 薪资
			 */
			getMoneyList() {
				let data = {
					type: '薪资'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.moneyList = res.data
					}
				})
			},
			/**
			 * 工作性质
			 */
			getPostType() {
				let data = {
					type: '工作性质'
				}
				this.$Request.get('/app/dict/list', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.jobTypeList = res.data
					}
				})
			},
			/**
			 * 获取岗位列表
			 */
			getJobList() {
				this.$Request.get('/app/rule/getClassifyList').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.jobList = res.data
							// this.rightList = this.list[this.current].childrens
						}

					}
				})
			},
			/**
			 * 获取行业数据
			 */
			getIndustryList() {
				this.$Request.get('/app/industry/getIndustryList').then(res => {
					if (res.code == 0) {
						this.itemList = res.data
					}
				})
			},
			/**
			 * 获取地址数据
			 */
			getList() {
				// 使用本地citys.json数据
				this.cityList = []
				// 定义直辖市列表
				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
						})
					})
				})
				
				// 处理localStorage中存储的城市名称匹配
				if (localStorage.getItem('city')) {
					console.log(localStorage.getItem('city'))
					const storedCity = localStorage.getItem('city')
					// 设置city值
					this.city = storedCity
				}
				
				this.getLocation()
			},
			getLocation() {
				//默认全部区
				this.county = '全部'
				// 设置定位城市
				if (this.cityList.length > 0) {
					this.citys = this.cityList[this.cityIndex].city
				}
				this.getUserList();
				// 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.city = res.data.result.ad_info.city
				// 	this.getUserList()
				// }).catch(err => {
				// 	console.log(err)
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	$marginTop-60: 120px;

	.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;
				margin-top: 10px;
			}

			.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(100% - $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: 80%;
				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;
			}

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

			.condizione-box-c-downApp-rq {
				display: none;
				position: absolute;
				bottom: -250px;
				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 {
			width: 100%;
			height: auto;
			margin-top: 10px;

			.condizione-box-c-city-title {
				width: fit-content;
				color: #00DD9A;
				border-bottom: 4px solid #00DD9A;
				font-weight: 500;
				cursor: pointer;
			}

			.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;
			}
		}

	}

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

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

		}
	}

	.showModal-title {
		width: 100%;
		text-align: center;
		color: #333333;
		font-size: 20px;
		font-weight: 500;
		margin-top: 5px;
	}

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

		.showModal-content-c {
			width: 80%;
			height: 100%;
			color: #999999;
			font-size: 16px;
		}
	}

	.showModal-btn {
		width: 100%;
		height: 44px;
		margin: 30px 0;

		.showModal-btn-c {
			width: 200px;
			height: 100%;
			background-color: #00DD9A;
			border-radius: 10px;
			color: #ffffff;
			cursor: pointer;
		}
	}
	.my-header {
		padding: 10px 10px 0 10px;
	}
	.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;
		}
	}
</style>