From a0d500969b8c8c107d7971c54eeb7ce2aad6ca61 Mon Sep 17 00:00:00 2001
From: hejin <jmy13864291147@163.com>
Date: Sat, 5 Jul 2025 18:30:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=98=E5=88=B6=E5=AE=8C=E6=88=90=E6=96=B0?=
 =?UTF-8?q?=E9=97=BB=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=EF=BC=9B=E6=96=B0?=
 =?UTF-8?q?=E9=97=BB=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=2030%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/image/banner/header-top-line.png | Bin 0 -> 2423 bytes
 components/aside-tree.vue               |  67 ++++++++++++++---
 components/seo-pagination.vue           |  96 ++++++++++++++++++++++++
 pages/news.vue                          |  72 ++++++++++++++++++
 pages/news/_id.vue                      |  24 ++++++
 pages/news/index.vue                    |  76 +++++++++++++++----
 plugins/main.js                         |   4 +-
 7 files changed, 315 insertions(+), 24 deletions(-)
 create mode 100644 assets/image/banner/header-top-line.png
 create mode 100644 components/seo-pagination.vue
 create mode 100644 pages/news.vue
 create mode 100644 pages/news/_id.vue

diff --git a/assets/image/banner/header-top-line.png b/assets/image/banner/header-top-line.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce7380964977205a32ad6c801a798d52823be889
GIT binary patch
literal 2423
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

literal 0
HcmV?d00001

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