<template>
|
<div class="header-wrap">
|
<div class="pc-wrapper">
|
<a class="logo" @click="jumpview('home')"><img src="../img/index_logo.png" alt=""></a>
|
<div class="nav">
|
<el-menu :default-active="activeKey" mode="horizontal">
|
<el-menu-item index="home" @click="jumpview('home')">首页</el-menu-item>
|
<el-submenu index="product" popper-class="header-dubble-menu">
|
<template slot="title">产品中心</template>
|
<div class="dubble-ul-wrap">
|
<div class="dubble-ul">
|
<el-menu-item :index="'product-p' + index" :key="index" @click="jumpview(product.url, product.Id, 'submenu')" v-for="(product, index) in products">{{product.text}}</el-menu-item>
|
</div>
|
<div class="dubble-ul">
|
<el-menu-item :index="'product-s' + index" :key="index" @click="jumpview(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions">{{solution.text}}</el-menu-item>
|
</div>
|
</div>
|
</el-submenu>
|
<el-menu-item index="successcase" @click="jumpview('SuccessCase')">成功案例</el-menu-item>
|
<el-menu-item index="partner" @click="jumpview('Partner')">渠道合作</el-menu-item>
|
<el-menu-item index="news" @click="jumpview('News')">新闻资讯</el-menu-item>
|
<el-submenu index="companyprofile" popper-class="header-menu">
|
<template slot="title"><span @click="jumpview('Company')">关于明科</span></template>
|
<el-menu-item index="companyProfile-1" @click="jumpview('CompanyProfile', 'culture.html')">企业文化</el-menu-item>
|
<el-menu-item index="companyProfile-2" @click="jumpview('CompanyProfile', 'aptitude.html')">荣誉资质</el-menu-item>
|
<el-menu-item index="companyProfile-3" @click="jumpview('CompanyProfile', 'contact.html')">联系明科</el-menu-item>
|
<el-menu-item index="companyProfile-4" @click="jumpview('joinMingKe')">加入明科</el-menu-item>
|
</el-submenu>
|
<el-menu-item index="word"><a href="http://mk9h.cn/a.asp?a=9CCB" ref="nofollow" target="_blank">文档中心</a></el-menu-item>
|
</el-menu>
|
</div>
|
<div class="pc-tel">
|
<img src="../img/add3.png" alt class="footer_img" />
|
<span>400-189-1819</span>
|
</div>
|
<div class="register">
|
<span @click="jumpview('signup')">注册</span>
|
<a href="http://cloud.mk9h.cn/index.html" ref="nofollow" target="_blank">登录</a>
|
</div>
|
</div>
|
<div class="mob-wrapper">
|
<a class="logo"><img src="../img/index_logo.png" alt=""></a>
|
<div class="nav">
|
<span class="homeico" @click="jumpview('Index')"><img src="../img/homeico.png" alt=""></span>
|
<span class="navico" v-if="!isShow" @click="isShow = !isShow"><img src="../img/navico.png" alt=""></span>
|
<span class="navico" v-else @click="isShow = !isShow"><img src="../img/close.png" alt=""></span>
|
</div>
|
<div class="register">
|
<span @click="jumpview('signup')">注册</span>
|
</div>
|
<div class="mob-menu" v-show="isShow">
|
<el-menu :default-active="activeKey">
|
<el-submenu index="product" popper-class="header-dubble-menu">
|
<template slot="title">产品中心</template>
|
<el-menu-item-group>
|
<el-menu-item :index="'product-p' + index" :key="index" @click="jumpview(product.url, product.Id, 'submenu')" v-for="(product, index) in products">{{product.text}}</el-menu-item>
|
</el-menu-item-group>
|
<el-menu-item-group>
|
<el-menu-item :index="'product-s' + index" :key="index" @click="jumpview(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions">{{solution.text}}</el-menu-item>
|
</el-menu-item-group>
|
</el-submenu>
|
|
<el-menu-item index="successcase" @click="jumpview('SuccessCase')"><div class="simple">成功案例</div></el-menu-item>
|
<el-menu-item index="partner" @click="jumpview('Partner')"><div class="simple">渠道合作</div></el-menu-item>
|
<el-menu-item index="news" @click="jumpview('News')"><div class="simple">新闻资讯</div></el-menu-item>
|
<el-submenu index="companyprofile" popper-class="header-menu">
|
<template slot="title"><span @click="jumpview('Company')">关于明科</span></template>
|
<el-menu-item index="companyProfile-1" @click="jumpview('CompanyProfile', 'culture.html')">企业文化</el-menu-item>
|
<el-menu-item index="companyProfile-2" @click="jumpview('CompanyProfile', 'aptitude.html')">荣誉资质</el-menu-item>
|
<el-menu-item index="companyProfile-3" @click="jumpview('CompanyProfile', 'contact.html')">联系明科</el-menu-item>
|
<el-menu-item index="companyProfile-4" @click="jumpview('joinMingKe')">加入明科</el-menu-item>
|
</el-submenu>
|
<el-menu-item index="word"><a href="http://mk9h.cn/a.asp?a=9CCB" ref="nofollow" target="_blank">文档中心</a></el-menu-item>
|
</el-menu>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'Header',
|
data() {
|
return {
|
activeKey: 'home',
|
cur: -1,
|
curtab: 0,
|
isShow: false,
|
selectedsubId: null,
|
products: null,
|
solutions: null
|
}
|
},
|
methods: {
|
jumpview (url, par, type) {
|
let name = url.toLowerCase()
|
let params = {}
|
this.isShow = false
|
if (name === 'companyprofile') {
|
params.hash = par
|
} else if (type === 'submenu') { // 产品中心子页面跳转
|
this.activeKey = 'product'
|
params.menuId = par + '.html'
|
} else if (name === 'signup') {
|
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
|
name = 'mobsignup'
|
}
|
window.open(window.location.origin + '/' + name)
|
return
|
}
|
|
this.$router.push({name: name, params})
|
},
|
load () {
|
this.Service.getBaseData('Web_Index_GetData').then(res => {
|
this.products = res.Product.map(pro => {
|
return {
|
Id: pro.ID,
|
text: pro.Title1,
|
url: pro.PageType
|
}
|
})
|
this.products.unshift({
|
Id: 'centerview',
|
text: '产品中心',
|
url: 'center'
|
})
|
this.products.push({
|
Id: 'centerview',
|
text: '更多 >>',
|
url: 'center'
|
})
|
|
this.solutions = res.Solution.map(pro => {
|
return {
|
Id: pro.ID,
|
text: pro.Title1,
|
url: pro.PageType
|
}
|
})
|
this.solutions.unshift({
|
Id: 'casesolutionview',
|
text: '解决方案',
|
url: 'casesolution'
|
})
|
this.solutions.push({
|
Id: 'casesolutionview',
|
text: '更多 >>',
|
url: 'casesolution'
|
})
|
})
|
}
|
},
|
created () {
|
this.activeKey = this.$route.name
|
},
|
mounted () {
|
this.load()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.header-wrap {
|
background: #282830;
|
position: fixed;
|
width: 100%;
|
padding: 0.08rem 0;
|
-webkit-transition: 0.3s;
|
-moz-transition: 0.3s;
|
transition: 0.3s;
|
-webkit-animation: gupIn 1s 0.1s both;
|
-moz-animation: gupIn 1s 0.1s both;
|
animation: gupIn 1s 0.1s both;
|
z-index: 2000;
|
top: 0;
|
|
.pc-wrapper {
|
width: 1300px;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
position: relative;
|
align-items: center;
|
}
|
.mob-wrapper {
|
display: none;
|
justify-content: space-between;
|
position: relative;
|
align-items: center;
|
}
|
|
.logo {
|
float: left;
|
img {
|
height: 0.4rem;
|
}
|
}
|
|
.nav {
|
float: right;
|
}
|
|
.pc-tel {
|
display: block;
|
width: 155px;
|
img {
|
width: 20px;
|
height: 20px;
|
vertical-align: text-bottom;
|
}
|
span {
|
font-size: 0.16rem;
|
color: #fff;
|
cursor: default;
|
padding: 0 0.1rem;
|
}
|
}
|
.register {
|
flex: 0.3;
|
white-space: nowrap;
|
span, a {
|
display: inline-block;
|
font-size: 0.16rem;
|
color: #ffffff;
|
cursor: pointer;
|
padding: 0px;
|
}
|
a {
|
margin-left: 10px;
|
}
|
}
|
|
li {
|
line-height: 0.68rem;
|
height: 0.68rem;
|
> div.el-submenu__title {
|
line-height: 0.68rem;
|
height: 0.68rem;
|
}
|
}
|
}
|
|
@media (max-width: 1366px) and (min-width: 750px) {
|
.header-wrap {
|
.pc-wrapper {
|
width: 90%;
|
}
|
.pc-tel {
|
img {
|
width: 18px;
|
height: 18px;
|
}
|
span {
|
font-size: 0.15rem;
|
}
|
}
|
.register {
|
span, a {
|
font-size: 0.15rem;
|
}
|
}
|
}
|
}
|
|
@media (max-width: 750px) and (min-width: 0) {
|
.header-wrap {
|
.pc-wrapper {
|
display: none;
|
}
|
.mob-wrapper {
|
display: flex;
|
padding-top: .3rem;
|
width: 94%;
|
margin: 0 auto;
|
}
|
|
.logo img {
|
height: 0.55rem;
|
}
|
.nav {
|
flex: 1;
|
text-align: right;
|
.navico {
|
display: inline-block;
|
padding: 0;
|
width: 0.45rem;
|
img {
|
height: 0.35rem;
|
}
|
}
|
.homeico {
|
display: inline-block;
|
padding: 0;
|
img {
|
height: 0.45rem;
|
margin-right: 0.4rem;
|
}
|
}
|
}
|
.register {
|
text-align: right;
|
span {
|
font-size: 0.3rem;
|
}
|
}
|
li {
|
height: unset;
|
line-height: unset;
|
}
|
.mob-menu > .el-menu > li {
|
border-bottom: 1px solid #ffffff;
|
> div.simple {
|
height: 56px;
|
line-height: 56px;
|
}
|
> a {
|
display: inline-block;
|
height: 56px;
|
line-height: 56px;
|
}
|
> div.el-submenu__title {
|
height: 56px;
|
line-height: 56px;
|
}
|
}
|
.mob-menu {
|
position: fixed;
|
top: 1rem;
|
left: 0px;
|
right: 0px;
|
bottom: 0px;
|
background-color: #282830;
|
overflow-y: auto;
|
padding-bottom: 50px;
|
}
|
}
|
|
.header-wrap {
|
padding-bottom: 0.2rem;
|
}
|
}
|
</style>
|
