diff --git a/assets/css/common.scss b/assets/css/common.scss
index dcfa6d3..63bb883 100644
--- a/assets/css/common.scss
+++ b/assets/css/common.scss
@@ -47,6 +47,33 @@
     text-align: left;
   }
 }
+.pretty-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('../image/banner/header-top-line.png') no-repeat;
+      background-size: 100% 100%;
+      z-index: 999;
+    }
+  }
+}
+
 .breadcrumb-item + .breadcrumb-item::before {
   content: '>>';
-}
\ No newline at end of file
+}
diff --git a/assets/image/icon/Facebook-colorful.png b/assets/image/icon/Facebook-colorful.png
new file mode 100644
index 0000000..f9ed599
Binary files /dev/null and b/assets/image/icon/Facebook-colorful.png differ
diff --git a/assets/image/icon/X-colorful.png b/assets/image/icon/X-colorful.png
new file mode 100644
index 0000000..1fe4f9a
Binary files /dev/null and b/assets/image/icon/X-colorful.png differ
diff --git a/assets/image/icon/YouTube-colorful.png b/assets/image/icon/YouTube-colorful.png
new file mode 100644
index 0000000..8b36fa6
Binary files /dev/null and b/assets/image/icon/YouTube-colorful.png differ
diff --git a/assets/image/icon/fax-colorful.png b/assets/image/icon/fax-colorful.png
new file mode 100644
index 0000000..efb8f59
Binary files /dev/null and b/assets/image/icon/fax-colorful.png differ
diff --git a/assets/image/icon/google-colorful.png b/assets/image/icon/google-colorful.png
new file mode 100644
index 0000000..5f43c0f
Binary files /dev/null and b/assets/image/icon/google-colorful.png differ
diff --git a/assets/image/icon/in-colorful.png b/assets/image/icon/in-colorful.png
new file mode 100644
index 0000000..344fe72
Binary files /dev/null and b/assets/image/icon/in-colorful.png differ
diff --git a/components/contact-footer.vue b/components/contact-footer.vue
new file mode 100644
index 0000000..6a45828
--- /dev/null
+++ b/components/contact-footer.vue
@@ -0,0 +1,64 @@
+<template>
+  <ul class="contact-footer">
+    <li class="mr-4 box_shadow" v-for="(item,index) in contactFooter" :key="index">
+      <a :href="item.link" target="_blank">
+        <b-img :src="item.icon" :alt="item.alt"></b-img>
+      </a>
+    </li>
+  </ul>
+</template>
+
+<script>
+
+export default {
+  name: 'ContactFooter',
+  data() {
+    return {
+      contactFooter: [
+        {
+          icon: require('../assets/image/icon/Facebook-colorful.png'),
+          link: 'javascript:;',
+          alt: 'Facebook'
+        },
+        {
+          icon: require('../assets/image/icon/X-colorful.png'),
+          link: 'javascript:;',
+          alt: 'X'
+        },
+        {
+          icon: require('../assets/image/icon/in-colorful.png'),
+          link: 'javascript:;',
+          alt: 'in'
+        },
+        {
+          icon: require('../assets/image/icon/google-colorful.png'),
+          link: 'javascript:;',
+          alt: 'google'
+        },
+        {
+          icon: require('../assets/image/icon/YouTube-colorful.png'),
+          link: 'javascript:;',
+          alt: 'YouTube'
+        },
+        {
+          icon: require('../assets/image/icon/fax-colorful.png'),
+          link: 'javascript:;',
+          alt: 'fax'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contact-footer {
+  height: 3.5rem;
+  margin: .625rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f3f8;
+  border-radius: .375rem;
+}
+</style>
diff --git a/components/header.vue b/components/header.vue
index b62fec4..71dc188 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="header-box d-flex justify-content-between align-items-center">
-    <b-navbar class="h-100 flex-grow-1 flex-sm-grow-0 pb-0" toggleable="lg">
+    <b-navbar class="h-100 pb-0" toggleable="lg">
       <b-navbar-brand href="/"  class="mr-md-5 mr-0">
         <img src="~assets/image/logo.png" width="265px" alt="">
       </b-navbar-brand>
@@ -50,9 +50,9 @@ export default {
         { name: this.$t('menu.AboutUs'), href: '/abou-us' },
         { name: this.$t('menu.Products'), href: '/' },
         { name: this.$t('menu.News'), href: '/news' },
-        { name: this.$t('menu.Exhibition'), href: '/' },
+        { name: this.$t('menu.Exhibition'), href: '/exhibition' },
         { name: this.$t('menu.ContactUs'), href: '/contact-us' },
-        { name: this.$t('menu.Feedback'), href: '/' },
+        { name: this.$t('menu.Feedback'), href: '/feedback' },
       ]
     }
   },
diff --git a/locales/en.json b/locales/en.json
index 60933a4..390ee6e 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -32,7 +32,16 @@
   "news": {
     "news": "News",
     "newsCenter": "NEWS CENTER",
-    "allNews": "ALL NEWS"
+    "allNews": "ALL NEWS",
+    "relatedNews": "Related News",
+    "relatedProducts": "Related Products"
+  },
+  "exhibition": {
+    "exhibition": "Exhibition",
+    "exhibitionCenter": "EXHIBITION CENTER",
+    "allExhibition": "ALL EXHIBITION",
+    "relatedExhibition": "Related Exhibition",
+    "relatedProducts": "Related Products"
   },
   "index": {
     "companyProfile": "COMPANY PROFILE",
@@ -65,6 +74,10 @@
     "desc": "Please fill in the form with details so we can send you a quotation correctly",
     "address": "Shangang xintiandi No8, 19 floor, Lixia district, jinan, Shandong, China"
   },
+  "feedback": {
+    "feedback": "Feedback",
+    "way": "Find us through some contact information"
+  },
   "footer": {
     "contactUs": "Contact us"
   }
diff --git a/locales/zh.json b/locales/zh.json
index 692d970..a1827db 100644
--- a/locales/zh.json
+++ b/locales/zh.json
@@ -47,7 +47,16 @@
   "news": {
     "news": "新闻",
     "newsCenter": "新闻中心",
-    "allNews": "所有新闻"
+    "allNews": "所有新闻",
+    "relatedNews": "相关新闻",
+    "relatedProducts": "相关产品"
+  },
+  "exhibition": {
+    "exhibition": "展览",
+    "exhibitionCenter": "展览中心",
+    "allExhibition": "所有展览",
+    "relatedExhibition": "相关展览",
+    "relatedProducts": "相关产品"
   },
   "aboutUs": {
     "AboutUs": "关于我们",
@@ -65,6 +74,10 @@
     "desc": "请详细填写表格，以便我们正确地向您发送报价",
     "address": "山东省济南市历下区19楼善港新天地8号"
   },
+  "feedback": {
+    "feedback": "反馈",
+    "way": "通过一些联系方式找到我们"
+  },
   "footer": {
     "contactUs": "联系我们"
   }
diff --git a/pages/exhibition.vue b/pages/exhibition.vue
new file mode 100644
index 0000000..9e71108
--- /dev/null
+++ b/pages/exhibition.vue
@@ -0,0 +1,44 @@
+<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('exhibition.exhibitionCenter')"/>
+        <main class="col-md-9">
+          <div class="pretty-header">
+            <h2>Low Bed Trailer</h2>
+          </div>
+          <nuxt-child />
+        </main>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'exhibition',
+  data() {
+    return {
+      bannerTopOptions: {
+        title: this.$t('exhibition.exhibition'),
+        subTitle: this.$t('exhibition.exhibitionCenter'),
+        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/pages/exhibition/_id.vue b/pages/exhibition/_id.vue
new file mode 100644
index 0000000..d8ac751
--- /dev/null
+++ b/pages/exhibition/_id.vue
@@ -0,0 +1,170 @@
+<template>
+  <!-- 新闻详情 -->
+  <div class="exhibition-info">
+    <div class="info-top">
+      <h2 class="exhibition-title">How To Maintain The Chassis Of A Truck?</h2>
+      <p class="exhibition-date">- Oct 25, 2024-</p>
+    </div>
+
+    <div class="exhibition-content">
+      <div></div>
+      <ContactFooter />
+      <div class="guide">
+        <nuxt-link to="/">
+          Previous: How To Maintain The Chassis Of A Truck?
+        </nuxt-link>
+
+        <nuxt-link to="/">
+          Next: Flatbed Trailer Buying Guide
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="related-exhibition mb-4">
+      <div class="pretty-header">
+        <h2>{{ $t('exhibition.relatedExhibition') }}</h2>
+      </div>
+      <nuxt-link 
+        class="exhibition-related-item box_shadow" 
+        to="/" 
+        v-for="item in 6" 
+        :key="item"
+      >
+        <p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
+        <span>- Oct 25, 2024-</span>
+      </nuxt-link>
+    </div>
+
+    <div class="related-products">
+      <div class="pretty-header">
+        <h2>{{ $t('exhibition.relatedProducts') }}</h2>
+      </div>
+      <b-carousel
+        class="mt-3"
+        id="carousel-1"
+        :interval="4000"
+        controls
+        indicators
+      >
+        <b-carousel-slide v-for="item in 3" :key="item">
+          <template v-slot:img>
+            <ul class="row justify-content-around pl-0">
+              <li class="col-6 col-md-4 mb-4" v-for="son in 3" :key="son">
+                <article class="product-card box_shadow">
+                  <b-img src="~assets/image/banner/home-pord1.png" fluid alt="product"></b-img>
+                  <div class="product-card-content">
+                    <h4>SINOTRUK HOWO Tractor Truck Head</h4>
+                    <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
+                    <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
+                    <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p>
+                  </div>
+                </article>
+              </li>
+            </ul>
+          </template>
+        </b-carousel-slide>
+      </b-carousel>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'exhibition-info',
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.exhibition-info {
+  .info-top {
+    padding-bottom: .5rem;
+    border-bottom: 1px solid #d8dde1;
+    .exhibition-title {
+      margin: 1.5625rem 0;
+      margin-bottom: .9375rem;
+      color: #444444;
+      text-align: center;
+      font-size: 1.5rem;
+    }
+    .exhibition-date {
+      color: #9e9e9e;
+      text-align: center;
+      font-size: .875rem;
+    }
+  }
+  .exhibition-content {
+    margin-bottom: 2.6875rem;
+    .guide {
+      padding-top: .625rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #515760;
+      border-top: 1px solid #d8dde1;
+      font-size: .875rem;
+    }
+  }
+  .related-exhibition {
+    .exhibition-related-item {
+      padding: 1.125rem 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #d8dde1;
+      font-size: .875rem;
+      p {
+        flex: 1;
+        color: #444444;
+        -webkit-line-clamp: 1;
+      }
+      span {
+        color: #9e9e9e;
+      }
+    }
+  }
+  .related-products {
+    #carousel-1 {
+      @mixin controls {
+        width: 2.875rem;
+        height: 2.875rem;
+        background-color: #7f7f7f;
+        background-size:  1.25rem;
+      }
+      ::v-deep .carousel-control-prev-icon {
+        @include controls;
+      }
+      ::v-deep .carousel-control-next-icon {
+        @include controls;
+      }
+    }
+    .product-card {
+      border: 1px solid #e6e8ec;
+      .product-card-content {
+        padding: 1.125rem 1rem;
+        border-top: .0625rem solid #e6e8ec;
+        font-size: .875rem;
+        h4 {
+          margin-bottom: .8125rem;
+          color: #212222;
+          font-size: .875rem;
+        }
+        p {
+          color: #878b90;
+        }
+        .view-details {
+          margin: 0 auto;
+          margin-top: 2rem;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/exhibition/index.vue b/pages/exhibition/index.vue
new file mode 100644
index 0000000..18572f0
--- /dev/null
+++ b/pages/exhibition/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <!-- 新闻列表 -->
+  <section class="exhibition-list">
+    <nuxt-link 
+      class="exhibition-item box_shadow row mt-4" 
+      to="/exhibition/123123"
+      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="exhibition-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>
+
+    <SeoPagination class="mt-4" />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'exhibition-list',
+  data() {
+    return {
+      bannerTopOptions: {
+        
+      },
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.exhibition-list {
+  box-sizing: border-box;
+  .exhibition-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;
+      }
+      .exhibition-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/pages/feedback.vue b/pages/feedback.vue
new file mode 100644
index 0000000..3b541f4
--- /dev/null
+++ b/pages/feedback.vue
@@ -0,0 +1,240 @@
+<template>
+  <!-- 联系我们 -->
+  <div class="content">
+    <BannerTop :options="bannerTopOptions"/>
+
+    <section class="container mt-5 mb-5">
+      <div class="form-container box_shadow w-75 m-auto">
+        <article class="header">
+          <div class="title d-flex align-items-center">
+            <h2 class="d-none d-md-block">{{ $t('feedback.feedback') }}</h2>
+            <b-img class="mr-4" src="~assets/image/backGroundImg/contact-us-logo.png" fluid :alt="$t('index.corporateName')"></b-img>
+          </div>
+          <p class="row mt-3">
+            <label class="col-6 col-md-3">{{ $t('contactUs.contactUs') }}：{{ $t('contactUs.contacts') }}</label>
+            <label class="col-6">{{ $t('common.tel') }}：+86-531-6998513</label>
+          </p>
+          <p class="row">
+            <label class="col-12">{{ $t('common.addressLabel') }}：{{ $t('contactUs.address') }}</label>
+          </p>
+        </article>
+
+        <main class="form-box">
+          <ul class="way row pl-0 justify-content-center ">
+            <li class="col-4 text-center">
+              <b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.Mob/Whatsapp/Wechat')"></b-img>
+              <h5>{{ $t('common.Mob/Whatsapp/Wechat') }}</h5>
+              <p>008618253112969</p>
+            </li>
+            <li class="col-4 text-center">
+              <b-img class="mb-2" src="~assets/image//icon/fax.png" fluid :alt="$t('common.fax')"></b-img>
+              <h5>{{ $t('common.fax') }}</h5>
+              <p>+86-531-69885133</p>
+            </li>
+            <li class="col-4 text-center">
+              <b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.E-mail')"></b-img>
+              <h5>{{ $t('common.E-mail') }}</h5>
+              <p>alicesales@scdtrailer.com</p>
+            </li>
+          </ul>
+
+          <b-form @submit="onSubmit">
+            <b-form-group
+              id="input-name"
+              label-for="input-name"
+              :invalid-feedback="$t('contactUs.name')"
+            >
+              <template v-solt:lable>
+                <div class="mb-2 d-flex align-items-center">
+                  <b-img class="mr-1" src="~assets/image/icon/user.png" fluid :alt="$t('contactUs.name')"></b-img>
+                  <h6 class="label-text">{{ $t('contactUs.name') }}</h6>
+                </div>
+              </template>
+              <b-form-input
+                id="input-name"
+                v-model="dataForm.name"
+                required
+              >
+              </b-form-input>
+            </b-form-group>
+
+            <b-form-group
+              id="input-mail"
+              label-for="input-mail"
+              :invalid-feedback="$t('contactUs.mail')"
+            >
+              <template v-solt:lable>
+                <div class="mb-2 d-flex align-items-center">
+                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/email.png" fluid :alt="$t('contactUs.mail')"></b-img>
+                  <h6 class="label-text">{{ $t('contactUs.mail') }}</h6>
+                </div>
+              </template>
+              <b-form-input
+                id="input-mail"
+                type="email"
+                v-model="dataForm.email"
+                required
+              >
+              </b-form-input>
+            </b-form-group>
+
+            <b-form-group
+              id="input-contactWay"
+              label-for="input-contactWay"
+              :invalid-feedback="$t('contactUs.contactWay')"
+            >
+              <template v-solt:lable>
+                <div class="mb-2 d-flex align-items-center">
+                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/labl-phone.png" fluid :alt="$t('contactUs.contactWay')"></b-img>
+                  <h6 class="label-text">{{ $t('contactUs.contactWay') }}</h6>
+                </div>
+              </template>
+              <b-form-input
+                id="input-contactWay"
+                v-model="dataForm.phone"
+                required
+              >
+              </b-form-input>
+            </b-form-group>
+
+            <b-form-group
+              id="input-desc"
+              label-for="input-desc"
+              :invalid-feedback="$t('contactUs.desc')"
+            >
+              <template v-solt:lable>
+                <div class="mb-2 d-flex align-items-center">
+                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/msg.png" fluid :alt="$t('contactUs.desc')"></b-img>
+                  <h6 class="label-text">{{ $t('contactUs.desc') }}</h6>
+                </div>
+              </template>
+              <b-form-textarea
+                id="input-desc"
+                v-model="dataForm.message"
+                rows="3"
+              >
+              </b-form-textarea>
+            </b-form-group>
+
+            <div class="text-center">
+              <b-button class="w-25" type="submit" variant="primary" pill>
+                {{ $t('common.submit') }}
+              </b-button>
+            </div>
+          </b-form>
+        </main>
+      </div>
+    </section>
+  
+    <b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid-grow :alt="$t('contactUs.contactUs')"></b-img>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'feedback',
+  data() {
+    return {
+      bannerTopOptions: {
+        title: this.$t('feedback.feedback'),
+        subTitle: this.$t('feedback.way'),
+        img: require('../assets/image/banner/aboutus-banner.png')
+      },
+      dataForm: {
+        name: '',
+        email: '',
+        phone: '',
+        message: ''
+      }
+    }
+  },
+  methods: {
+    onSubmit(e) {
+      e.preventDefault()
+      console.log(this.dataForm);
+      
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  .form-container {
+    height: min-content;
+    border-radius: 2.125rem;
+    overflow: hidden;
+    background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
+    .header {
+      width: 100%;
+      height: min-content;
+      background: url('~assets/image/backGroundImg/contact-us-form-bg.png') no-repeat;
+      background-size: 100% 100%;
+      overflow: hidden;
+      .title {
+        margin-top: 2.5625rem;
+        justify-content: space-between;
+        h2 {
+          padding: .6875rem 2.75rem .6875rem 1.625rem;
+          color: #fff;
+          background: rgba(255,255,255,0.44);
+          border-radius: 0px 3.125rem 3.125rem 0px;
+          font-size: 1.125rem;
+          font-family: 'SourceHanSansCN-Heavy';
+        }
+      }
+      p {
+        padding-left: 1.875rem;
+        color: #fff;
+        font-size: .875rem;
+      }
+    }
+    .form-box {
+      padding: 2.25rem 5.375rem;
+      .way {
+        h5 {
+          color: #80818a;
+          font-size: .875rem;
+        }
+        p {
+          color: #2b2b2b;
+          font-size: .875rem;
+          word-break: break-word;
+        }
+      }
+      .label-text {
+        margin-bottom: 0;
+        color: #2b2b2b;
+        font-size: .875rem;
+      }
+    }
+  }
+
+  .footer-img {
+    margin-top: -5.625rem;
+  }
+  
+  // 特殊样式小屏幕处理
+  @media screen and (max-width:400px) {
+    .form-container {
+      width: 100% !important;
+      .header {
+        .title {
+          margin-top: .625rem;
+          justify-content: center;
+        }
+      }
+      .form-box {
+        padding: 1.25rem;
+      }
+    }
+    .footer-img {
+      margin-top: 0;
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/pages/news.vue b/pages/news.vue
index bb334e3..d194c00 100644
--- a/pages/news.vue
+++ b/pages/news.vue
@@ -7,7 +7,7 @@
       <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">
+          <div class="pretty-header">
             <h2>Low Bed Trailer</h2>
           </div>
           <nuxt-child />
@@ -39,34 +39,6 @@ export default {
 .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
index b8022e5..7a026f2 100644
--- a/pages/news/_id.vue
+++ b/pages/news/_id.vue
@@ -1,7 +1,70 @@
 <template>
   <!-- 新闻详情 -->
   <div class="news-info">
-    泪飙
+    <div class="info-top">
+      <h2 class="news-title">How To Maintain The Chassis Of A Truck?</h2>
+      <p class="news-date">- Oct 25, 2024-</p>
+    </div>
+
+    <div class="news-content">
+      <div></div>
+      <ContactFooter />
+      <div class="guide">
+        <nuxt-link to="/">
+          Previous: How To Maintain The Chassis Of A Truck?
+        </nuxt-link>
+
+        <nuxt-link to="/">
+          Next: Flatbed Trailer Buying Guide
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="related-news mb-4">
+      <div class="pretty-header">
+        <h2>{{ $t('news.relatedNews') }}</h2>
+      </div>
+      <nuxt-link 
+        class="news-related-item box_shadow" 
+        to="/" 
+        v-for="item in 6" 
+        :key="item"
+      >
+        <p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
+        <span>- Oct 25, 2024-</span>
+      </nuxt-link>
+    </div>
+
+    <div class="related-products">
+      <div class="pretty-header">
+        <h2>{{ $t('news.relatedProducts') }}</h2>
+      </div>
+      <b-carousel
+        class="mt-3"
+        id="carousel-1"
+        :interval="4000"
+        controls
+        indicators
+      >
+        <b-carousel-slide v-for="item in 3" :key="item">
+          <template v-slot:img>
+            <ul class="row justify-content-around pl-0">
+              <li class="col-6 col-md-4 mb-4" v-for="son in 3" :key="son">
+                <article class="product-card box_shadow">
+                  <b-img src="~assets/image/banner/home-pord1.png" fluid alt="product"></b-img>
+                  <div class="product-card-content">
+                    <h4>SINOTRUK HOWO Tractor Truck Head</h4>
+                    <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
+                    <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
+                    <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p>
+                  </div>
+                </article>
+              </li>
+            </ul>
+          </template>
+        </b-carousel-slide>
+      </b-carousel>
+    </div>
   </div>
 </template>
 
@@ -20,5 +83,88 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.news-info {
+  .info-top {
+    padding-bottom: .5rem;
+    border-bottom: 1px solid #d8dde1;
+    .news-title {
+      margin: 1.5625rem 0;
+      margin-bottom: .9375rem;
+      color: #444444;
+      text-align: center;
+      font-size: 1.5rem;
+    }
+    .news-date {
+      color: #9e9e9e;
+      text-align: center;
+      font-size: .875rem;
+    }
+  }
+  .news-content {
+    margin-bottom: 2.6875rem;
+    .guide {
+      padding-top: .625rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #515760;
+      border-top: 1px solid #d8dde1;
+      font-size: .875rem;
+    }
+  }
+  .related-news {
+    .news-related-item {
+      padding: 1.125rem 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #d8dde1;
+      font-size: .875rem;
+      p {
+        flex: 1;
+        color: #444444;
+        -webkit-line-clamp: 1;
+      }
+      span {
+        color: #9e9e9e;
+      }
+    }
+  }
+  .related-products {
+    #carousel-1 {
+      @mixin controls {
+        width: 2.875rem;
+        height: 2.875rem;
+        background-color: #7f7f7f;
+        background-size:  1.25rem;
+      }
+      ::v-deep .carousel-control-prev-icon {
+        @include controls;
+      }
+      ::v-deep .carousel-control-next-icon {
+        @include controls;
+      }
+    }
+    .product-card {
+      border: 1px solid #e6e8ec;
+      .product-card-content {
+        padding: 1.125rem 1rem;
+        border-top: .0625rem solid #e6e8ec;
+        font-size: .875rem;
+        h4 {
+          margin-bottom: .8125rem;
+          color: #212222;
+          font-size: .875rem;
+        }
+        p {
+          color: #878b90;
+        }
+        .view-details {
+          margin: 0 auto;
+          margin-top: 2rem;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/pages/news/index.vue b/pages/news/index.vue
index fad2d1c..df8ae42 100644
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -2,8 +2,8 @@
   <!-- 新闻列表 -->
   <section class="news-list">
     <nuxt-link 
-      class="news-item row mt-4" 
-      to="/"
+      class="news-item box_shadow row mt-4" 
+      to="/news/123123"
       v-for="item in 6"
       :key="item"
     >
@@ -25,7 +25,7 @@
       </article>
     </nuxt-link>
 
-    <seoPagination class="mt-4" />
+    <SeoPagination class="mt-4" />
   </section>
 </template>
 
diff --git a/plugins/main.js b/plugins/main.js
index 06f349e..198941e 100644
--- a/plugins/main.js
+++ b/plugins/main.js
@@ -2,7 +2,9 @@ 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';
+import contactFooter from '@/components/contact-footer.vue';
 
 Vue.component('AsideTree', asideTree);
 Vue.component('BannerTop', bannerTop);
-Vue.component('seoPagination', seoPagination);
\ No newline at end of file
+Vue.component('SeoPagination', seoPagination);
+Vue.component('ContactFooter', contactFooter);
\ No newline at end of file