添加二级导航

src/page/layout/header/index.vue

@@ -34,7 +34,7 @@
       <a class="search" @click="searchHandle" :class="{active: hoverCp === 'isearch'}">
         <vcenter>
           <i class="iconfont icon-sousuo open"></i>
-          <i class="iconfont icon-cuo hide"></i>
+          <i class="iconfont icon-cuowu hide"></i>
         </vcenter>
       </a>
       <a class="user">
@@ -60,11 +60,11 @@ export default {
       overb: false,
       active: true,
       navs: [
-        {text: '产品购买', cp: 'iproduct'},
+        {text: '产品购买', cp: 'product'},
         {text: '核心技术', cp: 'videos'},
-        {text: '媒体合作', cp: 'information_news'},
-        {text: '服务支持', cp: 'iservice'},
-        {text: '关于我们', cp: 'iservice'}
+        {text: '行业应用', cp: 'case'},
+        {text: '服务支持', cp: 'service'},
+        {text: '关于我们', cp: 'service'}
       ]
     }
   },

src/page/navs/case/index.vue

@@ -1,68 +0,0 @@
-<template>
-<div>
-  <div class="search-con">
-    <div class="search-ban">
-      <div class="search-case">
-        <div class="case" @click="$router.push({name: 'cases'})">
-          <span class="case-span" v-for="(item,i) in caseArr" :key="i">
-            <span @click="activeIdx = item.id" :class="{'name':true,'active':item.id === activeIdx}">{{item.name}}</span>
-            <span class="line-span" v-if="i!==caseArr.length-1">/</span>
-            <br v-if="i===3"/>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-</template>
-
-<script>
-import vcenter from '@/components/vcenter'
-const caseArr = [{
-  name: '文博',
-  id: 0
-}, {
-  name: '地产',
-  id: 1
-}, {
-  name: '电商',
-  id: 2
-}, {
-  name: '餐饮',
-  id: 3
-}, {
-  name: '家具',
-  id: 4
-}, {
-  name: '其他',
-  id: 5
-}]
-
-export default {
-  components: {
-    vcenter
-  },
-  data () {
-    return {
-      activeIdx: 0,
-      caseArr
-    }
-  },
-  computed: {},
-  watch: {},
-  // 方法集合
-  methods: {
-
-  },
-  created () {
-
-  },
-  mounted () {
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss'
-</style>

src/page/navs/case/style.scss

@@ -1,44 +0,0 @@
-$lHeight: 145px;
-
-.search-con {
-  position: relative;
-  width: 100%;
-  padding: 0 340px;
-  background-color: #fff;
-  height: $lHeight;
-  border-bottom: 1px solid #e5e5e5;
-  .search-ban {
-    position: relative;
-    margin: 0 auto;
-    max-width: 1200px;
-    height: $lHeight;
-    .search-case{
-      margin-left: 260px;
-      display: inline-block;
-      border-left: #e5e5e5 1px solid;
-      line-height: 0.9;
-      .case{
-        height: $lHeight;
-        text-align: left;
-        font-size: 14px;
-        display: inline-block;
-        padding:20px 0 0 155px;
-        width: 40vw;
-        .case-span{
-          font-size: 24px;
-          color: #787878;
-          line-height: 34px;
-          .name{
-            cursor: pointer;
-          }
-          .active{
-            color: #ff0000;
-          }
-          .line-span{
-            margin: 0 10px;
-          }
-        }
-      }
-    }
-  }
-}

src/page/navs/forum/index.vue

@@ -1,33 +0,0 @@
-<template>
-<div>
-
-</div>
-</template>
-
-<script>
-
-export default {
-  components: {
-  },
-  data () {
-    return {
-    }
-  },
-  computed: {},
-  watch: {},
-  // 方法集合
-  methods: {
-
-  },
-  created () {
-
-  },
-  mounted () {
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss'
-</style>

src/page/navs/index.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="second" ref="second">
-    <component :is="cp" :split="split"/>
+    <component :is="cpmap" :split="split" :origin="cp"/>
   </div>
 </template>
 
 <script>
 import {mapState} from 'vuex'
-import icase from './case/'
+import temp from './temp'
 import isearch from './search/'
-import iproduct from './product/'
-import iservice from './service/'
-import iforum from './forum/'
+
+const modulMap = {
+  temp: ['case', 'product', 'service', 'forum']
+}
 
 export default {
   props: {
@@ -22,14 +23,18 @@ export default {
   computed: {
     ...mapState({
       split: state => state.ui.navDivision
-    })
+    }),
+    cpmap () {
+      let cpmap = Object.keys(modulMap).find(key => {
+        return ~modulMap[key].indexOf(this.cp)
+      })
+
+      return cpmap || this.cp
+    }
   },
   components: {
-    icase,
-    isearch,
-    iproduct,
-    iservice,
-    iforum
+    temp,
+    isearch
   }
 }
 </script>

src/page/navs/product/index.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="search-camera" :style="{paddingLeft: split+'px'}">
-    <router-link :to="item.to" tag="a" class="camera" v-for="(item,i) in cameraArr" :key="i">
-      <vcenter>
-        <img :src="item.img" >
-        <div style="margin-top:10px;">{{item.name}}</div>
-      </vcenter>
-    </router-link>
-  </div>
-</template>
-
-<script>
-import vcenter from '@/components/vcenter'
-const cameraArr = [{
-  img: require('@/assets/images/product_img_2c.png'),
-  name: '双目相机',
-  to: {name: 'product'}
-}, {
-  img: require('@/assets/images/product_img_6c.png'),
-  name: '即将上市',
-  to: {name: 'product'}
-}, {
-  img: require('@/assets/images/product_img_zt.png'),
-  name: '即将上市',
-  to: {name: 'product'}
-}]
-
-export default {
-  props: {
-    'split': {
-      default: 0
-    }
-  },
-  components: {
-    vcenter
-  },
-  data () {
-    return {
-      cameraArr
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss'
-</style>

src/page/navs/product/style.scss

@@ -1,24 +0,0 @@
-$lHeight: 145px;
-
-.search-camera {
-  background-color: #fff;
-  height: $lHeight;
-  border-bottom: 1px solid #e5e5e5;
-  display: flex;
-
-  .camera {
-    max-width: 120px;
-    flex: 1;
-    padding: 0 30px;
-    line-height: 1;
-    text-align: center;
-    font-size: 14px;
-    color: #ff0000;
-    cursor: pointer;
-    height: 100%;
-
-    &:first-child {
-      color: #787878;
-    }
-  }
-}

src/page/navs/service/index.vue

@@ -1,57 +0,0 @@
-<template>
-<div class="search-camera" :style="{paddingLeft: split + 'px'}">
-  <router-link :to="item.to" tag="a" class="camera" v-for="(item,i) in serviceArr" :key="i">
-    <vcenter>
-      <img :src="item.img" >
-      <div style="margin-top:10px;">{{item.name}}</div>
-    </vcenter>
-  </router-link>
-</div>
-</template>
-
-<script>
-import vcenter from '@/components/vcenter'
-const serviceArr = [
-  {
-    img: require('@/assets/images/service_icon_01@2x.png'),
-    name: '使用教程',
-    to: {name: 'service_list', params: {id: 'use'}}
-  }, {
-    img: require('@/assets/images/service_icon_02@2x.png'),
-    name: '常见问题',
-    to: {name: 'service_list', params: {id: 'qa'}}
-  }, {
-    img: require('@/assets/images/service_icon_03@2x.png'),
-    name: 'app下载',
-    to: {name: 'service_down'}
-  }, {
-    img: require('@/assets/images/service_icon_04@2x.png'),
-    name: '维修服务',
-    to: {name: 'service_support'}
-  }, {
-    img: require('@/assets/images/service_icon_05@2x.png'),
-    name: '网站条款',
-    to: {name: 'service_list', params: {id: 'clause'}}
-  }
-]
-
-export default {
-  props: {
-    'split': {
-      default: 0
-    }
-  },
-  components: {
-    vcenter
-  },
-  data () {
-    return {
-      serviceArr
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './style.scss'
-</style>

src/page/navs/service/style.scss

@@ -1,24 +0,0 @@
-$lHeight: 145px;
-
-.search-camera {
-  background-color: #fff;
-  height: $lHeight;
-  border-bottom: 1px solid #e5e5e5;
-  display: flex;
-
-  .camera {
-    max-width: 120px;
-    flex: 1;
-    padding: 0 30px;
-    line-height: 1;
-    text-align: center;
-    font-size: 14px;
-    cursor: pointer;
-    height: 100%;
-    color: #787878;
-
-    img {
-      width: 100%;
-    }
-  }
-}

src/page/navs/temp.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="search-camera" :style="{paddingLeft: split+'px'}">
+    <router-link :to="item.to" tag="a" class="camera" v-for="(item,i) in arr" :key="i">
+      <vcenter>
+        <i class="iconfont" :class="item.icon"></i>
+        <div style="margin-top:10px;">{{item.name}}</div>
+      </vcenter>
+    </router-link>
+  </div>
+</template>
+
+<script>
+import vcenter from '@/components/vcenter'
+const setting = {
+  'product': [
+    {
+      icon: 'icon-icon_cam_lite',
+      name: '双目相机',
+      to: {name: 'product'}
+    }, {
+      icon: 'icon-icon_cam_pro',
+      name: '即将上市',
+      to: {name: 'product'}
+    }, {
+      icon: 'icon-icon_cam_fitting',
+      name: '即将上市',
+      to: {name: 'product'}
+    }
+  ],
+  'service': [
+    {
+      icon: 'icon-tutorial',
+      name: '使用教程',
+      to: {name: 'service_list', params: {id: 'use'}}
+    }, {
+      icon: 'icon-faq',
+      name: '常见问题',
+      to: {name: 'service_list', params: {id: 'qa'}}
+    }, {
+      icon: 'icon-appdown',
+      name: 'app下载',
+      to: {name: 'service_down'}
+    }, {
+      icon: 'icon-service',
+      name: '维修服务',
+      to: {name: 'service_support'}
+    }, {
+      icon: 'icon-protocol',
+      name: '网站条款',
+      to: {name: 'service_list', params: {id: 'clause'}}
+    }
+  ],
+  'case': [
+    {
+      icon: 'icon-industry_realty',
+      name: '房地产',
+      to: {name: 'service_list', params: {id: 'use'}}
+    }, {
+      icon: 'icon-industry_museum',
+      name: '博物馆',
+      to: {name: 'service_list', params: {id: 'qa'}}
+    }, {
+      icon: 'icon-industry_industry',
+      name: '工业',
+      to: {name: 'service_down'}
+    }, {
+      icon: 'icon-industry_gover',
+      name: '政务',
+      to: {name: 'service_support'}
+    }, {
+      icon: 'icon-industry_ecom',
+      name: '电商',
+      to: {name: 'service_support'}
+    }, {
+      icon: 'icon-icon_industry_catering',
+      name: '餐饮',
+      to: {name: 'service_list', params: {id: 'clause'}}
+    }, {
+      icon: 'icon-icon_industry_app',
+      name: 'app',
+      to: {name: 'service_list', params: {id: 'clause'}}
+    }
+  ]
+}
+
+export default {
+  props: {
+    'split': {
+      default: 0
+    },
+    'origin': {
+      default: ''
+    }
+  },
+  components: {
+    vcenter
+  },
+  computed: {
+    arr () {
+      return setting[this.origin]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$lHeight: 145px;
+
+.search-camera {
+  background-color: #fff;
+  height: $lHeight;
+  border-bottom: 1px solid #e5e5e5;
+  display: flex;
+
+  .camera {
+    max-width: 120px;
+    flex: 1;
+    padding: 0 30px;
+    line-height: 1;
+    text-align: center;
+    font-size: 14px;
+    color: #787878;
+    cursor: pointer;
+    height: 100%;
+    transition: color .3s linear;
+
+    &:hover {
+      color: #000;
+    }
+
+    i {
+      font-size: 60px;
+    }
+  }
+}
+</style>