XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改头部样式

Browse Source
This commit is contained in:
A1300399510
2023-12-04 19:10:31 +08:00
parent ac9b6ac89e
commit 8bf4ac8da1
21 changed files with 300 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/css/858.98c36c75.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/949.994eae55.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/css/app.5ea40abf.css → dist/css/app.9d411680.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/img/indexBg.4080d945.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 835 KiB

BIN
dist/img/indexBg.c2720447.jpg vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 160 KiB

2
dist/index.html vendored
View File

@@ -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&amp;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&amp;web_id=1281224882"></script><script>var _hmt = _hmt || [];
(function () { (function () {
var hm = document.createElement("script"); var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"; hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746";

1
dist/js/858.b361201d.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/949.6369878e.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.3e5bad53.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.8899532f.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/js/detail.e13f5efb.js → dist/js/detail.dce0b4e6.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/edit.a6ad165c.js → dist/js/edit.087e5d6a.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/housing.780433ba.js → dist/js/housing.f8aae58a.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/seachPage.da6679f1.js → dist/js/seachPage.1ee271bf.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/user.f9dd82fb.js → dist/js/user.65367eb6.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/homeImage/indexBg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 160 KiB

After

Width:  |  Height:  |  Size: 835 KiB

8
src/components/apartment/seach.vue
View File

@@ -359,8 +359,8 @@ defineExpose({
} }
.location-box { .location-box {
width: 80px; width: 64px;
height: 40px; height: 32px;
background: inherit; background: inherit;
background-color: rgba(68, 68, 68, 1); background-color: rgba(68, 68, 68, 1);
border: none; border: none;
@@ -386,7 +386,7 @@ defineExpose({
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
bottom: -47px; bottom: -39px;
left: -7px; left: -7px;
} }
@@ -408,7 +408,7 @@ defineExpose({
width: 16px; width: 16px;
// height: 20px; // height: 20px;
object-fit: contain; object-fit: contain;
margin-right: 5px; margin-right: 1px;
} }

312
src/components/apartment/seachModule.vue
View File

@@ -1,25 +1,21 @@
<template> <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" :class="{ 'seachPage': !props.seachPage }"> <div class="body-maxWidth" :class="{seachPage: !props.seachPage}">
<div class="s-w-100 seach-box-bg"> <div class="s-w-100 seach-box-bg">
<div class="seach-box"> <div class="seach-box">
<div class="top-seach dis-f al-item" v-if="props.seachPage"> <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"> <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>
<div class="triangle"></div> <div class="triangle"></div>
</div> </div>
<div class="flexacenter"> <div class="flexacenter seek-input">
<el-popover v-model:visible="historyShow" placement="bottom" :width="560" trigger="click" <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);">
:show-arrow="false"
popper-style="background: transparent;padding:0;box-shadow: none;border: none;transform: translateX(50px);">
<template #reference> <template #reference>
<el-input class="search-input" v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID" <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>
@keyup.enter='handleKeyword(pitchValue["keyword"])' style="height:48px;width:460px;"
maxlength="15"></el-input>
</template> </template>
<div class="dis-f al-item pos-r"> <div class="dis-f al-item pos-r">
<div class="seach-hiosory-box scrollbar"> <div class="seach-hiosory-box scrollbar">
@@ -27,57 +23,51 @@
<div v-if="historyArr.length != 0" style="margin-bottom: 30px;"> <div v-if="historyArr.length != 0" style="margin-bottom: 30px;">
<div class="title">历史搜索</div> <div class="title">历史搜索</div>
<div class="info-box"> <div class="info-box">
<div :class="flexacenter" v-for="(item, i) in historyArr" :key="i" <div :class="flexacenter" v-for="(item, i) in historyArr" :key="i" class="btn flexacenter" @click="handleKeyword(item)">
class="btn flexacenter" @click="handleKeyword(item)">
<div class="flexflex">{{ item }}</div> <div class="flexflex">{{ item }}</div>
<img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" <img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" alt="" />
@click.stop="deleteSeachVal(i)" alt=""> <img />
<img>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="title">热门推荐</div> <div class="title">热门推荐</div>
<div class="info-box"> <div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" <div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="handleKeyword(item)">{{ item }}</div>
@click="handleKeyword(item)">{{ item }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-popover> </el-popover>
<div class="seach-btn dis-f al-item jus-x" <div class="seach-btn dis-f al-item jus-x" @click="pitchValue['keyword'] ? handleKeyword(pitchValue['keyword']) : ''">
@click="pitchValue['keyword'] ? handleKeyword(pitchValue['keyword']) : ''"> <img src="../../assets/homeImage/seachImg.svg" class="img" alt="" />
<img src="../../assets/homeImage/seachImg.svg" class="img" alt=""> <!-- 搜索 -->
搜索
</div> </div>
</div> </div>
<div class="tool-btn dis-f jus-x al-item add-btn" style="position: relative;"> <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> <choosing-identity></choosing-identity>
</div> </div>
<el-popover placement="bottom-end" popper-class="consult-popover flexcenter" :width="300" <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;">
trigger="hover" :show-arrow="false"
popper-style="background-color:transparent;border: none;box-shadow: none;padding:0;">
<template #reference> <template #reference>
<div class="tool-btn consult-btn flexcenter"> <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> </div>
</template> </template>
<div class="consult-pop flexacenter"> <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"> <div class="consult-QRcode flexcenter">
<img class="consult-QRcode-img" :src="wechat['personalqrcode']" /> <img class="consult-QRcode-img" :src="wechat['personalqrcode']" />
</div> </div>
<div class="consult-hint">微信扫码添加好友</div> <div class="consult-hint">微信扫码添加好友</div>
<div class="consult-remark flexacenter">备注：<b>寄托租房</b></div> <div class="consult-remark flexacenter">备注：<b>寄托租房</b></div>
</div> </div>
</el-popover> </el-popover>
</div> </div>
@@ -85,39 +75,34 @@
<!-- 展示的 展开和隐藏按钮 --> <!-- 展示的 展开和隐藏按钮 -->
<div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'"> <div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'">
<b>筛选</b> <b>筛选</b>
<div class="screen-btn-text" style="margin-left:0;">：学校附近</div> | <div class="screen-btn-text">品牌 <div class="screen-btn-text" style="margin-left: 0;">：学校附近</div>
</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">租金</div>
|
<div class="screen-btn-text">房型</div>
|
<div class="screen-btn-text">楼型</div>
<img class="triangle" src="@/assets/img/publicImage/triangle-black.svg" /> <img class="triangle" src="@/assets/img/publicImage/triangle-black.svg" />
</div> </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-left">
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">学校附近</div> <div class="option-title">学校附近</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['school'] }" <div class="item flexcenter" :class="{pitch: 0 == pitchValue['school']}" @click="selectOption('nearSchool', 0)">不限</div>
@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" v-for="item in nearSchoolList"
:class="{ 'pitch': item['id'] == pitchValue['school'] }"
@click="selectOption('nearSchool', item.id)">{{ item['name']
}}</div>
</div> </div>
</div> </div>
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title flexacenter">租金</div> <div class="option-title flexacenter">租金</div>
<div class="option-box flexacenter flex1 option-input-box"> <div class="option-box flexacenter flex1 option-input-box">
<div class="flex1"> <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>
<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" <div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
v-if="pitchValue['rent_min'] || pitchValue['rent_max']"> <img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg">
清除金额 清除金额
</div> </div>
</div> </div>
@@ -126,47 +111,36 @@
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">房型</div> <div class="option-title">房型</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['roomtype'] }" <div class="item flexcenter" :class="{pitch: 0 == pitchValue['roomtype']}" @click="selectOption('roomType', 0)">不限</div>
@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': item['id'] == pitchValue['roomtype'] }"
v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{
item['name'] }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="option-right"> <div class="option-right">
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">品牌</div> <div class="option-title">品牌</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['companyid'] }" <div class="item flexcenter" :class="{pitch: 0 == pitchValue['companyid']}" @click="selectOption('brand', 0)">不限</div>
@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)">
<div class="item flexcenter" :class="{ 'pitch': item['id'] == pitchValue['companyid'] }" {{ item["name"] }}
v-for="item in brandList" @click="selectOption('brand', item.id)"> </div>
{{ item['name'] }}</div>
</div> </div>
</div> </div>
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">楼型</div> <div class="option-title">楼型</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['roomlistings'] }" <div class="item flexcenter" :class="{pitch: 0 == pitchValue['roomlistings']}" @click="selectOption('roomlistings', 0)">不限</div>
@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)">
<div class="item flexcenter" {{ item["name"] }}
:class="{ 'pitch': item['id'] == pitchValue['roomlistings'] }" </div>
v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">
{{
item['name'] }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 收起按钮 --> <!-- 收起按钮 -->
<div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'"> <div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'">收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" /></div>
收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" />
</div>
<div class="screen-footer flexacenter" v-if="props.seachPage"> <div class="screen-footer flexacenter" v-if="props.seachPage">
<div class="quantity flexacenter"> <div class="quantity flexacenter">
@@ -180,14 +154,14 @@
</template> </template>
<script setup> <script setup>
import { ref, toRefs, watchEffect, reactive, defineProps, nextTick } from 'vue'; import {ref, toRefs, watchEffect, reactive, defineProps, nextTick} from "vue"
import { useStore } from 'vuex'; import {useStore} from "vuex"
import store from '../../store/index'; import store from "../../store/index"
import { useRoute, useRouter } from 'vue-router'; import {useRoute, useRouter} from "vue-router"
import choosingIdentity from '@/components/edit/choosingIdentity.vue' import choosingIdentity from "@/components/edit/choosingIdentity.vue"
const usestore = useStore(); const usestore = useStore()
const { wechat } = toRefs(usestore.state); const {wechat} = toRefs(usestore.state)
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
@@ -195,36 +169,35 @@ const route = useRoute()
const props = defineProps({ const props = defineProps({
count: { count: {
type: Number, type: Number,
default: 0 default: 0,
}, },
seachPage: { seachPage: {
type: Boolean, 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 historyShow = ref(false)
let setHistoryShow = () => historyShow.value = historyShow.value // 修改历史记录框的显示状态 通过input的 焦点状态判断的 let setHistoryShow = () => (historyShow.value = historyShow.value) // 修改历史记录框的显示状态 通过input的 焦点状态判断的
let historyArr = ref([])//历史查找记录 let historyArr = ref([]) //历史查找记录
let hotArr = reactive({ data: [] }) 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(() => { watchEffect(() => {
nearSchoolList = store.state.apartment.school || [] nearSchoolList = store.state.apartment.school || []
@@ -234,46 +207,44 @@ watchEffect(() => {
hotArr.data = store.state.indexData.hotSearcheWords hotArr.data = store.state.indexData.hotSearcheWords
}) })
let pitchValue = ref({ let pitchValue = ref({
companyid: 0, companyid: 0,
roomtype: 0, roomtype: 0,
rent_min: null, // 租金 rent_min: null, // 租金
rent_max: null, // 租金 rent_max: null, // 租金
school: 0, school: 0,
roomlistings: 0, roomlistings: 0,
keyword: "", keyword: "",
}) })
if (route.query['companyid']) { if (route.query["companyid"]) {
pitchValue.value['companyid'] = route.query['companyid'] pitchValue.value["companyid"] = route.query["companyid"]
state.value = "unfold" state.value = "unfold"
} }
// 是否点击里 清除金额按钮 因为输入金额后再点击清除按钮是会先请求有金额的列表 // 是否点击里 清除金额按钮 因为输入金额后再点击清除按钮是会先请求有金额的列表
let clearingAmountState = false let clearingAmountState = false
// 点击清除金额 // 点击清除金额
const clearingAmount = () => { const clearingAmount = () => {
clearingAmountState = true clearingAmountState = true
pitchValue.value['rent_min'] = null pitchValue.value["rent_min"] = null
pitchValue.value['rent_max'] = null pitchValue.value["rent_max"] = null
emit('handleTransfer', pitchValue) emit("handleTransfer", pitchValue)
} }
// 金额的失去焦点事件 // 金额的失去焦点事件
const rentBlur = () => { const rentBlur = () => {
setTimeout(() => { setTimeout(() => {
if (!clearingAmountState) emit('handleTransfer', pitchValue) if (!clearingAmountState) emit("handleTransfer", pitchValue)
}, 300) }, 300)
} }
// 搜索框输入中 // 搜索框输入中
const rentInput = () => clearingAmountState = false const rentInput = () => (clearingAmountState = false)
// 点击历史搜索和热门推荐 // 点击历史搜索和热门推荐
const handleKeyword = value => { const handleKeyword = value => {
sessionStorage.setItem('houseingPageType', '') sessionStorage.setItem("houseingPageType", "")
router.push(`/seachPage?keyword=${value}`) router.push(`/seachPage?keyword=${value}`)
if (historyArr.value.indexOf(value) == -1 && value) { if (historyArr.value.indexOf(value) == -1 && value) {
historyArr.value.unshift(value) historyArr.value.unshift(value)
@@ -283,54 +254,54 @@ const handleKeyword = value => {
//搜索数据 //搜索数据
let seachList = () => { let seachList = () => {
if (historyArr.value.indexOf(pitchValue.value['keyword'] && pitchValue.value['keyword']) == -1) { if (historyArr.value.indexOf(pitchValue.value["keyword"] && pitchValue.value["keyword"]) == -1) {
historyArr.value.unshift(pitchValue.value['keyword']) historyArr.value.unshift(pitchValue.value["keyword"])
storingHistory() storingHistory()
} }
historyShow.value = false historyShow.value = false
emit('handleTransfer', pitchValue) emit("handleTransfer", pitchValue)
} }
// 存储历史记录 并判断长度 // 存储历史记录 并判断长度
const storingHistory = () => { const storingHistory = () => {
if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10) 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) => { const selectOption = (type, value) => {
switch (type) { switch (type) {
case 'nearSchool': case "nearSchool":
pitchValue.value['school'] = value pitchValue.value["school"] = value
break; break
case 'roomType': case "roomType":
pitchValue.value['roomtype'] = value pitchValue.value["roomtype"] = value
break; break
case 'brand': case "brand":
pitchValue.value['companyid'] = value pitchValue.value["companyid"] = value
break; break
case 'roomlistings': case "roomlistings":
pitchValue.value['roomlistings'] = value pitchValue.value["roomlistings"] = value
break; break
default: default:
break; break
} }
nextTick(() => { nextTick(() => {
emit('handleTransfer', pitchValue) emit("handleTransfer", pitchValue)
}) })
} }
//删除历史记录 //删除历史记录
let deleteSeachVal = (i) => { let deleteSeachVal = i => {
historyArr.value.splice(i, 1) historyArr.value.splice(i, 1)
localStorage.setItem('historyArr', JSON.stringify(historyArr.value)); localStorage.setItem("historyArr", JSON.stringify(historyArr.value))
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
* { * {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
} }
.dis-f { .dis-f {
@@ -368,7 +339,6 @@ let deleteSeachVal = (i) => {
box-shadow: none; box-shadow: none;
padding-top: 0; padding-top: 0;
.seach-box { .seach-box {
transform: translate(0, 0); transform: translate(0, 0);
box-shadow: none; box-shadow: none;
@@ -391,7 +361,7 @@ let deleteSeachVal = (i) => {
padding-top: 3px; padding-top: 3px;
.seach-box { .seach-box {
background: #FFFFFF; background: #ffffff;
// transform: translate(0, 3px); // transform: translate(0, 3px);
border-radius: 16px; border-radius: 16px;
@@ -405,8 +375,8 @@ let deleteSeachVal = (i) => {
} }
.location-box { .location-box {
width: 80px; width: 62px;
height: 40px; height: 32px;
background: inherit; background: inherit;
background-color: rgba(68, 68, 68, 1); background-color: rgba(68, 68, 68, 1);
border-radius: 8px; border-radius: 8px;
@@ -415,10 +385,10 @@ let deleteSeachVal = (i) => {
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-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); 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-weight: 650;
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #ffffff;
line-height: 48px; line-height: 48px;
position: absolute; position: absolute;
z-index: 666; z-index: 666;
@@ -432,7 +402,7 @@ let deleteSeachVal = (i) => {
position: absolute; position: absolute;
// bottom: -46px; // bottom: -46px;
// left: -6px; // left: -6px;
bottom: -47px; bottom: -39px;
left: -7px; left: -7px;
} }
@@ -446,7 +416,7 @@ let deleteSeachVal = (i) => {
color: #000; color: #000;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
@@ -457,16 +427,14 @@ let deleteSeachVal = (i) => {
width: 20px; width: 20px;
height: 20px; height: 20px;
object-fit: contain; object-fit: contain;
margin-right: 5px; margin-right: 1px;
} }
.tool-btn { .tool-btn {
width: 160px; width: 160px;
height: 48px; height: 40px;
border-radius: 8px; border-radius: 68px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
@@ -474,8 +442,6 @@ let deleteSeachVal = (i) => {
line-height: 48px; line-height: 48px;
cursor: pointer; cursor: pointer;
&.add-btn { &.add-btn {
background: rgba(253, 218, 85, 1); background: rgba(253, 218, 85, 1);
margin-left: 20px; margin-left: 20px;
@@ -512,7 +478,7 @@ let deleteSeachVal = (i) => {
.search-input { .search-input {
/deep/ .el-input__wrapper { /deep/ .el-input__wrapper {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
&:hover { &:hover {
border-color: #c0c4cc; border-color: #c0c4cc;
@@ -525,7 +491,7 @@ let deleteSeachVal = (i) => {
border-right: none; border-right: none;
.el-input__inner { .el-input__inner {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
&::placeholder { &::placeholder {
color: #7f7f7f; color: #7f7f7f;
@@ -540,7 +506,7 @@ let deleteSeachVal = (i) => {
color: #d7d7d7; color: #d7d7d7;
line-height: 21px; line-height: 21px;
height: 60px; 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); background-color: rgba(246, 246, 246, 1);
cursor: pointer; cursor: pointer;
border-top: 1px solid #ebebeb; border-top: 1px solid #ebebeb;
@@ -559,7 +525,6 @@ let deleteSeachVal = (i) => {
height: 6px; height: 6px;
margin-left: 10px; margin-left: 10px;
} }
} }
.pack-up { .pack-up {
@@ -587,7 +552,7 @@ let deleteSeachVal = (i) => {
color: #555555; color: #555555;
font-size: 15px; font-size: 15px;
height: 72px; height: 72px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
.b { .b {
font-weight: 700; font-weight: 700;
@@ -595,15 +560,13 @@ let deleteSeachVal = (i) => {
margin: 0 5px; margin: 0 5px;
} }
} }
} }
.option-area { .option-area {
flex-wrap: wrap; flex-wrap: wrap;
overflow: hidden; overflow: hidden;
height: 0; height: 0;
transition: height .25s linear 0s; transition: height 0.25s linear 0s;
&.option-area-unfold { &.option-area-unfold {
height: 335px; height: 335px;
@@ -630,7 +593,7 @@ let deleteSeachVal = (i) => {
.option-title { .option-title {
font-size: 14px; font-size: 14px;
color: #B5B5B5; color: #b5b5b5;
width: 90px; width: 90px;
line-height: 30px; line-height: 30px;
} }
@@ -642,7 +605,7 @@ let deleteSeachVal = (i) => {
padding: 5px 10px; padding: 5px 10px;
height: 30px; height: 30px;
display: flex; display: flex;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
@@ -651,7 +614,7 @@ let deleteSeachVal = (i) => {
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
color: #7F7F7F; color: #7f7f7f;
border: 1px solid transparent; border: 1px solid transparent;
&:hover { &:hover {
@@ -659,8 +622,8 @@ let deleteSeachVal = (i) => {
} }
&.pitch { &.pitch {
color: #50E3C2; color: #50e3c2;
border: 1px solid #50E3C2; border: 1px solid #50e3c2;
background: #eefcf9; background: #eefcf9;
} }
} }
@@ -677,7 +640,7 @@ let deleteSeachVal = (i) => {
background-color: rgba(246, 246, 246, 1); background-color: rgba(246, 246, 246, 1);
border-radius: 50px; border-radius: 50px;
font-size: 14px; font-size: 14px;
color: #7F7F7F; color: #7f7f7f;
cursor: pointer; cursor: pointer;
.eliminate-icon { .eliminate-icon {
@@ -700,14 +663,11 @@ let deleteSeachVal = (i) => {
&:first-of-type { &:first-of-type {
margin-left: 0; margin-left: 0;
} }
} }
} }
} }
} }
} }
} }
.seach-hiosory-box { .seach-hiosory-box {
@@ -727,7 +687,7 @@ let deleteSeachVal = (i) => {
padding: 20px 25px; padding: 20px 25px;
.title { .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-weight: 650;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
@@ -737,7 +697,7 @@ let deleteSeachVal = (i) => {
.info-box { .info-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 15px; font-size: 15px;
@@ -758,7 +718,6 @@ let deleteSeachVal = (i) => {
} }
} }
.btn-icon { .btn-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -772,7 +731,6 @@ let deleteSeachVal = (i) => {
} }
} }
} }
} }
.el-popover.el-popper.consult-popover { .el-popover.el-popper.consult-popover {
@@ -781,7 +739,7 @@ let deleteSeachVal = (i) => {
height: 300px; height: 300px;
border-radius: 10px; border-radius: 10px;
padding-top: 45px; 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); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
-webkit-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); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
@@ -835,5 +793,27 @@ let deleteSeachVal = (i) => {
} }
} }
} }
</style>
.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>

2
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@@ -28,7 +28,7 @@
{{ `· ${itemData.gender}` }} {{ `· ${itemData.gender}` }}
{{ itemData.leaseterm ? `· ${itemData.leaseterm}` : "" }} {{ itemData.leaseterm ? `· ${itemData.leaseterm}` : "" }}
</span> </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>
<div style="padding: 0 10px; margin-top: 15px;" class="dis-f al-item" v-if="itemData.type === 'housing'"> <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="" /> <img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" />

12
src/components/pageTopBar/pageTopBar.vue
View File

@@ -1,5 +1,6 @@
<template> <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/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"> <img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length">
<div class="info-box"> <div class="info-box">
@@ -37,7 +38,8 @@
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()"> <img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()">
</div> </div>
</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"> <div class="body-maxWidth">
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;"> <el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId"> <el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
@@ -49,7 +51,7 @@
</div> </div>
</div> </div>
<div class="btm-seach-btn-box dis-f al-item jus-x" v-if="pageTopBarShow"> <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 }" <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)"> 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 { .top-bg-img-box .info-box .btm-seach-btn-box {
width: 100%; width: 100%;
height: 50px; height: 44px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@@ -288,7 +290,7 @@ const goIndex = () => router.push("/")
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn { .top-bg-img-box .info-box .btm-seach-btn-box .tab-btn {
width: 120px; width: 120px;
height: 47px; height: 40px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;

252
src/components/seachModule/seachModule.vue
View File

@@ -1,25 +1,23 @@
<template> <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="body-maxWidth">
<div class="s-w-100 seach-box-bg"> <div class="s-w-100 seach-box-bg">
<div class="seach-box"> <div class="seach-box">
<div class="top-seach dis-f al-item"> <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"> <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>
<div class="triangle"></div> <div class="triangle"></div>
</div> </div>
<div class="dis-f al-item pos-r"> <div class="dis-f al-item pos-r seek-input">
<el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList' <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>
@blur="setHistoryShow" @focus="setHistoryShow"
style="height:48px;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"> <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>
<div class="seach-hiosory-box" :class="{ 'seach-history-h': historyShow }"> <div class="seach-hiosory-box" :class="{'seach-history-h': historyShow}">
<el-scrollbar height="375px"> <el-scrollbar height="375px">
<div class="seach-history-info"> <div class="seach-history-info">
<div> <div>
@@ -27,19 +25,15 @@
历史搜索 历史搜索
</div> </div>
<div class="info-box"> <div class="info-box">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn" <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>
@click="setSeachVal(item)">
{{ item }} <img src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" class="img" alt="">
</div>
</div> </div>
</div> </div>
<div style="margin-top:30px;"> <div style="margin-top: 30px;">
<div class="title"> <div class="title">
热门推荐 热门推荐
</div> </div>
<div class="info-box"> <div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" <div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="setHotSeach(item)">
@click="setHotSeach(item)">
{{ item }} {{ item }}
</div> </div>
</div> </div>
@@ -52,25 +46,23 @@
<img src="../assets/homeImage/mapImg.png" class="img" alt=""> <img src="../assets/homeImage/mapImg.png" class="img" alt="">
地图找房 地图找房
</div> --> </div> -->
<div class="tool-btn dis-f jus-x al-item add-btn" :class="{ 'mg-l-10': routePath === '/' }" <div class="tool-btn dis-f jus-x al-item add-btn" :class="{'mg-l-10': routePath === '/'}" style="position: relative;">
style="position: relative;"> <img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
发布房源 发布房源
<choosing-identity></choosing-identity> <choosing-identity></choosing-identity>
</div> </div>
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'"> <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/authenticationBtnImg.png" class="text-img" alt="" />
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt=""> <img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="" />
<div class="btn-qrcode"> <div class="btn-qrcode">
<authentication-info :type="1"></authentication-info> <authentication-info :type="1"></authentication-info>
<!-- <img class="bj" src="@/assets/img/publicImage/housing-certification-bj.jpg"> <!-- <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"> --> <img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth"> -->
</div> </div>
</div> </div>
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn" <div class="dis-f jus-x al-item authentication-btn intermediary-btn" v-if="routePath === '/intermediaryHousing'">
v-if="routePath === '/intermediaryHousing'"> <img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="" />
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt=""> <img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="" />
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="">
<div class="btn-qrcode"> <div class="btn-qrcode">
<authentication-info :type="2"></authentication-info> <authentication-info :type="2"></authentication-info>
<!-- <img class="bj" src="@/assets/img/publicImage/mediation-authentication-bj.jpg"> <!-- <img class="bj" src="@/assets/img/publicImage/mediation-authentication-bj.jpg">
@@ -79,19 +71,13 @@
</div> </div>
</div> </div>
<div class="seach-info-box dis-f" v-if="routePath === '/'"> <div class="seach-info-box dis-f" v-if="routePath === '/'">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length" <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length" :checkBtn="checkBtn"> </seachInfo>
:checkBtn="checkBtn"> <seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length" :checkBtn="checkBtn"></seachInfo>
</seachInfo> <seachInfo title="区域找房" seachType="3" style="margin-top: 30px;" :btn="seachArea.data" :checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length" <seachInfo title="整租" seachType="2" style="margin-top: 30px;" :btn="allHireType.data" :checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
: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>
<!-- --> <!-- -->
<div <div v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
<selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation"></selectTabBox> <selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation"></selectTabBox>
</div> </div>
</div> </div>
@@ -101,55 +87,54 @@
</template> </template>
<script setup> <script setup>
import { ref, watchEffect, reactive, defineProps } from 'vue'; import {ref, watchEffect, reactive, defineProps} from "vue"
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue'; import seachInfo from "../indexSeachInfo/indexSeachInfo.vue"
import selectTabBox from "../selectTabBox/selectTabBox.vue"; import selectTabBox from "../selectTabBox/selectTabBox.vue"
import choosingIdentity from '@/components/edit/choosingIdentity.vue' import choosingIdentity from "@/components/edit/choosingIdentity.vue"
import { useRouter } from 'vue-router'; import {useRouter} from "vue-router"
import store from '../../store/index'; import store from "../../store/index"
import api from "../../utils/api"; import api from "../../utils/api"
import authenticationInfo from './authenticationInfo.vue' import authenticationInfo from "./authenticationInfo.vue"
const props = defineProps({ const props = defineProps({
getDataList: { getDataList: {
type: Function type: Function,
} },
}) })
let getDataList = props.getDataList let getDataList = props.getDataList
//搜索框 //搜索框
let historyShow = ref(false); let historyShow = ref(false)
let setHistoryShow = () => { let setHistoryShow = () => {
if (historyShow.value) { if (historyShow.value) {
setTimeout(() => { setTimeout(() => {
historyShow.value = !historyShow.value historyShow.value = !historyShow.value
}, 500); }, 500)
return return
} }
historyShow.value = !historyShow.value historyShow.value = !historyShow.value
} }
let seachSchoolBtn = reactive({ data: [] });//学校地区 let seachSchoolBtn = reactive({data: []}) //学校地区
let hireType = {};//整租 let hireType = {} //整租
let allHireType = {};//合租 let allHireType = {} //合租
let seachArea = {};//区域找房 let seachArea = {} //区域找房
let historyArr = reactive({ data: [] })//历史查找记录 let historyArr = reactive({data: []}) //历史查找记录
let hotArr = reactive({ data: [] }) let hotArr = reactive({data: []})
let seachAllType = reactive({ let seachAllType = reactive({
keyword: '', keyword: "",
location: [], location: [],
orderby: 'timestamp' orderby: "timestamp",
}) })
//获取区域下列数据 //获取区域下列数据
let getLocationData = (data) => { let getLocationData = data => {
for (let item in data) { for (let item in data) {
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = [] if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
if (item.length > 1) { if (item.length > 1) {
seachArea.data[item.substring(0, 1) - 1].data.push({ seachArea.data[item.substring(0, 1) - 1].data.push({
title: data[item], title: data[item],
id: item id: item,
}) })
} }
} }
@@ -157,7 +142,7 @@ let getLocationData = (data) => {
//监听路由 //监听路由
const route = useRouter() const route = useRouter()
let routePath = ref('') let routePath = ref("")
routePath.value = route.currentRoute.value.meta.path routePath.value = route.currentRoute.value.meta.path
watchEffect(() => { 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 let string = seachAllType.keyword
if (!string.replace(/\s/g, "")) return if (!string.replace(/\s/g, "")) return
if (historyArr.data.indexOf(seachAllType.keyword) === -1) { if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
historyArr.data.unshift(seachAllType.keyword) historyArr.data.unshift(seachAllType.keyword)
} }
if(historyArr.data.length>10)historyArr.data.splice(historyArr.data.length-1,1) if (historyArr.data.length > 10) historyArr.data.splice(historyArr.data.length - 1, 1)
localStorage.setItem('historyArr', JSON.stringify(historyArr.data)); localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
sessionStorage.setItem('houseingPageType', routePath.value === '/needHousing' ? '6' : routePath.value === '/intermediaryHousing' ? '1' : routePath.value === '/personHousing' ? '0' : '0') sessionStorage.setItem("houseingPageType", routePath.value === "/needHousing" ? "6" : routePath.value === "/intermediaryHousing" ? "1" : routePath.value === "/personHousing" ? "0" : "0")
route.push({ route.push({
path: '/seachPage', path: "/seachPage",
query: { query: {
keyword: seachAllType.keyword, keyword: seachAllType.keyword,
isNeedHousing: routePath.value === '/needHousing', isNeedHousing: routePath.value === "/needHousing",
} },
}) })
} }
//设置点击一级区域 //设置点击一级区域
let setLocation = (type, data) => { let setLocation = (type, data) => {
seachAllType[type] = data seachAllType[type] = data
seachAllType['school'] = '' seachAllType["school"] = ""
} }
//设置搜索数据 //设置搜索数据
let setSeachConditions = (type, data, second = null) => { let setSeachConditions = (type, data, second = null) => {
if (type === 'rent') { if (type === "rent") {
seachAllType['rent_min'] = data.min seachAllType["rent_min"] = data.min
seachAllType['rent_max'] = data.max seachAllType["rent_max"] = data.max
} else if (type !== '') { } else if (type !== "") {
seachAllType[type] = data seachAllType[type] = data
} else if (type === '') { } else if (type === "") {
data.indexOf('isintermediary') !== -1 ? seachAllType['isintermediary'] = 1 : seachAllType['isintermediary'] = 0 data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0)
data.indexOf('isverified') !== -1 ? seachAllType['isverified'] = 1 : seachAllType['isverified'] = 0 data.indexOf("isverified") !== -1 ? (seachAllType["isverified"] = 1) : (seachAllType["isverified"] = 0)
data.indexOf('iselevator') !== -1 ? seachAllType['iselevator'] = 1 : seachAllType['iselevator'] = 0 data.indexOf("iselevator") !== -1 ? (seachAllType["iselevator"] = 1) : (seachAllType["iselevator"] = 0)
data.indexOf('issunshinearea') !== -1 ? seachAllType['issunshinearea'] = 1 : seachAllType['issunshinearea'] = 0 data.indexOf("issunshinearea") !== -1 ? (seachAllType["issunshinearea"] = 1) : (seachAllType["issunshinearea"] = 0)
} }
if (type === 'school') { if (type === "school") {
seachAllType.location = [] seachAllType.location = []
} }
if (type === 'location') { if (type === "location") {
seachAllType.school = '' seachAllType.school = ""
} }
if (second) { if (second) {
seachAllType[second.type] = second.id seachAllType[second.type] = second.id
@@ -223,23 +208,23 @@ let setSeachConditions = (type, data, second = null) => {
} }
//点击历史搜索记录 //点击历史搜索记录
let setSeachVal = (item) => { let setSeachVal = item => {
seachAllType.keyword = item seachAllType.keyword = item
seachList() seachList()
// getDataList(seachAllType) // getDataList(seachAllType)
} }
//删除历史记录 //删除历史记录
let deleteSeachVal=(i)=>{ let deleteSeachVal = i => {
historyArr.data.splice(i,1) historyArr.data.splice(i, 1)
localStorage.setItem('historyArr', JSON.stringify(historyArr.data)); localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
} }
//点击热门地区 //点击热门地区
let setHotSeach = (item) => { let setHotSeach = item => {
seachAllType.keyword = item seachAllType.keyword = item
if (historyArr.data.indexOf(item) === -1) historyArr.data.unshift(item) if (historyArr.data.indexOf(item) === -1) historyArr.data.unshift(item)
if(historyArr.data.length>10)historyArr.data.slice(historyArr.data.length-1,1) if (historyArr.data.length > 10) historyArr.data.slice(historyArr.data.length - 1, 1)
localStorage.setItem('historyArr', JSON.stringify(historyArr.data)); localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
seachList() seachList()
} }
@@ -248,9 +233,8 @@ let checkBtn = (data, type, areaItem) => {
getDataList(type, data, areaItem) getDataList(type, data, areaItem)
} }
defineExpose({ defineExpose({
historyShow historyShow,
}) })
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@@ -325,7 +309,7 @@ defineExpose({
padding-top: 5px; padding-top: 5px;
.seach-box { .seach-box {
background: #FFFFFF; background: #ffffff;
/* transform: translate(0, 5px); */ /* transform: translate(0, 5px); */
border-radius: 16px; border-radius: 16px;
@@ -334,23 +318,23 @@ defineExpose({
position: relative; position: relative;
justify-content: end; justify-content: end;
border-bottom: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
.intermediary-btn:hover{ .intermediary-btn:hover {
background: #f4f7f9 !important; background: #f4f7f9 !important;
} }
.intermediary-btn { .intermediary-btn {
background: rgba(241, 245, 247, 1) !important; background: rgba(241, 245, 247, 1) !important;
} }
.authentication-btn:hover{ .authentication-btn:hover {
background:#f6f5ff; background: #f6f5ff;
} }
.authentication-btn { .authentication-btn {
width: 160px; width: 160px;
height: 48px; height: 40px;
background: inherit; background: inherit;
background-color: rgba(244, 243, 255, 1); background-color: rgba(244, 243, 255, 1);
border: none; border: none;
border-radius: 8px; border-radius: 68px;
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@@ -360,13 +344,13 @@ defineExpose({
.text-img { .text-img {
width: 100px; width: 100px;
height: 26px; height: 20px;
} }
.code-img { .code-img {
width: 20px; width: 20px;
height: 20px; height: 16px;
margin-left: 8px; margin-left: 0px;
} }
} }
@@ -399,21 +383,21 @@ defineExpose({
overflow-y: auto; overflow-y: auto;
.title { .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-weight: 650;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
color: #000000; color: #000000;
} }
.info-box :hover .img{ .info-box :hover .img {
display: block; display: block;
} }
.info-box { .info-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 15px; font-size: 15px;
@@ -424,8 +408,8 @@ defineExpose({
width: 8px; width: 8px;
height: 8px; height: 8px;
position: absolute; position: absolute;
top:6px; top: 6px;
right:-8px; right: -8px;
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
@@ -443,8 +427,8 @@ defineExpose({
} }
.location-box { .location-box {
width: 80px; width: 64px;
height: 40px; height: 32px;
background: inherit; background: inherit;
background-color: rgba(68, 68, 68, 1); background-color: rgba(68, 68, 68, 1);
border: none; border: none;
@@ -454,11 +438,11 @@ defineExpose({
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-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); 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-weight: 650;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #ffffff;
line-height: 48px; line-height: 48px;
position: absolute; position: absolute;
z-index: 666; z-index: 666;
@@ -470,16 +454,16 @@ defineExpose({
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
bottom: -47px; bottom: -39px;
left: -7px; left: -7px;
} }
.seach-btn:hover{ .seach-btn:hover {
background:#81c1ff !important; background: #81c1ff !important;
} }
.seach-btn { .seach-btn {
width: 100px; width: 32px;
height: 48px; height: 32px;
background: inherit; background: inherit;
background-color: rgba(98, 177, 255, 1); background-color: rgba(98, 177, 255, 1);
border: none; border: none;
@@ -488,7 +472,7 @@ defineExpose({
line-height: 48px; line-height: 48px;
cursor: pointer; cursor: pointer;
transform: translateX(-3px); transform: translateX(-3px);
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
@@ -499,7 +483,7 @@ defineExpose({
width: 20px; width: 20px;
// height: 20px; // height: 20px;
object-fit: contain; object-fit: contain;
margin-right: 5px; margin-right: 1px;
} }
.map-btn { .map-btn {
@@ -507,8 +491,8 @@ defineExpose({
margin-left: 20px; margin-left: 20px;
} }
.add-btn:hover{ .add-btn:hover {
background:#fde177 !important; background: #fde177 !important;
} }
.add-btn { .add-btn {
background: rgba(253, 218, 85, 1); background: rgba(253, 218, 85, 1);
@@ -522,15 +506,21 @@ defineExpose({
.tool-btn { .tool-btn {
width: 160px; width: 160px;
height: 48px; height: 40px;
border: none; border: none;
border-radius: 8px; border-radius: 68px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
color: #000000; color: #000000;
line-height: 48px; line-height: 48px;
img {
width: 15px;
margin-right: 5px;
}
} }
} }
@@ -546,5 +536,21 @@ defineExpose({
background: rgba(246, 246, 246, 1); background: rgba(246, 246, 246, 1);
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
} }
</style>
.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>