956 lines
31 KiB
Vue
956 lines
31 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>
|
|
个人房源 {{ 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>
|
|
求房源{{ 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>
|
|
中介房源 {{ 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>
|
|
品牌公寓 {{ 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" 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">
|
|
<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">
|
|
<div class="dropdown-text"
|
|
:class="{ 'dropdown-check-text': listSort.checkType === items.type }"
|
|
@click="listSortCheck(items)">{{
|
|
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, 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
|
|
}
|
|
})
|
|
|
|
//选项卡
|
|
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()
|
|
//根据类型初始化筛选参数
|
|
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())) return
|
|
getDataList(seachAllType)
|
|
}
|
|
|
|
let getDataList = props.getDataList
|
|
|
|
//搜索内容
|
|
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
|
|
|
|
//页面判断
|
|
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'] = ''
|
|
}
|
|
getDataList(seachAllType)
|
|
}
|
|
|
|
|
|
//搜索key
|
|
let seachKey = reactive({
|
|
key: {
|
|
personal: {},
|
|
intermediary: {},
|
|
studentapartment: {}
|
|
}
|
|
})
|
|
|
|
//搜索数据
|
|
let seachAllType = reactive({
|
|
keyword: '',
|
|
location: [],
|
|
searchid: '',
|
|
intermediary: 0
|
|
})
|
|
|
|
//直接输入url
|
|
if (isNeedHousing.value) {
|
|
tabType.value = 'need'
|
|
seachAllType['intermediary'] = 6
|
|
}
|
|
|
|
//切换选项重置输入框内容
|
|
let setSeachVal = () => {
|
|
seachAllType['searchid'] = setPageKey()
|
|
seachVal.value = seachKey.key.keyword
|
|
}
|
|
|
|
//设置搜索数据
|
|
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
|
|
}
|
|
getDataList(seachAllType)
|
|
}
|
|
|
|
//设置当前搜索key
|
|
let setPageKey = () => {
|
|
return tabType.value === 'person' ? seachKey.key.personal.searchid : tabType.value === 'intermediary' ? seachKey.key.intermediary.searchid : tabType.value === 'apartment' ? seachKey.key.studentapartment.searchid : ''
|
|
}
|
|
|
|
//搜索初始化
|
|
let searchInit = (data) => {
|
|
api.search({ keyword: data }).then(res => {
|
|
if (res.code === 200) {
|
|
seachKey.key = res.data
|
|
seachAllType.searchid = setPageKey()
|
|
getDataList(seachAllType)
|
|
} else {
|
|
ElMessage({
|
|
message: res.message,
|
|
center: true,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
//搜索数据
|
|
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
|
|
getDataList(seachAllType)
|
|
} 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) => {
|
|
listSort.checkType = item.type
|
|
listSort.check = item.title
|
|
setSeachConditions('orderby', item.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 {
|
|
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;
|
|
|
|
.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: 50px;
|
|
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;
|
|
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 {
|
|
width: 200px;
|
|
height: 45px;
|
|
position: absolute;
|
|
border-radius: 16px 16px 0 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
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 {
|
|
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>
|
|
|