1036 lines
34 KiB
Vue
1036 lines
34 KiB
Vue
<template>
|
|
<div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
|
|
<div class="select-box s-w-50 bor-r">
|
|
<div class="dis-f bor-b-das" :class="{ 'al-item housing-pd': routePath === '/needHousing' }">
|
|
<div class="tab-title">{{ routePath === '/needHousing' ? '目标区域' : '地理位置' }}</div>
|
|
<!-- 中介/个人房源页面 -->
|
|
<div class="tab-text" v-if="routePath !== '/needHousing'">
|
|
<div class="dis-f">
|
|
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
|
|
@click="selectPosition = 'region'">按区域</div>
|
|
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'school' }"
|
|
@click="selectPosition = 'school'">按学校</div>
|
|
</div>
|
|
<div class="select-tab-info">
|
|
<img :src="selectPosition === 'school' ? require('../../assets/homeImage/schoolRegionBg.svg') : require('../../assets/homeImage/checkBG.svg')"
|
|
class="img" alt="">
|
|
<div class="info-box" v-show="selectPosition === 'region'">
|
|
<div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
|
|
@click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
|
|
<div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
|
|
v-show="selectTabCheck.id === item.id && selectTabCheck.id"> > 
|
|
<div :class="{ 'check-data': selectData.data && selectData.data.length > 0 }">
|
|
{{
|
|
selectData.data && selectData.data.length === 0 ? '不限' :
|
|
selectData.data && selectData.data.length
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="../../assets/homeImage/selectInfoTabIcon.svg"
|
|
v-show="selectTabCheck.id !== item.id" class="img" alt="">
|
|
<img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id"
|
|
class="img" alt="">
|
|
</div>
|
|
<div class="hid-box">
|
|
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
|
|
:closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data">
|
|
</checkBoxGroup>
|
|
</div>
|
|
</div>
|
|
<div class="school-info-box" v-show="selectPosition === 'school'">
|
|
<div class="lef-btn" @click="prevSchoolData">
|
|
<img :src="schoolPages === 0 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
|
|
class="img" alt="">
|
|
</div>
|
|
<div class="right-btn" @click="nextSchoolData">
|
|
<img :src="schoolPages === shcoolData.length - 1 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
|
|
class="img" alt="">
|
|
</div>
|
|
<el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
|
|
indicator-position="none" class="s-w-100" ref="schoolData">
|
|
<el-carousel-item v-for="(item, i) in shcoolData" :key="i">
|
|
<div class="school-carousel-box">
|
|
<div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
|
|
class="carousel-info-box"
|
|
:class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
|
|
{{ items.name }}
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 求房源 -->
|
|
<div class="need-housing-box dis-f al-item" v-if="routePath === '/needHousing'">
|
|
<div class="select-tab-info" style="margin-top:0;">
|
|
<div class="housing-info-box info-box" v-show="selectPosition === 'region'"
|
|
style="position: relative;padding: 0;height:30px;width: 420px;">
|
|
<div class="check-none dis-f al-item btn"
|
|
:class="[{ 'btn-check': selectTabCheck.id === item.id }]" style="margin-right:10px;"
|
|
@click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
|
|
<div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
|
|
v-show="selectTabCheck.id === item.id && selectTabCheck.id"> > 
|
|
<div :class="{'select-num':selectData.data && selectData.data.length}">
|
|
{{
|
|
selectData.data && selectData.data.length === 0 ? '不限' :
|
|
selectData.data && selectData.data.length
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img :src="selectTabCheck.id === item.id ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
|
|
class="img" :class="{ 'mg-l-30': selectTabCheck.id === item.id }" alt=""
|
|
v-show="i !== 0">
|
|
</div>
|
|
<div class="hid-box">
|
|
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
|
|
:closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data">
|
|
</checkBoxGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f pad-t-b-15 bor-b-das" :class="{ 'housing-pd pd-t-25': routePath === '/needHousing' }">
|
|
<div class="tab-title">{{ routePath === '/needHousing' ? '求租方式' : '出租方式' }}</div>
|
|
<div class="tab-text dis-f al-item" style="padding-bottom:0;">
|
|
<div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
|
|
<div v-if="item.title !== '不限'">
|
|
<el-dropdown trigger="click">
|
|
<span class="dropdown-btn jus-x dis-f al-item"
|
|
:class="{ 'btn-check': hireTypeObj.hireId === item.title }"
|
|
@click="setHireId(item.title)">
|
|
{{ item.title }}<span v-show="hireTypeObj.hireId === item.title"> > {{
|
|
hireTypeObj.title || '不限' }}</span>
|
|
<img :src="hireTypeObj.hireId === item.title ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
|
|
class="img" :class="{ 'mg-l-30': hireTypeObj.hireId === item.title }" alt="">
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu class="pd-10 el-dropdown-menu">
|
|
<el-dropdown-item v-for="(items, j) in item.hireType" :key="j">
|
|
<div class="dropdown-text" @click="dropdownCommand(items)"
|
|
:class="{ 'dropdown-check-text': hireTypeObj.id === items.id }">{{
|
|
items.title
|
|
}}
|
|
<div class="type-icon" v-show="hireTypeObj.id === items.id"></div>
|
|
</div>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': hireTypeObj.hireId === item.title }"
|
|
v-if="item.title === '不限'" @click="setHireId(item.title)">{{
|
|
item.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f al-item" style="padding:30px 0;">
|
|
<div class="tab-title">{{ routePath === '/needHousing' ? '租金预算' : '租金' }}</div>
|
|
<div class="dis-f al-item rent-box jus-bet">
|
|
<div class="dis-f al-item">
|
|
<input type="text" class="input" v-model="rentObj.min" @blur="setRent">
|
|
<span class="tab-icon">~</span>
|
|
<input type="text" class="input" v-model="rentObj.max" @blur="setRent">
|
|
<span class="unit-box">HK$/月</span>
|
|
</div>
|
|
<div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min || rentObj.max" @click="cleanRent">
|
|
<div class="img-box dis-f jus-x al-item">
|
|
<img class="img" src="../../assets/homeImage/closeIcon.svg" alt="">
|
|
</div>
|
|
清除金额
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="select-box s-w-50">
|
|
<div class="dis-f bor-b-das">
|
|
<div class="tab-title">租期</div>
|
|
<div class="select-btn-box">
|
|
<div class="dis-f">
|
|
<div class="btn jus-x al-item dis-f" v-for="(item, i) in hireData" :key="i"
|
|
:class="{ 'btn-check': hireDate.id === item.id }" @click="setHireDate(item)">{{ item.title
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f bor-b-das pd-t-20">
|
|
<div class="tab-title">{{ routePath === '/needHousing' ? '求租者性别' : '性别' }}</div>
|
|
<div class="select-btn-box">
|
|
<div class="dis-f">
|
|
<div class="btn jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
|
|
:class="{ 'btn-check': gender.id === item.id }" @click="setGender(item)">{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f bor-b-das pd-t-20">
|
|
<div class="tab-title">发布时间</div>
|
|
<div class="select-btn-box">
|
|
<div class="dis-f">
|
|
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in releaseTime" :key="i"
|
|
:class="{ 'btn-check': releaseObj.id === item.id }" @click="setReleaseObj(item)">{{
|
|
item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f pd-t-20">
|
|
<div class="tab-title">其他</div>
|
|
<div class="select-btn-box">
|
|
<div class="dis-f">
|
|
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in otherData" :key="i">
|
|
<el-checkbox-group v-model="otherCheck.list" @change="setOtherCheck">
|
|
<el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btm-list">
|
|
<div class="dis-f al-item">
|
|
共<span class="count">{{ count || 0 }}</span>条个人房源 <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">
|
|
<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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
|
|
import store from '../../store/index';
|
|
|
|
|
|
//数据包
|
|
let configData = reactive({ data: {} })
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
const props = defineProps({
|
|
setSeachCondition: {
|
|
type: Function
|
|
}
|
|
})
|
|
|
|
let setSeachCondition = props.setSeachCondition
|
|
|
|
//最新发布选项
|
|
let listSort = shallowReactive({
|
|
type: [
|
|
{ title: '最新发布', type: 'new' },
|
|
{ title: '热门', type: 'hot' },
|
|
{ title: '价格从低到高', type: 'sort' },
|
|
{ title: '加个从高到低' }
|
|
],
|
|
checkType: 'new',
|
|
check: '最新发布'
|
|
})
|
|
|
|
//列表总数
|
|
const count = inject('count')
|
|
|
|
let list = shallowReactive([{
|
|
name: '不限',
|
|
id: ''
|
|
}, {
|
|
name: '港岛',
|
|
id: 1,
|
|
data: [] //{title: '上环',id: 1}, {title: '铜锣湾',id: 2}, { title: '天后',id: 3}, {title: '北角',id: 4}
|
|
}, {
|
|
name: '九龙',
|
|
id: 2,
|
|
data: []
|
|
}])
|
|
//设置区域数据
|
|
let setRegionList = () => {
|
|
let arr = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
|
|
arr.map((res, i) => {
|
|
list[i] = res
|
|
})
|
|
list.unshift({
|
|
name: '不限',
|
|
id: ''
|
|
})
|
|
}
|
|
|
|
//按区域/学校选择的地区
|
|
let selectData = reactive({ data: [] })
|
|
let selectTabCheck = reactive({
|
|
id: '',
|
|
title: '',
|
|
data: []
|
|
})
|
|
|
|
//区域状态
|
|
let selectPosition = ref('region')
|
|
let showSelect = ref(false)
|
|
|
|
//学校区域状态
|
|
let schoolSelectObj = reactive({ id: '', title: '不限' })
|
|
let schoolPages = ref(0) //页数
|
|
let shcoolData = shallowReactive([])
|
|
let setSchoolData = () => {
|
|
let arr = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
|
|
let num = 0
|
|
for (let i = 0; i < arr.length; i++) {
|
|
if (!shcoolData[num]) {
|
|
shcoolData[num] = []
|
|
}
|
|
if (shcoolData[num].length < 9) shcoolData[num].push(arr[i])
|
|
|
|
if (shcoolData[num].length === 9) {
|
|
num++
|
|
}
|
|
}
|
|
}
|
|
|
|
//选择学校区域属性
|
|
let setSchoolObj = (obj) => {
|
|
schoolSelectObj.id = obj.id
|
|
schoolSelectObj.title = obj.title
|
|
setSeachCondition('school', obj.id)
|
|
}
|
|
|
|
//学校轮播组件
|
|
let prevSchoolData = () => {
|
|
if (schoolPages.value === 0) return
|
|
const schoolData = proxy.$refs.schoolData
|
|
schoolPages.value--
|
|
schoolData.prev()
|
|
}
|
|
|
|
let nextSchoolData = () => {
|
|
if (schoolPages.value === shcoolData.length - 1) return
|
|
const schoolData = proxy.$refs.schoolData
|
|
schoolPages.value++
|
|
schoolData.next()
|
|
}
|
|
|
|
//点击区域/学校选项
|
|
let clearSelectTabCheck=ref(true)
|
|
let setSelectData = (id, data = [], title) => {
|
|
showSelect.value = true
|
|
console.log(id ,selectTabCheck.id, data, title)
|
|
|
|
if (id === selectTabCheck.id){
|
|
clearSelectTabCheck.value=false
|
|
return
|
|
}
|
|
clearSelectTabCheck.value=true
|
|
selectTabCheck.id = id;
|
|
selectTabCheck.title = title
|
|
selectTabCheck.data = data;
|
|
selectData.data = []
|
|
if(id===''){
|
|
setSeachCondition('location', [])
|
|
}
|
|
}
|
|
//取消按钮
|
|
let closeSeach = () => {
|
|
console.log(selectTabCheck,selectData)
|
|
showSelect.value = false
|
|
clearSelectTabCheck.value=false
|
|
}
|
|
//确认按钮
|
|
let selectSeach = (data = []) => {
|
|
let arr = []
|
|
data.map(res => {
|
|
selectTabCheck.data.map(item => {
|
|
if (res === item.id) {
|
|
arr.push(item)
|
|
}
|
|
})
|
|
})
|
|
selectData.data = arr
|
|
showSelect.value = false
|
|
setSeachCondition('location', data)
|
|
}
|
|
|
|
|
|
//监听路由
|
|
const route = useRoute()
|
|
let routePath = ref('')
|
|
routePath.value = route.path
|
|
|
|
//底部删除按钮
|
|
let deleteSelect = (id) => {
|
|
selectData.data.splice(id, 1)
|
|
}
|
|
|
|
//搜索列表排序
|
|
let listSortCheck = (item) => {
|
|
listSort.checkType = item.type
|
|
listSort.check = item.title
|
|
setSeachCondition('orderby', item.type)
|
|
}
|
|
|
|
|
|
|
|
//出租方式
|
|
let hireTypeArr = shallowReactive([{ hireType: [], title: '不限' }, { title: '合租', hireType: [] }, { hireType: [], title: '整租' }])
|
|
// { hireType: [{ id: '', title: '不限' }, { id: '1', title: '独卫套房' }, { id: '2', title: '房间' },], title: '合租' },
|
|
// { hireType: [{ id: '', title: '不限' }, { id: '3', title: '3' }, { id: '4', title: '3' },], title: '整租' }
|
|
|
|
//设置出租方式
|
|
let setHireTypeArr = (type, id) => {
|
|
let arr = []
|
|
type.map((item, index) => {
|
|
arr.push({
|
|
id: item.id,
|
|
title: item.name
|
|
})
|
|
})
|
|
return arr
|
|
}
|
|
|
|
|
|
let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选
|
|
|
|
let setHireId = (title) => {
|
|
if (hireTypeObj.hireId != title) {
|
|
hireTypeObj.id = ''
|
|
hireTypeObj.title = ''
|
|
}
|
|
hireTypeObj.hireId = title
|
|
}
|
|
|
|
let dropdownCommand = (obj) => {
|
|
hireTypeObj.id = obj.id
|
|
hireTypeObj.title = obj.title
|
|
setSeachCondition('types', obj.id)
|
|
}
|
|
|
|
//租金
|
|
let rentObj = reactive({ min: '', max: '' })
|
|
|
|
let setRent = () => {
|
|
setSeachCondition('rent', rentObj)
|
|
}
|
|
|
|
//清空租金
|
|
let cleanRent=()=>{
|
|
rentObj.min=''
|
|
rentObj.max=''
|
|
setSeachCondition('rent', rentObj)
|
|
}
|
|
|
|
//租期
|
|
let hireData = reactive([{ title: '不限', id: 0 }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
|
|
let hireDate = reactive({ id: 0, title: '' })
|
|
//设置租期
|
|
let setHireDate = (item) => {
|
|
hireDate.id = item.id
|
|
setSeachCondition('rentalduration', item.id)
|
|
}
|
|
|
|
//性别
|
|
let genderData = reactive([{ title: '不限', id: 0 }, { title: '女', id: 1 }, { title: '男', id: 2 }])
|
|
let gender = reactive({ id: 0 })
|
|
//设置性别
|
|
let setGender = (item) => {
|
|
gender.id = item.id
|
|
setSeachCondition('gender', item.id)
|
|
}
|
|
|
|
//发布时间
|
|
let releaseTime = reactive([{ title: '不限', id: 0 }, { title: '三天', id: 'triduum' }, { title: '一周', id: 'hebdomad' }, { title: '一个月内', id: 'onemonth' }, { title: '两个月内', id: 'twomonth' }, { title: '三个月内', id: 'trimester' }])
|
|
let releaseObj = reactive({ id: 0 })
|
|
|
|
//设置发布时间
|
|
let setReleaseObj = (item) => {
|
|
releaseObj.id = item.id
|
|
setSeachCondition('publish', item.id)
|
|
}
|
|
|
|
//其他
|
|
let otherData = reactive([{ title: '认证房源', id: 'isverified' }, { title: '有电梯', id: 'iselevator' }, { title: '有阳台', id: 'issunshinearea' }])
|
|
let otherCheck = reactive({ list: [] })
|
|
|
|
//设置其他
|
|
let setOtherCheck = (data) => {
|
|
// data.indexOf('isverified')!==-1?setSeachCondition('isverified',1):setSeachCondition('isverified',0)
|
|
// data.indexOf('iselevator')!==-1?setSeachCondition('iselevator',1):setSeachCondition('iselevator',0)
|
|
// data.indexOf('issunshinearea')!==-1?setSeachCondition('issunshinearea',1):setSeachCondition('issunshinearea',0)
|
|
setSeachCondition('', data)
|
|
}
|
|
|
|
watchEffect(() => {
|
|
configData.data = store.state.indexData.config
|
|
if (configData.data) {
|
|
hireTypeArr[1].hireType = setHireTypeArr(store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : [], 1)
|
|
hireTypeArr[2].hireType = setHireTypeArr(store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : [], 2)
|
|
setRegionList()//设置地区数据
|
|
setSchoolData()//设置学校数据
|
|
// list
|
|
// seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
|
|
// hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
|
|
// allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
|
|
// seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
|
|
}
|
|
})
|
|
</script>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.dis-f {
|
|
display: flex;
|
|
}
|
|
|
|
.jus-x {
|
|
justify-content: center;
|
|
}
|
|
|
|
.al-item {
|
|
align-items: center;
|
|
}
|
|
|
|
.s-w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.bor-r {
|
|
border-right: 1px dashed #ebebeb;
|
|
}
|
|
|
|
.s-w-50 {
|
|
width: 50%;
|
|
}
|
|
|
|
img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.pad-t-b-15 {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.pd-10 {
|
|
padding: 10px;
|
|
}
|
|
|
|
.bor-b-das {
|
|
border-bottom: 1px dashed #ebebeb;
|
|
}
|
|
|
|
.housing-pd {
|
|
padding: 5px 0 25px 0;
|
|
}
|
|
.pd-t-25{
|
|
padding-top:25px;
|
|
}
|
|
|
|
.housing-pd-25 {
|
|
padding: 0 25px;
|
|
}
|
|
|
|
.jus-bet {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.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);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(235, 235, 235, 1);
|
|
border-radius: 10px;
|
|
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
|
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.select-box {
|
|
padding: 20px 24px 0px 25px;
|
|
|
|
.needHousing-box {
|
|
height: 50px;
|
|
}
|
|
|
|
.select-tab-info {
|
|
position: relative;
|
|
margin-top: 5px;
|
|
|
|
.school-info-box {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 0px;
|
|
|
|
.school-carousel-box {
|
|
height: 100%;
|
|
padding: 0 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.mg-r-15 {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.carousel-info-box {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.info-box-check {
|
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.lef-btn {
|
|
width: 30px;
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-right: 1px dashed #ebebeb;
|
|
border-left: 1px solid #ebebeb;
|
|
border-top: 1px solid #ebebeb;
|
|
border-bottom: 1px solid #ebebeb;
|
|
background: #fff;
|
|
border-radius: 10px 0 0 10px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 66;
|
|
|
|
.img {
|
|
width: 10px;
|
|
height: 10px;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.right-btn {
|
|
border-left: 1px dashed #ebebeb;
|
|
border-right: 1px solid #ebebeb;
|
|
border-top: 1px solid #ebebeb;
|
|
border-bottom: 1px solid #ebebeb;
|
|
background: #fff;
|
|
border-radius: 0 10px 10px 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 30px;
|
|
height: 50px;
|
|
z-index: 66;
|
|
|
|
.img {
|
|
width: 10px;
|
|
height: 10px;
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.housing-info-box {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 30px;
|
|
position: relative;
|
|
top: 0 !important;
|
|
}
|
|
|
|
.info-box {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px;
|
|
|
|
.hid-box {
|
|
position: absolute;
|
|
z-index: 666;
|
|
left: 0;
|
|
top: 56px;
|
|
width: 100%;
|
|
}
|
|
|
|
.check-text {
|
|
font-family: 'ArialMT', 'Arial', sans-serif;
|
|
font-weight: 600 !important;
|
|
font-style: normal;
|
|
font-size: 13px;
|
|
letter-spacing: normal;
|
|
color: #000 !important;
|
|
vertical-align: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.check-none {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
line-height: 20px;
|
|
vertical-align: none;
|
|
text-align: center;
|
|
line-height: normal;
|
|
text-transform: none;
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
|
|
.check-data {
|
|
width: 24px;
|
|
height: 16px;
|
|
background: inherit;
|
|
background-color: rgba(0, 0, 0, 1);
|
|
border: none;
|
|
border-radius: 13px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
color: #FFFFFF;
|
|
line-height: 16px;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.img {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img {
|
|
width: 459px;
|
|
height: 55px;
|
|
}
|
|
}
|
|
|
|
.tab-title {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #B5B5B5;
|
|
text-align: left;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin-right: 35px;
|
|
width: 70px;
|
|
}
|
|
|
|
.info-bor-b {
|
|
border-bottom: 1px dashed #ebebeb;
|
|
}
|
|
|
|
.need-housing-box {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
text-align: center;
|
|
height: 50px;
|
|
}
|
|
|
|
.tab-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
text-align: center;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.pd-t-20 {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.select-btn-box {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #7F7F7F;
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 5px 10px;
|
|
height: 30px;
|
|
display: flex;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
border-radius: 10px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown-btn {
|
|
height: 30px;
|
|
display: flex;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
border-radius: 10px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
|
|
.mg-l-30 {
|
|
margin-left: 30px !important;
|
|
}
|
|
|
|
.img {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.min-btn {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.btn-check {
|
|
color: #50E3C2 !important;
|
|
border: 1px solid #50E3C2;
|
|
background: #eefcf9;
|
|
}
|
|
|
|
.select-num {
|
|
padding:0px 10px;
|
|
background: inherit;
|
|
background-color: rgba(80, 227, 194, 1);
|
|
border: none;
|
|
border-radius: 13px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.rent-box {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #555555;
|
|
width: 455px;
|
|
|
|
.clean-btn {
|
|
width: 96px;
|
|
height: 30px;
|
|
background: inherit;
|
|
background-color: rgba(246, 246, 246, 1);
|
|
border: none;
|
|
border-radius: 50px;
|
|
font-family: 'ArialMT', 'Arial', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 13px;
|
|
letter-spacing: normal;
|
|
color: #333333;
|
|
cursor: pointer;
|
|
|
|
.img-box {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 1px solid #333;
|
|
margin-right: 5px;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
|
|
.img {
|
|
position: absolute;
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-icon {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.unit-box {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.input {
|
|
width: 100px;
|
|
height: 40px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(179, 179, 179, 1);
|
|
border-radius: 10px;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
.btm-list {
|
|
padding: 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;
|
|
}
|
|
}
|
|
|
|
/deep/ .el-dropdown-menu__item {
|
|
--el-dropdown-menuItem-hover-color: #7F7F7F;
|
|
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
|
|
}
|
|
|
|
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
}
|
|
|
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
|
background: #50e3c2;
|
|
border-color: #50e3c2;
|
|
}
|
|
</style>
|
|
|