diff --git a/pages/admin-preview/article-page/_id.vue b/pages/admin-preview/article-page/_id.vue
new file mode 100644
index 0000000..49732d7
--- /dev/null
+++ b/pages/admin-preview/article-page/_id.vue
@@ -0,0 +1,217 @@
+<template>
+  <!-- 新闻详情 -->
+  <div class="container article-page-info">
+    <div class="info-top">
+      <h2 class="article-page-title">{{ detais.title }}</h2>
+      <p class="article-page-date">{{ detais.createTime }}</p>
+    </div>
+
+    <div class="article-page-content">
+      <div class="rich-text" v-html="detais.content"></div>
+      <ContactFooter />
+      <div class="guide" :style="{'justify-content': prevarticle ? 'space-between' : 'flex-end'}">
+        <nuxt-link :to="`/article-page/${prevarticle.id}`" v-if="prevarticle">
+          {{ $t('common.prev') }}: {{ prevarticle.title }}
+        </nuxt-link>
+
+        <nuxt-link :to="`/article-page/${nextarticle.id}`" v-if="nextarticle">
+          {{ $t('common.next') }}: {{ nextarticle.title }}
+        </nuxt-link>
+      </div>
+    </div>
+
+    <!-- <div class="related-article-page mb-4">
+      <div class="pretty-header">
+        <h2>{{ $t('article.relatedarticle') }}</h2>
+      </div>
+      <nuxt-link 
+        class="article-page-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" v-if="relatedProductList.length">
+      <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 relatedProductList" :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 item" :key="son.id">
+                <article class="product-card box_shadow">
+                  <b-img 
+                    :src="son.mainPic" 
+                    fluid 
+                    :alt="son.title"
+                  >
+                  </b-img>
+                  <div class="product-card-content">
+                    <h4>{{ son.title }}</h4>
+                    <div v-html="son.content"></div>
+                    <!-- <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: 'article-page-info',
+  data() {
+    return {
+      
+    }
+  },
+  validate({query}) {
+    return query.private === '1BC0FFEC2294283E9BDB89E188FCA574' ? true : false
+  },
+  async asyncData({$axios, params }) {
+    let {
+      data:{ 
+        busiProdNew:detais,
+        next:nextarticle,
+        previous:prevarticle,
+        randomList
+      }
+    } = await $axios.get(`/web/prodNewsInfo?id=${params.id}`)
+    const chunkSize = 3;
+    const relatedProductList = [];
+    for (let i = 0; i < randomList.length; i += chunkSize) {
+      relatedProductList.push(randomList.slice(i, i + chunkSize));
+    }
+    
+    return {
+      detais,
+      nextarticle,
+      prevarticle,
+      relatedProductList
+    }
+  },
+  head() {
+    return {
+      title: this.detais.title,
+      meta: [
+        {
+          hid: 'keywords',
+          name: 'keywords',
+          content: this.detais.prodKeyword
+        },
+        {
+          hid: 'description',
+          name: 'description',
+          content: this.detais.prodDescription
+        }
+      ]
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.article-page-info {
+  .info-top {
+    padding-bottom: .5rem;
+    border-bottom: 1px solid #d8dde1;
+    .article-page-title {
+      margin: 1.5625rem 0;
+      margin-bottom: .9375rem;
+      color: #444444;
+      text-align: center;
+      font-size: 1.5rem;
+    }
+    .article-page-date {
+      color: #9e9e9e;
+      text-align: center;
+      font-size: .875rem;
+    }
+  }
+  .article-page-content {
+    margin-bottom: 2.6875rem;
+    .guide {
+      padding-top: .625rem;
+      display: flex;
+      align-items: center;
+      color: #515760;
+      border-top: 1px solid #d8dde1;
+      font-size: .875rem;
+    }
+  }
+  .related-article-page {
+    .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/admin-preview/products/_id.vue b/pages/admin-preview/products/_id.vue
new file mode 100644
index 0000000..9345c68
--- /dev/null
+++ b/pages/admin-preview/products/_id.vue
@@ -0,0 +1,440 @@
+<template>
+  <!-- 产品详情 -->
+  <div class="container products-info">
+    <div class="row pl-0">
+      <div class="products-preview col-md-5">
+        <div class="preview-img">
+          <no-ssr>
+            <vuePhotoZoomPro :url="currentImgUrl" :width="100" :scale="3"/>
+          </no-ssr>
+        </div>
+        <div class="products-scroll-box">
+          <no-ssr>
+            <swiper :options="swiperOptions">
+              <swiper-slide
+                v-for="src in productsImages"
+                :key="src"
+                class="products-img-item"
+                :class="src===currentImgUrl ? 'is-products-img-active' : ''" 
+              >
+                <img @click="() => {currentImgUrl = src}"  :src="src" :alt="prodDetail.title" />
+              </swiper-slide>
+              <div class="swiper-button-prev" slot="button-prev"></div>
+              <div class="swiper-button-next" slot="button-next"></div>
+            </swiper>
+          </no-ssr>
+        </div>
+      </div>
+      <article class="prod-details col-md-7">
+        <h2 class="products-title">
+          {{ prodDetail.title }}
+        </h2>
+        <div class="parameter" v-html="prodDetail.description"></div>
+
+        <div class="visit">
+          <a class="box_shadow" href="#form-target">
+            <img src="~assets/image/icon/email-highlight.png" :alt="$t('common.sendInquiry')" />
+            {{ $t('common.sendInquiry') }}
+          </a>
+          <a @click="chat" class="box_shadow" href="javascript:;">
+            <img src="~assets/image/icon/msg-highlight.png" :alt="$t('common.chatNow')" />
+            {{ $t('common.chatNow') }}
+          </a>
+        </div>
+
+        <ContactFooter />
+      </article>
+    </div>
+
+    <div class="mt-4">
+      <div class="pretty-header">
+        <h2>{{ $t('products.productDetails') }}</h2>
+      </div>
+      <div class="desc rich-text pt-3 pb-3" v-html="prodDetail.content"></div>
+      <div class="guide" :style="{'justify-content': prevNews ? 'space-between' : 'flex-end'}">
+        <nuxt-link :to="`/products/${prevNews.id}`" v-if="prevNews">
+          {{ $t('common.prev') }}: {{ prevNews.title }}
+        </nuxt-link>
+
+        <nuxt-link :to="`/products/${nextNews.id}`" v-if="nextNews">
+          {{ $t('common.next') }}: {{ nextNews.title }}
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="mt-5">
+      <div class="pretty-header" id="form-target">
+        <h2>{{ $t('products.inquiry') }}</h2>
+      </div>
+
+      <div class="form-box box_shadow mt-3">
+        <b-form @submit="onSubmit">
+          <b-form-group
+            id="input-name"
+            label-for="input-name"
+            v-if="formConfig.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="formConfig.nameMust"
+            >
+            </b-form-input>
+          </b-form-group>
+
+          <b-form-group
+            id="input-title"
+            label-for="input-title"
+            v-if="formConfig.title"
+            :invalid-feedback="$t('contactUs.title')"
+          >
+            <template v-solt:lable>
+              <div class="mb-2 d-flex align-items-center">
+                <b-img class="mr-1" src="~assets/image/icon/title.png" fluid :alt="$t('contactUs.title')"></b-img>
+                <h6 class="label-text">{{ $t('contactUs.title') }}</h6>
+              </div>
+            </template>
+            <b-form-input
+              id="input-title"
+              v-model="dataForm.title"
+              :required="formConfig.titleMust"
+            >
+            </b-form-input>
+          </b-form-group>
+
+          <b-form-group
+            id="input-company"
+            label-for="input-company"
+            v-if="formConfig.company"
+            :invalid-feedback="$t('contactUs.company')"
+          >
+            <template v-solt:lable>
+              <div class="mb-2 d-flex align-items-center">
+                <b-img class="mr-1" src="~assets/image/icon/company.png" fluid :alt="$t('contactUs.company')"></b-img>
+                <h6 class="label-text">{{ $t('contactUs.company') }}</h6>
+              </div>
+            </template>
+            <b-form-input
+              id="input-company"
+              v-model="dataForm.company"
+              :required="formConfig.companyMust"
+            >
+            </b-form-input>
+          </b-form-group>
+
+          <b-form-group
+            id="input-mail"
+            label-for="input-mail"
+            v-if="formConfig.email"
+            :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="formConfig.emailMust"
+            >
+            </b-form-input>
+          </b-form-group>
+
+          <b-form-group
+            id="input-contactWay"
+            label-for="input-contactWay"
+            :invalid-feedback="$t('contactUs.contactWay')"
+            v-if="formConfig.tel"
+          >
+            <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.tel"
+              :required="formConfig.telMust"
+            >
+            </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">{{ formConfig.content }}</h6>
+              </div>
+            </template>
+            <b-form-textarea
+              id="input-desc"
+              v-model="dataForm.content"
+              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>
+      </div>
+    </div>
+    <!--    聊天记录弹出框-->
+    <chat-form ref="chatFrom"></chat-form>
+  </div>
+</template>
+
+<script>
+import vuePhotoZoomPro from 'vue-photo-zoom-pro';
+import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css';
+import chatForm from "../../products/chatForm.vue";
+if (process.client) {
+  var { swiper, swiperSlide } = require("vue-awesome-swiper");
+}
+import "swiper/css/swiper.min.css";
+
+export default {
+  name: 'products-info',
+  components: {
+    swiper,
+    swiperSlide,
+    vuePhotoZoomPro,
+    chatForm
+  },
+  data() {
+    return {
+      currentImgUrl: '',
+      dataForm: {
+        name: '',
+        title: '',
+        company: '',
+        email: '',
+        tel: '',
+        content: '',
+        equipment: this.$store.state.device
+      },
+      swiperOptions: {
+        slidesPerView :'auto',
+        spaceBetween: 10,
+        slidesPerGroupAuto:true,
+        grabCursor: true,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+    }
+  },
+  computed: {
+    isMob: () => {
+      return this.$store.state.device === '手机端' ? true : false
+    }
+  },
+  validate({query}) {
+    return query.private === 'CAC8F0807B8FB7EA72AF3596600F888A' ? true : false
+  },
+  async asyncData({$axios, params}) {
+    let {
+      data: {
+        busiProdNew: prodDetail,
+        pics,
+        next:nextNews,
+        previous:prevNews,
+      }
+    } = await $axios.get(`/web/prodNewsInfo?id=${params.id}`);
+    let picsArr = pics ? pics.split(',') : [];
+    let productsImages = [prodDetail.mainPic, ...picsArr];
+    let currentImgUrl = productsImages[0];
+    
+    const { data: formConfig } = await $axios.get('/web/inquirySet')
+
+    return {
+      prodDetail,
+      currentImgUrl,
+      productsImages,
+      nextNews,
+      prevNews,
+      formConfig
+    }
+  },
+  head() {
+    return {
+      title: this.prodDetail.title,
+      meta: [
+        {
+          hid: 'keywords',
+          name: 'keywords',
+          content: this.prodDetail.prodKeyword
+        },
+        {
+          hid: 'description',
+          name: 'description',
+          content: this.prodDetail.prodDescription
+        }
+      ]
+    }
+  },
+  methods: {
+    onSubmit(e) {
+      e.preventDefault()
+      this.$axios.post('/web/inquirySave', this.dataForm).then(() => {
+        this.$message.success(this.$t('common.submitSuccess'))
+        setTimeout(() => {
+          window.location.reload()
+        }, 1500)
+      })
+    },
+    /**打开聊天窗口，并建立连接*/
+    chat(){
+      this.$refs.chatFrom.show(this.prodDetail.id)
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+.is-products-img-active {
+  border: 1px solid #CC0001;
+}
+.swiper-button-next, .swiper-button-prev {
+  width: 1.1875rem;
+  height: 3.75rem;
+  top: 38%;
+  color: #ffffff;
+  background-color: rgba(198, 198, 198, 0.6);
+  opacity: 1 !important;
+  &::after{
+    font-size: unset;
+  }
+}
+.swiper-button-prev {
+  left: 0;
+}
+.swiper-button-next {
+  right: 0;
+}
+</style>
+
+<style lang="scss" scoped>
+.products-info {
+  padding-top: .9375rem;
+  .products-preview {
+    height: min-content;
+    .preview-img {
+      width: 100%;
+      max-height: 25.625rem;
+      border: 1px solid #d9dde0;
+      ::v-deep .vue-photo-zoom-pro {
+        max-height: 25rem;
+        .img-region {
+          max-width: 100% !important;
+          max-height: 25rem;
+        }
+      }
+    }
+    .products-scroll-box {
+      width: 100%;
+      height: 6.25rem;
+      margin-top: .625rem;
+      .products-img-item {
+        width: 3.75rem !important;
+        height: 3.75rem !important;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+  .prod-details {
+    .products-title {
+      width: 100%;
+      height: min-content;
+      min-height: 3.5rem;
+      margin-bottom: 1.4375rem;
+      padding: 0 1.4375rem;
+      display: flex;
+      align-items: center;
+      color: #fff;
+      background: url('~assets/image/backGroundImg/products-title.png') no-repeat;
+      background-size: 100% 100%;
+      font-family: 'SourceHanSansCN-Heavy';
+      font-size: 1rem;
+    }
+    .parameter {
+      height: min-content;
+      min-height: 17.5rem;
+      p {
+        color: #2d2d30;
+        font-size: .875rem;
+      }
+    }
+    .visit {
+      display: flex;
+      align-items: center;
+      a {
+        flex: 1;
+        height: 2.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        border-radius: 1.25rem;
+        font-size: .875rem;
+        &:first-child {
+          margin-right: .75rem;
+          background-color: #015fe8;
+        }
+        &:last-child {
+          background-color: #fc8815;
+        }
+        img {
+          width: 1rem;
+          height: 1rem;
+          margin-right: .5rem;
+        }
+      }
+    }
+  }
+  .guide {
+    padding-top: .625rem;
+    display: flex;
+    align-items: center;
+    color: #515760;
+    border-top: 1px solid #d8dde1;
+    font-size: .875rem;
+  }
+  .form-box {
+    padding: 2.125rem 7.8125rem;
+    border: 1px solid #ebeef0;
+    background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
+    border-radius: .5rem;
+  }
+}
+
+// 特殊样式小屏幕处理
+@media screen and (max-width:400px) {
+  .form-box {
+    padding: 1.25rem !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/article-page/index.vue b/pages/article-page/index.vue
index 5e3f072..3219a2b 100644
--- a/pages/article-page/index.vue
+++ b/pages/article-page/index.vue
@@ -1,6 +1,7 @@
 <template>
   <!-- 文章模块 -->
   <section class="article-page-list">
+    <div v-html="prodUp"></div>
     <nuxt-link 
       class="article-page-item box_shadow row mt-4" 
       :to="`/article-page/${item.id}?maxCatgId=${item.maxCatgId}&catgId=${item.catgId}`"
@@ -24,7 +25,7 @@
         </div>
       </article>
     </nuxt-link>
-
+    <div v-html="prodDown"></div>
     <SeoPagination class="mt-4" :total="pordObj.total" />
   </section>
 </template>
@@ -40,6 +41,14 @@ export default {
       },
     }
   },
+  computed: {
+    prodUp() {
+      return this.$store.state.device === '手机端' ? this.catgInfo.prodUpApp : this.catgInfo.prodUp
+    },
+    prodDown() {
+      return this.$store.state.device === '手机端' ? this.catgInfo.prodDownApp : this.catgInfo.prodDown
+    }
+  },
   async asyncData({$axios,query}) {
     let params = {
       pageNum: query.pageNum || 1,
@@ -48,8 +57,17 @@ export default {
     }
     let {data: pordObj} = await $axios('/web/newsPageList', {params})
 
+    let catgInfo = {}
+    if (params.catgId) {
+      var {data: catgInfoRes} = await $axios.get(`/web/categoryInfo?id=${query.catgId || query.maxCatgId ||''}`)
+      catgInfo = catgInfoRes
+    }
+    console.log(catgInfo);
+    
+
     return {
-      pordObj
+      pordObj,
+      catgInfo
     }
     
   },
diff --git a/pages/products/index.vue b/pages/products/index.vue
index 29a5948..f5c7730 100644
--- a/pages/products/index.vue
+++ b/pages/products/index.vue
@@ -1,6 +1,7 @@
 <template>
   <!-- 产品列表 -->
   <section class="products-list">
+    <div v-html="prodUp"></div>
     <ul class="row pl-0">
       <li class="col-12 col-md-4"  v-for="item in pordObj.records" :key="item.id">
         <nuxt-link 
@@ -20,6 +21,7 @@
         </nuxt-link>
       </li>
     </ul>
+    <div v-html="prodDown"></div>
     <SeoPagination class="mt-4" :total="pordObj.total" />
   </section>
 </template>
@@ -35,17 +37,31 @@ export default {
       },
     }
   },
+  computed: {
+    prodUp() {
+      return this.$store.state.device === '手机端' ? this.catgInfo.prodUpApp : this.catgInfo.prodUp
+    },
+    prodDown() {
+      return this.$store.state.device === '手机端' ? this.catgInfo.prodDownApp : this.catgInfo.prodDown
+    }
+  },
   async asyncData({$axios,query}) {
     let params = {
       pageNum: query.pageNum || 1,
       pageSize: 9,
       catgId: query.catgId || query.maxCatgId ||'',
     }
-    let {data: pordObj} = await $axios('/web/prodPageList', {params})
+    let {data: pordObj} = await $axios.get('/web/prodPageList', {params})
     
+    let catgInfo = {}
+    if (params.catgId) {
+      var {data: catgInfoRes} = await $axios.get(`/web/categoryInfo?id=${query.catgId || query.maxCatgId ||''}`)
+      catgInfo = catgInfoRes
+    }
     return {
       pordObj,
       maxCatgId: query.maxCatgId || '',
+      catgInfo
     }
   },
   methods: {