修改头部样式
This commit is contained in:
A1300399510
parent
ac9b6ac89e
commit
8bf4ac8da1
1
dist/css/858.98c36c75.css
vendored
1
dist/css/858.98c36c75.css
vendored
File diff suppressed because one or more lines are too long
1
dist/css/949.994eae55.css
vendored
Normal file
1
dist/css/949.994eae55.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
dist/img/indexBg.4080d945.jpg
vendored
Normal file
BIN
dist/img/indexBg.4080d945.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 835 KiB |
BIN
dist/img/indexBg.c2720447.jpg
vendored
BIN
dist/img/indexBg.c2720447.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 160 KiB |
2
dist/index.html
vendored
2
dist/index.html
vendored
@ -1,4 +1,4 @@
|
||||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.e0e9f2f6.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.3e5bad53.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.5ea40abf.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display:none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&web_id=1281224882"></script><script>var _hmt = _hmt || [];
|
||||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.e0e9f2f6.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.8899532f.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.9d411680.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display:none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&web_id=1281224882"></script><script>var _hmt = _hmt || [];
|
||||
(function () {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746";
|
||||
|
||||
1
dist/js/858.b361201d.js
vendored
1
dist/js/858.b361201d.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/949.6369878e.js
vendored
Normal file
1
dist/js/949.6369878e.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/app.3e5bad53.js
vendored
1
dist/js/app.3e5bad53.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/app.8899532f.js
vendored
Normal file
1
dist/js/app.8899532f.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 835 KiB |
@ -359,8 +359,8 @@ defineExpose({
|
||||
}
|
||||
|
||||
.location-box {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
background: inherit;
|
||||
background-color: rgba(68, 68, 68, 1);
|
||||
border: none;
|
||||
@ -386,7 +386,7 @@ defineExpose({
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: -47px;
|
||||
bottom: -39px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
@ -408,7 +408,7 @@ defineExpose({
|
||||
width: 16px;
|
||||
// height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 5px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,25 +1,21 @@
|
||||
<template>
|
||||
<div class="dis-f jus-x al-item" style="position: relative;z-index: 333;">
|
||||
<div class="body-maxWidth" :class="{ 'seachPage': !props.seachPage }">
|
||||
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333;">
|
||||
<div class="body-maxWidth" :class="{seachPage: !props.seachPage}">
|
||||
<div class="s-w-100 seach-box-bg">
|
||||
<div class="seach-box">
|
||||
<div class="top-seach dis-f al-item" v-if="props.seachPage">
|
||||
<div style="position: absolute;left: -8px;top: 20px;">
|
||||
<div style="position: absolute; left: -8px; top: 20px;">
|
||||
<div class="location-box dis-f jus-x al-item">
|
||||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="">
|
||||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="" />
|
||||
香港
|
||||
</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
|
||||
<div class="flexacenter">
|
||||
<el-popover v-model:visible="historyShow" placement="bottom" :width="560" trigger="click"
|
||||
:show-arrow="false"
|
||||
popper-style="background: transparent;padding:0;box-shadow: none;border: none;transform: translateX(50px);">
|
||||
<div class="flexacenter seek-input">
|
||||
<el-popover v-model:visible="historyShow" placement="bottom" :width="560" trigger="click" :show-arrow="false" popper-style="background: transparent;padding:0;box-shadow: none;border: none;transform: translateX(50px);">
|
||||
<template #reference>
|
||||
<el-input class="search-input" v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID"
|
||||
@keyup.enter='handleKeyword(pitchValue["keyword"])' style="height:48px;width:460px;"
|
||||
maxlength="15"></el-input>
|
||||
<el-input class="search-input " v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID" @keyup.enter="handleKeyword(pitchValue['keyword'])" style="height: 40px; width: 460px;" maxlength="15"></el-input>
|
||||
</template>
|
||||
<div class="dis-f al-item pos-r">
|
||||
<div class="seach-hiosory-box scrollbar">
|
||||
@ -27,57 +23,51 @@
|
||||
<div v-if="historyArr.length != 0" style="margin-bottom: 30px;">
|
||||
<div class="title">历史搜索</div>
|
||||
<div class="info-box">
|
||||
<div :class="flexacenter" v-for="(item, i) in historyArr" :key="i"
|
||||
class="btn flexacenter" @click="handleKeyword(item)">
|
||||
<div :class="flexacenter" v-for="(item, i) in historyArr" :key="i" class="btn flexacenter" @click="handleKeyword(item)">
|
||||
<div class="flexflex">{{ item }}</div>
|
||||
<img class="btn-icon" src="../../assets/homeImage/closeIcon.svg"
|
||||
@click.stop="deleteSeachVal(i)" alt="">
|
||||
<img>
|
||||
<img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" alt="" />
|
||||
<img />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">热门推荐</div>
|
||||
<div class="info-box">
|
||||
<div v-for="(item, i) in hotArr.data" :key="i" class="btn"
|
||||
@click="handleKeyword(item)">{{ item }}
|
||||
</div>
|
||||
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="handleKeyword(item)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="seach-btn dis-f al-item jus-x"
|
||||
@click="pitchValue['keyword'] ? handleKeyword(pitchValue['keyword']) : ''">
|
||||
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
|
||||
搜索
|
||||
<div class="seach-btn dis-f al-item jus-x" @click="pitchValue['keyword'] ? handleKeyword(pitchValue['keyword']) : ''">
|
||||
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="" />
|
||||
<!-- 搜索 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-btn dis-f jus-x al-item add-btn" style="position: relative;">
|
||||
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
|
||||
<img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
|
||||
发布房源
|
||||
<choosing-identity></choosing-identity>
|
||||
</div>
|
||||
|
||||
<el-popover placement="bottom-end" popper-class="consult-popover flexcenter" :width="300"
|
||||
trigger="hover" :show-arrow="false"
|
||||
popper-style="background-color:transparent;border: none;box-shadow: none;padding:0;">
|
||||
<el-popover placement="bottom-end" popper-class="consult-popover flexcenter" :width="300" trigger="hover" :show-arrow="false" popper-style="background-color:transparent;border: none;box-shadow: none;padding:0;">
|
||||
<template #reference>
|
||||
<div class="tool-btn consult-btn flexcenter">
|
||||
<img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png">
|
||||
<img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png" />
|
||||
咨询方同学
|
||||
</div>
|
||||
</template>
|
||||
<div class="consult-pop flexacenter">
|
||||
<div class="consult-title flexacenter">欢迎联系 <b>{{ wechat['nickname'] }}</b> 咨询房源</div>
|
||||
<div class="consult-title flexacenter">
|
||||
欢迎联系 <b>{{ wechat["nickname"] }}</b> 咨询房源
|
||||
</div>
|
||||
<div class="consult-QRcode flexcenter">
|
||||
<img class="consult-QRcode-img" :src="wechat['personalqrcode']" />
|
||||
</div>
|
||||
<div class="consult-hint">微信扫码添加好友</div>
|
||||
<div class="consult-remark flexacenter">备注：<b>寄托租房</b></div>
|
||||
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
@ -85,39 +75,34 @@
|
||||
<!-- 展示的 展开和隐藏按钮 -->
|
||||
<div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'">
|
||||
<b>筛选</b>
|
||||
<div class="screen-btn-text" style="margin-left:0;">：学校附近</div> | <div class="screen-btn-text">品牌
|
||||
</div> | <div class="screen-btn-text">租金</div> | <div class="screen-btn-text">房型</div> | <div
|
||||
class="screen-btn-text">楼型</div>
|
||||
<div class="screen-btn-text" style="margin-left: 0;">：学校附近</div>
|
||||
|
|
||||
<div class="screen-btn-text">品牌</div>
|
||||
|
|
||||
<div class="screen-btn-text">租金</div>
|
||||
|
|
||||
<div class="screen-btn-text">房型</div>
|
||||
|
|
||||
<div class="screen-btn-text">楼型</div>
|
||||
<img class="triangle" src="@/assets/img/publicImage/triangle-black.svg" />
|
||||
</div>
|
||||
|
||||
<div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }">
|
||||
<div class="option-area flexflex" :class="{'option-area-unfold': state == 'unfold'}">
|
||||
<div class="option-left">
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">学校附近</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['school'] }"
|
||||
@click="selectOption('nearSchool', 0)">不限</div>
|
||||
<div class="item flexcenter" v-for="item in nearSchoolList"
|
||||
:class="{ 'pitch': item['id'] == pitchValue['school'] }"
|
||||
@click="selectOption('nearSchool', item.id)">{{ item['name']
|
||||
}}</div>
|
||||
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['school']}" @click="selectOption('nearSchool', 0)">不限</div>
|
||||
<div class="item flexcenter" v-for="item in nearSchoolList" :class="{pitch: item['id'] == pitchValue['school']}" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title flexacenter">租金</div>
|
||||
<div class="option-box flexacenter flex1 option-input-box">
|
||||
<div class="flex1">
|
||||
<input class="option-input" type="number" v-model="pitchValue['rent_min']"
|
||||
@blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span
|
||||
style="font-size: 18px;">~</span><input class="option-input" type="number"
|
||||
v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput"
|
||||
@keyup.enter="rentBlur" />HK$/月
|
||||
</div>
|
||||
<div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" />HK$/月</div>
|
||||
|
||||
<div class="eliminate flexcenter" @click="clearingAmount"
|
||||
v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
|
||||
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg">
|
||||
<div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
|
||||
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
|
||||
清除金额
|
||||
</div>
|
||||
</div>
|
||||
@ -126,47 +111,36 @@
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">房型</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['roomtype'] }"
|
||||
@click="selectOption('roomType', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{ 'pitch': item['id'] == pitchValue['roomtype'] }"
|
||||
v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{
|
||||
item['name'] }}</div>
|
||||
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['roomtype']}" @click="selectOption('roomType', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{pitch: item['id'] == pitchValue['roomtype']}" v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="option-right">
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">品牌</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['companyid'] }"
|
||||
@click="selectOption('brand', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{ 'pitch': item['id'] == pitchValue['companyid'] }"
|
||||
v-for="item in brandList" @click="selectOption('brand', item.id)">
|
||||
{{ item['name'] }}</div>
|
||||
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['companyid']}" @click="selectOption('brand', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{pitch: item['id'] == pitchValue['companyid']}" v-for="item in brandList" @click="selectOption('brand', item.id)">
|
||||
{{ item["name"] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-item flexflex">
|
||||
<div class="option-title">楼型</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['roomlistings'] }"
|
||||
@click="selectOption('roomlistings', 0)">不限</div>
|
||||
<div class="item flexcenter"
|
||||
:class="{ 'pitch': item['id'] == pitchValue['roomlistings'] }"
|
||||
v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">
|
||||
{{
|
||||
item['name'] }}</div>
|
||||
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['roomlistings']}" @click="selectOption('roomlistings', 0)">不限</div>
|
||||
<div class="item flexcenter" :class="{pitch: item['id'] == pitchValue['roomlistings']}" v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">
|
||||
{{ item["name"] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收起按钮 -->
|
||||
<div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'">
|
||||
收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" />
|
||||
</div>
|
||||
<div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'">收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" /></div>
|
||||
|
||||
<div class="screen-footer flexacenter" v-if="props.seachPage">
|
||||
<div class="quantity flexacenter">
|
||||
@ -178,16 +152,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, toRefs, watchEffect, reactive, defineProps, nextTick } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import store from '../../store/index';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import choosingIdentity from '@/components/edit/choosingIdentity.vue'
|
||||
|
||||
const usestore = useStore();
|
||||
const { wechat } = toRefs(usestore.state);
|
||||
<script setup>
|
||||
import {ref, toRefs, watchEffect, reactive, defineProps, nextTick} from "vue"
|
||||
import {useStore} from "vuex"
|
||||
import store from "../../store/index"
|
||||
import {useRoute, useRouter} from "vue-router"
|
||||
import choosingIdentity from "@/components/edit/choosingIdentity.vue"
|
||||
|
||||
const usestore = useStore()
|
||||
const {wechat} = toRefs(usestore.state)
|
||||
const router = useRouter()
|
||||
|
||||
const route = useRoute()
|
||||
@ -195,36 +169,35 @@ const route = useRoute()
|
||||
const props = defineProps({
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
seachPage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['handleTransfer'])
|
||||
const emit = defineEmits(["handleTransfer"])
|
||||
|
||||
|
||||
let state = ref('pack') // 筛选状态 unfold 展开 pack 收起
|
||||
let state = ref("pack") // 筛选状态 unfold 展开 pack 收起
|
||||
|
||||
//搜索框
|
||||
let historyShow = ref(false);
|
||||
let setHistoryShow = () => historyShow.value = historyShow.value // 修改历史记录框的显示状态 通过input的 焦点状态判断的
|
||||
let historyShow = ref(false)
|
||||
let setHistoryShow = () => (historyShow.value = historyShow.value) // 修改历史记录框的显示状态 通过input的 焦点状态判断的
|
||||
|
||||
let historyArr = ref([])//历史查找记录
|
||||
let hotArr = reactive({ data: [] })
|
||||
let historyArr = ref([]) //历史查找记录
|
||||
let hotArr = reactive({data: []})
|
||||
|
||||
//获取历史搜索记录
|
||||
historyArr.value = JSON.parse(localStorage.getItem('historyArr')) || []
|
||||
historyArr.value = JSON.parse(localStorage.getItem("historyArr")) || []
|
||||
|
||||
let nearSchoolList = reactive([{ name: "不限", id: 0 }]); //学校附近
|
||||
let nearSchoolList = reactive([{name: "不限", id: 0}]) //学校附近
|
||||
|
||||
let roomTypeList = reactive([]); // 房型
|
||||
let roomTypeList = reactive([]) // 房型
|
||||
|
||||
let roomlistingsList = reactive([]); // 楼型
|
||||
let roomlistingsList = reactive([]) // 楼型
|
||||
|
||||
let brandList = reactive([]); // 品牌数据
|
||||
let brandList = reactive([]) // 品牌数据
|
||||
|
||||
watchEffect(() => {
|
||||
nearSchoolList = store.state.apartment.school || []
|
||||
@ -234,46 +207,44 @@ watchEffect(() => {
|
||||
hotArr.data = store.state.indexData.hotSearcheWords
|
||||
})
|
||||
|
||||
|
||||
let pitchValue = ref({
|
||||
companyid: 0,
|
||||
roomtype: 0,
|
||||
rent_min: null, // 租金
|
||||
rent_max: null, // 租金
|
||||
rent_min: null, // 租金
|
||||
rent_max: null, // 租金
|
||||
school: 0,
|
||||
roomlistings: 0,
|
||||
keyword: "",
|
||||
})
|
||||
|
||||
if (route.query['companyid']) {
|
||||
pitchValue.value['companyid'] = route.query['companyid']
|
||||
if (route.query["companyid"]) {
|
||||
pitchValue.value["companyid"] = route.query["companyid"]
|
||||
state.value = "unfold"
|
||||
}
|
||||
|
||||
|
||||
// 是否点击里 清除金额按钮 因为输入金额后再点击清除按钮是会先请求有金额的列表
|
||||
let clearingAmountState = false
|
||||
// 点击清除金额
|
||||
const clearingAmount = () => {
|
||||
clearingAmountState = true
|
||||
pitchValue.value['rent_min'] = null
|
||||
pitchValue.value['rent_max'] = null
|
||||
emit('handleTransfer', pitchValue)
|
||||
pitchValue.value["rent_min"] = null
|
||||
pitchValue.value["rent_max"] = null
|
||||
emit("handleTransfer", pitchValue)
|
||||
}
|
||||
|
||||
// 金额的失去焦点事件
|
||||
const rentBlur = () => {
|
||||
setTimeout(() => {
|
||||
if (!clearingAmountState) emit('handleTransfer', pitchValue)
|
||||
if (!clearingAmountState) emit("handleTransfer", pitchValue)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
// 搜索框输入中
|
||||
const rentInput = () => clearingAmountState = false
|
||||
const rentInput = () => (clearingAmountState = false)
|
||||
|
||||
// 点击历史搜索和热门推荐
|
||||
const handleKeyword = value => {
|
||||
sessionStorage.setItem('houseingPageType', '')
|
||||
sessionStorage.setItem("houseingPageType", "")
|
||||
router.push(`/seachPage?keyword=${value}`)
|
||||
if (historyArr.value.indexOf(value) == -1 && value) {
|
||||
historyArr.value.unshift(value)
|
||||
@ -283,54 +254,54 @@ const handleKeyword = value => {
|
||||
|
||||
//搜索数据
|
||||
let seachList = () => {
|
||||
if (historyArr.value.indexOf(pitchValue.value['keyword'] && pitchValue.value['keyword']) == -1) {
|
||||
historyArr.value.unshift(pitchValue.value['keyword'])
|
||||
if (historyArr.value.indexOf(pitchValue.value["keyword"] && pitchValue.value["keyword"]) == -1) {
|
||||
historyArr.value.unshift(pitchValue.value["keyword"])
|
||||
storingHistory()
|
||||
}
|
||||
|
||||
historyShow.value = false
|
||||
|
||||
emit('handleTransfer', pitchValue)
|
||||
emit("handleTransfer", pitchValue)
|
||||
}
|
||||
|
||||
// 存储历史记录 并判断长度
|
||||
const storingHistory = () => {
|
||||
if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10)
|
||||
localStorage.setItem('historyArr', JSON.stringify(historyArr.value));
|
||||
localStorage.setItem("historyArr", JSON.stringify(historyArr.value))
|
||||
}
|
||||
|
||||
// 选择选项
|
||||
const selectOption = (type, value) => {
|
||||
switch (type) {
|
||||
case 'nearSchool':
|
||||
pitchValue.value['school'] = value
|
||||
break;
|
||||
case 'roomType':
|
||||
pitchValue.value['roomtype'] = value
|
||||
break;
|
||||
case 'brand':
|
||||
pitchValue.value['companyid'] = value
|
||||
break;
|
||||
case 'roomlistings':
|
||||
pitchValue.value['roomlistings'] = value
|
||||
break;
|
||||
case "nearSchool":
|
||||
pitchValue.value["school"] = value
|
||||
break
|
||||
case "roomType":
|
||||
pitchValue.value["roomtype"] = value
|
||||
break
|
||||
case "brand":
|
||||
pitchValue.value["companyid"] = value
|
||||
break
|
||||
case "roomlistings":
|
||||
pitchValue.value["roomlistings"] = value
|
||||
break
|
||||
default:
|
||||
break;
|
||||
break
|
||||
}
|
||||
nextTick(() => {
|
||||
emit('handleTransfer', pitchValue)
|
||||
emit("handleTransfer", pitchValue)
|
||||
})
|
||||
}
|
||||
|
||||
//删除历史记录
|
||||
let deleteSeachVal = (i) => {
|
||||
let deleteSeachVal = i => {
|
||||
historyArr.value.splice(i, 1)
|
||||
localStorage.setItem('historyArr', JSON.stringify(historyArr.value));
|
||||
localStorage.setItem("historyArr", JSON.stringify(historyArr.value))
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
* {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
@ -368,7 +339,6 @@ let deleteSeachVal = (i) => {
|
||||
box-shadow: none;
|
||||
padding-top: 0;
|
||||
|
||||
|
||||
.seach-box {
|
||||
transform: translate(0, 0);
|
||||
box-shadow: none;
|
||||
@ -391,7 +361,7 @@ let deleteSeachVal = (i) => {
|
||||
padding-top: 3px;
|
||||
|
||||
.seach-box {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
// transform: translate(0, 3px);
|
||||
border-radius: 16px;
|
||||
|
||||
@ -405,8 +375,8 @@ let deleteSeachVal = (i) => {
|
||||
}
|
||||
|
||||
.location-box {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
width: 62px;
|
||||
height: 32px;
|
||||
background: inherit;
|
||||
background-color: rgba(68, 68, 68, 1);
|
||||
border-radius: 8px;
|
||||
@ -415,10 +385,10 @@ let deleteSeachVal = (i) => {
|
||||
-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);
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
// font-weight: 650;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
line-height: 48px;
|
||||
position: absolute;
|
||||
z-index: 666;
|
||||
@ -432,7 +402,7 @@ let deleteSeachVal = (i) => {
|
||||
position: absolute;
|
||||
// bottom: -46px;
|
||||
// left: -6px;
|
||||
bottom: -47px;
|
||||
bottom: -39px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
@ -446,7 +416,7 @@ let deleteSeachVal = (i) => {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
@ -457,16 +427,14 @@ let deleteSeachVal = (i) => {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 5px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tool-btn {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
height: 40px;
|
||||
border-radius: 68px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
@ -474,8 +442,6 @@ let deleteSeachVal = (i) => {
|
||||
line-height: 48px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
|
||||
&.add-btn {
|
||||
background: rgba(253, 218, 85, 1);
|
||||
margin-left: 20px;
|
||||
@ -512,7 +478,7 @@ let deleteSeachVal = (i) => {
|
||||
|
||||
.search-input {
|
||||
/deep/ .el-input__wrapper {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
|
||||
&:hover {
|
||||
border-color: #c0c4cc;
|
||||
@ -525,7 +491,7 @@ let deleteSeachVal = (i) => {
|
||||
border-right: none;
|
||||
|
||||
.el-input__inner {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
|
||||
&::placeholder {
|
||||
color: #7f7f7f;
|
||||
@ -540,7 +506,7 @@ let deleteSeachVal = (i) => {
|
||||
color: #d7d7d7;
|
||||
line-height: 21px;
|
||||
height: 60px;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
cursor: pointer;
|
||||
border-top: 1px solid #ebebeb;
|
||||
@ -559,7 +525,6 @@ let deleteSeachVal = (i) => {
|
||||
height: 6px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pack-up {
|
||||
@ -587,7 +552,7 @@ let deleteSeachVal = (i) => {
|
||||
color: #555555;
|
||||
font-size: 15px;
|
||||
height: 72px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
|
||||
.b {
|
||||
font-weight: 700;
|
||||
@ -595,15 +560,13 @@ let deleteSeachVal = (i) => {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.option-area {
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height .25s linear 0s;
|
||||
|
||||
transition: height 0.25s linear 0s;
|
||||
|
||||
&.option-area-unfold {
|
||||
height: 335px;
|
||||
@ -630,7 +593,7 @@ let deleteSeachVal = (i) => {
|
||||
|
||||
.option-title {
|
||||
font-size: 14px;
|
||||
color: #B5B5B5;
|
||||
color: #b5b5b5;
|
||||
width: 90px;
|
||||
line-height: 30px;
|
||||
}
|
||||
@ -642,7 +605,7 @@ let deleteSeachVal = (i) => {
|
||||
padding: 5px 10px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
@ -651,7 +614,7 @@ let deleteSeachVal = (i) => {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
color: #7F7F7F;
|
||||
color: #7f7f7f;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
@ -659,8 +622,8 @@ let deleteSeachVal = (i) => {
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
color: #50E3C2;
|
||||
border: 1px solid #50E3C2;
|
||||
color: #50e3c2;
|
||||
border: 1px solid #50e3c2;
|
||||
background: #eefcf9;
|
||||
}
|
||||
}
|
||||
@ -677,7 +640,7 @@ let deleteSeachVal = (i) => {
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
color: #7f7f7f;
|
||||
cursor: pointer;
|
||||
|
||||
.eliminate-icon {
|
||||
@ -700,14 +663,11 @@ let deleteSeachVal = (i) => {
|
||||
&:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.seach-hiosory-box {
|
||||
@ -727,7 +687,7 @@ let deleteSeachVal = (i) => {
|
||||
padding: 20px 25px;
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
@ -737,7 +697,7 @@ let deleteSeachVal = (i) => {
|
||||
.info-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
@ -758,7 +718,6 @@ let deleteSeachVal = (i) => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -772,7 +731,6 @@ let deleteSeachVal = (i) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-popover.el-popper.consult-popover {
|
||||
@ -781,7 +739,7 @@ let deleteSeachVal = (i) => {
|
||||
height: 300px;
|
||||
border-radius: 10px;
|
||||
padding-top: 45px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
|
||||
@ -835,5 +793,27 @@ let deleteSeachVal = (i) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.seek-input {
|
||||
border-radius: 65px;
|
||||
overflow: hidden;
|
||||
background-color: #f6f6f6;
|
||||
border: solid 1px var(--el-input-border-color, var(--el-border-color));
|
||||
|
||||
::v-deep .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.seach-btn {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
border-radius: 50% !important;
|
||||
margin-right: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
{{ `· ${itemData.gender}` }}
|
||||
{{ itemData.leaseterm ? `· ${itemData.leaseterm}` : "" }}
|
||||
</span>
|
||||
<span v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span>
|
||||
<span class="ellipsis" style="width: 272px;display: block;" v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span>
|
||||
</div>
|
||||
<div style="padding: 0 10px; margin-top: 15px;" class="dis-f al-item" v-if="itemData.type === 'housing'">
|
||||
<img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" />
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '530px' : '260px' }">
|
||||
<!-- <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '530px' : '260px' }"> -->
|
||||
<div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '470px' : '260px' }">
|
||||
<img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="bannerLists.data.length">
|
||||
<img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length">
|
||||
<div class="info-box">
|
||||
@ -37,7 +38,8 @@
|
||||
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length">
|
||||
<!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> -->
|
||||
<div class="dis-f jus-x al-item" v-if="bannerLists.data.length">
|
||||
<div class="body-maxWidth">
|
||||
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
|
||||
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
|
||||
@ -49,7 +51,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm-seach-btn-box dis-f al-item jus-x" v-if="pageTopBarShow">
|
||||
<div class="body-maxWidth dis-f" style="height:48px;">
|
||||
<div class="body-maxWidth dis-f" style="height:40px;">
|
||||
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }"
|
||||
v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
|
||||
|
||||
@ -274,7 +276,7 @@ const goIndex = () => router.push("/")
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -288,7 +290,7 @@ const goIndex = () => router.push("/")
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn {
|
||||
width: 120px;
|
||||
height: 47px;
|
||||
height: 40px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
@ -1,25 +1,23 @@
|
||||
<template>
|
||||
<div class="dis-f jus-x al-item" style="position: relative;z-index: 333;">
|
||||
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333;">
|
||||
<div class="body-maxWidth">
|
||||
<div class="s-w-100 seach-box-bg">
|
||||
<div class="seach-box">
|
||||
<div class="top-seach dis-f al-item">
|
||||
<div style="position: absolute;left: -8px;top: 20px;">
|
||||
<div style="position: absolute; left: -8px; top: 20px;">
|
||||
<div class="location-box dis-f jus-x al-item">
|
||||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="">
|
||||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="" />
|
||||
香港
|
||||
</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div class="dis-f al-item pos-r">
|
||||
<el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'
|
||||
@blur="setHistoryShow" @focus="setHistoryShow"
|
||||
style="height:48px;width:460px;background:rgba(246, 246, 246, 1);border-radius:8px;"></el-input>
|
||||
<div class="dis-f al-item pos-r seek-input">
|
||||
<el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter="seachList" @blur="setHistoryShow" @focus="setHistoryShow" style="height: 40px; width: 460px; background: rgba(246, 246, 246, 1); border-radius: 8px;"></el-input>
|
||||
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
|
||||
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
|
||||
搜索
|
||||
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="" />
|
||||
<!-- 搜索 -->
|
||||
</div>
|
||||
<div class="seach-hiosory-box" :class="{ 'seach-history-h': historyShow }">
|
||||
<div class="seach-hiosory-box" :class="{'seach-history-h': historyShow}">
|
||||
<el-scrollbar height="375px">
|
||||
<div class="seach-history-info">
|
||||
<div>
|
||||
@ -27,19 +25,15 @@
|
||||
历史搜索
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<div v-for="(item, i) in historyArr.data" :key="i" class="btn"
|
||||
@click="setSeachVal(item)">
|
||||
{{ item }} <img src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" class="img" alt="">
|
||||
</div>
|
||||
<div v-for="(item, i) in historyArr.data" :key="i" class="btn" @click="setSeachVal(item)">{{ item }} <img src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" class="img" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:30px;">
|
||||
<div style="margin-top: 30px;">
|
||||
<div class="title">
|
||||
热门推荐
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<div v-for="(item, i) in hotArr.data" :key="i" class="btn"
|
||||
@click="setHotSeach(item)">
|
||||
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="setHotSeach(item)">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
@ -52,25 +46,23 @@
|
||||
<img src="../assets/homeImage/mapImg.png" class="img" alt="">
|
||||
地图找房
|
||||
</div> -->
|
||||
<div class="tool-btn dis-f jus-x al-item add-btn" :class="{ 'mg-l-10': routePath === '/' }"
|
||||
style="position: relative;">
|
||||
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
|
||||
<div class="tool-btn dis-f jus-x al-item add-btn" :class="{'mg-l-10': routePath === '/'}" style="position: relative;">
|
||||
<img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
|
||||
发布房源
|
||||
<choosing-identity></choosing-identity>
|
||||
</div>
|
||||
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
|
||||
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
|
||||
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
|
||||
<div class="dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
|
||||
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="" />
|
||||
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="" />
|
||||
<div class="btn-qrcode">
|
||||
<authentication-info :type="1"></authentication-info>
|
||||
<!-- <img class="bj" src="@/assets/img/publicImage/housing-certification-bj.jpg">
|
||||
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth"> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn"
|
||||
v-if="routePath === '/intermediaryHousing'">
|
||||
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="">
|
||||
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="">
|
||||
<div class="dis-f jus-x al-item authentication-btn intermediary-btn" v-if="routePath === '/intermediaryHousing'">
|
||||
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="" />
|
||||
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="" />
|
||||
<div class="btn-qrcode">
|
||||
<authentication-info :type="2"></authentication-info>
|
||||
<!-- <img class="bj" src="@/assets/img/publicImage/mediation-authentication-bj.jpg">
|
||||
@ -79,19 +71,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="seach-info-box dis-f" v-if="routePath === '/'">
|
||||
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"
|
||||
:checkBtn="checkBtn">
|
||||
</seachInfo>
|
||||
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"
|
||||
:checkBtn="checkBtn"></seachInfo>
|
||||
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
|
||||
:checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
|
||||
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
|
||||
:checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
|
||||
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length" :checkBtn="checkBtn"> </seachInfo>
|
||||
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length" :checkBtn="checkBtn"></seachInfo>
|
||||
<seachInfo title="区域找房" seachType="3" style="margin-top: 30px;" :btn="seachArea.data" :checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
|
||||
<seachInfo title="整租" seachType="2" style="margin-top: 30px;" :btn="allHireType.data" :checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div
|
||||
v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
|
||||
<div v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
|
||||
<selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation"></selectTabBox>
|
||||
</div>
|
||||
</div>
|
||||
@ -99,57 +85,56 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, watchEffect, reactive, defineProps } from 'vue';
|
||||
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
|
||||
import selectTabBox from "../selectTabBox/selectTabBox.vue";
|
||||
import choosingIdentity from '@/components/edit/choosingIdentity.vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import store from '../../store/index';
|
||||
import api from "../../utils/api";
|
||||
import authenticationInfo from './authenticationInfo.vue'
|
||||
import {ref, watchEffect, reactive, defineProps} from "vue"
|
||||
import seachInfo from "../indexSeachInfo/indexSeachInfo.vue"
|
||||
import selectTabBox from "../selectTabBox/selectTabBox.vue"
|
||||
import choosingIdentity from "@/components/edit/choosingIdentity.vue"
|
||||
import {useRouter} from "vue-router"
|
||||
import store from "../../store/index"
|
||||
import api from "../../utils/api"
|
||||
import authenticationInfo from "./authenticationInfo.vue"
|
||||
|
||||
const props = defineProps({
|
||||
getDataList: {
|
||||
type: Function
|
||||
}
|
||||
type: Function,
|
||||
},
|
||||
})
|
||||
|
||||
let getDataList = props.getDataList
|
||||
|
||||
//搜索框
|
||||
let historyShow = ref(false);
|
||||
let historyShow = ref(false)
|
||||
let setHistoryShow = () => {
|
||||
if (historyShow.value) {
|
||||
setTimeout(() => {
|
||||
historyShow.value = !historyShow.value
|
||||
}, 500);
|
||||
}, 500)
|
||||
return
|
||||
}
|
||||
historyShow.value = !historyShow.value
|
||||
}
|
||||
let seachSchoolBtn = reactive({ data: [] });//学校地区
|
||||
let hireType = {};//整租
|
||||
let allHireType = {};//合租
|
||||
let seachArea = {};//区域找房
|
||||
let historyArr = reactive({ data: [] })//历史查找记录
|
||||
let hotArr = reactive({ data: [] })
|
||||
let seachSchoolBtn = reactive({data: []}) //学校地区
|
||||
let hireType = {} //整租
|
||||
let allHireType = {} //合租
|
||||
let seachArea = {} //区域找房
|
||||
let historyArr = reactive({data: []}) //历史查找记录
|
||||
let hotArr = reactive({data: []})
|
||||
let seachAllType = reactive({
|
||||
keyword: '',
|
||||
keyword: "",
|
||||
location: [],
|
||||
orderby: 'timestamp'
|
||||
orderby: "timestamp",
|
||||
})
|
||||
|
||||
|
||||
//获取区域下列数据
|
||||
let getLocationData = (data) => {
|
||||
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
|
||||
id: item,
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -157,7 +142,7 @@ let getLocationData = (data) => {
|
||||
|
||||
//监听路由
|
||||
const route = useRouter()
|
||||
let routePath = ref('')
|
||||
let routePath = ref("")
|
||||
routePath.value = route.currentRoute.value.meta.path
|
||||
|
||||
watchEffect(() => {
|
||||
@ -170,51 +155,51 @@ watchEffect(() => {
|
||||
})
|
||||
|
||||
//获取历史搜索记录
|
||||
historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
|
||||
historyArr.data = JSON.parse(localStorage.getItem("historyArr")) || []
|
||||
|
||||
//搜索数据
|
||||
let seachList = (item) => {
|
||||
let seachList = item => {
|
||||
let string = seachAllType.keyword
|
||||
if (!string.replace(/\s/g, "")) return
|
||||
if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
|
||||
historyArr.data.unshift(seachAllType.keyword)
|
||||
}
|
||||
if(historyArr.data.length>10)historyArr.data.splice(historyArr.data.length-1,1)
|
||||
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
|
||||
sessionStorage.setItem('houseingPageType', routePath.value === '/needHousing' ? '6' : routePath.value === '/intermediaryHousing' ? '1' : routePath.value === '/personHousing' ? '0' : '0')
|
||||
if (historyArr.data.length > 10) historyArr.data.splice(historyArr.data.length - 1, 1)
|
||||
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
|
||||
sessionStorage.setItem("houseingPageType", routePath.value === "/needHousing" ? "6" : routePath.value === "/intermediaryHousing" ? "1" : routePath.value === "/personHousing" ? "0" : "0")
|
||||
route.push({
|
||||
path: '/seachPage',
|
||||
path: "/seachPage",
|
||||
query: {
|
||||
keyword: seachAllType.keyword,
|
||||
isNeedHousing: routePath.value === '/needHousing',
|
||||
}
|
||||
isNeedHousing: routePath.value === "/needHousing",
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//设置点击一级区域
|
||||
let setLocation = (type, data) => {
|
||||
seachAllType[type] = data
|
||||
seachAllType['school'] = ''
|
||||
seachAllType["school"] = ""
|
||||
}
|
||||
|
||||
//设置搜索数据
|
||||
let setSeachConditions = (type, data, second = null) => {
|
||||
if (type === 'rent') {
|
||||
seachAllType['rent_min'] = data.min
|
||||
seachAllType['rent_max'] = data.max
|
||||
} else if (type !== '') {
|
||||
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
|
||||
} 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') {
|
||||
if (type === "school") {
|
||||
seachAllType.location = []
|
||||
}
|
||||
if (type === 'location') {
|
||||
seachAllType.school = ''
|
||||
if (type === "location") {
|
||||
seachAllType.school = ""
|
||||
}
|
||||
if (second) {
|
||||
seachAllType[second.type] = second.id
|
||||
@ -223,23 +208,23 @@ let setSeachConditions = (type, data, second = null) => {
|
||||
}
|
||||
|
||||
//点击历史搜索记录
|
||||
let setSeachVal = (item) => {
|
||||
let setSeachVal = item => {
|
||||
seachAllType.keyword = item
|
||||
seachList()
|
||||
// getDataList(seachAllType)
|
||||
}
|
||||
//删除历史记录
|
||||
let deleteSeachVal=(i)=>{
|
||||
historyArr.data.splice(i,1)
|
||||
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
|
||||
let deleteSeachVal = i => {
|
||||
historyArr.data.splice(i, 1)
|
||||
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
|
||||
}
|
||||
|
||||
//点击热门地区
|
||||
let setHotSeach = (item) => {
|
||||
let setHotSeach = item => {
|
||||
seachAllType.keyword = item
|
||||
if (historyArr.data.indexOf(item) === -1) historyArr.data.unshift(item)
|
||||
if(historyArr.data.length>10)historyArr.data.slice(historyArr.data.length-1,1)
|
||||
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
|
||||
if (historyArr.data.length > 10) historyArr.data.slice(historyArr.data.length - 1, 1)
|
||||
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
|
||||
seachList()
|
||||
}
|
||||
|
||||
@ -248,9 +233,8 @@ let checkBtn = (data, type, areaItem) => {
|
||||
getDataList(type, data, areaItem)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
historyShow
|
||||
historyShow,
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@ -325,7 +309,7 @@ defineExpose({
|
||||
padding-top: 5px;
|
||||
|
||||
.seach-box {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
/* transform: translate(0, 5px); */
|
||||
border-radius: 16px;
|
||||
|
||||
@ -334,23 +318,23 @@ defineExpose({
|
||||
position: relative;
|
||||
justify-content: end;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
.intermediary-btn:hover{
|
||||
.intermediary-btn:hover {
|
||||
background: #f4f7f9 !important;
|
||||
}
|
||||
.intermediary-btn {
|
||||
background: rgba(241, 245, 247, 1) !important;
|
||||
}
|
||||
|
||||
.authentication-btn:hover{
|
||||
background:#f6f5ff;
|
||||
.authentication-btn:hover {
|
||||
background: #f6f5ff;
|
||||
}
|
||||
.authentication-btn {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(244, 243, 255, 1);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 68px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
@ -360,13 +344,13 @@ defineExpose({
|
||||
|
||||
.text-img {
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.code-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 8px;
|
||||
height: 16px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -399,21 +383,21 @@ defineExpose({
|
||||
overflow-y: auto;
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.info-box :hover .img{
|
||||
.info-box :hover .img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
@ -424,8 +408,8 @@ defineExpose({
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top:6px;
|
||||
right:-8px;
|
||||
top: 6px;
|
||||
right: -8px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
@ -443,8 +427,8 @@ defineExpose({
|
||||
}
|
||||
|
||||
.location-box {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
background: inherit;
|
||||
background-color: rgba(68, 68, 68, 1);
|
||||
border: none;
|
||||
@ -454,11 +438,11 @@ defineExpose({
|
||||
-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);
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
line-height: 48px;
|
||||
position: absolute;
|
||||
z-index: 666;
|
||||
@ -470,16 +454,16 @@ defineExpose({
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: -47px;
|
||||
bottom: -39px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
.seach-btn:hover{
|
||||
background:#81c1ff !important;
|
||||
.seach-btn:hover {
|
||||
background: #81c1ff !important;
|
||||
}
|
||||
.seach-btn {
|
||||
width: 100px;
|
||||
height: 48px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: inherit;
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: none;
|
||||
@ -488,7 +472,7 @@ defineExpose({
|
||||
line-height: 48px;
|
||||
cursor: pointer;
|
||||
transform: translateX(-3px);
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
@ -499,7 +483,7 @@ defineExpose({
|
||||
width: 20px;
|
||||
// height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 5px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.map-btn {
|
||||
@ -507,8 +491,8 @@ defineExpose({
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.add-btn:hover{
|
||||
background:#fde177 !important;
|
||||
.add-btn:hover {
|
||||
background: #fde177 !important;
|
||||
}
|
||||
.add-btn {
|
||||
background: rgba(253, 218, 85, 1);
|
||||
@ -522,15 +506,21 @@ defineExpose({
|
||||
|
||||
.tool-btn {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
border-radius: 68px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 48px;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -546,5 +536,21 @@ defineExpose({
|
||||
background: rgba(246, 246, 246, 1);
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.seek-input {
|
||||
border-radius: 65px;
|
||||
overflow: hidden;
|
||||
background-color: #f6f6f6;
|
||||
border: solid 1px var(--el-input-border-color, var(--el-border-color));
|
||||
.seach-btn {
|
||||
border-radius: 50% !important;
|
||||
img {
|
||||
width: 18px !important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user