Browse Source

修改 footer

wangguoyu 3 years ago
parent
commit
252fdf4497
4 changed files with 64 additions and 5 deletions
  1. 58 0
      components/bottomMenu.vue
  2. 0 5
      components/footer.vue
  3. 3 0
      layouts/templateA.vue
  4. 3 0
      layouts/templateB.vue

+ 58 - 0
components/bottomMenu.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="client-footer">
+      <el-menu
+        :default-active="activeNav"
+        :class="navClass"
+        mode="horizontal"
+        :router="false"
+      >
+        <template v-for="(item,index) in footerData" >
+          <el-menu-item :index="`${item.url}`" >
+            <nuxt-link  :to="item.url">{{item.name}}</nuxt-link>
+          </el-menu-item>
+        </template>
+      </el-menu>
+  </div>
+</template>
+
+<script>
+  import {mapState, mapGetters} from 'vuex';
+
+  export default {
+    name: 'mtaFooter',
+    computed: {
+      activeNav() {
+        return this.getActiveNav;
+      },
+      ...mapGetters(['getActiveNav']),
+    },
+    data() {
+      return {
+        navClass:'head-nav-up',
+        footerData: [
+          {
+            name: '首页',
+            url: '/',
+          },
+          {
+            name: '体验中心',
+            url: '/tiyanCenter',
+          },
+          {
+            name: '电话咨询',
+            url: 'tel:400-052-2130',
+          },
+          {
+            name: '在线咨询',
+            url: 'http://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011',
+          }
+
+        ]
+      }
+    },
+
+    methods: {
+
+    },
+  }
+</script>

+ 0 - 5
components/footer.vue

@@ -65,11 +65,6 @@
       <p>大连栋科软件工程有限公司 版权所有</p>
       <a href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备09022904号-18</a>
     </div>
-    <div class="bottom-btn-box">
-      <a :href="item.url" v-for="(item,index) in footerData" :key="index">
-        <i></i><span>{{item.name}}</span>
-      </a>
-    </div>
   </div>
 </template>
 

+ 3 - 0
layouts/templateA.vue

@@ -5,6 +5,7 @@
       <Nuxt />
     </div>
     <mtafooter></mtafooter>
+    <bottomMenu></bottomMenu>
     <mtaSidebar></mtaSidebar>
   </div>
 </template>
@@ -13,11 +14,13 @@
   import Mtafooter from '~/components/footer.vue'
   import Mtaheader from '~/components/header.vue'
   import mtaSidebar from '~/components/sidebar.vue'
+  import bottomMenu from '~/components/bottomMenu.vue'
   export default {
     name:    'mtaFooter',
     components: {
       Mtafooter,
       Mtaheader,
+      bottomMenu,
       mtaSidebar
     },
     //监测路由变化,滚动条置于最上方

+ 3 - 0
layouts/templateB.vue

@@ -5,6 +5,7 @@
       <Nuxt />
     </div>
     <mtafooter></mtafooter>
+    <bottomMenu></bottomMenu>
     <mtaSidebar></mtaSidebar>
   </div>
 </template>
@@ -13,11 +14,13 @@
   import Mtafooter from '~/components/footer2.vue'
   import Mtaheader from '~/components/header.vue'
   import mtaSidebar from '~/components/sidebar.vue'
+  import bottomMenu from '~/components/bottomMenu.vue'
   export default {
     name:    'mtaFooter',
     components: {
       Mtafooter,
       Mtaheader,
+      bottomMenu,
       mtaSidebar
     },
     //监测路由变化,滚动条置于最上方