908 lines
30 KiB
Vue
908 lines
30 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.title)" v-for="(item, i) in list" :key="i">
|
|
<div class="dis-f al-item">{{ item.title }} <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" :list="selectTabCheck.data" :watchData="watchData">
|
|
</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 ? 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.title === items.title }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
|
|
{{ items.title }}
|
|
</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.title)" v-for="(item, i) in list" :key="i">
|
|
<div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
|
|
v-show="selectTabCheck.id === item.id && selectTabCheck.id">  >  
|
|
<div>
|
|
{{
|
|
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" :list="selectTabCheck.data" :watchData="watchData">
|
|
</checkBoxGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dis-f pad-t-b-15 bor-b-das" :class="{'housing-pd':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:25px 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">
|
|
<span class="tab-icon">~</span>
|
|
<input type="text" class="input" v-model="rentObj.max">
|
|
<span class="unit-box">HK$/月</span>
|
|
</div>
|
|
<div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min||rentObj.max">
|
|
<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="hireDate.id = item.id">{{ 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="gender.id = item.id">{{ 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="releaseObj.id = item.id">{{
|
|
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">
|
|
<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">{{ counti }}</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">
|
|
最新发布
|
|
<img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, getCurrentInstance,defineProps,watchEffect } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
const props=defineProps({
|
|
count:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
})
|
|
|
|
//当前数据数量
|
|
let counti = ref(0)
|
|
watchEffect(()=>{
|
|
counti.value=props.count
|
|
console.log(counti.value)
|
|
})
|
|
|
|
let list = [{
|
|
title: '不限',
|
|
id: ''
|
|
}, {
|
|
title: '港岛',
|
|
id: 1,
|
|
data: [{
|
|
title: '上环',
|
|
id: 1
|
|
}, {
|
|
title: '铜锣湾',
|
|
id: 2
|
|
}, {
|
|
title: '天后',
|
|
id: 3
|
|
}, {
|
|
title: '北角',
|
|
id: 4
|
|
}]
|
|
}, {
|
|
title: '九龙',
|
|
id: 2,
|
|
data: [{
|
|
title: '1',
|
|
id: '1'
|
|
}, {
|
|
title: '2',
|
|
id: '2'
|
|
}, {
|
|
title: '3',
|
|
id: '3'
|
|
}]
|
|
}]
|
|
//按区域/学校选择的地区
|
|
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 = [{ title: '不限' }, { title: '港大' }, { title: '科大' }, { title: '中大' }, { title: '城大' }, { title: '理工' }, { title: '浸会' }, { title: '教大' }, { title: '岭南' }, { title: '123' }, { title: '123' },]
|
|
let setSchoolData = () => {
|
|
let arr = []
|
|
let num = 0
|
|
for (let i = 0; i < shcoolData.length; i++) {
|
|
if (!arr[num]) {
|
|
arr[num] = []
|
|
}
|
|
if (arr[num].length < 9) arr[num].push(shcoolData[i])
|
|
|
|
if (arr[num].length === 9) {
|
|
num++
|
|
}
|
|
}
|
|
shcoolData = arr
|
|
}
|
|
setSchoolData()
|
|
//选择学校区域属性
|
|
let setSchoolObj = (obj) => {
|
|
schoolSelectObj.id = obj.id
|
|
schoolSelectObj.title = obj.title
|
|
}
|
|
|
|
//学校轮播组件
|
|
let prevSchoolData = () => {
|
|
const schoolData = proxy.$refs.schoolData
|
|
schoolPages.value--
|
|
schoolData.prev()
|
|
}
|
|
|
|
let nextSchoolData = () => {
|
|
const schoolData = proxy.$refs.schoolData
|
|
schoolPages.value++
|
|
schoolData.next()
|
|
}
|
|
|
|
//点击区域/学校选项
|
|
let setSelectData = (id, data = [], title) => {
|
|
selectTabCheck.id = id;
|
|
selectTabCheck.title = title
|
|
selectTabCheck.data = data;
|
|
selectData.data = []
|
|
showSelect.value = true
|
|
}
|
|
//取消按钮
|
|
let closeSeach = () => {
|
|
selectTabCheck.id = ''
|
|
selectData.data = []
|
|
showSelect.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
|
|
}
|
|
//监听选项
|
|
let watchData = (data) => {
|
|
// selectData.data = data
|
|
// console.log(selectData)
|
|
}
|
|
|
|
//监听路由
|
|
const route = useRoute()
|
|
let routePath = ref('')
|
|
routePath.value = route.path
|
|
|
|
//底部删除按钮
|
|
let deleteSelect = (id) => {
|
|
selectData.data.splice(id, 1)
|
|
}
|
|
|
|
|
|
|
|
//出租方式
|
|
let hireTypeArr = reactive([
|
|
{ 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 hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选
|
|
|
|
let setHireId = (title) => {
|
|
hireTypeObj.hireId = title
|
|
hireTypeObj.id = ''
|
|
hireTypeObj.title = ''
|
|
}
|
|
|
|
let dropdownCommand = (obj) => {
|
|
hireTypeObj.id = obj.id
|
|
hireTypeObj.title = obj.title
|
|
}
|
|
|
|
//租金
|
|
let rentObj = reactive({ min: '', max: '' })
|
|
|
|
//租期
|
|
let hireData = reactive([{ title: '不限', id: '' }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
|
|
let hireDate = reactive({ id: '', title: '' })
|
|
|
|
//性别
|
|
let genderData = reactive([{ title: '不限', id: '' }, { title: '女', id: 1 }, { title: '男', id: 2 }])
|
|
let gender = reactive({ id: '' })
|
|
|
|
//发布时间
|
|
let releaseTime = reactive([{ title: '不限', id: '' }, { title: '三天', id: 1 }, { title: '一周', id: 2 }, { title: '一个月内', id: 3 }, { title: '两个月内', id: 4 }, { title: '三个月内', id: 5 }])
|
|
let releaseObj = reactive({ id: '' })
|
|
|
|
//其他
|
|
let otherData = reactive([{ title: '认证房源', id: '' }, { title: '有电梯', id: 1 }, { title: '有阳台', id: 2 }])
|
|
let otherCheck = reactive({ list: [] })
|
|
</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;
|
|
}
|
|
.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: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 5px;
|
|
}
|
|
}
|
|
|
|
.min-btn {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.btn-check {
|
|
color: #50E3C2 !important;
|
|
border: 1px solid #50E3C2;
|
|
background: #eefcf9;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.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: #50e3c2;
|
|
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;
|
|
}
|
|
|
|
.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>
|
|
|