2019-08-14update

king

2019-08-14 68cbb649c933776838e937446ce9ed384916a5e8

 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>
            <!-- 移动端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">
               <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;