You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
420 lines
9.2 KiB
420 lines
9.2 KiB
<template> |
|
<div :class="['header', { channel: isHome, estate: isEstate, iasf: isIasf }]"> |
|
<a class="logo" @click="toIndex"> |
|
<template> |
|
<img :src="logoForm.logoUrl" alt=""> |
|
{{ logoForm.title }} |
|
</template> |
|
</a> |
|
<!-- pc端 --> |
|
<template v-if="$store.getters.getModelType"> |
|
<navbar v-if="navShow" ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate" :isIasf.sync="isIasf" |
|
@showMoreBtns="updateBtnsType"></navbar> |
|
<!-- 导航最右侧工具栏 --> |
|
<div class="tools"> |
|
<div v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)"> |
|
<img v-if="item.icon" :src="item.icon" alt="" class="icon"> |
|
<span v-if="item.buttonText" class="text">{{ item.buttonText }}</span> |
|
</div> |
|
<!-- 如果图标超过5个，则显示省略号 --> |
|
<el-popover v-if="tools.length > 5" placement="bottom" width="297" trigger="click" popper-class="tool-more"> |
|
<ul class="more-wrap"> |
|
<li v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)"> |
|
<img v-if="item.icon" :src="item.icon" alt="" class="icon"> |
|
<p v-if="item.buttonText" class="text">{{ item.buttonText }}</p> |
|
</li> |
|
</ul> |
|
<i slot="reference" class="el-icon-more cursor-pointer" style="color: #535353"></i> |
|
</el-popover> |
|
</div> |
|
</template> |
|
<!-- 手机端 --> |
|
<div v-else class="mobile-tools"> |
|
<!-- 导航最右侧工具栏 --> |
|
<div class="tools"> |
|
<!-- 如果图标超过5个，则显示省略号 --> |
|
<el-popover placement="bottom" width="297" trigger="click" popper-class="tool-more"> |
|
<ul class="more-wrap"> |
|
<li v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)"> |
|
<img v-if="item.icon" :src="item.icon" alt="" class="icon"> |
|
<p v-if="item.buttonText" class="text">{{ item.buttonText }}</p> |
|
</li> |
|
</ul> |
|
<img slot="reference" src="@/assets/images/more.svg" alt=""> |
|
</el-popover> |
|
</div> |
|
|
|
<img class="menu-icon" src="@/assets/images/menu.svg" alt="" @click.stop="updateType(!modelType)"> |
|
<div class="contentBox" v-show="modelType"> |
|
<navbar ref="nav" :isHome.sync="isHome" @updateModelType="updateType"></navbar> |
|
</div> |
|
</div> |
|
|
|
<el-dialog title="" :visible.sync="toolVisible" center :width="$store.getters.getModelType ? '500px' : '100%'" |
|
append-to-body :top="qrcodeTop" lock-scroll custom-class="qrcode-dia"> |
|
<div class="pic-wrap"> |
|
<img class="pic" :src="toolPic" alt=""> |
|
</div> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script> |
|
import Util from '@/libs/util' |
|
import { mapMutations } from 'vuex' |
|
import navbar from '../navbar' |
|
export default { |
|
data () { |
|
return { |
|
Util, |
|
isHome: true, |
|
isEstate: false, |
|
isIasf: false, |
|
showSearch: false, |
|
height: 907, |
|
title: '', |
|
searchTimer: null, |
|
modelType: false, |
|
navShow: true, |
|
qrcodeVisible: false, |
|
logoForm: { |
|
title: '', |
|
logoUrl: '', |
|
}, |
|
timer: null, |
|
qrcodeTop: '100px', |
|
tools: [], |
|
toolVisible: false, |
|
toolPic: '', |
|
}; |
|
}, |
|
components: { |
|
navbar, |
|
}, |
|
computed: { |
|
isSfel () { |
|
return this.$route.path === '/sfel' |
|
}, |
|
site () { |
|
return this.$route.query.siteId || this.$store.getters.site |
|
}, |
|
}, |
|
watch: { |
|
'$route.path': { |
|
handler () { |
|
this.isHome = Util.isIndex() |
|
this.isEstate = this.$route.path === '/estate/index' |
|
this.isIasf = this.$route.path === '/iasf' |
|
}, |
|
deep: true, |
|
immediate: true |
|
} |
|
}, |
|
beforeDestroy () { |
|
window.removeEventListener('scroll', this.handleScroll) |
|
}, |
|
mounted () { |
|
this.getLogo() |
|
this.getTool() |
|
this.setKeyword('') |
|
|
|
const height = (window.innerHeight - (this.$store.getters.getModelType ? 758 : 600)) / 2 |
|
this.qrcodeTop = (height > 0 ? height : 0) + 'px' |
|
|
|
window.addEventListener('scroll', this.handleScroll) // 监听页面滚动 |
|
document.body.addEventListener('click', e => { |
|
e.stopPropagation() |
|
this.modelType = false |
|
}) |
|
}, |
|
methods: { |
|
...mapMutations('content', [ |
|
'setKeyword' |
|
]), |
|
// 获取logo |
|
async getLogo () { |
|
const res = await this.$post(`${this.api.findLogo}?siteId=${this.site}`) |
|
if (res.data) { |
|
this.logoForm = res.data |
|
} |
|
}, |
|
// 获取导航图标 |
|
async getTool () { |
|
const res = await this.$post(`${this.api.navList}?siteId=${this.site}&isDisable=0`) |
|
if (res.data) { |
|
this.tools = res.data |
|
} |
|
}, |
|
toIndex () { |
|
this.$refs.nav.jump() |
|
}, |
|
stop () { }, |
|
/** |
|
* pc端下,当导航栏条目大于10的情况下,显示更多按钮 |
|
* type : true显示,false隐藏 |
|
*/ |
|
updateBtnsType (type) { |
|
this.showMoreBtns = type |
|
}, |
|
// 获取页面滚动距离(home长页专用) |
|
handleScroll () { |
|
if (Util.isIndex()) { |
|
const h = this.height |
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop |
|
// const rule = scrollTop > h |
|
const rule = scrollTop > 120 |
|
if (this.isHome == rule) { |
|
if (this.isHome != !(rule)) this.navShow = false |
|
this.isHome = !(rule) |
|
this.isEstate = !(rule) && this.$route.path === '/estate/index' |
|
this.$nextTick(() => { |
|
this.navShow = true |
|
}) |
|
} |
|
} |
|
}, |
|
// 图标点击 |
|
toolClick (item) { |
|
// 链接 |
|
if (item.buttonContent === '0') { |
|
item.newTab ? window.open(item.linkAddress) : (location.href = item.linkAddress) |
|
} else { |
|
// 弹框 |
|
this.toolPic = item.imagePath |
|
this.toolVisible = true |
|
} |
|
}, |
|
// 注册登录 |
|
toLogin () { |
|
if (this.GTA) { |
|
window.open('https://izhixinyun.com/#/login') |
|
} else { |
|
if (this.site == 7) { |
|
window.open('https://www.occupationlab.com/#/login') |
|
} else { |
|
this.qrcodeVisible = true |
|
} |
|
} |
|
}, |
|
updateType (type) { |
|
this.modelType = type |
|
} |
|
} |
|
}; |
|
</script> |
|
<style scoped lang="scss"> |
|
$height: 90px; |
|
|
|
.header { |
|
z-index: 10; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
width: 100%; |
|
height: $height; |
|
padding: 0 5% 0 5%; |
|
|
|
&:not(.channel) { |
|
background-color: #fff; |
|
border-bottom: 1px solid #f7f7f7; |
|
} |
|
|
|
&.estate { |
|
background-color: rgba(0, 0, 0, 0.15); |
|
} |
|
|
|
.logo { |
|
display: inline-flex; |
|
align-items: center; |
|
font-size: 18px; |
|
font-weight: 700; |
|
color: #333; |
|
cursor: pointer; |
|
|
|
img { |
|
max-width: 130px; |
|
max-height: 50px; |
|
margin-right: 10px; |
|
} |
|
} |
|
|
|
.tools { |
|
display: flex; |
|
align-items: center; |
|
|
|
.item { |
|
display: inline-flex; |
|
align-items: center; |
|
margin-right: 15px; |
|
cursor: pointer; |
|
|
|
&:last-child { |
|
margin-right: 0; |
|
} |
|
|
|
&:hover { |
|
opacity: 0.9; |
|
} |
|
|
|
.icon { |
|
max-width: 30px; |
|
max-height: 30px; |
|
} |
|
|
|
.text { |
|
margin-left: 5px; |
|
color: #666; |
|
font-size: 14px; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
.search { |
|
margin-right: 43px; |
|
} |
|
|
|
.mobile-tools { |
|
display: inline-flex; |
|
align-items: center; |
|
|
|
.login { |
|
font-size: 1.5rem; |
|
color: #c1c1c1; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.menu-icon { |
|
margin-left: 10px; |
|
font-size: 1.8rem; |
|
color: #c1c1c1; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.search-wrap { |
|
position: absolute; |
|
top: 67px; |
|
right: 89px; |
|
display: flex; |
|
align-items: center; |
|
padding: 10px 15px 10px 10px; |
|
background-color: #fff; |
|
box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.3); |
|
|
|
input { |
|
width: 300px; |
|
height: 40px; |
|
padding: 0 40px 0 15px; |
|
font-size: 1.14rem; |
|
color: #333; |
|
line-height: 46px; |
|
border: 0; |
|
border-radius: 4px; |
|
outline: none; |
|
} |
|
|
|
.search-icon { |
|
padding-right: 15px; |
|
margin: 0 15px; |
|
cursor: pointer; |
|
border-right: 1px solid #ccc; |
|
} |
|
|
|
.close-icon { |
|
font-size: 2rem; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.menu-child { |
|
/deep/ .el-submenu__title { |
|
font-size: 1rem; |
|
} |
|
} |
|
|
|
.contentBox { |
|
width: 100%; |
|
position: absolute; |
|
top: 90px; |
|
left: 0; |
|
background-color: white; |
|
z-index: 9999; |
|
max-height: 30rem; |
|
overflow-y: scroll; |
|
} |
|
|
|
/deep/.qrcode-dia { |
|
background-color: transparent; |
|
box-shadow: none; |
|
|
|
.el-dialog__header, |
|
.el-dialog__body { |
|
padding: 0; |
|
background-color: transparent; |
|
overflow: hidden; |
|
} |
|
|
|
.el-dialog__headerbtn .el-dialog__close { |
|
color: #fff; |
|
} |
|
|
|
.pic-wrap { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.pic { |
|
max-width: 100%; |
|
} |
|
} |
|
|
|
@media (max-width: 1200px) { |
|
/deep/.qrcode-dia { |
|
.pic { |
|
width: 95%; |
|
} |
|
} |
|
} |
|
|
|
@media (max-width: 1660px) { |
|
.header { |
|
.logo { |
|
left: 10px; |
|
} |
|
|
|
.search { |
|
margin-right: 20px !important; |
|
} |
|
|
|
.tools { |
|
right: 30px; |
|
} |
|
} |
|
} |
|
|
|
@media (max-width: 1200px) { |
|
.header { |
|
color: black !important; |
|
background-color: #fff; |
|
} |
|
|
|
.search-wrap { |
|
right: 10px; |
|
top: 0; |
|
width: 70%; |
|
|
|
input { |
|
width: 15rem; |
|
padding: 0 0.5rem 0 0.1rem; |
|
} |
|
} |
|
} |
|
</style> |
|
<style lang="scss"> |
|
/style>
|
|
|