diff --git a/assets/image/backGroundImg/contact-us-footer.png b/assets/image/backGroundImg/contact-us-footer.png
index fe2ce60..8682ba0 100644
Binary files a/assets/image/backGroundImg/contact-us-footer.png and b/assets/image/backGroundImg/contact-us-footer.png differ
diff --git a/assets/image/banner/news-banner.png b/assets/image/banner/news-banner.png
new file mode 100644
index 0000000..190d9ca
Binary files /dev/null and b/assets/image/banner/news-banner.png differ
diff --git a/components/aside-tree.vue b/components/aside-tree.vue
new file mode 100644
index 0000000..0ec8d0a
--- /dev/null
+++ b/components/aside-tree.vue
@@ -0,0 +1,109 @@
+<template>
+  <aside class="aside-tree">
+    <h3 class="aside-header">{{ headerTitle }}</h3>
+    <nav class="tree-box">
+      <el-tree
+        :data="treeData"
+        node-key="id"
+      />
+    </nav>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'AsideTree',
+  props: {
+    headerTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      treeData: [
+        {
+          id: 1,
+          label: 'Level 1 - 1',
+          children: [
+            {
+              id: 4,
+              label: 'Level 2 - 1-1',
+              children: [
+                {
+                  id: 9,
+                  label: 'Level 3 - 1-1-1'
+                },
+                {
+                  id: 10,
+                  label: 'Level 3 - 1-1-2'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 2,
+          label: 'Level 1 - 2',
+          children: [
+            {
+              id: 5,
+              label: 'Level 2 - 2-1'
+            },
+            {
+              id: 6,
+              label: 'Level 2 - 2-2'
+            }
+          ]
+        },
+        {
+          id: 3,
+          label: 'Level 1 - 3',
+          children: [
+            {
+              id: 7,
+              label: 'Level 2 - 3-1'
+            },
+            {
+              id: 8,
+              label: 'Level 2 - 3-2'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  mounted () {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "element-ui/lib/theme-chalk/tree.css";
+@import "element-ui/lib/theme-chalk/menu.css";
+@import "element-ui/lib/theme-chalk/scrollbar.css";
+.aside-tree {
+  padding: 0;
+  .aside-header {
+    margin: 0;
+    padding: 1.5rem 0;
+    text-indent: 2.125rem;
+    color: #fff;
+    background-color: #015fe8;
+    font-size: 1.25rem;
+    font-weight: bold;
+  }
+  .tree-box {
+    padding: .625rem .625rem;
+    background-color: #f5f7f9;
+    border: .0625rem solid #d9dde0;
+  }
+}
+
+// 特殊样式小屏幕处理
+@media screen and (max-width:400px) {
+  
+}
+
+</style>
\ No newline at end of file
diff --git a/components/header.vue b/components/header.vue
index 5221ace..b62fec4 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -49,7 +49,7 @@ export default {
         { 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.News'), href: '/news' },
         { name: this.$t('menu.Exhibition'), href: '/' },
         { name: this.$t('menu.ContactUs'), href: '/contact-us' },
         { name: this.$t('menu.Feedback'), href: '/' },
diff --git a/locales/en.json b/locales/en.json
index f4ccc6d..60933a4 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -29,6 +29,11 @@
     "ContactUs": "ContactUs",
     "Feedback": "Feedback"
   },
+  "news": {
+    "news": "News",
+    "newsCenter": "NEWS CENTER",
+    "allNews": "ALL NEWS"
+  },
   "index": {
     "companyProfile": "COMPANY PROFILE",
     "corporateName": "SINOTRUCK HOWO SALES CO.,LTD.",
diff --git a/locales/zh.json b/locales/zh.json
index da8a90f..692d970 100644
--- a/locales/zh.json
+++ b/locales/zh.json
@@ -44,6 +44,11 @@
     "joinOurNewsletter": "加入我们的实时通讯",
     "signUpOurNewsletter": "注册我们的实时通讯，获取更多活动和促销！"
   },
+  "news": {
+    "news": "新闻",
+    "newsCenter": "新闻中心",
+    "allNews": "所有新闻"
+  },
   "aboutUs": {
     "AboutUs": "关于我们",
     "company": "中车豪沃销售有限公司",
diff --git a/nuxt.config.js b/nuxt.config.js
index 1366523..5ded99c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -48,7 +48,8 @@ export default {
     '~assets/css/quill.bubble.css',
     '~assets/css/quill.snow.css',
     '~assets/css/quill.core.css',
-    '~assets/css/common.scss'
+    '~assets/css/common.scss',
+    'element-ui/lib/theme-chalk/index.css'
   ],
   /*
   ** Plugins to load before mounting the App
@@ -58,6 +59,7 @@ export default {
     '~plugins/axios',
     { src: "~plugins/router.js", ssr: true },
     { src: "~plugins/i18n.js", ssr: true },
+    { src: "~plugins/element-tree.js", ssr: true },
   ],
   /*
   ** Nuxt.js modules
@@ -111,11 +113,12 @@ export default {
         ["@babel/plugin-proposal-decorators", { "legacy": true }],
         ["@babel/plugin-proposal-class-properties", { "loose": true }],
         ["@babel/plugin-proposal-private-methods", { "loose": true }],
-        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
+        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
       ]
     },
     transpile: [
       'bootstrap-vue',
+      'element-ui',
     ]
   },
   generate: {
diff --git a/package-lock.json b/package-lock.json
index 7b7af48..22fcb1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2898,6 +2898,14 @@
       "resolved": "https://registry.npmmirror.com/async-function/-/async-function-1.0.0.tgz",
       "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -2963,6 +2971,11 @@
         "is-retry-allowed": "^2.2.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.4.1",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz",
@@ -3008,6 +3021,27 @@
         "@babel/helper-define-polyfill-provider": "^0.6.5"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -4635,6 +4669,26 @@
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.177.tgz",
       "integrity": "sha512-7EH2G59nLsEMj97fpDuvVcYi6lwTcM1xuWw3PssD8xzboAW7zj7iB3COEEEATUfjLHrs5uKBLQT03V/8URx06g=="
     },
+    "element-ui": {
+      "version": "2.15.14",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
+      "integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
+          "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
+        }
+      }
+    },
     "elliptic": {
       "version": "6.6.1",
       "resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.6.1.tgz",
@@ -7185,6 +7239,11 @@
       "resolved": "https://registry.npmmirror.com/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -10192,6 +10251,11 @@
       "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.10.tgz",
@@ -11370,6 +11434,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index 587cb56..8046fc4 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "cookie-universal-nuxt": "^2.1.4",
     "core-js": "^3.43.0",
     "dayjs": "^1.11.7",
+    "element-ui": "^2.15.14",
     "jquery": "^3.4.1",
     "lru-cache": "^7.18.3",
     "nuxt": "2.15.0",
diff --git a/pages/contact-us.vue b/pages/contact-us.vue
index 0a2e1c1..fcd7c01 100644
--- a/pages/contact-us.vue
+++ b/pages/contact-us.vue
@@ -126,7 +126,7 @@
       </div>
     </section>
   
-    <b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid :alt="$t('contactUs.contactUs')"></b-img>
+    <b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid-grow :alt="$t('contactUs.contactUs')"></b-img>
   </div>
 </template>
 
@@ -214,8 +214,7 @@ export default {
   }
 
   .footer-img {
-    position: relative;
-    bottom: 0;
+    margin-top: -5.625rem;
   }
   
   // 特殊样式小屏幕处理
@@ -232,6 +231,9 @@ export default {
         padding: 1.25rem;
       }
     }
+    .footer-img {
+      margin-top: 0;
+    }
   }
 }
 
diff --git a/pages/news/index.vue b/pages/news/index.vue
new file mode 100644
index 0000000..30d214c
--- /dev/null
+++ b/pages/news/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <!-- 新闻 -->
+  <div class="content">
+    <BannerTop :options="bannerTopOptions"/>
+
+    <section class="container pt-4 pb-4">
+      <AsideTree class="col-md-3" :headerTitle="$t('news.allNews')"/>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'abou-us',
+  data() {
+    return {
+      bannerTopOptions: {
+        title: this.$t('news.news'),
+        subTitle: this.$t('news.newsCenter'),
+        img: require('../../assets/image/banner/news-banner.png')
+      },
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+}
+
+</style>
\ No newline at end of file
diff --git a/plugins/element-tree.js b/plugins/element-tree.js
new file mode 100644
index 0000000..77bc76b
--- /dev/null
+++ b/plugins/element-tree.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import { 
+  // 添加你需要的其他组件
+  Tree
+} from 'element-ui'
+
+Vue.use(Tree)
\ No newline at end of file
diff --git a/plugins/main.js b/plugins/main.js
index a327bc6..aba8684 100644
--- a/plugins/main.js
+++ b/plugins/main.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import bannerTop from '@/components/banner-top.vue';
+import asideTree from '@/components/aside-tree.vue';
 
-Vue.component('BannerTop', bannerTop);
-
+Vue.component('AsideTree', asideTree);
+Vue.component('BannerTop', bannerTop);
\ No newline at end of file