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

优化tab的轮播图的数据

Browse Source
This commit is contained in:
A1300399510
2024-03-26 17:30:58 +08:00
parent d8f64a1a5f
commit 9cc3ef52fa
20 changed files with 347 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

2
dist/css/housing.77776509.css → dist/css/housing.77b6f068.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/user.8bfebe70.css → dist/css/user.9bcb1e48.css vendored
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.e0e9f2f6.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.753b82c0.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.6e9dd806.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.25ef79b4.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.0804c7b1.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 || [];
(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/app.0804c7b1.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.753b82c0.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
dist/js/detail.60c69249.js → dist/js/detail.150f07a0.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
dist/js/housing.845faae9.js → dist/js/housing.bea11d09.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

13
src/App.vue
View File

@@ -7,6 +7,7 @@ import login from "@/components/public/login.vue"
import store from "@/store" import store from "@/store"
import {onMounted, watch, watchEffect} from "vue" import {onMounted, watch, watchEffect} from "vue"
import {useRoute} from "vue-router" import {useRoute} from "vue-router"
import api from "./utils/api"
let socketTask = null let socketTask = null
onMounted(() => { onMounted(() => {
@@ -20,6 +21,8 @@ onMounted(() => {
// script.src = "https://v1.cnzz.com/z_stat.php?id=1281224882&web_id=1281224882" // script.src = "https://v1.cnzz.com/z_stat.php?id=1281224882&web_id=1281224882"
// script.language = "JavaScript" // script.language = "JavaScript"
// document.body.appendChild(script) // document.body.appendChild(script)
getBannerData()
}) })
const route = useRoute() const route = useRoute()
@@ -84,6 +87,16 @@ const getMiucmsSessionCookie = () => {
} }
return null return null
} }
// 获取轮播图的 数据
const getBannerData = () => {
api.banner().then(res => {
if (res.code === 200) {
// bannerData
store.state.bannerData = res.data
}
})
}
</script> </script>
<style lang="less"> <style lang="less">
header.page-header { header.page-header {

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

@@ -1,86 +1,83 @@
<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' }"> <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">
<!-- 顶部导航 --> <!-- 顶部导航 -->
<div class="dis-f jus-x al-item index-top-navigation-box"> <div class="dis-f jus-x al-item index-top-navigation-box">
<div class="index-top-navigation dis-f al-item body-maxWidth" v-if="false"> <div class="index-top-navigation dis-f al-item body-maxWidth" v-if="false">
<div class="navigation-text" @click="topTabSelect(i, item)" <div class="navigation-text" @click="topTabSelect(i, item)" :class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
:class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i"> {{ item.name }}
{{ item.name }}</div> </div>
<div class="user-box" v-if="user.data['uid'] > 0"> <div class="user-box" v-if="user.data['uid'] > 0">
<a target="_blank" :href="`https://bbs.gter.net/home.php?mod=space&uid=${user.data['uin']}`"> <a target="_blank" :href="`https://bbs.gter.net/home.php?mod=space&uid=${user.data['uin']}`">
<img :src="user.data.avatar" class="user-img" alt=""> <img :src="user.data.avatar" class="user-img" alt="" />
</a> </a>
<!-- <img v-else src="@/assets/img/publicImage/defaultAvatar.png" class="user-img" alt=""> --> <!-- <img v-else src="@/assets/img/publicImage/defaultAvatar.png" class="user-img" alt=""> -->
<div class="user-out-box"> <div class="user-out-box">
<div class="box-bg dis-f jus-x"> <div class="box-bg dis-f jus-x">
<div class="top-box"></div> <div class="top-box"></div>
<a :href="quitUrl" style="color: #fff;"> <a :href="quitUrl" style="color: #fff;">
退出 退出
</a> </a>
</div> </div>
</div>
</div>
<div class="login-box" v-else>
<div class="login-box-item" @click="loginBtn('login')">登录</div>
<div class="login-box-item" @click="loginBtn('register')">注册</div>
</div>
</div>
</div>
<div class="dis-f jus-x al-item body-maxWidth" style="margin: auto;">
<div class="logo-box dis-f al-item body-maxWidth">
<img src="../../assets/homeImage/logo.png" class="logo-img" alt="" @click="goIndex()" />
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()" />
</div>
</div>
<!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> -->
<div class="dis-f jus-x al-item" v-if="bannerLists.data.length">
<div class="body-maxWidth">
<el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;">
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
<div style="width: 100%; height: 100%;" class="dis-f jus-x al-item">
<img class="carousel-img" :src="item.imageurl" alt="" @click="openInfo(item)" />
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="btm-seach-btn-box dis-f al-item jus-x" v-if="pageTopBarShow">
<div class="body-maxWidth dis-f" style="height: 40px;">
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }" v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
<el-badge v-if="item['path'] == '/user' && user.data['messagenum'] != 0" :value="user.data['messagenum']">
<div style="padding: 0 10px;">
{{ item.name }}
</div>
</el-badge>
<div v-else>{{ item.name }}</div>
</div>
</div>
</div> </div>
</div>
<div class="login-box" v-else>
<div class="login-box-item" @click="loginBtn('login')">登录</div>
<div class="login-box-item" @click="loginBtn('register')">注册</div>
</div>
</div> </div>
</div>
<div class="dis-f jus-x al-item body-maxWidth" style="margin: auto;">
<div class="logo-box dis-f al-item body-maxWidth">
<img src="../../assets/homeImage/logo.png" class="logo-img" alt="" @click="goIndex()">
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()">
</div>
</div>
<!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> -->
<div class="dis-f jus-x al-item" v-if="bannerLists.data.length">
<div class="body-maxWidth">
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
<div style="width:100%;height:100%;" class="dis-f jus-x al-item">
<img class="carousel-img" :src="item.imageurl" alt="" @click="openInfo(item)">
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="btm-seach-btn-box dis-f al-item jus-x" v-if="pageTopBarShow">
<div class="body-maxWidth dis-f" style="height:40px;">
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }"
v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
<el-badge v-if="item['path'] == '/user' && user.data['messagenum'] != 0" :value="user.data['messagenum']">
<div style="padding:0 10px;">
{{ item.name }}
</div>
</el-badge>
<div v-else>{{ item.name }}</div>
</div>
</div>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import store from '../../store/index'; import store from "../../store/index"
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router"
import { reactive, watchEffect, ref, defineProps } from "vue"; import { reactive, watchEffect, ref, defineProps } from "vue"
import { goTologin } from '@/utils/util.js' import { goTologin } from "@/utils/util.js"
const props = defineProps({ const props = defineProps({
bannerList: { bannerList: {
type: Array, type: Array,
default: function () { default: function () {
return [] return []
} },
} },
}) })
//退出登录 //退出登录
@@ -94,343 +91,344 @@ let seachTab = reactive({ data: [] })
let bannerLists = reactive({ data: [] }) let bannerLists = reactive({ data: [] })
watchEffect(() => { watchEffect(() => {
user.data = store.state.user user.data = store.state.user
bannerLists.data = props.bannerList // bannerLists.data = props.bannerList
if (!store.state.indexData.menu) return if (!store.state.indexData.menu) return
store.state.indexData.menu.map(res => { store.state.indexData.menu.map(res => {
if (res.name === '首页') { if (res.name === "首页") {
res.path = '/' res.path = "/"
} else if (res.name === '个人房源') { } else if (res.name === "个人房源") {
res.path = '/personHousing' res.path = "/personHousing"
} } else if (res.name === "中介房源") {
else if (res.name === '中介房源') { res.path = "/intermediaryHousing"
res.path = '/intermediaryHousing' } else if (res.name === "品牌公寓") {
} res.path = "/apartment"
else if (res.name === '品牌公寓') { } else if (res.name === "求房源") {
res.path = '/apartment' res.path = "/needHousing"
} } else if (res.name === "我的") {
else if (res.name === '求房源') { res.path = "/user"
res.path = '/needHousing' }
} })
else if (res.name === '我的') { seachTab.data = store.state.indexData.menu
res.path = '/user' topTab.data = store.state.indexData.nav
}
})
seachTab.data = store.state.indexData.menu
topTab.data = store.state.indexData.nav
}) })
//顶部导航跳转 //顶部导航跳转
let topTabNum = ref('fang') let topTabNum = ref("fang")
let topTabSelect = (type, item) => { let topTabSelect = (type, item) => {
// topTabNum.value=type // topTabNum.value=type
window.open(item.url) window.open(item.url)
} }
//页面跳转 //页面跳转
const router = useRouter() const router = useRouter()
let tabBtnType = ref('/') let tabBtnType = ref("/")
let pageTopBarShow = router.currentRoute.value.meta.topBarShow let pageTopBarShow = router.currentRoute.value.meta.topBarShow
let changeTabBtnType = (item) => { let changeTabBtnType = item => {
// 判断点击进入 user 时是否已经登录 // 判断点击进入 user 时是否已经登录
if (item['path'] == '/user' && user.data['uid'] == 0) { if (item["path"] == "/user" && user.data["uid"] == 0) {
loginBtn('login') loginBtn("login")
return return
} }
tabBtnType.value = item.path tabBtnType.value = item.path
router.push({ router.push({
path: item.path path: item.path,
}) })
} }
let openInfo = (data) => { let openInfo = data => {
window.open(data.url) window.open(data.url)
} }
//监听路由 //监听路由
const route = useRoute() const route = useRoute()
let routePath = ref('') let routePath = ref("")
routePath.value = route.meta.path routePath.value = route.meta.path
tabBtnType.value = route.meta.path tabBtnType.value = route.meta.path
// 点击登录注册 type login 登录 register注册 // 点击登录注册 type login 登录 register注册
const loginBtn = type => { const loginBtn = type => {
if (type == 'login') { if (type == "login") {
store.state.showloginmodal = true store.state.showloginmodal = true
return return
} }
goTologin() goTologin()
} }
// 跳转首页 // 跳转首页
const goIndex = () => router.push("/") const goIndex = () => router.push("/")
watchEffect(() => {
if (routePath.value == "/needHousing") bannerLists.data = store.state.bannerData.needHousing || []
else if (routePath.value == "/intermediaryHousing") bannerLists.data = store.state.bannerData.intermediaryHousing || []
else if (routePath.value == "/personHousing") bannerLists.data = store.state.bannerData.personHousing || []
else if (routePath.value == "/apartment") bannerLists.data = store.state.bannerData.apartment || []
else if (routePath.value == "/") bannerLists.data = store.state.bannerData.home || []
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.pos-r { .pos-r {
position: relative; position: relative;
} }
.dis-f { .dis-f {
display: flex; display: flex;
} }
.jus-x { .jus-x {
justify-content: center; justify-content: center;
} }
.al-item { .al-item {
align-items: center; align-items: center;
} }
.pos-r { .pos-r {
position: relative; position: relative;
} }
.body-maxWidth { .body-maxWidth {
width: 1200px; width: 1200px;
min-width: 1200px; min-width: 1200px;
} }
.s-w-100 { .s-w-100 {
width: 100%; width: 100%;
} }
.top-bg-img-box { .top-bg-img-box {
width: 100%; width: 100%;
min-width: 1200px; min-width: 1200px;
} }
.top-bg-img-box .bg-img { .top-bg-img-box .bg-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.top-bg-img-box .info-box { .top-bg-img-box .info-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.756862745098039); background-color: rgba(0, 0, 0, 0.756862745098039);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
.index-top-navigation-box { .index-top-navigation-box {
height: 60px; height: 60px;
width: 100%; width: 100%;
} }
.index-top-navigation-box .navigation-text { .index-top-navigation-box .navigation-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;
color: rgba(215, 215, 215, 0.988235294117647); color: rgba(215, 215, 215, 0.988235294117647);
text-align: center; text-align: center;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
} }
.index-top-navigation-box .navigation-text-click { .index-top-navigation-box .navigation-text-click {
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: #62B1FF; color: #62b1ff;
border-bottom: 3px solid rgba(98, 177, 255, 1); border-bottom: 3px solid rgba(98, 177, 255, 1);
} }
.index-top-navigation { .index-top-navigation {
height: 60px; height: 60px;
justify-content: end; justify-content: end;
} }
.top-bg-img-box .user-img { .top-bg-img-box .user-img {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
} }
.top-bg-img-box .info-box .logo-box { .top-bg-img-box .info-box .logo-box {
height: 40px; height: 40px;
} }
.top-bg-img-box .info-box .logo-box .logo-img { .top-bg-img-box .info-box .logo-box .logo-img {
object-fit: contain; object-fit: contain;
width: 30px; width: 30px;
height: 31px; height: 31px;
cursor: pointer; cursor: pointer;
} }
.top-bg-img-box .info-box .logo-box .logo-text-img { .top-bg-img-box .info-box .logo-box .logo-text-img {
object-fit: contain; object-fit: contain;
width: 173px; width: 173px;
height: 31px; height: 31px;
padding-left: 10px; padding-left: 10px;
cursor: pointer; cursor: pointer;
} }
.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: 44px; height: 44px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba(0, 0, 0, 0.596078431372549); background: rgba(0, 0, 0, 0.596078431372549);
border-bottom: 4px solid rgba(78, 144, 204, 1); border-bottom: 4px solid rgba(78, 144, 204, 1);
} }
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn:hover { .top-bg-img-box .info-box .btm-seach-btn-box .tab-btn:hover {
color: #fff !important; color: #fff !important;
} }
.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: 40px; 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;
font-size: 16px; font-size: 16px;
color: #E2EDF7; color: #e2edf7;
cursor: pointer; cursor: pointer;
} }
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn-click { .top-bg-img-box .info-box .btm-seach-btn-box .tab-btn-click {
background-color: rgba(98, 177, 255, 1); background-color: rgba(98, 177, 255, 1);
border: none; border: none;
border-bottom: 0px; border-bottom: 0px;
border-radius: 8px; border-radius: 8px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
-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-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: 18px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
} }
.carousel-img { .carousel-img {
margin: 0 auto; margin: 0 auto;
width: 660px; width: 660px;
height: 280px; height: 280px;
border-radius: 15px; border-radius: 15px;
cursor: pointer; cursor: pointer;
} }
.user-box:hover .user-out-box { .user-box:hover .user-out-box {
display: block; display: block;
} }
.user-out-box { .user-out-box {
color: #fff; color: #fff;
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: 10px; font-size: 10px;
position: absolute; position: absolute;
bottom: -32px; bottom: -32px;
display: none; display: none;
} }
.user-box { .user-box {
position: relative;
.top-box {
border-radius: 2px;
width: 8px;
height: 8px;
background: #000;
position: absolute;
top: -4px;
transform: rotate(45deg)
}
.box-bg {
width: 32px;
height: 28px;
line-height: 28px;
border-radius: 5px;
background: #000;
text-align: center;
position: relative; position: relative;
}
.top-box {
border-radius: 2px;
width: 8px;
height: 8px;
background: #000;
position: absolute;
top: -4px;
transform: rotate(45deg);
}
.box-bg {
width: 32px;
height: 28px;
line-height: 28px;
border-radius: 5px;
background: #000;
text-align: center;
position: relative;
}
} }
/deep/.el-carousel__arrow { /deep/.el-carousel__arrow {
border: 2px solid #545454; border: 2px solid #545454;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
/deep/.el-icon { /deep/.el-icon {
font-size: 20px; font-size: 20px;
} }
/deep/.el-carousel__indicator--horizontal { /deep/.el-carousel__indicator--horizontal {
padding: var(--el-carousel-indicator-padding-vertical) 2px; padding: var(--el-carousel-indicator-padding-vertical) 2px;
} }
/deep/ .el-carousel__button { /deep/ .el-carousel__button {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 4px; border-radius: 4px;
} }
/deep/ .is-active button { /deep/ .is-active button {
background: #62b1ff; background: #62b1ff;
} }
/deep/ .el-input__wrapper { /deep/ .el-input__wrapper {
background: inherit; background: inherit;
background-color: rgba(246, 246, 246, 1); background-color: rgba(246, 246, 246, 1);
border-right: 0px; border-right: 0px;
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
} }
/deep/ .el-input__inner { /deep/ .el-input__inner {
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: left; text-align: left;
} }
.dropdown { .dropdown {
background: #000; background: #000;
} }
.login-box { .login-box {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
line-height: 40px; line-height: 40px;
text-align: right; text-align: right;
display: flex; display: flex;
align-items: center; align-items: center;
.login-box-item { .login-box-item {
background: #000; background: #000;
color: #fff; color: #fff;
text-align: center; text-align: center;
border-radius: 57px; border-radius: 57px;
width: 50px; width: 50px;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
cursor: pointer; cursor: pointer;
&:last-child { &:last-child {
background: #fff; background: #fff;
color: #000; color: #000;
margin-left: 18px; margin-left: 18px;
}
} }
}
} }
</style> </style>

2
src/components/public/public-list-item.vue
View File

@@ -35,7 +35,7 @@
</div> </div>
<div class="address-text dis-f al-item" v-if="item['location']"> <div class="address-text dis-f al-item" v-if="item['location']">
<template v-if="Array.isArray(item['location'])"> <template v-if="Array.isArray(item['location'])">
<template v-for="it in item['location']"> <template v-for="(it, i) in item['location']" :key="i">
<div class="address-item flexacenter" v-if="it"> <div class="address-item flexacenter" v-if="it">
<img src="../../assets/homeImage/addMarker.png" class="img" alt=""> <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
{{ location[it >>> 0] + ' > ' + (it >>> 0 == it ? '不限' : location[it]) }} {{ location[it >>> 0] + ' > ' + (it >>> 0 == it ? '不限' : location[it]) }}

1
src/store/index.js
View File

@@ -29,6 +29,7 @@ export default createStore({
personPitchValue: {}, // 个人筛选的值 全局化 personPitchValue: {}, // 个人筛选的值 全局化
intermediaryPitchValue: {}, // 中介筛选的值 全局化 intermediaryPitchValue: {}, // 中介筛选的值 全局化
locationObj: {}, // 地区数据 locationObj: {}, // 地区数据
bannerData: {}, // 所有轮播数据
}, },
getters: { getters: {

21
src/views/HomeView.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div class="home box-min-1200-src"> <div class="home box-min-1200-src">
<pageTopBar :bannerList="bannerList.data.home"></pageTopBar> <!-- <pageTopBar :bannerList="bannerList.data.home"></pageTopBar> -->
<pageTopBar></pageTopBar>
<!-- 搜索模块 --> <!-- 搜索模块 -->
<seachModule :getDataList="personHouseingInfo"></seachModule> <seachModule :getDataList="personHouseingInfo"></seachModule>
<!-- 房源展示 --> <!-- 房源展示 -->
@@ -227,14 +228,14 @@ let waterfallList = ref([])
let noWaterfallList = ref(3) let noWaterfallList = ref(3)
//轮播 //轮播
let bannerList = reactive({ data: [] }) // let bannerList = reactive({ data: [] })
let banner = () => { // let banner = () => {
api.banner().then(res => { // api.banner().then(res => {
if (res.code === 200) { // if (res.code === 200) {
bannerList.data = res.data // bannerList.data = res.data
} // }
}) // })
} // }
//开关 //开关
let loadMore = ref(true) let loadMore = ref(true)
@@ -353,7 +354,7 @@ onMounted(() => {
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
currentInstance = getCurrentInstance() currentInstance = getCurrentInstance()
getRecommendList() getRecommendList()
banner() // banner()
window.addEventListener('scroll', onPageSrcoll, true); window.addEventListener('scroll', onPageSrcoll, true);
}) })

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

@@ -1,12 +1,13 @@
<template> <template>
<pageTopBar :bannerList="bannerList.data.apartment"></pageTopBar> <!-- <pageTopBar :bannerList="bannerList.data.apartment"></pageTopBar> -->
<pageTopBar></pageTopBar>
<!-- 筛选 --> <!-- 筛选 -->
<div class="screen-box wid1200"> <div class="screen-box wid1200">
<seach-module @handleTransfer="handleTransfer" :count="listCount" :initPitchValue="pitchValue"></seach-module> <seach-module @handleTransfer="handleTransfer" :count="listCount" :initPitchValue="pitchValue"></seach-module>
</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 in list" :item="item"></apartment-item> <apartment-item v-if="list.length != 0" v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
</div> </div>
<div v-if="list.length == 0" class="empty-box wid1200 flexcenter"> <div v-if="list.length == 0" class="empty-box wid1200 flexcenter">
@@ -66,7 +67,7 @@ onMounted(() => {
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)
@@ -147,12 +148,12 @@ const handleTransfer = data => {
} }
//轮播 //轮播
let bannerList = reactive({ data: [] }) // let bannerList = reactive({ data: [] })
let banner = () => { // let banner = () => {
proxy.$get("/tenement/pc/api/banner").then(res => { // proxy.$get("/tenement/pc/api/banner").then(res => {
if (res.code === 200) bannerList.data = res.data // if (res.code === 200) bannerList.data = res.data
}) // })
} // }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.screen-box { .screen-box {

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

@@ -1,6 +1,7 @@
<template> <template>
<div class="box-min-1200-src"> <div class="box-min-1200-src">
<pageTopBar :bannerList="bannerList.data.intermediaryHousing"></pageTopBar> <!-- <pageTopBar :bannerList="bannerList.data.intermediaryHousing"></pageTopBar> -->
<pageTopBar></pageTopBar>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule> <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35"> <div class="body-maxWidth mg-t-35">
@@ -50,14 +51,14 @@ let loadingText = ref(" 下拉加载更多 ")
provide("count", dataCount) provide("count", dataCount)
//轮播 //轮播
let bannerList = reactive({ data: [] }) // let bannerList = reactive({ data: [] })
let banner = () => { // let banner = () => {
api.banner().then(res => { // api.banner().then(res => {
if (res.code === 200) { // if (res.code === 200) {
bannerList.data = res.data // bannerList.data = res.data
} // }
}) // })
} // }
//保存搜索设置 //保存搜索设置
let setSeachSelectData = (data, noMask = false) => { let setSeachSelectData = (data, noMask = false) => {
@@ -129,7 +130,7 @@ onMounted(() => {
gutter: 20, gutter: 20,
}) })
// getDataList() // getDataList()
banner() // banner()
window.addEventListener("scroll", downLoadMore, true) window.addEventListener("scroll", downLoadMore, true)
}) })

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

@@ -1,6 +1,7 @@
<template> <template>
<div class="box-min-1200-src"> <div class="box-min-1200-src">
<pageTopBar :bannerList="bannerList.data.personHousing"></pageTopBar> <!-- <pageTopBar :bannerList="bannerList.data.personHousing"></pageTopBar> -->
<pageTopBar></pageTopBar>
<seachModule :getDataList="setSeachSelectData"></seachModule> <seachModule :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35"> <div class="body-maxWidth mg-t-35">
@@ -70,14 +71,14 @@ let setSeachSelectData = (data, noMask = false) => {
} }
//轮播 //轮播
let bannerList = reactive({ data: [] }) // let bannerList = reactive({ data: [] })
let banner = () => { // let banner = () => {
api.banner().then(res => { // api.banner().then(res => {
if (res.code === 200) { // if (res.code === 200) {
bannerList.data = res.data // bannerList.data = res.data
} // }
}) // })
} // }
//获取搜索数据 //获取搜索数据
let getDataList = data => { let getDataList = data => {
@@ -146,7 +147,7 @@ onMounted(() => {
// seachSelectData.data = { [type]: typeData } // seachSelectData.data = { [type]: typeData }
// } // }
// } // }
banner() // banner()
// getDataList(seachSelectData.data) // getDataList(seachSelectData.data)
window.addEventListener("scroll", downLoadMore, true) window.addEventListener("scroll", downLoadMore, true)
}) })