1. 调整header路由跳转卡死问题

2. 封装完成公用的bannertop组件

assets/css/base.css

@@ -48,4 +48,13 @@ body{
   .container, .container-sm, .container-md, .container-lg, .container-xl {
     max-width: 1200px;
   }
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.3s ease;
+}
+.page-enter,
+.page-leave-to {
+  opacity: 0;
 }

components/banner-top.vue

@@ -0,0 +1,89 @@
+<template>
+  <section class="header" :style="{background: `url(${options.img}) no-repeat`}">
+    <h2 class="mb-0 mb-md-3">{{ options.title }}</h2>
+    <h4>{{ options.subTitle }}</h4>
+    <div class="crumbs d-none d-md-block">
+      <ul class="container d-flex align-items-center">
+        <li>
+          <nuxt-link to="/">{{ $t('menu.Home') }}</nuxt-link>
+          >
+        </li>
+        <li>
+          {{ options.title }}
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'BannerTop',
+  props: {
+    options: {
+      type: Object,
+      default: () => {
+        return {
+          title: '',
+          subTitle: '',
+          img: undefined
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      
+    }
+  },
+  mounted () {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  height: 15rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  background-size: 100% 100% !important;
+  overflow: hidden;
+  h2 {
+    font-size: 1.5rem;
+    font-family: 'SourceHanSansCN-Heavy';
+  }
+  h4 {
+    font-size: .875rem;
+  }
+  .crumbs {
+    width: 100%;
+    height: 2.125rem;
+    position: absolute;
+    bottom: 0;
+    background: rgba(255,255,255,0.52);
+    ul {
+      line-height: 2.125rem;
+      a, li {
+        color: #3a3a3a;
+        font-size: .875rem;
+      }
+      li {
+        margin-right: .3125rem;
+      }
+    }
+  }
+}
+
+// 特殊样式小屏幕处理
+@media screen and (max-width:400px) {
+  .header {
+    height: 5.5rem;
+  }
+}
+
+</style>

components/header.vue

@@ -9,14 +9,14 @@
 
       <b-collapse id="nav-collapse" is-nav>
         <b-navbar-nav class="ml-md-5 text-center">
-          <b-nav-item 
+          <nuxt-link 
             class="nav-link-item d-flex align-items-center" 
-            href="/" 
-            v-for="item in menuList"
-            :key="item"
+            :to="item.href"
+            v-for="(item,index) in menuList"
+            :key="index"
           >
-            {{ item }}
-          </b-nav-item>
+            {{ item.name }}
+          </nuxt-link>
 
           <b-nav-item-dropdown class="nav-link-item d-flex align-items-center" text="demo" right>
             <b-dropdown-item href="#">Account</b-dropdown-item>
@@ -45,7 +45,15 @@ export default {
   data() {
     return {
       searchVal: '',
-      menuList: ['Home','About Us','Products','News','Exhibition','Contact Us','Feedback']
+      menuList: [
+        { name: this.$t('menu.Home'), href: '/' },
+        { name: this.$t('menu.AboutUs'), href: '/abou-us' },
+        { name: this.$t('menu.Products'), href: '/' },
+        { name: this.$t('menu.News'), href: '/' },
+        { name: this.$t('menu.Exhibition'), href: '/' },
+        { name: this.$t('menu.ContactUs'), href: '/' },
+        { name: this.$t('menu.Feedback'), href: '/' },
+      ]
     }
   },
 }

locales/en.json

@@ -17,6 +17,15 @@
     "send": "SEND",
     "enterEail": "Enter your email here"
   },
+  "menu": {
+    "Home": "Home",
+    "AboutUs": "AboutUs",
+    "Products": "Products",
+    "News": "News",
+    "Exhibition": "Exhibition",
+    "ContactUs": "ContactUs",
+    "Feedback": "Feedback"
+  },
   "index": {
     "companyProfile": "COMPANY PROFILE",
     "corporateName": "SINOTRUCK HOWO SALES CO.,LTD.",
@@ -31,7 +40,12 @@
     "realTimeNewsReadingOnline": "Real-time news reading online",
     "joinOurNewsletter": "JOIN OUR NEWSLETTER",
     "signUpOurNewsletter": "Sign up our newsletter and get more events & promotions!"
-  },  
+  },
+  "aboutUs": {
+    "AboutUs": "About Us",
+    "company": "Sinotruck Howo Sales Co.,Ltd",
+    "address": "Room 2403, No.1 Yinzuo Jingdu Mansion, Shunhe East Street No.66, District Shizhong, Jinan city, shandong province, China"
+  },
   "footer": {
     "contactUs": "Contact us"
   }

locales/zh.json

@@ -17,6 +17,15 @@
     "send": "发送",
     "enterEail": "在此处输入您的电子邮件"
   },
+  "menu": {
+    "Home": "首页",
+    "AboutUs": "关于我们",
+    "Products": "产品",
+    "News": "新闻",
+    "Exhibition": "展览",
+    "ContactUs": "联系我们",
+    "Feedback": "反馈"
+  },
   "index": {
     "companyProfile": "公司简介",
     "corporateName": "中国重汽豪沃销售有限公司",
@@ -32,6 +41,11 @@
     "joinOurNewsletter": "加入我们的实时通讯",
     "signUpOurNewsletter": "注册我们的实时通讯，获取更多活动和促销！"
   },
+  "aboutUs": {
+    "AboutUs": "关于我们",
+    "company": "中车豪沃销售有限公司",
+    "address": "中国山东省济南市市中区顺河东街66号银座京都大厦1号2403室"
+  },
   "footer": {
     "contactUs": "联系我们"
   }

nuxt.config.js

@@ -3,6 +3,10 @@ const webpack = require('webpack')
 
 export default {
   buildDir: 'nuxt-dist',
+  transition: {
+    name: 'page',
+    mode: 'out-in'
+  },
   /*
   ** Headers of the page
   */
@@ -35,7 +39,7 @@ export default {
   /*
   ** Customize the progress-bar color
   */
-  loading: { color: '#073B8C' },
+  loading: { color: '#015fe8' },
   /*
   ** Global CSS
   */

pages/abou-us.vue

@@ -0,0 +1,30 @@
+<template>
+  <!-- 个人中心 -->
+  <div class="content">
+    <BannerTop :options="bannerTopOptions"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'abou-us',
+  data() {
+    return {
+      bannerTopOptions: {
+        title: this.$t('aboutUs.AboutUs'),
+        subTitle: this.$t('aboutUs.company'),
+        img: require('../assets/image/banner/aboutus-banner.png')
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+}
+
+</style>

plugins/main.js

@@ -1,3 +1,5 @@
-// import 'babel-polyfill'
+import Vue from 'vue';
+import bannerTop from '@/components/banner-top.vue';
 
+Vue.component('BannerTop', bannerTop);