From bae56a147be85be57ad1c64e9766c9aca750d187 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 04 三月 2025 16:04:12 +0800
Subject: [PATCH] 2025-03-04
---
src/components/header.vue | 693 ++++++++++++++++++---------------------------------------
1 files changed, 224 insertions(+), 469 deletions(-)
diff --git a/src/components/header.vue b/src/components/header.vue
index e2c2f9f..b50b3c6 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -1,75 +1,78 @@
<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()">
- <!-- 绉诲姩绔痟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">
- <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">
- <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 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="https://cloud.mk9h.cn/index.html" ref="nofollow" target="_blank">鐧诲綍</a>
</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="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>
- <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>
+ <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>
@@ -79,103 +82,34 @@
name: 'Header',
data() {
return {
- activeNames: ['1'],
- cur: 0,
+ activeKey: 'home',
+ 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'
- }
- ]
+ solutions: null
}
},
methods: {
- jump (name, index, type) {
- if (!name) return
- this.selectedsubId = null
+ jumpview (url, par, type) {
+ let name = url.toLowerCase()
+ let params = {}
this.isShow = false
- name = name.toLowerCase()
- if (!type) { // 涓婚〉闈㈣烦杞�
- if (name === 'companyprofile') { // 鍏充簬鏄庣,閿氱偣鍙傛暟
- this.$router.push({name: name, params: {hash: 'null'}})
- } else {
- this.$router.push({name: name})
- }
+ if (name === 'companyprofile') {
+ params.hash = par
} 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}`}})
+ 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
}
- },
- 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.menus[1].flag = false
- this.menus[5].flag = false
+
+ this.$router.push({name: name, params})
},
load () {
this.Service.getBaseData('Web_Index_GetData').then(res => {
@@ -217,6 +151,9 @@
})
}
},
+ created () {
+ this.activeKey = this.$route.name
+ },
mounted () {
this.load()
}
@@ -224,22 +161,30 @@
</script>
<style lang="less" scoped>
- .header {
+ .header-wrap {
background: #282830;
position: fixed;
width: 100%;
- /*padding: 0.08rem 0;*/
+ 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;
+ z-index: 2000;
top: 0;
- .wrapper {
+ .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;
@@ -247,7 +192,6 @@
.logo {
float: left;
-
img {
height: 0.4rem;
}
@@ -255,334 +199,145 @@
.nav {
float: right;
+ }
- .navico {
- width: 0.45rem;
-
- img {
- height: 0.39rem;
- }
+ .pc-tel {
+ display: block;
+ width: 155px;
+ img {
+ width: 20px;
+ height: 20px;
+ vertical-align: text-bottom;
}
-
- .homeico {
- img {
- height: 0.5rem;
- margin-right: 0.46rem;
- }
+ 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;
}
}
- @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;
+ li {
+ line-height: 0.68rem;
+ height: 0.68rem;
+ > div.el-submenu__title {
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;
-
+ @media (max-width: 1366px) and (min-width: 750px) {
+ .header-wrap {
+ .pc-wrapper {
+ width: 90%;
+ }
+ .pc-tel {
+ img {
+ width: 18px;
+ height: 18px;
+ }
span {
- display: block;
- font-size: 0.42rem;
- border-bottom: 1px solid #fff;
- color: #fff;
- padding: 0.44rem 0;
+ font-size: 0.15rem;
}
}
-
- >li:first-child {
- display: none;
+ .register {
+ span, a {
+ font-size: 0.15rem;
+ }
}
}
- .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;
- }
- .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;
+ .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>
--
Gitblit v1.8.0