2025-03-04

king

2025-03-04 bae56a147be85be57ad1c64e9766c9aca750d187

 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()">
            <!-- 移动端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="{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>