107 lines
3.1 KiB
Vue
107 lines
3.1 KiB
Vue
<template>
|
||
<div>
|
||
<header class="zui-header">
|
||
<logo type="xiaoyanyun" href="/"></logo>
|
||
<h4 class="zui-logo-text">
|
||
<a class="zui-nav-link" :href="currentLinks.accounting" target="_blank"> 记账平台</a>
|
||
<a class="zui-nav-link" :href="currentLinks.health" target="_blank"> 健康档案</a>
|
||
<a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank"> 茅台预约</a>
|
||
<a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank"> 智聪物联</a>
|
||
</h4>
|
||
<div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
|
||
<div v-show="webShow">
|
||
<slot name="buttons"></slot>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 移动端抽屉菜单（移到header外面） -->
|
||
<div v-show="drawerVisible" class="zui-drawer-overlay" @click="closeMenu"></div>
|
||
<div v-show="drawerVisible" class="zui-drawer">
|
||
<div class="zui-drawer__header">菜单</div>
|
||
<ul class="zui-drawer__list">
|
||
<li @click="navigateTo('/')">首页</li>
|
||
<li @click="navigateTo('/resource')">资料下载</li>
|
||
<li @click="navigateTo('/callus')">联系我们</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import './less/header.less'
|
||
import Logo from './Logo'
|
||
import Util from '../Util'
|
||
|
||
export default {
|
||
props: {
|
||
logoType: {
|
||
default: 'zhichou'
|
||
}
|
||
},
|
||
components: {Logo},
|
||
data() {
|
||
return {
|
||
// 统一管理的导航链接
|
||
navLinks: {
|
||
// Web端链接
|
||
web: {
|
||
accounting: 'http://invest.qdintc.com',
|
||
health: 'http://health.qdintc.com',
|
||
imaotai: 'http://imaotai.qdintc.com'
|
||
},
|
||
// 移动端H5链接
|
||
mobile: {
|
||
accounting: 'http://investh5.qdintc.com',
|
||
health: 'http://healthh5.qdintc.com',
|
||
imaotai: 'http://imaotaih5.qdintc.com'
|
||
}
|
||
},
|
||
mobileShow: false,
|
||
webShow: true,
|
||
drawerVisible: false,
|
||
isMobile: false
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
},
|
||
computed: {
|
||
// 根据设备类型返回对应的链接
|
||
currentLinks() {
|
||
return this.isMobile ? this.navLinks.mobile : this.navLinks.web
|
||
}
|
||
},
|
||
methods: {
|
||
init() {
|
||
// 检测是否为移动端
|
||
this.isMobile = Util.os.android || Util.os.iPhone || Util.os.mobile || Util.os.isapp || Util.os.harmonyOS
|
||
|
||
if (this.isMobile) {
|
||
this.webShow = false
|
||
this.mobileShow = true
|
||
} else {
|
||
this.webShow = true
|
||
this.mobileShow = false
|
||
}
|
||
},
|
||
openMenu() {
|
||
this.drawerVisible = true
|
||
this.$emit('menu-open')
|
||
},
|
||
closeMenu() {
|
||
this.drawerVisible = false
|
||
this.$emit('menu-close')
|
||
},
|
||
navigateTo(path) {
|
||
// 使用 Vue Router 的全局路由实例
|
||
if (this.$router) {
|
||
this.$router.push({path})
|
||
} else {
|
||
// 如果路由不可用，使用原生跳转
|
||
window.location.href = path
|
||
}
|
||
this.closeMenu()
|
||
}
|
||
}
|
||
}
|
||
</script>
|