1009 lines
33 KiB
Vue
1009 lines
33 KiB
Vue
<template>
|
|
<div class="dis-f jus-x">
|
|
<div class="body-maxWidth">
|
|
<div class="input-box dis-f al-item jus-bet body-maxWidth">
|
|
<div class="dis-f al-item">
|
|
<el-input v-model="seachVal" class="input-s" placeholder="搜索房源或输入房源ID" @keyup.enter="seachList">
|
|
<template #suffix>
|
|
<img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="" @click="seachList" />
|
|
</template>
|
|
</el-input>
|
|
<!-- 地图找房的入口 暂时隐藏 -->
|
|
<!-- <div class="map-box dis-f jus-x al-item">
|
|
<img src="../../assets/homeImage/mapImg.png" class="img" alt="">
|
|
</div> -->
|
|
</div>
|
|
<div class="dis-f al-item">
|
|
<div class="tool-btn dis-f al-item jus-x" @click="gouser('fav')">
|
|
<img src="../../assets/homeImage/Mycollect.png" class="img" alt="" />
|
|
我的收藏
|
|
</div>
|
|
<div class="tool-btn dis-f al-item jus-x mg-l-10" @click="gouser('publish')">
|
|
<img src="../../assets/homeImage/informationO.png" class="img" alt="" />
|
|
我的发布
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="seach-info-box body-maxWidth">
|
|
<div class="top-box dis-f al-item">
|
|
<div class="top-btn dis-f jus-x al-item first" v-if="!isNeedHousing" @click="selectPage('person')" :class="{'select-top-btn-bg': tabType === 'person'}">
|
|
<div class="top-btn" :class="[tabType === 'person' ? 'select-top-btn' : 'first-no-select']" v-show="tabType === 'person'">
|
|
个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
|
|
<div class="dis-f jus-x btm-line-mg">
|
|
<div class="btm-line"></div>
|
|
</div>
|
|
</div>
|
|
个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
|
|
<div class="second-select" v-show="tabType === 'intermediary'">
|
|
<div class="box"></div>
|
|
</div>
|
|
</div>
|
|
<div class="top-btn dis-f jus-x al-item first" v-if="isNeedHousing" :class="{'select-top-btn-bg': tabType === 'need'}">
|
|
<div class="top-btn" :class="[tabType === 'need' ? 'select-top-btn' : 'first-no-select']" v-show="tabType === 'need'">
|
|
求房源
|
|
<div class="dis-f jus-x btm-line-mg">
|
|
<div class="btm-line"></div>
|
|
</div>
|
|
</div>
|
|
求房源{{ tabType }}
|
|
</div>
|
|
<div class="top-btn dis-f jus-x al-item second" v-if="isNeedHousing" @click="selectPage('intermediary')" :class="{'select-top-btn-bg': tabType === 'intermediary'}">
|
|
<div class="first-select">
|
|
<div class="box"></div>
|
|
</div>
|
|
</div>
|
|
<div class="top-btn dis-f jus-x al-item second" v-if="!isNeedHousing && houseingPageType != 6" @click="selectPage('intermediary')" :class="{'select-top-btn-bg': tabType === 'intermediary'}">
|
|
<div class="first-select" v-show="tabType === 'person'">
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="third-select" v-show="tabType === 'apartment'">
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="top-btn" :class="[tabType === 'intermediary' ? 'select-top-btn' : 'first-no-select']" v-show="tabType === 'intermediary'">
|
|
中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
|
|
<div class="dis-f jus-x btm-line-mg">
|
|
<div class="btm-line"></div>
|
|
</div>
|
|
</div>
|
|
中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
|
|
</div>
|
|
<div class="top-btn dis-f jus-x al-item third" @click="selectPage('apartment')" :class="{'select-top-btn-bg': tabType === 'apartment'}" v-if="!isNeedHousing && houseingPageType != 6">
|
|
<div class="second-select-third-box" v-show="tabType === 'intermediary'">
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="top-btn" :class="[tabType === 'apartment' ? 'select-top-btn' : 'first-no-select']" v-show="tabType === 'apartment'">
|
|
品牌公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
|
|
<div class="dis-f jus-x btm-line-mg">
|
|
<div class="btm-line"></div>
|
|
</div>
|
|
</div>
|
|
品牌公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
|
|
</div>
|
|
<div class="top-btn dis-f jus-x al-item four" v-if="!isNeedHousing">
|
|
<div class="second-select-third-box" v-show="tabType === 'apartment'">
|
|
<div class="box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="tabType === 'apartment'" :class="{'show-box-pd': !showSelectModule}">
|
|
<apartmentSelect @handleTransfer="setSeachConditions" :seachPage="false" ref="apartmentSelectInfo"> </apartmentSelect>
|
|
</div>
|
|
<div class="seach-select-info" v-show="tabType !== 'apartment'">
|
|
<div class="select-box" :class="{'seach-select-h': showSelectModule}" :style="{overflow: showSelectModule ? 'visible' : 'hidden'}">
|
|
<selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation" ref="selectTabBoxInfo"></selectTabBox>
|
|
</div>
|
|
<div :class="{'show-box-pd': !showSelectModule}">
|
|
<div class="box" :class="{'show-box': showSelectModule}">
|
|
<div class="dis-f jus-x al-item" :style="{height: !showSelectModule ? '60px' : '40px'}" @click="showSelectModule = !showSelectModule">
|
|
<div class="dis-f al-item">
|
|
<span v-show="showSelectModule">收起筛选条件</span>
|
|
<span class="text-tps" v-show="!showSelectModule">筛选</span> <span v-show="!showSelectModule"> : </span>
|
|
<div v-show="!showSelectModule">
|
|
<span v-for="(item, i) in typeText" :key="item">
|
|
{{ item }}
|
|
<span v-show="i !== typeText.length - 1" class="text-icon"> |  </span>
|
|
</span>
|
|
</div>
|
|
<img src="../../assets/homeImage/listMore.svg" class="icon-img" :class="{'down-icon': showSelectModule}" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="btm-list" :class="{'apartment-btm': tabType === 'apartment'}">
|
|
<div class="dis-f al-item">
|
|
共<span class="count">{{ count || 0 }}</span
|
|
>条 {{ tabType === "person" ? "个人房源" : tabType === "intermediary" ? "中介房源" : tabType === "apartment" ? "品牌公寓" : "" }} <span v-show="selectTabCheck.title && selectTabCheck.id">   |  </span>
|
|
<div class="dis-f al-item">
|
|
<div v-show="selectTabCheck.id && selectTabCheck.title">{{ selectTabCheck.title }}:</div>
|
|
<div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
|
|
{{ item.title }}
|
|
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="dis-f al-item sort-text" v-show="tabType !== 'apartment'">
|
|
<el-dropdown trigger="click" @command="listSortCheck">
|
|
<span class="dis-f al-item sort-text"> {{ listSort.check }}<img class="img" src="../../assets/homeImage/sortIcon.png" alt="" /> </span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu class="pd-10 el-dropdown-menu">
|
|
<el-dropdown-item v-for="(items, j) in listSort.type" :key="j" :command="j">
|
|
<div class="dropdown-text" :class="{'dropdown-check-text': listSort.checkType === items.type}">
|
|
{{ items.title }}
|
|
<div class="type-icon" v-show="listSort.checkType === items.type"></div>
|
|
</div>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import {reactive, ref, inject, shallowReactive, defineProps, watchEffect, defineExpose} from "vue"
|
|
import selectTabBox from "../selectTabBox/selectTabBox.vue"
|
|
import apartmentSelect from "../apartment/seachModule.vue"
|
|
import store from "../../store/index"
|
|
import api from "@/utils/api"
|
|
import {useRoute, useRouter} from "vue-router"
|
|
import {ElMessage} from "element-plus"
|
|
|
|
//路由
|
|
const route = useRouter()
|
|
|
|
const props = defineProps({
|
|
getDataList: {
|
|
type: Function,
|
|
},
|
|
count: {
|
|
type: Number,
|
|
},
|
|
isNoGetData: Boolean,
|
|
})
|
|
|
|
//选项卡
|
|
let tabType = ref("person")
|
|
let selectTabBoxInfo = ref(null) //个人/中介筛选实例
|
|
let apartmentSelectInfo = ref(null) //公寓筛选实例
|
|
//设置请求数据
|
|
let selectPage = type => {
|
|
if (type === seachAllType["tabType"] || houseingPageType == 6) return
|
|
if (type === "apartment") {
|
|
selectTabBoxInfo.value.cleanSelect() //清空筛选数据
|
|
} else {
|
|
apartmentSelectInfo.value.cleanSelect && apartmentSelectInfo.value.cleanSelect()
|
|
}
|
|
//清空数据
|
|
if (type === "apartment")
|
|
seachAllType = reactive({
|
|
keyword: seachAllType["keyword"],
|
|
location: [],
|
|
intermediary: "",
|
|
})
|
|
tabType.value = type
|
|
seachAllType["tabType"] = type
|
|
seachAllType["searchid"] = setPageKey().searchid
|
|
//根据类型初始化筛选参数
|
|
if (type === "person") {
|
|
seachAllType["intermediary"] = 0
|
|
seachAllType["isintermediary"] = 0
|
|
houseingPageType = "0"
|
|
sessionStorage.setItem("houseingPageType", 0)
|
|
selectTabBoxInfo.value.routerQuerySet()
|
|
} else if (type === "intermediary") {
|
|
seachAllType["intermediary"] = 1
|
|
seachAllType["isverified"] = 0
|
|
houseingPageType = "1"
|
|
sessionStorage.setItem("houseingPageType", 1)
|
|
// route.currentRoute.value.query.houseingPageType='1'
|
|
selectTabBoxInfo.value.routerQuerySet()
|
|
} else {
|
|
seachAllType["intermediary"] = ""
|
|
seachAllType["isverified"] = 0
|
|
seachAllType["isintermediary"] = 0
|
|
}
|
|
//初始化搜索框输入内容
|
|
if (tabType.value != "need") {
|
|
setSeachVal()
|
|
}
|
|
if (seachVal.value && !setPageKey().searchid) return
|
|
let seachObj = setSeachId()
|
|
getDataList(seachAllType, seachObj.count == 0 ? false : true)
|
|
}
|
|
|
|
let getDataList = props.getDataList
|
|
|
|
//搜索数据
|
|
let seachAllType = reactive({
|
|
keyword: "",
|
|
location: [],
|
|
searchid: "",
|
|
intermediary: 0,
|
|
})
|
|
|
|
//搜索内容
|
|
let seachVal = ref("")
|
|
let isNeedHousing = ref(false)
|
|
seachVal.value = route.currentRoute.value.query.keyword && route.currentRoute.value.query.keyword.replace(/\s/g, "")
|
|
|
|
//判断是否从求房源页面跳转
|
|
isNeedHousing.value = route.currentRoute.value.query.isNeedHousing === "true"
|
|
|
|
//判断当前是什么页面
|
|
let houseingPageType = sessionStorage.getItem("houseingPageType")
|
|
|
|
let type = houseingPageType === "0" ? "person" : houseingPageType === "1" ? "intermediary" : houseingPageType === "6" ? "need" : "apartment"
|
|
tabType.value = type
|
|
if (tabType.value == "apartment") {
|
|
seachAllType["intermediary"] = ""
|
|
seachAllType["tabType"] = "apartment"
|
|
}
|
|
|
|
//页面判断-抛出方法
|
|
let checkPageType = () => {
|
|
// houseingPageType 0个人 1中介 6求房源
|
|
let type = houseingPageType === "0" ? "person" : houseingPageType === "1" ? "intermediary" : houseingPageType === "6" ? "need" : "apartment"
|
|
tabType.value = type
|
|
seachAllType["tabType"] = type
|
|
if (type === "person") {
|
|
seachAllType["intermediary"] = 0
|
|
} else if (type === "intermediary") {
|
|
seachAllType["intermediary"] = 1
|
|
} else if (type === "need") {
|
|
seachAllType["intermediary"] = 6
|
|
seachAllType["keyword"] = seachVal.value
|
|
} else {
|
|
seachAllType["intermediary"] = ""
|
|
}
|
|
let seachObj = setSeachId()
|
|
getDataList(seachAllType, seachObj.count == 0 ? false : true)
|
|
}
|
|
|
|
//搜索key
|
|
let seachKey = reactive({
|
|
key: {
|
|
personal: {},
|
|
intermediary: {},
|
|
studentapartment: {},
|
|
},
|
|
})
|
|
let seachInfoData = shallowReactive({
|
|
data: {},
|
|
})
|
|
|
|
//直接输入url
|
|
if (isNeedHousing.value) {
|
|
tabType.value = "need"
|
|
seachAllType["intermediary"] = 6
|
|
}
|
|
|
|
//切换选项重置输入框内容
|
|
let setSeachVal = () => {
|
|
seachAllType["searchid"] = setPageKey().searchid
|
|
seachVal.value = seachKey.key.keyword
|
|
}
|
|
|
|
//设置点击一级区域
|
|
let setLocation = (type, data) => {
|
|
seachAllType[type] = data
|
|
seachAllType["school"] = ""
|
|
}
|
|
|
|
//设置搜索数据
|
|
let setSeachConditions = (type, data) => {
|
|
if (seachAllType["tabType"] !== "apartment") {
|
|
if (type === "rent") {
|
|
seachAllType["rent_min"] = data.min
|
|
seachAllType["rent_max"] = data.max
|
|
} else if (type !== "") {
|
|
seachAllType[type] = data
|
|
} else if (type === "") {
|
|
data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0)
|
|
data.indexOf("isverified") !== -1 ? (seachAllType["isverified"] = 1) : (seachAllType["isverified"] = 0)
|
|
data.indexOf("iselevator") !== -1 ? (seachAllType["iselevator"] = 1) : (seachAllType["iselevator"] = 0)
|
|
data.indexOf("issunshinearea") !== -1 ? (seachAllType["issunshinearea"] = 1) : (seachAllType["issunshinearea"] = 0)
|
|
}
|
|
if (type === "school") {
|
|
seachAllType.location = []
|
|
}
|
|
if (type === "location") {
|
|
seachAllType.school = ""
|
|
}
|
|
} else {
|
|
seachAllType = {
|
|
tabType: "apartment",
|
|
...type.value,
|
|
}
|
|
}
|
|
|
|
if (tabType.value != "need") {
|
|
setSeachVal()
|
|
} else if (tabType.value == "need") {
|
|
seachVal.value = seachAllType.keyword
|
|
}
|
|
|
|
if (!seachAllType["tabType"]) seachAllType["tabType"] = tabType.value
|
|
if (!seachVal.value) {
|
|
seachAllType.searchid = ""
|
|
}
|
|
//设置其他选项
|
|
if (seachAllType["tabType"] === "person") {
|
|
seachAllType["isintermediary"] = 0
|
|
} else if (seachAllType["tabType"] === "intermediary") {
|
|
seachAllType["isverified"] = 0
|
|
} else {
|
|
seachAllType["isverified"] = 0
|
|
seachAllType["isintermediary"] = 0
|
|
}
|
|
let seachObj = setSeachId()
|
|
getDataList(seachAllType, seachObj.count == 0 ? false : true)
|
|
}
|
|
|
|
//设置当前搜索key
|
|
let setPageKey = () => {
|
|
return tabType.value === "person" ? seachKey.key.personal : tabType.value === "intermediary" ? seachKey.key.intermediary : tabType.value === "apartment" ? seachKey.key.studentapartment : ""
|
|
}
|
|
|
|
let setSeachId = () => {
|
|
return tabType.value === "person" ? seachInfoData.data.personal : tabType.value === "intermediary" ? seachInfoData.data.intermediary : tabType.value === "apartment" ? seachInfoData.data.studentapartment : ""
|
|
}
|
|
|
|
let isDownGetData = inject("isDownGetData")
|
|
|
|
//搜索初始化
|
|
let searchInit = data => {
|
|
api.search({keyword: data})
|
|
.then(res => {
|
|
if (res.code === 200) {
|
|
seachKey.key = res.data
|
|
seachInfoData.data = JSON.parse(JSON.stringify(res.data))
|
|
let seachObj = checkSearckInit(setSeachId())
|
|
seachAllType.searchid = seachObj.searchid
|
|
seachAllType["intermediary"] = tabType.value === "person" ? 0 : tabType.value === "intermediary" ? 1 : tabType.value === "need" ? 6 : ""
|
|
seachAllType["tabType"] = tabType.value
|
|
getDataList(seachAllType, seachObj.count == 0 ? false : true)
|
|
isDownGetData.value = true
|
|
} else {
|
|
isDownGetData.value = false
|
|
ElMessage({
|
|
message: res.message,
|
|
center: true,
|
|
})
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.log("1111")
|
|
})
|
|
}
|
|
|
|
//判断搜索数据数量
|
|
let checkSearckInit = data => {
|
|
if (data.count) return data
|
|
let obj = {}
|
|
if (seachInfoData.data.personal.count > 0) {
|
|
obj = seachInfoData.data.personal
|
|
tabType.value = "person"
|
|
seachAllType["intermediary"] = 0
|
|
} else if (seachInfoData.data.intermediary.count > 0) {
|
|
obj = seachInfoData.data.intermediary
|
|
tabType.value = "intermediary"
|
|
seachAllType["intermediary"] = 1
|
|
} else if (seachInfoData.data.studentapartment.count > 0) {
|
|
obj = seachInfoData.data.studentapartment
|
|
tabType.value = "apartment"
|
|
seachAllType["intermediary"] = ""
|
|
} else obj = setSeachId()
|
|
return obj
|
|
}
|
|
|
|
//搜索数据
|
|
let seachList = item => {
|
|
let routeInfo = route.currentRoute.value
|
|
if (!seachVal.value.replace(/\s/g, "")) return
|
|
if (!seachVal.value) {
|
|
return
|
|
}
|
|
if (seachAllType["intermediary"] === 6) {
|
|
seachAllType["keyword"] = seachVal.value
|
|
let seachObj = setSeachId()
|
|
getDataList(seachAllType, seachObj.count == 0 ? false : true)
|
|
} else {
|
|
searchInit(seachVal.value)
|
|
}
|
|
route.push({
|
|
path: routeInfo.path,
|
|
query: {
|
|
keyword: seachVal.value,
|
|
isNeedHousing: routeInfo.query.isNeedHousing,
|
|
},
|
|
})
|
|
}
|
|
|
|
//筛选词条
|
|
let typeText = ["地理位置", "出租方式", "租金", "租期", "性别要求", "发布时间", "其他"]
|
|
|
|
//显示筛选组件
|
|
let showSelectModule = ref(false)
|
|
|
|
//选中地区
|
|
let selectData = reactive({data: []})
|
|
let selectTabCheck = reactive({
|
|
id: "",
|
|
title: "",
|
|
data: [],
|
|
})
|
|
|
|
//最新发布选项
|
|
let listSort = shallowReactive({
|
|
type: [
|
|
{title: "最新发布", type: "timestamp"},
|
|
{title: "热门", type: "hotnum"},
|
|
{title: "价格从低到高", type: "rentasc"},
|
|
{title: "价格从高到低", type: "rentdesc"},
|
|
],
|
|
checkType: "timestamp",
|
|
check: "最新发布",
|
|
})
|
|
//搜索列表排序
|
|
let listSortCheck = item => {
|
|
let obj = listSort.type[item]
|
|
listSort.checkType = obj.type
|
|
listSort.check = obj.title
|
|
setSeachConditions("orderby", obj.type)
|
|
}
|
|
|
|
let seachArea = {} //区域找房
|
|
//获取区域下列数据
|
|
let getLocationData = data => {
|
|
for (let item in data) {
|
|
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
|
|
if (item.length > 1) {
|
|
seachArea.data[item.substring(0, 1) - 1].data.push({
|
|
title: data[item],
|
|
id: item,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
//更新当前数据数量
|
|
let setListCount = (item, num) => {
|
|
if (item.tabType === "intermediary") {
|
|
seachKey.key["intermediary"]["count"] = num
|
|
} else if (item.tabType === "person") {
|
|
seachKey.key["personal"]["count"] = num
|
|
} else if (item.tabType === "apartment") {
|
|
seachKey.key["studentapartment"]["count"] = num
|
|
}
|
|
}
|
|
|
|
watchEffect(() => {
|
|
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
|
|
if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
|
|
})
|
|
defineExpose({
|
|
searchInit,
|
|
setListCount,
|
|
checkPageType,
|
|
})
|
|
|
|
// 跳转我的页面
|
|
const gouser = tab => {
|
|
if (!store.state["user"]["uid"]) {
|
|
store.state.showloginmodal = true
|
|
return
|
|
}
|
|
route.push(`/user?tab=${tab}`)
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.dis-f {
|
|
display: flex;
|
|
}
|
|
|
|
.jus-x {
|
|
justify-content: center;
|
|
}
|
|
|
|
.al-item {
|
|
align-items: center;
|
|
}
|
|
|
|
.pos-r {
|
|
position: relative;
|
|
}
|
|
|
|
.body-maxWidth {
|
|
width: 1200px;
|
|
min-width: 1200px;
|
|
}
|
|
|
|
.s-w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.jus-bet {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mg-t-35 {
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.seach-select-h {
|
|
max-height: 500px !important;
|
|
}
|
|
|
|
.select-box {
|
|
max-height: 0;
|
|
transition: max-height 0.4s ease-in-out;
|
|
}
|
|
|
|
.show-box-pd {
|
|
padding: 0 20px;
|
|
transition: all 0.1s linear;
|
|
}
|
|
|
|
.seach-info-box {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
|
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
|
|
|
.seach-select-info {
|
|
padding: 25px 0px;
|
|
|
|
.show-box {
|
|
width: 100% !important;
|
|
height: 40px !important;
|
|
min-height: 40px !important;
|
|
border-radius: 0 !important;
|
|
border-bottom: 1px solid #ebebeb !important;
|
|
}
|
|
|
|
.box:hover {
|
|
background-color: rgba(242, 242, 242, 1);
|
|
}
|
|
.box {
|
|
width: 1160px;
|
|
min-height: 60px;
|
|
background: inherit;
|
|
background-color: rgba(246, 246, 246, 1);
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
color: #555555;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
|
|
.icon-img {
|
|
width: 6px;
|
|
transform: rotate(90deg);
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.down-icon {
|
|
transform: rotate(270deg);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.text-tps {
|
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
|
font-weight: 650;
|
|
color: #000000;
|
|
}
|
|
|
|
.text-icon {
|
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
color: #d7d7d7;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-box {
|
|
height: 45px;
|
|
width: 100%;
|
|
background: #62b1ff;
|
|
position: relative;
|
|
border-radius: 16px 16px 0 0;
|
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 17px;
|
|
color: #ffffff;
|
|
|
|
.btm-line {
|
|
height: 4px;
|
|
width: 102px;
|
|
background: inherit;
|
|
background-color: rgba(253, 223, 109, 1);
|
|
border: none;
|
|
border-radius: 53px;
|
|
}
|
|
.btm-line-mg {
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.select-top-bos-show {
|
|
-moz-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
|
|
-webkit-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
|
|
box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
|
|
}
|
|
|
|
.select-top-btn-bg {
|
|
background: #fff !important;
|
|
height: 50px !important;
|
|
width: 200px;
|
|
border-radius: 16px 16px 0 0;
|
|
-moz-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
|
|
-webkit-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
|
|
box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
|
|
}
|
|
|
|
.select-top-btn {
|
|
height: 45px;
|
|
width: 180px !important;
|
|
line-height: 45px;
|
|
background: #fff !important;
|
|
border-radius: 16px 16px 0 0;
|
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 17px;
|
|
color: #000000 !important;
|
|
text-align: center;
|
|
bottom: 0;
|
|
z-index: 66;
|
|
}
|
|
|
|
.bg-f {
|
|
background: #fff !important;
|
|
}
|
|
|
|
.first {
|
|
bottom: 0;
|
|
left: 0;
|
|
background: #62b1ff;
|
|
|
|
.second-select {
|
|
position: absolute;
|
|
background: #fff;
|
|
top: 0;
|
|
right: -4px;
|
|
height: 45px;
|
|
width: 30px;
|
|
z-index: 88;
|
|
|
|
.box {
|
|
border-radius: 0 0 16px 0;
|
|
background: #62b1ff;
|
|
height: 45px;
|
|
width: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.first-no-select {
|
|
border-radius: 0px 0px 16px 0 !important;
|
|
width: 180px;
|
|
left: 14px;
|
|
z-index: 88;
|
|
}
|
|
|
|
.second {
|
|
left: 200px;
|
|
bottom: 0;
|
|
background: #62b1ff;
|
|
|
|
.first-select {
|
|
position: absolute;
|
|
background: #fff;
|
|
top: 0;
|
|
left: -4px;
|
|
height: 45px;
|
|
width: 30px;
|
|
|
|
.box {
|
|
border-radius: 0 0 0 16px;
|
|
background: #62b1ff;
|
|
height: 45px;
|
|
width: 30px;
|
|
}
|
|
}
|
|
|
|
.third-select {
|
|
position: absolute;
|
|
background: #fff;
|
|
top: 0;
|
|
right: -4px;
|
|
height: 45px;
|
|
width: 30px;
|
|
z-index: 88;
|
|
|
|
.box {
|
|
border-radius: 0 0 16px 0;
|
|
background: #62b1ff;
|
|
height: 45px;
|
|
width: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.third {
|
|
left: 400px;
|
|
bottom: 0;
|
|
background: #62b1ff;
|
|
|
|
.second-select-third-box {
|
|
position: absolute;
|
|
background: #fff;
|
|
top: 0;
|
|
left: -4px;
|
|
height: 45px;
|
|
width: 30px;
|
|
z-index: 88;
|
|
|
|
.box {
|
|
border-radius: 0 0 0 16px;
|
|
background: #62b1ff;
|
|
height: 45px;
|
|
width: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.four {
|
|
left: 600px;
|
|
bottom: 0;
|
|
background: #62b1ff;
|
|
|
|
.second-select-third-box {
|
|
position: absolute;
|
|
background: #fff;
|
|
top: 0;
|
|
left: -4px;
|
|
height: 45px;
|
|
width: 30px;
|
|
z-index: 88;
|
|
|
|
.box {
|
|
border-radius: 0 0 0 16px;
|
|
background: #62b1ff;
|
|
height: 45px;
|
|
width: 30px;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-btn:hover {
|
|
color: #bcd7f3;
|
|
}
|
|
|
|
.top-btn {
|
|
width: 200px;
|
|
height: 45px;
|
|
position: absolute;
|
|
border-radius: 16px 16px 0 0;
|
|
cursor: pointer;
|
|
line-height: 45px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.apartment-btm {
|
|
padding: 25px 20px !important;
|
|
}
|
|
|
|
.btm-list {
|
|
padding: 0 20px 25px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
color: #555555;
|
|
font-size: 15px;
|
|
|
|
.btm-btn {
|
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
margin-left: 10px;
|
|
|
|
.img {
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.count {
|
|
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
|
font-weight: 700;
|
|
color: #000000;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.sort-text {
|
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.input-box {
|
|
height: 92px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(246, 246, 246, 1);
|
|
border-radius: 16px;
|
|
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
|
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
|
transform: translateY(-35px);
|
|
padding: 20px;
|
|
|
|
.mg-l-10 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.tool-btn:hover {
|
|
border-color: rgba(200, 200, 200, 1);
|
|
}
|
|
|
|
.tool-btn {
|
|
width: 150px;
|
|
height: 48px;
|
|
background: inherit;
|
|
background-color: rgba(246, 246, 246, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(235, 235, 235, 1);
|
|
border-radius: 8px;
|
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #000000;
|
|
cursor: pointer;
|
|
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
|
|
.input-s:hover {
|
|
border-color: rgb(200, 200, 200);
|
|
}
|
|
|
|
.input-s {
|
|
width: 560px;
|
|
height: 48px;
|
|
background: inherit;
|
|
background-color: rgba(246, 246, 246, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(235, 235, 235, 1);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
|
|
.el-input__wrapper {
|
|
border-radius: 8px;
|
|
box-shadow: 0px 0px 0px !important;
|
|
}
|
|
}
|
|
|
|
.map-box {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: inherit;
|
|
background-color: rgba(246, 246, 246, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(235, 235, 235, 1);
|
|
border-radius: 155px;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
|
|
.img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.dropdown-text {
|
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7f7f7f;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.type-icon {
|
|
width: 6px;
|
|
height: 14px;
|
|
background: inherit;
|
|
background-color: rgba(80, 227, 194, 1);
|
|
border: none;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
|
|
.el-dropdown-menu {
|
|
width: 150px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
padding: 10px;
|
|
}
|
|
|
|
.dropdown-check-text {
|
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
}
|
|
|
|
::v-deep .el-input__wrapper {
|
|
color: #333333 !important;
|
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 16px !important;
|
|
text-align: left;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 0px 0px !important;
|
|
background-color: rgba(246, 246, 246, 1);
|
|
}
|
|
|
|
::v-deep .el-dropdown-menu__item {
|
|
--el-dropdown-menuItem-hover-color: #7f7f7f;
|
|
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
|
|
}
|
|
</style>
|