From 68cbb649c933776838e937446ce9ed384916a5e8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 14 八月 2019 14:20:59 +0800
Subject: [PATCH] 2019-08-14update
---
src/components/header.vue | 246 ++++++++++++++++++++++--------------------------
1 files changed, 113 insertions(+), 133 deletions(-)
diff --git a/src/components/header.vue b/src/components/header.vue
index f98d6fb..5c6e71d 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -3,77 +3,71 @@
<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>
+ <!-- 绉诲姩绔痟eader鍥炬爣 -->
+ <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">
- <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">
+ <li v-for="(menu, index) in menus" :key="index" :class="{active1: 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">
- <router-link @click="add1($event,index)" tag="li" v-for="(secondMenus,index) in secondMenus" :key="index" :to="secondMenus.url">{{secondMenus.text}}</router-link>
+ <li @click="jump(product.url, product.Id, 'submenu')" v-for="(product, index) in products" :key="index">{{product.text}}</li>
</ul>
<ul class="abloutMingKe_ul1">
- <router-link tag="li" v-for="(secondMenus,index) in secondMenus1" :key="index" :to="secondMenus.url">{{secondMenus.text}}</router-link>
+ <li @click="jump(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions" :key="index">{{solution.text}}</li>
</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">
+ <div class="list2 active" 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>
+ <li v-for="(submenu, index) in minkesoft" @click="jump(submenu.url, index, 'aboutUs')" :key="index">{{submenu.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">
+ <div :class="!isShow ? 'nav_ul' : 'plane'" class="hidden">
<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>
+ <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>
+ <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>
+ <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>
+ <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>
+ <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>
+ <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>
@@ -88,10 +82,10 @@
activeNames: ['1'],
cur: 0,
isShow: false,
- isShowChild: false,
+ selectedsubId: null,
menus: [{
text: '棣栭〉',
- url: '/',
+ url: 'Index',
},
{
text: '浜у搧涓績',
@@ -100,139 +94,115 @@
},
{
text: '鎴愬姛妗堜緥',
- url: '/successCase',
+ url: 'SuccessCase',
},
{
text: '娓犻亾鍚堜綔',
- url: '/partner'
+ url: 'Partner'
},
{
text: '鏂伴椈璧勮',
- url: '/news'
+ url: 'News'
},
{
text: '鍏充簬鏄庣',
- url: '/companyProfile',
+ 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: [{
+ products: null,
+ solutions: null,
+ minkesoft: [{
text: '浼佷笟鏂囧寲',
- url: '/companyProfile'
+ url: 'CompanyProfile'
},
{
text: '鑽ｈ獕璧勮川',
- url: '/companyProfile'
+ url: 'CompanyProfile'
},
{
text: '鑱旂郴鏄庣',
- url: '/companyProfile'
+ url: 'CompanyProfile'
},
{
text: '鍔犲叆鏄庣',
- url: '/joinMingKe'
- },
+ url: 'JoinMingKe'
+ }
]
}
},
methods: {
- goHere (path) {
- this.$router.push({
- path: path
- });
+ jump (name, index, type) {
+ if (!name) return
+ this.selectedsubId = null
+ this.isShow = false
+ if (!type) { // 涓婚〉闈㈣烦杞�
+ 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.selectedsubId = index
+ this.$router.push({name: name, params: {menuId: index}})
+ } else if (type === 'aboutUs') { // 鍏充簬鏄庣瀛愰〉闈㈣烦杞�
+ 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.isShow = !this.isShow
this.$refs.nav_ul.style.left = this.isShow ? (0 + 'px') : (-1000 + 'px')
},
- add (index) {
+ contrlSubmenu (index) {
this.cur = index
if (index == 1) {
- this.menus[index].flag = !this.menus[index].flag;
- this.menus[5].flag = false;
+ 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;
+ this.menus[index].flag = !this.menus[index].flag
+ this.menus[1].flag = false
} else {
- this.menus[1].flag = false;
- this.menus[5].flag = false;
+ 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)
+ this.menus[1].flag = false
+ this.menus[5].flag = false
},
load () {
- this.$axios({
- data: {
- func: 'Web_Index_GetData'
- }
+ 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.push({
+ Id: this.products[0].Id,
+ text: '鏇村 >>',
+ url: this.products[0].url
+ })
+
+ this.solutions = res.Solution.map(pro => {
+ return {
+ Id: pro.ID,
+ text: pro.Title1,
+ url: pro.PageType
+ }
+ })
+ this.solutions.push({
+ Id: this.solutions[0].Id,
+ text: '鏇村 >>',
+ url: this.solutions[0].url
+ })
})
}
},
@@ -315,6 +285,10 @@
display: none;
}
+ .hidden {
+ display: none;
+ }
+
li {
float: left;
line-height: 0.68rem;
@@ -368,7 +342,7 @@
border-right: 1px solid #999999;
li:last-child {
- margin-top: .3rem;
+ // margin-top: .3rem;
text-align: right;
}
}
@@ -410,7 +384,11 @@
}
.plane {
- display: block !important;
+ display: block;
+ height: 100%;
+ background-color: #282830;
+ padding: 0.3rem 0 1rem;
+ overflow-y: scroll;
}
.nav_ul {
@@ -523,7 +501,9 @@
margin-left: 0.2rem;
}
}
-
+ .menu3.active {
+ color: #ffffff;
+ }
.more {
float: right;
padding-right: 0.5rem;
--
Gitblit v1.8.0