<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()">
|
<router-link tag="span" class="homeico m_hide" to="/"><img src="../img/homeico.png" alt=""></router-link>
|
<span class="homeico p_hide" @click="jump('/')"><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>
|
<ul class="nav_ul" ref="nav_ul">
|
<router-link tag="li" v-for="(menu, index) in menus" :key="index" :to="menu.url" :class="{active1: cur === index}">
|
<span @mouseover="add(index)">{{ menu.text }}</span>
|
</router-link>
|
<!-- <div class="list1 list3" :class="{active:this.menus[1].flag === true}" @click="menus[1].flag = false" v-if="menus[1].flag"></div> -->
|
<div :class="{active:this.menus[1].flag==true}" class="list1" @click="adda(1)" v-if="menus[1].flag">
|
<ul class="abloutMingKe_ul">
|
<router-link @click="add1($event,index)" tag="li" v-for="(secondMenus,index) in secondMenus" :key="index" :to="secondMenus.url">{{secondMenus.text}}</router-link>
|
</ul>
|
<ul class="abloutMingKe_ul1">
|
<router-link tag="li" v-for="(secondMenus,index) in secondMenus1" :key="index" :to="secondMenus.url">{{secondMenus.text}}</router-link>
|
</ul>
|
</div>
|
<!-- <div class="list1 list33" :class="{active:this.menus[1].flag==true}" @click="menus[1].flag = false" v-if="menus[1].flag"></div> -->
|
<!-- <div :class="{active:this.menus[5].flag==true}" class="list1 list33" @click="menus[5].flag = false" v-if="menus[5].flag"></div> -->
|
<div :class="{active:this.menus[5].flag==true}" class="list2" @click="adda(5)" v-if="menus[5].flag">
|
<ul class="abloutMingKe_ul2">
|
<li v-for="(secondMenus,index) in secondMenus2" @click="add5(secondMenus.url,index+1)" :key="index">{{secondMenus.text}}</li>
|
</ul>
|
</div>
|
<!-- <div :class="{active:this.menus[5].flag==true}" class="list2 list5" @click="menus[5].flag = false" v-if="menus[5].flag"></div> -->
|
</ul>
|
</div>
|
</div>
|
|
<div :class="!isShow ? 'nav_ul' : 'plane'" style="height: 100%;background-color: #282830;display: none;margin-top:0.3rem">
|
<el-collapse accordion>
|
<el-collapse-item>
|
<template slot="title">
|
<span class="title_s">产品中心</span>
|
</template>
|
<div class="menu3" @click="jump('center')" style="color: #fff;">产品中心</div>
|
<div class="menu3" @click="jump('productCenter')">MingKeOS</div>
|
<div class="menu3" @click="jump('productCenter')">智慧仓储</div>
|
<div class="menu3 more" @click="jump('center')">更多 <img src="../img/more.png" alt=""></div>
|
<div style="clear: both;"></div>
|
<div class="menu3" @click="jump('caseSolution')" style="color: #fff;">解决方案</div>
|
<div class="menu3" @click="jump('caseDetail')">电动工具行业解决方案</div>
|
<div class="menu3" @click="jump('caseDetail')">系统集成行业解决方案</div>
|
<div class="menu3" @click="jump('caseDetail')">电子商务行业解决方案</div>
|
<div class="menu3" @click="jump('caseDetail')">制药行业解决方案</div>
|
<div class="menu3 more" @click="jump('caseSolution')">更多 <img src="../img/more.png" alt=""></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#anchor-1')">企业文化</div>
|
<div class="menu2" @click="jump('companyProfile#anchor-2')">荣誉资质</div>
|
<div class="menu2" @click="jump('companyProfile#anchor-3')">联系明科</div>
|
<div class="menu2" @click="jump('joinMingKe')">加入明科</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'Header',
|
data() {
|
return {
|
activeNames: ['1'],
|
cur: 0,
|
isShow: false,
|
isShowChild: false,
|
menus: [{
|
text: '首页',
|
url: '/',
|
},
|
{
|
text: '产品中心',
|
url: '',
|
flag: false,
|
},
|
{
|
text: '成功案例',
|
url: '/successCase',
|
},
|
{
|
text: '渠道合作',
|
url: '/partner'
|
},
|
{
|
text: '新闻资讯',
|
url: '/news'
|
},
|
{
|
text: '关于明科',
|
url: '/companyProfile',
|
flag: false,
|
}
|
],
|
secondMenus: [{
|
text: '产品中心',
|
url: 'center'
|
},
|
{
|
text: 'MingKeOS',
|
url: 'productCenter'
|
},
|
{
|
text: '智慧仓储',
|
url: 'productCenter'
|
},
|
{
|
text: '质量追溯',
|
url: 'productCenter'
|
},
|
{
|
text: '更多 》',
|
url: '/center'
|
},
|
],
|
secondMenus1: [{
|
text: '解决方案',
|
url: '/caseSolution'
|
},
|
{
|
text: '电动工具行业解决方案',
|
url: '/caseDetail'
|
},
|
{
|
text: '系统集成行业解决方案',
|
url: '/caseDetail'
|
},
|
{
|
text: '电子商务行业解决方案',
|
url: '/caseDetail'
|
},
|
{
|
text: '制药行业解决方案',
|
url: '/caseDetail'
|
},
|
{
|
text: '更多 》',
|
url: '/caseSolution'
|
}
|
],
|
secondMenus2: [{
|
text: '企业文化',
|
url: '/companyProfile'
|
},
|
{
|
text: '荣誉资质',
|
url: '/companyProfile'
|
},
|
{
|
text: '联系明科',
|
url: '/companyProfile'
|
},
|
{
|
text: '加入明科',
|
url: '/joinMingKe'
|
},
|
]
|
}
|
},
|
methods: {
|
goHere (path) {
|
this.$router.push({
|
path: path
|
});
|
},
|
showNav () {
|
this.isShow = !this.isShow;
|
this.$refs.nav_ul.style.left = this.isShow ? (0 + 'px') : (-1000 + 'px')
|
},
|
add (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.menus[1].flag = false;
|
this.menus[5].flag = false;
|
},
|
add5 (u,i) {
|
if(i != 4){
|
this.$router.push(`${u}#anchor-${i}`)
|
}else{
|
this.$router.push(u)
|
}
|
},
|
adda (index) {
|
if (index == 1 || index == 5) {
|
this.menus[index].flag = false;
|
}
|
},
|
add1 (e, index) {
|
console.log(index)
|
},
|
//移动端跳转
|
jump (u) {
|
this.isShow = false
|
this.$router.push(u)
|
},
|
load () {
|
this.$axios({
|
data: {
|
func: 'Web_Index_GetData'
|
}
|
})
|
}
|
},
|
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: 8888;
|
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;
|
}
|
|
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;
|
height: 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 !important;
|
}
|
|
.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;
|
}
|
}
|
|
.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;
|
}
|
.active1 {
|
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>
|
