diff --git a/assets/image/banner/header-top-line.png b/assets/image/banner/header-top-line.png
new file mode 100644
index 0000000..ce73809
Binary files /dev/null and b/assets/image/banner/header-top-line.png differ
diff --git a/components/aside-tree.vue b/components/aside-tree.vue
index 0ec8d0a..efac75f 100644
--- a/components/aside-tree.vue
+++ b/components/aside-tree.vue
@@ -1,12 +1,38 @@
 <template>
   <aside class="aside-tree">
-    <h3 class="aside-header">{{ headerTitle }}</h3>
-    <nav class="tree-box">
-      <el-tree
-        :data="treeData"
-        node-key="id"
-      />
-    </nav>
+    <div>
+      <h3 class="aside-header">{{ headerTitle }}</h3>
+        <nav class="tree-box">
+          <el-tree
+            :data="treeData"
+            node-key="id"
+            highlight-current
+          />
+        </nav>
+    </div>
+
+    <div class="mt-2">
+      <h3 class="contact-us">{{ $t('contactUs.contactUs') }}</h3>
+      <div class="contact-details">
+        <h4 class="mt-3 mb-3">{{ $t('index.corporateName') }}</h4>
+        <p class="mb-2">
+          <label class="mb-0">{{ $t('common.addressLabel') }}:</label>
+          <span>{{ $t('aboutUs.address') }}</span>
+        </p>
+        <p class="mb-2">
+          <label class="mb-0">{{ $t('common.tel') }}:</label>
+          <span>+86-531-69985132</span>
+        </p>
+        <p class="mb-2">
+          <label class="mb-0">{{ $t('common.Mob/Whatsapp/Wechat') }}:</label>
+          <span>0086 182 5311 2969</span>
+        </p>
+        <p class="mb-2">
+          <label class="mb-0">{{ $t('common.E-mail') }}:</label>
+          <span>alicesales@scdtrailer.com</span>
+        </p>
+      </div>
+    </div>
   </aside>
 </template>
 
@@ -85,7 +111,7 @@ export default {
 @import "element-ui/lib/theme-chalk/scrollbar.css";
 .aside-tree {
   padding: 0;
-  .aside-header {
+  @mixin header {
     margin: 0;
     padding: 1.5rem 0;
     text-indent: 2.125rem;
@@ -94,10 +120,33 @@ export default {
     font-size: 1.25rem;
     font-weight: bold;
   }
+  .aside-header {
+    @include header;
+  }
   .tree-box {
     padding: .625rem .625rem;
-    background-color: #f5f7f9;
     border: .0625rem solid #d9dde0;
+    ::v-deep .is-current {
+      > .el-tree-node__content {
+        color: #015fe8;
+      }
+    }
+  }
+  .contact-us {
+    @include header;
+  }
+  .contact-details {
+    padding: .625rem 1.25rem;
+    border: .0625rem solid #d9dde0;
+    background-color: #f5f7f9;
+    font-size: .875rem;
+    h4 {
+      color: #302d2d;
+      font-size: .875rem;
+    }
+    label {
+      color: #77778b;
+    }
   }
 }
 
diff --git a/components/seo-pagination.vue b/components/seo-pagination.vue
new file mode 100644
index 0000000..c3963cf
--- /dev/null
+++ b/components/seo-pagination.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="container-custom">
+    <div class="wrapper_1260">
+      <div class="pagination_box">
+        <b-pagination-nav 
+          size="lg" 
+          v-model="currentPage"
+          :link-gen="linkGen" 
+          :number-of-pages="numberOfPages" 
+          use-router>
+        </b-pagination-nav>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "seo-pagination",
+  data() {
+    return {
+      currentPage: 1,
+      queryStr: ''
+    };
+  },
+  props: {
+    total: {
+      default: 99
+    },
+    page: {
+      default: 1
+    },
+    rows: {
+      default: 10
+    },
+    pageKey: {
+      type: String,
+      default: 'page'
+    },
+  },
+  watch: {
+    '$route': {
+      handler(val) {
+        this.currentPage = val.query[this.pageKey] || 1
+        for (let key in val.query) {
+          if (key!==this.pageKey) {
+            this.queryStr = `${this.queryStr}&${key}=${val.query[key]}`
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    numberOfPages() {
+      if (!this.total) {
+        return 1
+      }
+      return Math.ceil(this.total / this.rows)
+    }
+  },
+  methods: {
+    linkGen(pageNum) {
+      return `?${this.pageKey}=${pageNum}${this.queryStr || ''}`
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.container-custom {
+  background-color: transparent !important;
+}
+.pagination_box {
+  width: 100%;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .total_box {
+    margin-right: 15px;
+    color: #606266;
+    font-size: 14px;
+  }
+  >nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  ::v-deep .el-input {
+    width: 70px;
+    margin: 0 4px;
+  }
+}
+</style>
diff --git a/pages/news.vue b/pages/news.vue
new file mode 100644
index 0000000..bb334e3
--- /dev/null
+++ b/pages/news.vue
@@ -0,0 +1,72 @@
+<template>
+  <!-- 新闻 -->
+  <div class="content">
+    <BannerTop :options="bannerTopOptions"/>
+
+    <section class="container pt-4 pb-4">
+      <div class="row">
+        <AsideTree class="col-md-3 mb-4 mb-md-0" :headerTitle="$t('news.allNews')"/>
+        <main class="col-md-9">
+          <div class="header">
+            <h2>Low Bed Trailer</h2>
+          </div>
+          <nuxt-child />
+        </main>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'news',
+  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%;
+  main {
+  .header {
+    height: 59px;
+    color: #ffffff;
+    text-indent: 1.375rem;
+    background: linear-gradient( 180deg, rgba(33,119,244,0.04) 0%, rgba(1,95,232,0.14) 100%);
+    border-bottom: 2px solid #0663ea;
+      h2 {
+        max-width: 19.125rem;
+        height: 100%;
+        position: relative;
+        line-height: 3.6875rem;
+        background: linear-gradient( 180deg, #2177F4 0%, #015FE8 100%);
+        font-size: 1rem;
+        &::after {
+          content: '';
+          width: 5.875rem;
+          height: 3.6875rem;
+          position: absolute;
+          top: 0;
+          right: -5.8125rem;
+          background: url('~assets/image/banner/header-top-line.png') no-repeat;
+          background-size: 100% 100%;
+          z-index: 999;
+        }
+      }
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/pages/news/_id.vue b/pages/news/_id.vue
new file mode 100644
index 0000000..b8022e5
--- /dev/null
+++ b/pages/news/_id.vue
@@ -0,0 +1,24 @@
+<template>
+  <!-- 新闻详情 -->
+  <div class="news-info">
+    泪飙
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'news-info',
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/news/index.vue b/pages/news/index.vue
index 30d214c..fad2d1c 100644
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -1,23 +1,41 @@
 <template>
-  <!-- 新闻 -->
-  <div class="content">
-    <BannerTop :options="bannerTopOptions"/>
+  <!-- 新闻列表 -->
+  <section class="news-list">
+    <nuxt-link 
+      class="news-item row mt-4" 
+      to="/"
+      v-for="item in 6"
+      :key="item"
+    >
+      <b-img 
+        class="col-md-4"
+        src="~assets/image/banner/home-pord1.png"
+        alt="Responsive image"
+      >
+      </b-img>
+      <article class="col-md-8">
+        <h3 class="title">Advantages Of Front Shovel And Backhoe For Excavators</h3>
+        <p class="news-content text-ellipsis ">
+          When many customers maintain their trucks, they mostly only pay attention to the maintenance of tires and engines and do not pay much attention to the chassis. Little do they know that if the chassis is not maintained, the truck will have big problems. So how to maintain the chassis of a truck? The following article will introduce it in detail.
+        </p>
+        <div>
+          <span>- Aug 19, 2022-</span>
+          <img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
+        </div>
+      </article>
+    </nuxt-link>
 
-    <section class="container pt-4 pb-4">
-      <AsideTree class="col-md-3" :headerTitle="$t('news.allNews')"/>
-    </section>
-  </div>
+    <seoPagination class="mt-4" />
+  </section>
 </template>
 
 <script>
 export default {
-  name: 'abou-us',
+  name: 'news-list',
   data() {
     return {
       bannerTopOptions: {
-        title: this.$t('news.news'),
-        subTitle: this.$t('news.newsCenter'),
-        img: require('../../assets/image/banner/news-banner.png')
+        
       },
     }
   },
@@ -28,9 +46,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content {
-  width: 100%;
-  height: 100%;
+.news-list {
+  box-sizing: border-box;
+  .news-item {
+    margin: 0;
+    height: min-content;
+    min-height: 12.875rem;
+    border: 1px solid #e6e8ec;
+    article {
+      padding: 1.125rem;
+      font-size: .875rem;
+      .title {
+        margin-top: .9375rem;
+        color: #212222;
+        font-size: .875rem;
+      }
+      .news-content {
+        margin: 1.25rem 0;
+        height: 5rem;
+        color: #878b90;
+      	-webkit-line-clamp: 4;
+      }
+      >div {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #878b90;
+        img {
+          width: 1.6875rem;
+          height: 1rem;
+        }
+      }
+    }
+  }
 }
 
 </style>
\ No newline at end of file
diff --git a/plugins/main.js b/plugins/main.js
index aba8684..06f349e 100644
--- a/plugins/main.js
+++ b/plugins/main.js
@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import bannerTop from '@/components/banner-top.vue';
 import asideTree from '@/components/aside-tree.vue';
+import seoPagination from '@/components/seo-pagination.vue';
 
 Vue.component('AsideTree', asideTree);
-Vue.component('BannerTop', bannerTop);
\ No newline at end of file
+Vue.component('BannerTop', bannerTop);
+Vue.component('seoPagination', seoPagination);
\ No newline at end of file