绘制完成新闻详情页面、展览页面、反馈页面

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: '>>';
 }

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>

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' },
       ]
     }
   },

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"
   }

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": "联系我们"
   }

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>

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>

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>

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>

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>

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>

pages/news/index.vue

@@ -2,8 +2,8 @@
   <!-- 新闻列表 -->
   <section class="news-list">
     <nuxt-link 
-      class="news-item row mt-4" 
+      class="news-item box_shadow row mt-4" 
-      to="/"
+      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>
 

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);
+Vue.component('SeoPagination', seoPagination);
+Vue.component('ContactFooter', contactFooter);