374 lines
8.4 KiB
Vue
374 lines
8.4 KiB
Vue
<template>
|
|
<div class="top-bg-img-box pos-r" :style="{ 'height': routePath === '/' ? '568px' : '260px' }">
|
|
<img src="../../assets/img/edit/bj-img1920.png" class="bg-img" alt="">
|
|
<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">
|
|
<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">
|
|
<img :src="user.data.avatar" 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>
|
|
</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="">
|
|
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="routePath === '/'">
|
|
<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:48px;">
|
|
<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";
|
|
|
|
const props = defineProps({
|
|
bannerList: {
|
|
type: Array,
|
|
default: function () {
|
|
return []
|
|
}
|
|
}
|
|
})
|
|
|
|
//退出登录
|
|
let url = location.href
|
|
let quitUrl = ref(`https://passport.gter.net/login/quit?referer=${url}`)
|
|
//个人信息
|
|
let user = reactive({ data: {} })
|
|
//组件数据
|
|
let topTab = reactive({ data: [] })
|
|
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
|
|
})
|
|
|
|
//顶部导航跳转
|
|
let topTabNum = ref('fang')
|
|
let topTabSelect = (type, item) => {
|
|
// topTabNum.value=type
|
|
window.open(item.url)
|
|
}
|
|
|
|
//页面跳转
|
|
const router = useRouter()
|
|
let tabBtnType = ref('/')
|
|
|
|
let pageTopBarShow= router.currentRoute.value.meta.topBarShow
|
|
let changeTabBtnType = (item) => {
|
|
tabBtnType.value = item.path
|
|
router.push({
|
|
path: item.path
|
|
})
|
|
}
|
|
|
|
let openInfo = (data) => {
|
|
window.open(data.url)
|
|
}
|
|
|
|
//监听路由
|
|
const route = useRoute()
|
|
let routePath = ref('')
|
|
routePath.value = route.meta.path
|
|
tabBtnType.value = route.meta.path
|
|
|
|
</script>
|
|
<style scoped>
|
|
.pos-r {
|
|
position: relative;
|
|
}
|
|
|
|
.dis-f {
|
|
display: flex;
|
|
}
|
|
|
|
.jus-x {
|
|
justify-content: center;
|
|
}
|
|
|
|
.al-item {
|
|
align-items: center;
|
|
}
|
|
|
|
.pos-r {
|
|
position: relative;
|
|
}
|
|
|
|
.body-maxWidth {
|
|
width: 1200px;
|
|
min-width: 1200px;
|
|
}
|
|
|
|
.s-w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.top-bg-img-box {
|
|
width: 100%;
|
|
min-width: 1200px;
|
|
}
|
|
|
|
.top-bg-img-box .bg-img {
|
|
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;
|
|
}
|
|
|
|
.index-top-navigation-box {
|
|
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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.index-top-navigation {
|
|
height: 60px;
|
|
justify-content: end;
|
|
}
|
|
|
|
.top-bg-img-box .user-img {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.top-bg-img-box .info-box .logo-box {
|
|
height: 40px;
|
|
}
|
|
|
|
.top-bg-img-box .info-box .logo-box .logo-img {
|
|
object-fit: contain;
|
|
width: 30px;
|
|
height: 31px;
|
|
}
|
|
|
|
.top-bg-img-box .info-box .logo-box .logo-text-img {
|
|
object-fit: contain;
|
|
width: 173px;
|
|
height: 31px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.top-bg-img-box .info-box .btm-seach-btn-box {
|
|
width: 100%;
|
|
height: 50px;
|
|
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 {
|
|
width: 120px;
|
|
height: 47px;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
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;
|
|
}
|
|
|
|
.carousel-img {
|
|
margin: 0 auto;
|
|
width: 660px;
|
|
height: 280px;
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-box:hover .user-out-box {
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/deep/.el-carousel__arrow {
|
|
border: 2px solid #545454;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
/deep/.el-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/deep/.el-carousel__indicator--horizontal {
|
|
padding: var(--el-carousel-indicator-padding-vertical) 2px;
|
|
}
|
|
|
|
/deep/ .el-carousel__button {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/deep/ .is-active button {
|
|
background: #62b1ff;
|
|
}
|
|
|
|
/deep/ .el-input__wrapper {
|
|
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: 16px;
|
|
color: #7F7F7F;
|
|
text-align: left;
|
|
}
|
|
|
|
.dropdown {
|
|
background: #000;
|
|
}
|
|
</style>
|
|
|