<template>
|
<div class="header" :class="!isShow ? '' : 'h_height'">
|
<div class="wrapper">
|
<a class="logo"><img src="../img/index_logo.png" alt=""></a>
|
<div class="nav" @mouseleave="leave()">
|
<!-- 移动端header图标 -->
|
<span class="homeico p_hide" @click="jump('Index')"><img src="../img/homeico.png" alt=""></span>
|
<span class="navico" v-if="!isShow" @click="showNav"><img src="../img/navico.png" alt=""></span>
|
<span class="navico" v-else @click="showNav"><img src="../img/close.png" alt=""></span>
|
<!-- pc端菜单列表 -->
|
<ul class="nav_ul" ref="nav_ul">
|
<li v-for="(menu, index) in menus" :key="index" :class="{' menu-active': curtab === index, ' menu-hover': cur === index}" @click="jump(menu.url)">
|
<span @mouseover="contrlSubmenu(index)">{{ menu.text }}</span>
|
</li>
|
<div class="list1 active" v-if="menus[1].flag">
|
<ul class="abloutMingKe_ul">
|
<li @click="jump(product.url, product.Id, 'submenu')" v-for="(product, index) in products" :key="index">{{product.text}}</li>
|
</ul>
|
<ul class="abloutMingKe_ul1">
|
<li @click="jump(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions" :key="index">{{solution.text}}</li>
|
</ul>
|
</div>
|
<div class="list2 active" v-if="menus[5].flag">
|
<ul class="abloutMingKe_ul2">
|
<li v-for="(submenu, index) in minkesoft" @click="jump(submenu.url, index, 'aboutUs')" :key="index">{{submenu.text}}</li>
|
</ul>
|
</div>
|
</ul>
|
</div>
|
</div>
|
|
<div :class="!isShow ? 'nav_ul' : 'plane'" class="hidden">
|
<el-collapse accordion>
|
<el-collapse-item>
|
<template slot="title">
|
<span class="title_s">产品中心</span>
|
</template>
|
<div>
|
<div class="menu3" :class="{'more active': index === products.length - 1, 'active': selectedsubId === product.Id}"
|
@click="jump(product.url, product.Id, 'submenu')" v-for="(product, index) in products" :key="index">{{product.text}}</div>
|
<div style="clear: both;"></div>
|
</div>
|
|
<div class="menu3" :class="{'more active': index === solutions.length - 1, 'active': selectedsubId === solution.Id}"
|
@click="jump(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions" :key="index">{{solution.text}}</div>
|
<div style="clear: both;"></div>
|
</el-collapse-item>
|
<el-collapse-item class="el_coll">
|
<template slot="title">
|
<span @click="jump('SuccessCase')" class="title_s">成功案例</span>
|
</template>
|
</el-collapse-item>
|
<el-collapse-item class="el_coll">
|
<template slot="title">
|
<span @click="jump('Partner')" class="title_s">渠道合作</span>
|
</template>
|
</el-collapse-item>
|
<el-collapse-item class="el_coll">
|
<template slot="title">
|
<span @click="jump('News')" class="title_s">新闻资讯</span>
|
</template>
|
</el-collapse-item>
|
<el-collapse-item>
|
<template slot="title">
|
<span @click="jump('CompanyProfile')" class="title_s">关于明科</span>
|
</template>
|
<div class="menu2" @click="jump('CompanyProfile', 0, 'aboutUs')">企业文化</div>
|
<div class="menu2" @click="jump('CompanyProfile', 1, 'aboutUs')">荣誉资质</div>
|
<div class="menu2" @click="jump('CompanyProfile', 2, 'aboutUs')">联系明科</div>
|
<div class="menu2" @click="jump('JoinMingKe')">加入明科</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'Header',
|
data() {
|
return {
|
cur: -1,
|
curtab: 0,
|
isShow: false,
|
selectedsubId: null,
|
menus: [{
|
text: '首页',
|
url: 'Index',
|
},
|
{
|
text: '产品中心',
|
url: '',
|
flag: false,
|
},
|
{
|
text: '成功案例',
|
url: 'SuccessCase',
|
},
|
{
|
text: '渠道合作',
|
url: 'Partner'
|
},
|
{
|
text: '新闻资讯',
|
url: 'News'
|
},
|
{
|
text: '关于明科',
|
url: 'CompanyProfile',
|
flag: false,
|
}
|
],
|
products: null,
|
solutions: null,
|
minkesoft: [{
|
text: '企业文化',
|
url: 'CompanyProfile'
|
},
|
{
|
text: '荣誉资质',
|
url: 'CompanyProfile'
|
},
|
{
|
text: '联系明科',
|
url: 'CompanyProfile'
|
},
|
{
|
text: '加入明科',
|
url: 'JoinMingKe'
|
}
|
]
|
}
|
},
|
methods: {
|
jump (name, index, type) {
|
if (!name) return
|
this.selectedsubId = null
|
this.isShow = false
|
name = name.toLowerCase()
|
if (!type) { // 主页面跳转
|
let change = {
|
index: 0,
|
successcase: 2,
|
partner: 3,
|
news: 4,
|
companyprofile: 5
|
}
|
this.curtab = change[name]
|
if (name === 'companyprofile') { // 关于明科,锚点参数
|
this.$router.push({name: name, params: {hash: 'null'}})
|
} else {
|
this.$router.push({name: name})
|
}
|
} else if (type === 'submenu') { // 产品中心子页面跳转
|
this.menus[1].flag = false
|
this.menus[5].flag = false
|
this.curtab = 1
|
this.selectedsubId = index
|
this.$router.push({name: name, params: {menuId: index}})
|
} else if (type === 'aboutUs') { // 关于明科子页面跳转
|
this.curtab = 5
|
if (index === 3) { // 加入明科
|
this.$router.push({name: name})
|
} else {
|
this.$router.push({name: 'companyprofile', params: {hash: `#anchor-${index + 1}`}})
|
}
|
}
|
|
},
|
showNav () {
|
this.isShow = !this.isShow
|
this.$refs.nav_ul.style.left = this.isShow ? (0 + 'px') : (-1000 + 'px')
|
},
|
contrlSubmenu (index) {
|
this.cur = index
|
if (index == 1) {
|
this.menus[index].flag = !this.menus[index].flag
|
this.menus[5].flag = false
|
} else if (index == 5) {
|
this.menus[index].flag = !this.menus[index].flag
|
this.menus[1].flag = false
|
} else {
|
this.menus[1].flag = false
|
this.menus[5].flag = false
|
}
|
},
|
leave () {
|
this.cur = -1
|
this.menus[1].flag = false
|
this.menus[5].flag = false
|
},
|
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'
|
})
|
})
|
}
|
},
|
mounted () {
|
this.load()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.header {
|
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;
|
|
.wrapper {
|
display: flex;
|
justify-content: space-between;
|
position: relative;
|
align-items: center;
|
}
|
|
.logo {
|
float: left;
|
|
img {
|
height: 0.4rem;
|
}
|
}
|
|
.nav {
|
float: right;
|
|
.navico {
|
width: 0.45rem;
|
|
img {
|
height: 0.39rem;
|
}
|
}
|
|
.homeico {
|
img {
|
height: 0.5rem;
|
margin-right: 0.46rem;
|
}
|
}
|
}
|
|
@media (min-width: 751px) {
|
.list3{
|
right: 5.8rem;
|
width: 7rem;
|
height: 90vh;
|
}
|
.list33{
|
right: -1.5rem;
|
width: 115%;
|
height: 90vh;
|
}
|
.list4{
|
right: -1.95rem;
|
height: 90vh;
|
}
|
.list5{
|
right: 1.17rem;
|
width: 4rem;
|
height: 90vh;
|
}
|
.plane {
|
display: none;
|
}
|
|
.hidden {
|
display: none;
|
}
|
|
li {
|
float: left;
|
line-height: 0.68rem;
|
height: 0.68rem;
|
}
|
|
span {
|
font-size: 0.18rem;
|
color: #fff;
|
cursor: pointer;
|
padding: 0 0.22rem;
|
}
|
}
|
|
.abloutMingKe_ul,
|
.abloutMingKe_ul1 {
|
width: 1.8rem;
|
position: absolute;
|
left: -0.8rem;
|
transition: all .3s ease 0s;
|
min-height: 1.5rem;
|
padding-bottom: 0.2rem;
|
background-color: #212020;
|
z-index: 999;
|
|
li {
|
width: 100%;
|
float: none;
|
color: #fff;
|
font-size: 0.14rem;
|
padding: 0 0.22rem;
|
line-height: 0.29rem;
|
height: 0.29rem;
|
}
|
|
li:last-child {
|
text-align: right;
|
}
|
|
li:hover {
|
opacity: 0.8;
|
cursor: pointer;
|
}
|
}
|
|
.abloutMingKe_ul1 {
|
width: 1.9rem;
|
margin-left: 1.8rem;
|
}
|
|
.abloutMingKe_ul {
|
border-right: 1px solid #999999;
|
|
li:last-child {
|
// margin-top: .3rem;
|
text-align: right;
|
}
|
}
|
|
.abloutMingKe_ul2 {
|
width: 1.16rem;
|
height: 1.3rem;
|
position: absolute;
|
top:-0.08rem;
|
transition: all .3s ease 0s;
|
background-color: #212020;
|
|
li {
|
width: 100%;
|
float: none;
|
color: #fff;
|
font-size: 0.14rem;
|
padding: 0 0.22rem;
|
line-height: 0.29rem;
|
height: 0.29rem;
|
text-align: center;
|
}
|
|
li:hover {
|
cursor: pointer;
|
opacity: 0.8;
|
}
|
}
|
}
|
|
@media (max-width: 750px) and (min-width: 0) {
|
.title_s {
|
font-size: 0.35rem;
|
width: 100%;
|
padding-left: 42%;
|
}
|
.header .logo img {
|
height: 0.55rem;
|
}
|
|
.plane {
|
display: block;
|
height: 100%;
|
background-color: #282830;
|
padding: 0.3rem 0 1rem;
|
overflow-y: scroll;
|
}
|
|
.nav_ul {
|
display: none;
|
}
|
|
.header {
|
// height: 100%;
|
// background-color: #303030;
|
padding-bottom: 0.2rem;
|
}
|
|
.h_height {
|
height: 100%;
|
}
|
|
.h_none {
|
display: none;
|
}
|
|
.header .wrapper {
|
padding-top: 0.3rem;
|
}
|
|
.header .abloutMingKe_ul2 {
|
width: auto;
|
height: auto;
|
}
|
|
.header .abloutMingKe_ul2 li {
|
background-color: black;
|
height: 0.5rem;
|
line-height: 0.5rem;
|
}
|
|
.header .nav .nav_ul {
|
position: fixed;
|
width: 100%;
|
left: -10rem;
|
top: 1.29rem;
|
bottom: 0;
|
background: #212020;
|
z-index: 8888;
|
height: auto;
|
|
>li {
|
text-align: center;
|
float: none;
|
text-align: center;
|
line-height: inherit;
|
height: auto;
|
|
span {
|
display: block;
|
font-size: 0.42rem;
|
border-bottom: 1px solid #fff;
|
color: #fff;
|
padding: 0.44rem 0;
|
}
|
}
|
|
>li:first-child {
|
display: none;
|
}
|
}
|
.header .nav .navico,
|
.header .nav .homeico {
|
display: inline-block;
|
padding: 0;
|
}
|
.abloutMingKe_ul,
|
.abloutMingKe_ul1 {
|
background: #303030;
|
|
li {
|
border: none;
|
padding: .2rem .6rem .2rem 1rem;
|
text-align: left;
|
color: #7C7C7C;
|
}
|
|
li:first-child {
|
color: #fff;
|
}
|
|
li:last-child {
|
text-align: right;
|
}
|
}
|
|
.abloutMingKe_ul {
|
border-bottom: #fff 1px solid;
|
}
|
|
.menu2 {
|
text-align: center;
|
line-height: 0.75rem;
|
font-size: 0.32rem;
|
}
|
|
.menu3 {
|
line-height: 0.75rem;
|
padding-left: 30%;
|
color: #7C7C7C;
|
font-size: 0.32rem;
|
|
img {
|
width: 0.2rem;
|
margin-top: -0.06rem;
|
margin-left: 0.2rem;
|
}
|
}
|
.menu3.active {
|
color: #ffffff;
|
}
|
.more {
|
float: right;
|
padding-right: 0.5rem;
|
margin-bottom: 0.1rem;
|
}
|
}
|
.list1 {
|
display: flex;
|
opacity: 0;
|
height: auto;
|
width: 5rem;
|
position: absolute;
|
top: 0.65rem;
|
right: 0;
|
}
|
.list2 {
|
opacity: 0;
|
width: 2rem;
|
height: auto;
|
position: absolute;
|
top: 0.76rem;
|
right: -0.84rem;
|
}
|
.active {
|
opacity: 1;
|
}
|
.menu-hover {
|
background: #232323;
|
}
|
.menu-active {
|
background: #212020;
|
}
|
</style>
|
<style>
|
.el-collapse {
|
border-top: 0;
|
}
|
|
.el-collapse-item__header {
|
height: 1.1rem;
|
line-height: 1.1rem;
|
background-color: #303030;
|
border-color: darkgray;
|
color: #fff;
|
}
|
|
.el-collapse-item__content {
|
background-color: #303030;
|
color: #fff;
|
}
|
|
.el-collapse-item__wrap {
|
border-color: darkgray;
|
}
|
|
.el-collapse-item__arrow {
|
margin-right: 2rem;
|
}
|
|
.el-collapse-item__header.is-active {
|
background-color: #49A2DD;
|
}
|
|
.el-collapse-item__content {
|
padding-bottom: 0;
|
}
|
|
@media (max-width: 750px) and (min-width: 0) {
|
.el_coll .el-collapse-item__arrow {
|
display: none;
|
}
|
}
|
</style>
|
