优化tab的轮播图的数据
This commit is contained in:
13
src/App.vue
13
src/App.vue
@@ -7,6 +7,7 @@ import login from "@/components/public/login.vue"
|
||||
import store from "@/store"
|
||||
import {onMounted, watch, watchEffect} from "vue"
|
||||
import {useRoute} from "vue-router"
|
||||
import api from "./utils/api"
|
||||
let socketTask = null
|
||||
|
||||
onMounted(() => {
|
||||
@@ -20,6 +21,8 @@ onMounted(() => {
|
||||
// script.src = "https://v1.cnzz.com/z_stat.php?id=1281224882&web_id=1281224882"
|
||||
// script.language = "JavaScript"
|
||||
// document.body.appendChild(script)
|
||||
|
||||
getBannerData()
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
@@ -84,6 +87,16 @@ const getMiucmsSessionCookie = () => {
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 获取轮播图的 数据
|
||||
const getBannerData = () => {
|
||||
api.banner().then(res => {
|
||||
if (res.code === 200) {
|
||||
// bannerData
|
||||
store.state.bannerData = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
header.page-header {
|
||||
|
||||
@@ -1,86 +1,83 @@
|
||||
<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 ? '470px' : '260px' }">
|
||||
<img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="bannerLists.data.length">
|
||||
<img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length">
|
||||
<div class="info-box">
|
||||
<!-- 顶部导航 -->
|
||||
<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="navigation-text" @click="topTabSelect(i, item)"
|
||||
:class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
|
||||
{{ item.name }}</div>
|
||||
<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']}`">
|
||||
<img :src="user.data.avatar" class="user-img" alt="">
|
||||
</a>
|
||||
<!-- <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '530px' : '260px' }"> -->
|
||||
<div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '470px' : '260px' }">
|
||||
<img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="bannerLists.data.length" />
|
||||
<img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length" />
|
||||
<div class="info-box">
|
||||
<!-- 顶部导航 -->
|
||||
<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="navigation-text" @click="topTabSelect(i, item)" :class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<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']}`">
|
||||
<img :src="user.data.avatar" class="user-img" alt="" />
|
||||
</a>
|
||||
|
||||
<!-- <img v-else src="@/assets/img/publicImage/defaultAvatar.png" class="user-img" alt=""> -->
|
||||
<div class="user-out-box">
|
||||
<div class="box-bg dis-f jus-x">
|
||||
<div class="top-box"></div>
|
||||
<a :href="quitUrl" style="color: #fff;">
|
||||
退出
|
||||
</a>
|
||||
</div>
|
||||
<!-- <img v-else src="@/assets/img/publicImage/defaultAvatar.png" class="user-img" alt=""> -->
|
||||
<div class="user-out-box">
|
||||
<div class="box-bg dis-f jus-x">
|
||||
<div class="top-box"></div>
|
||||
<a :href="quitUrl" style="color: #fff;">
|
||||
退出
|
||||
</a>
|
||||
</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 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>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import store from '../../store/index';
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { reactive, watchEffect, ref, defineProps } from "vue";
|
||||
import { goTologin } from '@/utils/util.js'
|
||||
import store from "../../store/index"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { reactive, watchEffect, ref, defineProps } from "vue"
|
||||
import { goTologin } from "@/utils/util.js"
|
||||
|
||||
const props = defineProps({
|
||||
bannerList: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
bannerList: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
//退出登录
|
||||
@@ -94,343 +91,344 @@ let seachTab = reactive({ data: [] })
|
||||
let bannerLists = reactive({ data: [] })
|
||||
|
||||
watchEffect(() => {
|
||||
user.data = store.state.user
|
||||
bannerLists.data = props.bannerList
|
||||
if (!store.state.indexData.menu) return
|
||||
store.state.indexData.menu.map(res => {
|
||||
if (res.name === '首页') {
|
||||
res.path = '/'
|
||||
} else if (res.name === '个人房源') {
|
||||
res.path = '/personHousing'
|
||||
}
|
||||
else if (res.name === '中介房源') {
|
||||
res.path = '/intermediaryHousing'
|
||||
}
|
||||
else if (res.name === '品牌公寓') {
|
||||
res.path = '/apartment'
|
||||
}
|
||||
else if (res.name === '求房源') {
|
||||
res.path = '/needHousing'
|
||||
}
|
||||
else if (res.name === '我的') {
|
||||
res.path = '/user'
|
||||
}
|
||||
})
|
||||
seachTab.data = store.state.indexData.menu
|
||||
topTab.data = store.state.indexData.nav
|
||||
user.data = store.state.user
|
||||
// bannerLists.data = props.bannerList
|
||||
if (!store.state.indexData.menu) return
|
||||
store.state.indexData.menu.map(res => {
|
||||
if (res.name === "首页") {
|
||||
res.path = "/"
|
||||
} else if (res.name === "个人房源") {
|
||||
res.path = "/personHousing"
|
||||
} else if (res.name === "中介房源") {
|
||||
res.path = "/intermediaryHousing"
|
||||
} else if (res.name === "品牌公寓") {
|
||||
res.path = "/apartment"
|
||||
} else if (res.name === "求房源") {
|
||||
res.path = "/needHousing"
|
||||
} else if (res.name === "我的") {
|
||||
res.path = "/user"
|
||||
}
|
||||
})
|
||||
seachTab.data = store.state.indexData.menu
|
||||
topTab.data = store.state.indexData.nav
|
||||
})
|
||||
|
||||
//顶部导航跳转
|
||||
let topTabNum = ref('fang')
|
||||
let topTabNum = ref("fang")
|
||||
let topTabSelect = (type, item) => {
|
||||
// topTabNum.value=type
|
||||
window.open(item.url)
|
||||
// topTabNum.value=type
|
||||
window.open(item.url)
|
||||
}
|
||||
|
||||
//页面跳转
|
||||
const router = useRouter()
|
||||
let tabBtnType = ref('/')
|
||||
let tabBtnType = ref("/")
|
||||
|
||||
let pageTopBarShow = router.currentRoute.value.meta.topBarShow
|
||||
let changeTabBtnType = (item) => {
|
||||
// 判断点击进入 user 时是否已经登录
|
||||
if (item['path'] == '/user' && user.data['uid'] == 0) {
|
||||
loginBtn('login')
|
||||
return
|
||||
}
|
||||
tabBtnType.value = item.path
|
||||
router.push({
|
||||
path: item.path
|
||||
})
|
||||
let changeTabBtnType = item => {
|
||||
// 判断点击进入 user 时是否已经登录
|
||||
if (item["path"] == "/user" && user.data["uid"] == 0) {
|
||||
loginBtn("login")
|
||||
return
|
||||
}
|
||||
tabBtnType.value = item.path
|
||||
router.push({
|
||||
path: item.path,
|
||||
})
|
||||
}
|
||||
|
||||
let openInfo = (data) => {
|
||||
window.open(data.url)
|
||||
let openInfo = data => {
|
||||
window.open(data.url)
|
||||
}
|
||||
|
||||
//监听路由
|
||||
const route = useRoute()
|
||||
let routePath = ref('')
|
||||
let routePath = ref("")
|
||||
routePath.value = route.meta.path
|
||||
tabBtnType.value = route.meta.path
|
||||
|
||||
|
||||
// 点击登录注册 type login 登录 register注册
|
||||
const loginBtn = type => {
|
||||
if (type == 'login') {
|
||||
store.state.showloginmodal = true
|
||||
return
|
||||
}
|
||||
goTologin()
|
||||
if (type == "login") {
|
||||
store.state.showloginmodal = true
|
||||
return
|
||||
}
|
||||
goTologin()
|
||||
}
|
||||
|
||||
// 跳转首页
|
||||
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>
|
||||
<style lang="less" scoped>
|
||||
<style lang="less" scoped>
|
||||
.pos-r {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-maxWidth {
|
||||
width: 1200px;
|
||||
min-width: 1200px;
|
||||
width: 1200px;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-bg-img-box {
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.756862745098039);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.756862745098039);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.index-top-navigation-box {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.index-top-navigation-box .navigation-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: rgba(215, 215, 215, 0.988235294117647);
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: rgba(215, 215, 215, 0.988235294117647);
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.index-top-navigation-box .navigation-text-click {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #62B1FF;
|
||||
border-bottom: 3px solid rgba(98, 177, 255, 1);
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #62b1ff;
|
||||
border-bottom: 3px solid rgba(98, 177, 255, 1);
|
||||
}
|
||||
|
||||
.index-top-navigation {
|
||||
height: 60px;
|
||||
justify-content: end;
|
||||
height: 60px;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.top-bg-img-box .user-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box {
|
||||
height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box .logo-img {
|
||||
object-fit: contain;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
cursor: pointer;
|
||||
object-fit: contain;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box .logo-text-img {
|
||||
object-fit: contain;
|
||||
width: 173px;
|
||||
height: 31px;
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
object-fit: contain;
|
||||
width: 173px;
|
||||
height: 31px;
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.596078431372549);
|
||||
border-bottom: 4px solid rgba(78, 144, 204, 1);
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.596078431372549);
|
||||
border-bottom: 4px solid rgba(78, 144, 204, 1);
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #E2EDF7;
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #e2edf7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn-click {
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: none;
|
||||
border-bottom: 0px;
|
||||
border-radius: 8px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: none;
|
||||
border-bottom: 0px;
|
||||
border-radius: 8px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
margin: 0 auto;
|
||||
width: 660px;
|
||||
height: 280px;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
width: 660px;
|
||||
height: 280px;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-box:hover .user-out-box {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-out-box {
|
||||
color: #fff;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
bottom: -32px;
|
||||
display: none;
|
||||
color: #fff;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
bottom: -32px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
border: 2px solid #545454;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid #545454;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/deep/.el-icon {
|
||||
font-size: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/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 {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/deep/ .is-active button {
|
||||
background: #62b1ff;
|
||||
background: #62b1ff;
|
||||
}
|
||||
|
||||
/deep/ .el-input__wrapper {
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-right: 0px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-right: 0px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
/deep/ .el-input__inner {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
text-align: left;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
background: #000;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.login-box-item {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 57px;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
cursor: pointer;
|
||||
.login-box-item {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 57px;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
margin-left: 18px;
|
||||
&:last-child {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
margin-left: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
<div class="address-text dis-f al-item" v-if="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">
|
||||
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
|
||||
{{ location[it >>> 0] + ' > ' + (it >>> 0 == it ? '不限' : location[it]) }}
|
||||
|
||||
@@ -29,6 +29,7 @@ export default createStore({
|
||||
personPitchValue: {}, // 个人筛选的值 全局化
|
||||
intermediaryPitchValue: {}, // 中介筛选的值 全局化
|
||||
locationObj: {}, // 地区数据
|
||||
bannerData: {}, // 所有轮播数据
|
||||
},
|
||||
getters: {
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<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>
|
||||
<!-- 房源展示 -->
|
||||
@@ -227,14 +228,14 @@ let waterfallList = ref([])
|
||||
let noWaterfallList = ref(3)
|
||||
|
||||
//轮播
|
||||
let bannerList = reactive({ data: [] })
|
||||
let banner = () => {
|
||||
api.banner().then(res => {
|
||||
if (res.code === 200) {
|
||||
bannerList.data = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
// let bannerList = reactive({ data: [] })
|
||||
// let banner = () => {
|
||||
// api.banner().then(res => {
|
||||
// if (res.code === 200) {
|
||||
// bannerList.data = res.data
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
//开关
|
||||
let loadMore = ref(true)
|
||||
@@ -353,7 +354,7 @@ onMounted(() => {
|
||||
document.documentElement.scrollTop = 0
|
||||
currentInstance = getCurrentInstance()
|
||||
getRecommendList()
|
||||
banner()
|
||||
// banner()
|
||||
window.addEventListener('scroll', onPageSrcoll, true);
|
||||
})
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<pageTopBar :bannerList="bannerList.data.apartment"></pageTopBar>
|
||||
<!-- <pageTopBar :bannerList="bannerList.data.apartment"></pageTopBar> -->
|
||||
<pageTopBar></pageTopBar>
|
||||
<!-- 筛选 -->
|
||||
<div class="screen-box wid1200">
|
||||
<seach-module @handleTransfer="handleTransfer" :count="listCount" :initPitchValue="pitchValue"></seach-module>
|
||||
</div>
|
||||
|
||||
<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 v-if="list.length == 0" class="empty-box wid1200 flexcenter">
|
||||
@@ -66,7 +67,7 @@ onMounted(() => {
|
||||
pitchValue.value = store.state.apartmentPitchValue
|
||||
if (route.query["companyid"]) pitchValue.value["companyid"] = route.query["companyid"]
|
||||
|
||||
banner() // 获取轮播图数据
|
||||
// banner() // 获取轮播图数据
|
||||
getData() // 获取列表数据
|
||||
|
||||
window.addEventListener("scroll", handleScroll)
|
||||
@@ -147,12 +148,12 @@ const handleTransfer = data => {
|
||||
}
|
||||
|
||||
//轮播
|
||||
let bannerList = reactive({ data: [] })
|
||||
let banner = () => {
|
||||
proxy.$get("/tenement/pc/api/banner").then(res => {
|
||||
if (res.code === 200) bannerList.data = res.data
|
||||
})
|
||||
}
|
||||
// let bannerList = reactive({ data: [] })
|
||||
// let banner = () => {
|
||||
// proxy.$get("/tenement/pc/api/banner").then(res => {
|
||||
// if (res.code === 200) bannerList.data = res.data
|
||||
// })
|
||||
// }
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.screen-box {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<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>
|
||||
<div class="dis-f jus-x al-item">
|
||||
<div class="body-maxWidth mg-t-35">
|
||||
@@ -50,14 +51,14 @@ let loadingText = ref(" 下拉加载更多 ")
|
||||
provide("count", dataCount)
|
||||
|
||||
//轮播
|
||||
let bannerList = reactive({ data: [] })
|
||||
let banner = () => {
|
||||
api.banner().then(res => {
|
||||
if (res.code === 200) {
|
||||
bannerList.data = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
// let bannerList = reactive({ data: [] })
|
||||
// let banner = () => {
|
||||
// api.banner().then(res => {
|
||||
// if (res.code === 200) {
|
||||
// bannerList.data = res.data
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
//保存搜索设置
|
||||
let setSeachSelectData = (data, noMask = false) => {
|
||||
@@ -129,7 +130,7 @@ onMounted(() => {
|
||||
gutter: 20,
|
||||
})
|
||||
// getDataList()
|
||||
banner()
|
||||
// banner()
|
||||
window.addEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="box-min-1200-src">
|
||||
<pageTopBar :bannerList="bannerList.data.personHousing"></pageTopBar>
|
||||
<!-- <pageTopBar :bannerList="bannerList.data.personHousing"></pageTopBar> -->
|
||||
<pageTopBar></pageTopBar>
|
||||
<seachModule :getDataList="setSeachSelectData"></seachModule>
|
||||
<div class="dis-f jus-x al-item">
|
||||
<div class="body-maxWidth mg-t-35">
|
||||
@@ -70,14 +71,14 @@ let setSeachSelectData = (data, noMask = false) => {
|
||||
}
|
||||
|
||||
//轮播
|
||||
let bannerList = reactive({ data: [] })
|
||||
let banner = () => {
|
||||
api.banner().then(res => {
|
||||
if (res.code === 200) {
|
||||
bannerList.data = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
// let bannerList = reactive({ data: [] })
|
||||
// let banner = () => {
|
||||
// api.banner().then(res => {
|
||||
// if (res.code === 200) {
|
||||
// bannerList.data = res.data
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
//获取搜索数据
|
||||
let getDataList = data => {
|
||||
@@ -146,7 +147,7 @@ onMounted(() => {
|
||||
// seachSelectData.data = { [type]: typeData }
|
||||
// }
|
||||
// }
|
||||
banner()
|
||||
// banner()
|
||||
// getDataList(seachSelectData.data)
|
||||
window.addEventListener("scroll", downLoadMore, true)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user