|
|
|
|
@ -10,11 +10,22 @@ |
|
|
|
|
<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 class="login" @click="toLogin"> |
|
|
|
|
<img src="@/assets/images/user.png" alt=""> |
|
|
|
|
<span>注册登录</span> |
|
|
|
|
<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> |
|
|
|
|
<!-- 手机端 --> |
|
|
|
|
@ -26,14 +37,18 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<occuQrcode :visible.sync="qrcodeVisible" /> |
|
|
|
|
<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' |
|
|
|
|
import occuQrcode from '@/components/occuQrcode' |
|
|
|
|
export default { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
@ -53,11 +68,14 @@ export default { |
|
|
|
|
logoUrl: '', |
|
|
|
|
}, |
|
|
|
|
timer: null, |
|
|
|
|
qrcodeTop: '100px', |
|
|
|
|
tools: [], |
|
|
|
|
toolVisible: false, |
|
|
|
|
toolPic: '', |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
navbar, |
|
|
|
|
occuQrcode |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
isSfel () { |
|
|
|
|
@ -83,7 +101,12 @@ export default { |
|
|
|
|
}, |
|
|
|
|
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() |
|
|
|
|
@ -101,6 +124,13 @@ export default { |
|
|
|
|
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() |
|
|
|
|
}, |
|
|
|
|
@ -152,6 +182,17 @@ export default { |
|
|
|
|
location.href = this.$router.resolve(`/column?siteId=${id}`).href |
|
|
|
|
location.reload() |
|
|
|
|
}, |
|
|
|
|
// 图标点击 |
|
|
|
|
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) { |
|
|
|
|
@ -223,16 +264,29 @@ $height: 90px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tools { |
|
|
|
|
.login { |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
.icon { |
|
|
|
|
max-width: 30px; |
|
|
|
|
max-height: 30px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
color: #666; |
|
|
|
|
font-size: 14px; |
|
|
|
|
@ -240,6 +294,8 @@ $height: 90px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.search { |
|
|
|
|
margin-right: 43px; |
|
|
|
|
} |
|
|
|
|
@ -315,6 +371,40 @@ $height: 90px; |
|
|
|
|
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 { |
|
|
|
|
@ -349,3 +439,5 @@ $height: 90px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
/style> |
|
|
|
|
|
