From 4deda573bfc6663c1793b29f60a6e1035d891520 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 23 八月 2019 16:36:42 +0800
Subject: [PATCH] news
---
src/components/header.vue | 305 ++++++++++++++++++++++++++------------------------
1 files changed, 157 insertions(+), 148 deletions(-)
diff --git a/src/components/header.vue b/src/components/header.vue
index 2b0085b..910e5a0 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -2,82 +2,75 @@
<div class="header" :class="!isShow ? '' : 'h_height'">
<div class="wrapper">
<a class="logo"><img src="../img/index_logo.png" alt=""></a>
- <div class="nav">
- <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>
+ <div class="nav" @mouseleave="leave()">
+ <!-- 绉诲姩绔痟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="{' 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">
- <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">5646546</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>
-
</div>
</template>
@@ -86,13 +79,13 @@
name: 'Header',
data() {
return {
- activeNames: ['1'],
- cur: 0,
+ cur: -1,
+ curtab: 0,
isShow: false,
- isShowChild: false,
+ selectedsubId: null,
menus: [{
text: '棣栭〉',
- url: '/',
+ url: 'Index',
},
{
text: '浜у搧涓績',
@@ -101,130 +94,143 @@
},
{
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
+ 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;
+ showNav () {
+ 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
}
},
- add5(u,i){
- if(i != 4){
- this.$router.push(`${u}#anchor-${i}`)
- }else{
- this.$router.push(u)
- }
+ leave () {
+ this.cur = -1
+ this.menus[1].flag = false
+ this.menus[5].flag = false
},
- 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.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>
@@ -241,7 +247,7 @@
-webkit-animation: gupIn 1s 0.1s both;
-moz-animation: gupIn 1s 0.1s both;
animation: gupIn 1s 0.1s both;
- z-index: 8888;
+ z-index: 2000;
top: 0;
.wrapper {
@@ -255,7 +261,7 @@
float: left;
img {
- height: 0.67rem;
+ height: 0.4rem;
}
}
@@ -272,7 +278,7 @@
.homeico {
img {
- height: 0.54rem;
+ height: 0.5rem;
margin-right: 0.46rem;
}
}
@@ -302,6 +308,10 @@
display: none;
}
+ .hidden {
+ display: none;
+ }
+
li {
float: left;
line-height: 0.68rem;
@@ -322,7 +332,8 @@
position: absolute;
left: -0.8rem;
transition: all .3s ease 0s;
- height: 2rem;
+ min-height: 1.5rem;
+ padding-bottom: 0.2rem;
background-color: #212020;
z-index: 999;
@@ -355,7 +366,7 @@
border-right: 1px solid #999999;
li:last-child {
- margin-top: .3rem;
+ // margin-top: .3rem;
text-align: right;
}
}
@@ -386,9 +397,8 @@
}
}
-
@media (max-width: 750px) and (min-width: 0) {
- .title_s{
+ .title_s {
font-size: 0.35rem;
width: 100%;
padding-left: 42%;
@@ -398,7 +408,11 @@
}
.plane {
- display: block !important;
+ display: block;
+ height: 100%;
+ background-color: #282830;
+ padding: 0.3rem 0 1rem;
+ overflow-y: scroll;
}
.nav_ul {
@@ -432,7 +446,6 @@
background-color: black;
height: 0.5rem;
line-height: 0.5rem;
-
}
.header .nav .nav_ul {
@@ -465,14 +478,11 @@
display: none;
}
}
-
-
.header .nav .navico,
.header .nav .homeico {
display: inline-block;
padding: 0;
}
-
.abloutMingKe_ul,
.abloutMingKe_ul1 {
background: #303030;
@@ -515,16 +525,15 @@
margin-left: 0.2rem;
}
}
-
+ .menu3.active {
+ color: #ffffff;
+ }
.more {
float: right;
padding-right: 0.5rem;
margin-bottom: 0.1rem;
}
-
}
-
-
.list1 {
display: flex;
opacity: 0;
@@ -534,7 +543,6 @@
top: 0.65rem;
right: 0;
}
-
.list2 {
opacity: 0;
width: 2rem;
@@ -543,12 +551,13 @@
top: 0.76rem;
right: -0.84rem;
}
-
.active {
opacity: 1;
}
-
- .active1 {
+ .menu-hover {
+ background: #232323;
+ }
+ .menu-active {
background: #212020;
}
</style>
--
Gitblit v1.8.0