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

修改求房源列表 筛选出现 位置报错问题 和增加 列表的更多数据

Browse Source
This commit is contained in:
A1300399510
2024-04-07 17:57:04 +08:00
parent c3c446584d
commit ec95879d91
25 changed files with 395 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/202.4eb9402e.css → dist/css/967.dbe5271c.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/app.96d24200.css → dist/css/app.f5f600f1.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/detail.35ed44d8.css → dist/css/detail.b5a39a83.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/housing.9446fef2.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/housing.eb3b0b2e.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

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.25ef79b4.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.1b015cfb.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.96d24200.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.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.fde77efe.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.f5f600f1.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";

2
dist/js/202.f5f24b11.js → dist/js/967.421ad13d.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.1b015cfb.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.fde77efe.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

0
dist/js/chunk-vendors.25ef79b4.js → dist/js/chunk-vendors.6d96b969.js vendored
View File

1
dist/js/detail.150f07a0.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/detail.3b446794.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/js/edit.eca4e671.js → dist/js/edit.2b3a4402.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/housing.5c2a4268.js → dist/js/housing.f1535768.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/seachPage.9a3627ce.js → dist/js/seachPage.bbc07ed9.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/user.3e46f6bb.js → dist/js/user.23f09b5b.js vendored
View File

File diff suppressed because one or more lines are too long

199
src/components/biserialListItem/biserialListItem.vue
View File

@@ -1,87 +1,74 @@
<template> <template>
<div class="item" ref="list" @click="watchInfo" :class="{ 's-w-100': detailShow }"> <div class="item" ref="list" @click="watchInfo" :class="{ 's-w-100': detailShow }">
<img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt=""> <img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt="" />
<img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2" <img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2" alt="" />
alt="">
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow"> <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt=""> <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="" />
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt=""> <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="" />
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt=""> <img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="" />
</div> </div>
<div class="top-box"> <div class="top-box">
<div class="title-text"> <div class="title-text">
<img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img" <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img" style="float: left; margin: 3px 10px 0 0;" v-show="detailShow && data && data.data && data.data.verified == 1" alt="" />
style="float:left;margin:3px 10px 0 0;" v-show="detailShow && data && data.data && data.data.verified == 1" alt=""> {{ (data && data.data && data.data.subject) || "暂无标题" }}
{{ data && data.data && data.data.subject || '暂无标题' }}
</div> </div>
<div class="mg-t-20 dis-f al-item-start jus-bet s-w-100"> <div class="mg-t-20 dis-f al-item-start jus-bet s-w-100">
<div> <div>
<div class="dis-f al-item"> <div class="dis-f al-item">
<div class="tab-item first-tab"> <div class="tab-item first-tab">
{{ data && data.data && data.data.gptype || '' }} {{ (data && data.data && data.data.gptype) || "" }}
</div> </div>
<div class="tab-item mg-l-8" <div class="tab-item mg-l-8" v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
v-if="listData.data && listData.data.type[data && data.data && data.data.type]"> {{ (listData.data && listData.data.type[data && data.data && data.data.type]) || "" }}
{{ listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
</div> </div>
<div class="tab-item mg-l-8" <div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator"> {{ (listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]) || "" }}
{{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]
||
'' }}
</div> </div>
<div class="tab-item mg-l-8" <div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1 && data.data.sunshinearea !== 0 && data.data.sunshinearea">
v-if="data && data.data && data.data.sunshinearea !== -1 && data.data.sunshinearea !== 0 && data.data.sunshinearea"> {{ (listData && listData.data && listData.data.sunshinearea[data && data.data && data.data.sunshinearea]) || "" }}
{{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
data.data.sunshinearea] || '' }}
</div> </div>
<div class="tab-item mg-l-8" <div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender] && data.data.gender">
v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender] && data.data.gender"> {{ (listData && listData.data && listData.data.gender[data && data.data && data.data.gender]) || "" }}
{{
listData && listData.data && listData.data.gender[data && data.data && data.data.gender] ||
''
}}
</div> </div>
<div class="tab-item mg-l-8" <div class="tab-item mg-l-8" v-if="listData.data && listData.data.rentalduration">
v-if="listData.data && listData.data.rentalduration"> {{ data.data.rentalduration === "0" ? "租期不限" : listData.data.rentalduration[data.data && data.data.rentalduration] || "" }}
{{ data.data.rentalduration
=== '0' ? '租期不限' :
listData.data.rentalduration[data.data && data.data.rentalduration] || ''
}}
</div> </div>
</div> </div>
<div class="address-text dis-f al-item" <div class="address-text dis-f al-item" v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)">
v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)"> <img src="../../assets/homeImage/addMarker.png" class="img" alt="" />
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<span>{{ <span>{{
location && location.data && location.data[1] ? `${location && location.data && location && location.data && location.data[1]
location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} > ? `${location && location.data && location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} >
${location && ${location && location.data[data && data.data && data.data.location]}`
location.data[data && data.data && data.data.location]}` : '' : ""
}}</span> }}</span>
</div> </div>
<div class="dis-f" style="flex-wrap: wrap;" <div class="dis-f" style="flex-wrap: wrap;" v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
v-if="data && data.data && data.data.location && Array.isArray(data.data.location)"> <template v-if="data && data.data && data.data.location">
<div class="address-text dis-f al-item mg-r-15" v-if="data && data.data && data.data.location" <div class="address-text dis-f al-item mg-r-15" v-for="(item, i) in data.data.location" :key="i">
v-for="(item, i) in data.data.location" :key="i"> <img src="../../assets/homeImage/addMarker.png" class="img" alt="" />
<img src="../../assets/homeImage/addMarker.png" class="img" alt=""> <span>{{
<span>{{ location && location.data && location.data[1]
location && location.data && location.data[1] ? `${location && location.data && ? `${location && location.data && location.data[Math.floor(item)]} >
location.data[item.substring(0, ${item.length === 1 ? "不限" : location && location.data[item]}`
1)]} > : ""
${item.length === 1 ? '不限' : location && }}</span>
location.data[item]}` : '' <!-- <span>{{
}}</span> location && location.data && location.data[1]
</div> ? `${location && location.data && location.data[item.substring(0, 1)]} >
${item.length === 1 ? "不限" : location && location.data[item]}`
: ""
}}</span> -->
</div>
</template>
</div> </div>
<div class="price-text dis-f" style="align-items: end;"> <div class="price-text dis-f" style="align-items: end;">
<div class="unit">HK$</div> <div class="unit">HK$</div>
<div class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data <div class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data && data.data.rent }}</div>
&& data.data.rent }}</div> <div class="price" v-if="Array.isArray(data && data.data && data.data.rent)">
<div class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data {{ data && data.data && data.data.rent[0] }}<span style="margin: 0;" class="price" v-if="data && data.data && data.data.rent[1]">~{{ data && data.data && data.data.rent[1] }}</span>
&& </div>
data.data.rent[0] }}<span style="margin:0;" class="price" v-if="data && data.data && data.data.rent[1]">~{{ data && data.data && data.data.rent[1] }}</span></div>
<span>/{{ data && data.data && data.data.rentalperiod }}</span> <span>/{{ data && data.data && data.data.rentalperiod }}</span>
<!-- <span class="time" <!-- <span class="time"
v-show="data && data.data && data.data.rentalduration != 0 && pageType == 2">[ v-show="data && data.data && data.data.rentalduration != 0 && pageType == 2">[
@@ -93,70 +80,57 @@
<!-- 'img-150':routePath==='/detail' --> <!-- 'img-150':routePath==='/detail' -->
<div class="img" :class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }"> <div class="img" :class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }">
<div class="dis-f"> <div class="dis-f">
<img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''" <img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''" @load="loadFinish" @error="loadFinish" class="img" :class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }" alt="" v-if="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : false" />
@load="loadFinish" @error="loadFinish" class="img "
:class="{ 'img-100': routePath === '/detail' && data && data.data && !data.data.isvideo }"
alt=""
v-if="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : false">
<div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo"> <div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo">
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt=""> <img src="../../assets/homeImage/videoIcon.svg" class="img" alt="" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt=""> <img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="" />
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'" <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'" class="tab-img" alt="" />
class="tab-img" alt=""> <img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img" alt="" />
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
alt="">
</div> </div>
<div class="btm-line"></div> <div class="btm-line"></div>
<div class="btm-box dis-f al-item" :class="{ 'jus-bet': detailShow }"> <div class="btm-box dis-f al-item" :class="{ 'jus-bet': detailShow }">
<div class="dis-f al-item"> <div class="dis-f al-item">
<img :src="data && data.data && data.data.avatar" class="user-img" alt=""> <img :src="data && data.data && data.data.avatar" class="user-img" alt="" />
<span class="user-name">{{ data && data.data && data.data.author }}</span> <span class="user-name">{{ data && data.data && data.data.author }}</span>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text"> <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">
{{ {{ listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
</div> </div>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data && data.data.intermediary_text }}</div>
data && <div class="btn" v-if="data && data.data && data.data.publishergender && pageType == 3">{{ listData && listData.data && listData.data.gender[data && data.data && data.data.publishergender] }}</div>
data.data.intermediary_text <img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="" />
}}</div>
<div class="btn" v-if="data && data.data && data.data.publishergender && pageType == 3">{{
listData && listData.data && listData.data.gender[data && data.data && data.data.publishergender]
}}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png"
v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
</div> </div>
<!-- <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img" <!-- <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
v-show="detailShow && data && data.data && data.data.verified == 1" alt=""> --> v-show="detailShow && data && data.data && data.data.verified == 1" alt=""> -->
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue"; import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue"
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from "vue-router"
import store from '../../store/index'; import store from "../../store/index"
let props = defineProps({ let props = defineProps({
item: { item: {
type: Object type: Object,
}, },
imgLoad: { imgLoad: {
type: Function, type: Function,
default: function () { default: function () {
return () => { } return () => {}
} },
}, },
listId: { listId: {
type: [String, Number], type: [String, Number],
default: '' default: "",
}, },
detailShow: { detailShow: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}) })
let data = reactive({ data: {} }) let data = reactive({ data: {} })
//显示样式 //显示样式
@@ -165,7 +139,6 @@ watchEffect(() => {
data.data = props.item data.data = props.item
}) })
let listId = props.listId let listId = props.listId
let imgRef = null let imgRef = null
let loadFinish = () => { let loadFinish = () => {
@@ -175,19 +148,18 @@ let loadFinish = () => {
//监听路由 //监听路由
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
//地区数据 //地区数据
let location = reactive({ data: {} }) let location = reactive({ data: {} })
location.data = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location location.data = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location
//数据包 //数据包
let listData = reactive({ data: {} }) let listData = reactive({ data: {} })
listData.data = store.state.indexData && store.state.indexData.config || {} listData.data = (store.state.indexData && store.state.indexData.config) || {}
let pageType = ref('') let pageType = ref("")
//跳转 //跳转
let router = useRouter() let router = useRouter()
@@ -195,7 +167,7 @@ let watchInfo = () => {
let seachData = router.currentRoute.value.query let seachData = router.currentRoute.value.query
if (pageType.value === 4) { if (pageType.value === 4) {
for (let key in data) { for (let key in data) {
store.state.seachSelect['seachPage'][key] = seachData[key] store.state.seachSelect["seachPage"][key] = seachData[key]
} }
} }
// console.log(document.location.origin) // console.log(document.location.origin)
@@ -206,7 +178,6 @@ onMounted(() => {
imgRef = getCurrentInstance() imgRef = getCurrentInstance()
pageType.value = data.data.intermediary === 1 ? 2 : data.data.intermediary === 6 ? 3 : 1 pageType.value = data.data.intermediary === 1 ? 2 : data.data.intermediary === 6 ? 3 : 1
}) })
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
img { img {
@@ -352,7 +323,7 @@ img {
} }
.title-text { .title-text {
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: 18px; font-size: 18px;
@@ -374,11 +345,11 @@ img {
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
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: 14px; font-size: 14px;
color: #7F7F7F; color: #7f7f7f;
text-align: center; text-align: center;
} }
@@ -387,14 +358,13 @@ img {
} }
.address-text { .address-text {
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;
color: #555555; color: #555555;
margin-top: 20px; margin-top: 20px;
.img { .img {
width: 18px; width: 18px;
height: 18px; height: 18px;
@@ -404,7 +374,7 @@ img {
} }
.price-text { .price-text {
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: 14px; font-size: 14px;
@@ -413,26 +383,26 @@ img {
line-height: 17px; line-height: 17px;
.time { .time {
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: 14px; font-size: 14px;
color: #7F7F7F; color: #7f7f7f;
margin-left: 15px; margin-left: 15px;
line-height: 19px; line-height: 19px;
} }
.price { .price {
font-family: 'Arial-Black', 'Arial Black', sans-serif; font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900; font-weight: 900;
font-size: 20px; font-size: 20px;
color: #F95D5D; color: #f95d5d;
line-height: 20px; line-height: 20px;
margin: 0 5PX; margin: 0 5px;
} }
.unit { .unit {
font-family: 'Arial-Black', 'Arial Black', sans-serif; font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900; font-weight: 900;
color: #000000; color: #000000;
font-size: 14px; font-size: 14px;
@@ -464,7 +434,7 @@ img {
} }
.user-name { .user-name {
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;
color: #555555; color: #555555;
@@ -485,7 +455,7 @@ img {
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
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: 14px; font-size: 14px;
@@ -495,6 +465,3 @@ img {
} }
} }
</style> </style>

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

@@ -43,7 +43,7 @@
<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">
<div style="width: 100%; height: 100%;" class="dis-f jus-x al-item"> <div style="width: 100%; height: 100%;" class="dis-f jus-x al-item">
<img class="carousel-img" :src="item.imageurl" alt="" @click="openInfo(item)" /> <img class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" />
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>

1
src/components/public/apartment-item.vue
View File

@@ -72,6 +72,7 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
height: 244px; height: 244px;
border-radius: 16px; border-radius: 16px;
margin-bottom: 19px; margin-bottom: 19px;
object-fit: cover;
} }
.title { .title {

5
src/store/index.js
View File

@@ -26,7 +26,10 @@ export default createStore({
showloginmodal: false, // 是否需要登录状态 showloginmodal: false, // 是否需要登录状态
apartmentPitchValue: {}, // 公寓筛选的值 全局化 apartmentPitchValue: {}, // 公寓筛选的值 全局化
needPitchValue: {}, // 求房源筛选的值 全局化 needPitchValue: {}, // 求房源筛选的值 全局化
personPitchValue: {}, // 个人筛选的值 全局化 personPitchValue: {
types: 1.5,
// school: 314,
}, // 个人筛选的值 全局化
intermediaryPitchValue: {}, // 中介筛选的值 全局化 intermediaryPitchValue: {}, // 中介筛选的值 全局化
locationObj: {}, // 地区数据 locationObj: {}, // 地区数据
bannerData: {}, // 所有轮播数据 bannerData: {}, // 所有轮播数据

3
src/utils/api.js
View File

@@ -22,6 +22,9 @@ export default{
getLists:(params={})=>{//获取搜索数据 个人/中介/求房源 getLists:(params={})=>{//获取搜索数据 个人/中介/求房源
return axios.get('/tenement/pc/api/lists',params) return axios.get('/tenement/pc/api/lists',params)
}, },
getMoreLists:(params={})=>{// 获取 更多搜索数据
return axios.get('/tenement/pc/api/lists/moreRecommendations',params)
},
apartment:(params={})=>{//获取公寓列表 apartment:(params={})=>{//获取公寓列表
return axios.get('/tenement/pc/api/apartment',params) return axios.get('/tenement/pc/api/apartment',params)
}, },

86
src/views/housingView/apartment.vue
View File

@@ -7,13 +7,21 @@
</div> </div>
<div class="list wid1200 flexflex" ref="gridContainer"> <div class="list wid1200 flexflex" ref="gridContainer">
<apartment-item v-if="list.length != 0" v-for="(item, index) in list" :key="index" :item="item"></apartment-item> <template v-if="list.length != 0">
<apartment-item v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
</template>
</div> </div>
<div v-if="list.length == 0" class="empty-box wid1200 flexcenter"> <div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
<empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck> <empty-duck :hintTextTwo="'建议放宽筛选条件'"></empty-duck>
</div> </div>
<!-- 其他附近房源 -->
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
<div class="wid1200" ref="moreShowList">
<apartment-item v-for="(item, index) in moreList" :key="index" :item="item"></apartment-item>
</div>
<div class="bottom-tps" v-if="list.length != 0 && page == 0">- 到底了 -</div> <div class="bottom-tps" v-if="list.length != 0 && page == 0">- 到底了 -</div>
<div class="bottom-tps" v-if="page != 0">- 下拉加载更多 -</div> <div class="bottom-tps" v-if="page != 0">- 下拉加载更多 -</div>
@@ -41,6 +49,7 @@ import Masonry from "masonry-layout"
import { useRoute, useRouter } from "vue-router" import { useRoute, useRouter } from "vue-router"
import backToTop from "@/components/public/backToTop.vue" import backToTop from "@/components/public/backToTop.vue"
import store from "../../store/index" import store from "../../store/index"
import api from "../../utils/api"
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
@@ -56,6 +65,7 @@ let list = ref([])
let listCount = ref(0) // 列表数量 let listCount = ref(0) // 列表数量
let masonryInstance = null let masonryInstance = null
// let masonryInstanceMore = null
onMounted(() => { onMounted(() => {
// 初始化瀑布流 // 初始化瀑布流
@@ -64,11 +74,16 @@ onMounted(() => {
gutter: 20, gutter: 20,
}) })
// masonryInstanceMore = new Masonry(moreShowList.value, {
// itemSelector: ".item",
// gutter: 20,
// })
pitchValue.value = store.state.apartmentPitchValue pitchValue.value = store.state.apartmentPitchValue
if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"] if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]
// banner() // 获取轮播图数据 // banner() // 获取轮播图数据
getData() // 获取列表数据 getData() // 获取列表数据
window.addEventListener("scroll", handleScroll) window.addEventListener("scroll", handleScroll)
}) })
@@ -109,6 +124,12 @@ const getData = () => {
loading.close() loading.close()
requestLoading = false requestLoading = false
}) })
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
// if (data.data.length < 20 && (pitchValue.value["school"] || pitchValue.value["location"].length != 0)) {
// morePage.value = 1
// getMoreList()
// }
}) })
.catch(err => { .catch(err => {
loading.close() loading.close()
@@ -128,6 +149,7 @@ let pitchValue = ref({
roomtype: 0, roomtype: 0,
rent_min: null, // 租金 rent_min: null, // 租金
rent_max: null, // 租金 rent_max: null, // 租金
location: [],
school: 0, school: 0,
roomlistings: 0, roomlistings: 0,
keyword: "", keyword: "",
@@ -147,13 +169,49 @@ const handleTransfer = data => {
} }
} }
//轮播 let moreShowList = ref(null)
// let bannerList = reactive({ data: [] }) let moreState = ref(false) // 更多列表 显示状态
// let banner = () => { let morePage = ref(1)
// proxy.$get("/tenement/pc/api/banner").then(res => { let moreList = ref([])
// if (res.code === 200) bannerList.data = res.data let moreLoading = ref(false)
// })
// } // 加载更多数据列表
const getMoreList = () => {
if (morePage.value == 0 || moreLoading.value) return
console.log("11111");
moreLoading.value = true
let postData = {
page: morePage.value,
...pitchValue.value,
}
api.getMoreLists(postData).then(res => {
if (res.code != 200) return
const data = res.data
if (!data.data) return
moreList.value = moreList.value.concat(data.data)
moreState.value = true
if (data.data && data.data.length < data.limit) morePage.value = 0
else {
morePage.value++
window.addEventListener("scroll", getMoreScroll, true)
}
nextTick(() => {
masonryInstanceMore.reloadItems()
masonryInstanceMore.layout()
moreLoading.value = false
})
})
}
const getMoreScroll = () => {
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.screen-box { .screen-box {
@@ -191,4 +249,14 @@ const handleTransfer = data => {
text-align: center; text-align: center;
padding: 30px 0; padding: 30px 0;
} }
.other-nearby-listings-box {
width: 100%;
height: 32px;
color: #525151;
background: rgba(245, 251, 255, 1);
font-size: 14px;
margin-top: 40px;
margin-bottom: 43px;
}
</style> </style>

71
src/views/housingView/intermediary.vue
View File

@@ -13,7 +13,10 @@
</div> </div>
<!-- 其他附近房源 --> <!-- 其他附近房源 -->
<!-- <div class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div> --> <div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
<div style="width: 1200px;" ref="moreShowList">
<biserialItem v-for="(item, i) in moreList" :key="i" :item="item"></biserialItem>
</div>
</div> </div>
</div> </div>
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText> <loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
@@ -43,6 +46,8 @@ import store from "../../store/index"
//瀑布实例 //瀑布实例
let listMasonryInstance = null let listMasonryInstance = null
let listMasonryInstanceMore = null
//获取数据 //获取数据
let pages = ref(1) let pages = ref(1)
let dataList = reactive({ data: [], count: 0 }) let dataList = reactive({ data: [], count: 0 })
@@ -76,7 +81,7 @@ let setSeachSelectData = (data, noMask = false) => {
} }
//获取搜索数据 //获取搜索数据
let getDataList = (data) => { let getDataList = data => {
loadingText.value = " 加载中..... " loadingText.value = " 加载中..... "
if (!loading.value) return if (!loading.value) return
loading.value = false loading.value = false
@@ -86,6 +91,10 @@ let getDataList = (data) => {
limit: 20, limit: 20,
...data, ...data,
} }
moreList.value = []
window.removeEventListener("scroll", getMoreScroll, true)
api.getLists(postData).then(res => { api.getLists(postData).then(res => {
if (res.code === 200) { if (res.code === 200) {
dataList.data = res.data.data dataList.data = res.data.data
@@ -106,6 +115,12 @@ let getDataList = (data) => {
listMasonryInstance.layout() listMasonryInstance.layout()
if (dataList.data.length >= 20) loading.value = true if (dataList.data.length >= 20) loading.value = true
}) })
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
morePage.value = 1
getMoreList(data)
}
} else { } else {
ElMessage({ ElMessage({
message: res.message, message: res.message,
@@ -126,12 +141,63 @@ let downLoadMore = () => {
let list = ref("") let list = ref("")
let moreShowList = ref(null)
let moreState = ref(false) // 更多列表 显示状态
let morePage = ref(1)
let moreList = ref([])
let moreLoading = ref(false)
// 加载更多数据列表
const getMoreList = data => {
if (morePage.value == 0 || moreLoading.value) return
moreLoading.value = true
let postData = {
page: morePage.value,
intermediary: 1,
...seachSelectData.data,
}
if (!postData["orderby"]) postData["orderby"] = "timestamp"
api.getMoreLists(postData)
.then(res => {
if (res.code != 200) return
const data = res.data
moreList.value = moreList.value.concat(data.data)
moreState.value = true
if (data.data && data.data.length < data.limit) morePage.value = 0
else {
morePage.value++
window.addEventListener("scroll", getMoreScroll, true)
}
nextTick(() => {
listMasonryInstanceMore.reloadItems()
listMasonryInstanceMore.layout()
})
})
.finally(() => (moreLoading.value = false))
}
const getMoreScroll = () => {
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
}
//listImg //listImg
onMounted(() => { onMounted(() => {
listMasonryInstance = new Masonry(list.value, { listMasonryInstance = new Masonry(list.value, {
itemSelector: ".item", itemSelector: ".item",
gutter: 20, gutter: 20,
}) })
listMasonryInstanceMore = new Masonry(moreShowList.value, {
itemSelector: ".item",
gutter: 20,
})
// getDataList() // getDataList()
// banner() // banner()
window.addEventListener("scroll", downLoadMore, true) window.addEventListener("scroll", downLoadMore, true)
@@ -196,5 +262,6 @@ img {
background: rgba(245, 251, 255, 1); background: rgba(245, 251, 255, 1);
font-size: 14px; font-size: 14px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 43px;
} }
</style> </style>

77
src/views/housingView/needHousing.vue
View File

@@ -10,6 +10,13 @@
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0"> <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList hint-text-two="建议放宽筛选条件"></noList> <noList hint-text-two="建议放宽筛选条件"></noList>
</div> </div>
<!-- 其他附近房源 -->
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
<div style="width: 1200px;" ref="moreShowList">
<biserialItem v-for="(item, i) in moreList" :key="i" :item="item"></biserialItem>
</div>
</div> </div>
</div> </div>
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText> <loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
@@ -39,6 +46,8 @@ import store from "../../store/index"
//瀑布实例 //瀑布实例
let listMasonryInstance = null let listMasonryInstance = null
let listMasonryInstanceMore = null
//获取数据 //获取数据
let pages = ref(1) let pages = ref(1)
let dataList = reactive({ data: [], count: 0 }) let dataList = reactive({ data: [], count: 0 })
@@ -73,6 +82,9 @@ let getDataList = data => {
...data, ...data,
} }
moreList.value = []
window.removeEventListener("scroll", getMoreScroll, true)
api.getLists(postData).then(res => { api.getLists(postData).then(res => {
if (res.code === 200) { if (res.code === 200) {
dataList.data = res.data.data dataList.data = res.data.data
@@ -93,6 +105,12 @@ let getDataList = data => {
listMasonryInstance.layout() listMasonryInstance.layout()
if (dataList.data.length >= 20) loading.value = true if (dataList.data.length >= 20) loading.value = true
}) })
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
morePage.value = 1
getMoreList(data)
}
} else { } else {
ElMessage({ ElMessage({
message: res.message, message: res.message,
@@ -113,6 +131,50 @@ let downLoadMore = () => {
let list = ref("") let list = ref("")
let moreShowList = ref(null)
let moreState = ref(false) // 更多列表 显示状态
let morePage = ref(1)
let moreList = ref([])
let moreLoading = ref(false)
// 加载更多数据列表
const getMoreList = data => {
if (morePage.value == 0 || moreLoading.value) return
moreLoading.value = true
let postData = {
page: morePage.value,
intermediary: 0,
...seachSelectData.data,
}
if (!postData["orderby"]) postData["orderby"] = "timestamp"
api.getMoreLists(postData).then(res => {
if (res.code != 200) return
const data = res.data
moreList.value = moreList.value.concat(data.data)
moreState.value = true
if (data.data && data.data.length < data.limit) morePage.value = 0
else {
morePage.value++
window.addEventListener("scroll", getMoreScroll, true)
}
nextTick(() => {
listMasonryInstanceMore.reloadItems()
listMasonryInstanceMore.layout()
moreLoading.value = false
})
})
}
const getMoreScroll = () => {
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
}
// const needPitchValue = reactive({ ...store.state.needPitchValue }) // const needPitchValue = reactive({ ...store.state.needPitchValue })
onMounted(() => { onMounted(() => {
@@ -120,6 +182,12 @@ onMounted(() => {
itemSelector: ".item", itemSelector: ".item",
gutter: 20, gutter: 20,
}) })
listMasonryInstanceMore = new Masonry(moreShowList.value, {
itemSelector: ".item",
gutter: 20,
})
// getDataList() // getDataList()
window.addEventListener("scroll", downLoadMore, true) window.addEventListener("scroll", downLoadMore, true)
}) })
@@ -176,4 +244,13 @@ img {
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
} }
.other-nearby-listings-box {
width: 100%;
height: 32px;
color: #525151;
background: rgba(245, 251, 255, 1);
font-size: 14px;
margin-top: 40px;
margin-bottom: 43px;
}
</style> </style>

72
src/views/housingView/person.vue
View File

@@ -13,8 +13,10 @@
</div> </div>
<!-- 其他附近房源 --> <!-- 其他附近房源 -->
<!-- <div class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div> --> <div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
<div style="width: 1200px;" ref="moreShowList">
<biserialItem v-for="(item, i) in moreList" :key="i" :item="item"></biserialItem>
</div>
</div> </div>
</div> </div>
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText> <loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
@@ -26,7 +28,7 @@
</template> </template>
<script setup> <script setup>
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick,getCurrentInstance } from "vue" import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick, getCurrentInstance } from "vue"
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue" import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
import seachModule from "../../components/seachModule/seachModule1.vue" import seachModule from "../../components/seachModule/seachModule1.vue"
import biserialItem from "../../components/biserialListItem/biserialListItem.vue" import biserialItem from "../../components/biserialListItem/biserialListItem.vue"
@@ -42,12 +44,14 @@ import loadMoreText from "../../components/loadMore/loadMoreText.vue"
import backToTop from "@/components/public/backToTop.vue" import backToTop from "@/components/public/backToTop.vue"
import Masonry from "masonry-layout" import Masonry from "masonry-layout"
import store from "../../store/index" import store from "../../store/index"
import { set } from "nprogress"
//路由 //路由
const router = useRouter() const router = useRouter()
//瀑布实例 //瀑布实例
let listMasonryInstance = null let listMasonryInstance = null
let listMasonryInstanceMore = null
//获取数据 //获取数据
let pages = ref(1) let pages = ref(1)
@@ -61,7 +65,6 @@ provide("count", dataCount)
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
//保存搜索设置 //保存搜索设置
let setSeachSelectData = (data, noMask = false) => { let setSeachSelectData = (data, noMask = false) => {
store.state.personPitchValue = data store.state.personPitchValue = data
@@ -96,6 +99,9 @@ let getDataList = data => {
} }
if (!postData["orderby"]) postData["orderby"] = "timestamp" if (!postData["orderby"]) postData["orderby"] = "timestamp"
moreList.value = []
window.removeEventListener("scroll", getMoreScroll, true)
api.getLists(postData).then(res => { api.getLists(postData).then(res => {
if (res.code === 200) { if (res.code === 200) {
dataList.data = res.data.data dataList.data = res.data.data
@@ -116,6 +122,12 @@ let getDataList = data => {
listMasonryInstance.layout() listMasonryInstance.layout()
if (dataList.data.length >= 20) loading.value = true if (dataList.data.length >= 20) loading.value = true
}) })
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
if (res.data.data.length < 20 && (data["school"] || data["location"].length != 0)) {
morePage.value = 1
getMoreList(data)
}
} else { } else {
ElMessage({ ElMessage({
message: res.message, message: res.message,
@@ -135,12 +147,62 @@ let downLoadMore = () => {
} }
let list = ref(null) let list = ref(null)
let moreShowList = ref(null)
let moreState = ref(false) // 更多列表 显示状态
let morePage = ref(1)
let moreList = ref([])
let moreLoading = ref(false)
// 加载更多数据列表
const getMoreList = data => {
if (morePage.value == 0 || moreLoading.value) return
moreLoading.value = true
let postData = {
page: morePage.value,
intermediary: 0,
...seachSelectData.data,
}
if (!postData["orderby"]) postData["orderby"] = "timestamp"
api.getMoreLists(postData).then(res => {
if (res.code != 200) return
const data = res.data
moreList.value = moreList.value.concat(data.data)
moreState.value = true
if (data.data && data.data.length < data.limit) morePage.value = 0
else {
morePage.value++
window.addEventListener("scroll", getMoreScroll, true)
}
nextTick(() => {
listMasonryInstanceMore.reloadItems()
listMasonryInstanceMore.layout()
moreLoading.value = false
})
})
}
const getMoreScroll = () => {
let body = document.documentElement ? document.documentElement : document.body ? document.body : document.querySelector(".element")
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
}
//listImg //listImg
onMounted(() => { onMounted(() => {
listMasonryInstance = new Masonry(list.value, { listMasonryInstance = new Masonry(list.value, {
itemSelector: ".item", itemSelector: ".item",
gutter: 20, gutter: 20,
}) })
listMasonryInstanceMore = new Masonry(moreShowList.value, {
itemSelector: ".item",
gutter: 20,
})
// let { type, data } = router.currentRoute.value.query // let { type, data } = router.currentRoute.value.query
// let typeData = null // let typeData = null
// if (data) typeData = JSON.parse(data) // if (data) typeData = JSON.parse(data)
@@ -153,6 +215,7 @@ onMounted(() => {
// } // }
// banner() // banner()
// getDataList(seachSelectData.data) // getDataList(seachSelectData.data)
window.addEventListener("scroll", downLoadMore, true) window.addEventListener("scroll", downLoadMore, true)
}) })
@@ -216,5 +279,6 @@ img {
background: rgba(245, 251, 255, 1); background: rgba(245, 251, 255, 1);
font-size: 14px; font-size: 14px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 43px;
} }
</style> </style>