diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index e6be020..78bfb3b 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -49,19 +49,10 @@
                 {{ locale == 'zh' ? web_site_cate.biaoti7 : web_site_cate.biaoti7_en }}
               </NuxtLink>
             </li>
-            <li class="products">
-              <NuxtLink>{{ locale == 'zh' ? web_site_cate.biaoti5 : web_site_cate.biaoti5_en }}</NuxtLink>
-              <ul class="products_list">
-                <li><NuxtLink to="/index_product_f/" :class="{ 'active': route.path === '/index_product_f/' }">
-                {{ locale == 'zh' ? top_two.home_two_left_title : top_two.en_home_two_left_title }}
-              </NuxtLink></li>
-              <li><NuxtLink to="/index_product_s/" :class="{ 'active': route.path === '/index_product_s/' }">
-                {{ locale == 'zh' ? top_two.home_two_center_title : top_two.en_home_two_center_title }}
-              </NuxtLink></li>
-              <li><NuxtLink to="/index_product_t/" :class="{ 'active': route.path === '/index_product_t/' }">
-                {{ locale == 'zh' ? top_two.home_two_right_title : top_two.en_home_two_right_title }}
-              </NuxtLink></li>
-              </ul>
+            <li>
+              <NuxtLink to="/index_products/" :class="{ 'active': route.path === '/index_products/' }">
+                {{ locale == 'zh' ? web_site_cate.biaoti5 : web_site_cate.biaoti5_en }}
+              </NuxtLink>
             </li>
           </ul>
         </div>
@@ -106,6 +97,11 @@
               {{ $t('index_contact') }}
             </NuxtLink>
           </li>
+          <li class="py-2">
+            <NuxtLink to="/index_products/" :class="{ 'active': route.path === '/index_products/' }" @click="closeMenu">
+              {{ $t('index_products') }}
+            </NuxtLink>
+          </li>
           <li class="py-3 flex space-x-4">
             <span @click="changeLanguage('zh')" class="cursor-pointer">中文版</span>
             <span @click="changeLanguage('en')" class="cursor-pointer">English</span>
diff --git a/pages/index_clients.vue b/pages/index_clients.vue
index c0302b3..fda2777 100644
--- a/pages/index_clients.vue
+++ b/pages/index_clients.vue
@@ -36,8 +36,8 @@
                     <div class="clientxiah1 w-full h-[1px] bg-gray-200 my-8"></div>
                     <div class="mt-8">
                         <!-- 使用 Swiper 实现左右滚动 -->
-                        <swiper
-                            :modules="[SwiperAutoplay]"
+                        <Swiper
+                            :modules="[SwiperAutoplay,SwiperThumbs]"
                             :slides-per-view="slidesPerView"
                             :loop="true"
                             :autoplay="{
@@ -49,7 +49,7 @@
                             <swiper-slide v-for="item in list" :key="item.id" class="flex justify-center">
                                 <img @click="info = item" :src="item.image" class="w-[150px] md:w-[200px] h-auto cursor-pointer" alt="Client">
                             </swiper-slide>
-                        </swiper>
+                        </Swiper>
                     </div>
                 </div>
             </div>
@@ -64,7 +64,7 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 // 导入 Swiper 相关模块
 import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination, Autoplay } from 'swiper/modules'
+import { Navigation, Pagination, Autoplay,Thumbs } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
@@ -76,6 +76,7 @@ const { locale } = useI18n()
 const SwiperNavigation = Navigation
 const SwiperPagination = Pagination
 const SwiperAutoplay = Autoplay
+const SwiperThumbs = Thumbs
 
 onMounted(() => {
     getList();
diff --git a/pages/index_product_s.vue b/pages/index_product_s.vue
deleted file mode 100644
index 1947d8e..0000000
--- a/pages/index_product_s.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<template>
-  <div class="bg-white">
-    <!-- Banner section with background image -->
-    <div class="aboutimgBg">
-      <div class="pl-4 md:pl-[200px]">
-        <div class="newsTit">
-          <h2 class="animated fadeInLeft text-2xl md:text-[40px] font-bold">{{ $t('list_p1') }}</h2>
-          <h3 class="animated fadeInLeft text-lg md:text-[25px] font-medium mt-3 md:mt-[30px] text-[#606060]">{{ $t('list_p2') }}</h3>
-        </div>
-      </div>
-    </div>
-
-    <!-- Featured news section -->
-    <div class="newsBox1 container mx-auto px-4 py-8 flex flex-col md:flex-row flex-wrap" v-if="newsList.length > 0">
-      <div class="newsBox1lider w-full md:w-[38%] mb-6 md:mb-0">
-        <img id="featuredImage" :src="topImg" class="h-[200px] md:h-[300px] w-full object-cover rounded-[5px]" />
-      </div>
-
-      <div class="newsTit1 w-full md:w-[62%] relative pl-0 md:pl-4 mt-6 md:mt-0">
-        <div id="swipen_next" class="absolute left-0 md:left-4 top-[70%] -translate-y-1/2 cursor-pointer z-10" @click="prevSlide">
-          <img src="/images/group10.png" class="w-[40px] md:w-[50px]" alt="Previous" />
-        </div>
-        <div id="swipen_prev" class="absolute right-0 md:right-4 top-[70%] -translate-y-1/2 cursor-pointer z-10" @click="nextSlide">
-          <img src="/images/group9-1.png" class="w-[40px] md:w-[50px]" alt="Next" />
-        </div>
-        
-        <div class="flex justify-end items-center mb-4">
-          <div class="relative pr-3 md:pr-5">
-            <h2 class="t7 m-0">
-              <span id="time1" class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(currentNews.inputtime || currentNews.add_time) }}/</span>
-              <span id="time2" class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(currentNews.inputtime || currentNews.add_time) }}</span>
-            </h2>
-          </div>
-          <div class="text-right">
-            <span class="t6 text-lg md:text-[25px] font-semibold">{{ $t('list_p1') }}</span>
-          </div>
-        </div>
-        
-        <div class="newsdi w-full h-[1px] bg-gray-300 my-3 md:my-4"></div>
-        
-        <div class="listSwiper overflow-hidden w-full md:w-[90%] h-[115px] md:h-[200px]">
-          <div class="swiper-wrapper w-full">
-            <span v-if="!isMobile" class="newsbs2 hidden md:inline-block"></span>
-            <div v-for="(news, index) in newsList" :key="index" 
-                 :class="['swiper-slide pl-[50px] pr-[40px] md:pl-[118px] pt-3 md:pt-[20px]', {'hidden': currentIndex !== index}]">
-              <h2 class="text-xl md:text-3xl font-bold mb-3 md:mb-4 line-clamp-1">
-                <NuxtLink :to="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600">
-                  {{ getCurrentLanguage() === 'zh' ? news.title : news.en_title || news.title }}
-                </NuxtLink>
-              </h2>
-              <h3 class="line-clamp-2 text-gray-600 text-base md:text-lg mb-4 md:mb-6">
-                {{ getCurrentLanguage() === 'zh' ? news.synopsis : news.en_synopsis || news.synopsis }}
-              </h3>
-              <h4 v-if="!isMobile" class="mt-6 md:mt-10">
-                <NuxtLink :to="'/info/' + news.id" target="_blank" 
-                          class="text-[#0c1923] px-4 py-1 md:px-5 md:py-2.5 text-sm md:text-base rounded-[10px] border border-solid border-[#0c1923] hover:bg-gray-100">
-                  {{ $t('list_b3') }}
-                </NuxtLink>
-              </h4>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- News list section -->
-    <div class="container mx-auto px-4 py-8 md:py-12">
-      <div v-for="(news, index) in allNewsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:h-[300px] flex flex-col md:flex-row flex-wrap items-start md:items-center p-4 md:p-[20px] mb-8 md:mb-12 border-b border-gray-200">
-        <NuxtLink :to="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600 md:h-[300px] flex md:p-[20px]">
-        <div class="newsTit2 w-full md:w-2/3 pr-0 md:pr-6 mb-4 md:mb-0">
-          <h2>
-            <span class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(news.add_time) }}/</span>
-            <span class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(news.add_time) }}</span>
-          </h2>
-          <div class="newsBox2di w-full md:w-[473px]"></div>
-          <h3 class="text-xl md:text-2xl font-bold mb-2 md:mb-4 pt-3 md:pt-[20px] line-clamp-1">
-            
-              {{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
-            
-          </h3>
-          <h4 class="text-gray-600 text-base md:text-lg line-clamp-2">
-            {{ getCurrentLanguage() == 'zh' ? news.synopsis : (news.en_synopsis || news.synopsis) }}
-          </h4>
-        </div>
-        <img :src="news.image_input[0]" class="news2g10 w-full md:w-1/3 h-[200px] md:h-full object-cover rounded-lg" alt="News thumbnail" />
-      </NuxtLink>
-      </div>
-      
-      <!-- Pagination -->
-      <div id="pages" class="text-center mt-6 md:mt-8">
-        <button 
-          v-for="page in totalPages" 
-          :key="page" 
-          @click="changePage(page)" 
-          :class="['mx-1 px-3 py-1 md:px-4 md:py-2 text-sm md:text-base rounded', currentPage === page ? 'bg-blue-500 text-white' : 'bg-gray-200 hover:bg-gray-300']">
-          {{ page }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import $api from '@/service/webRequest'
-
-// 分页相关变量
-const currentPage = ref(1)
-const itemsPerPage = 5
-const totalItems = ref(0)
-
-// 新闻数据
-const mockNewsData = ref([])
-const allNewsList = ref([])
-const isMobile = ref(false)
-onMounted(() => {
-  isMobile.value = window.innerWidth < 768
-  getNewsList()
-  getFeaturedNews()
-})
-
-const topImg = ref('')
-// 获取轮播展示的新闻（前5条）
-const getFeaturedNews = () => {
-  $api.get("/api/article/list/8", { params: { page: 1, limit: 5 } })
-    .then((res: any) => {
-      mockNewsData.value = res.data.data.list
-      topImg.value = res.data.data.list[0].image_input[0]
-    })
-    .catch((err) => {
-      console.error("获取轮播新闻失败:", err)
-    })
-}
-
-// 获取分页新闻列表
-const getNewsList = () => {
-  $api.get("/api/article/list/8", { params: { page: currentPage.value, limit: itemsPerPage } })
-    .then((res: any) => {
-      allNewsList.value = res.data.data.list
-        // 获取总条数用于分页
-       totalItems.value = res.data.data.count
-    })
-    .catch((err) => {
-      console.error("获取新闻列表失败:", err)
-    })
-}
-
-const { locale } = useI18n()
-const currentIndex = ref(0)
-
-// 轮播新闻列表
-const newsList = computed(() => mockNewsData.value)
-
-// 计算总页数
-const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage))
-
-// 当前轮播的新闻
-const currentNews = computed(() => {
-  return newsList.value[currentIndex.value] || {
-    id: 0,
-    title: '',
-    description: '',
-    inputtime: ''
-  }
-})
-
-// 轮播控制方法
-const prevSlide = () => {
-  topImg.value = mockNewsData.value[currentIndex.value - 1].image_input[0]
-  currentIndex.value = (currentIndex.value - 1 + newsList.value.length) % newsList.value.length
-}
-
-const nextSlide = () => {
-  topImg.value = mockNewsData.value[currentIndex.value + 1].image_input[0]
-  currentIndex.value = (currentIndex.value + 1) % newsList.value.length
-}
-
-// 分页方法
-const changePage = (page: number) => {
-  currentPage.value = page
-  getNewsList() // 切换页码时重新获取数据
-}
-
-// 格式化年份 - 处理字符串格式的日期 "2023-02-15 16:50"
-const formatYear = (dateStr: string) => {
-  if (!dateStr) return ''
-  // 从日期字符串中提取年份
-  const year = dateStr.split(' ')[0].split('-')[0]
-  return year
-}
-
-// 格式化日期 - 处理字符串格式的日期 "2023-02-15 16:50"
-const formatDate = (dateStr: string) => {
-  if (!dateStr) return ''
-  // 从日期字符串中提取月和日
-  const dateParts = dateStr.split(' ')[0].split('-')
-  if (dateParts.length < 3) return ''
-  
-  const month = dateParts[1]
-  const day = dateParts[2]
-  return `${month}/${day}`
-}
-
-const getCurrentLanguage = () => {
-  return locale.value
-}
-</script>
-
-<style lang="scss" scoped>
-@import "@/assets/animate/animate.min.css";
-
-.container {
-  width: 100%;
-  @media (min-width: 768px) {
-    max-width: 1310px;
-  }
-}
-
-.aboutimgBg {
-  background-image: url(/images/newsgroup3.png);
-  background-size: cover;
-  height: 300px;
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  
-  @media (min-width: 768px) {
-    height: 600px;
-  }
-}
-
-.newsTit h2::after {
-  content: '';
-  width: 120px;
-  height: 20px;
-  @media (min-width: 768px) {
-    width: 100%;
-    height: 28px;
-    margin: 0 auto;
-    margin-top: -15px;
-  }
-  background: #A8CBFF;
-  display: block;
-  margin-top: -20px;
-}
-
-.ellipsis-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.newsBox1 {
-  margin-top: 20px;
-  @media (min-width: 768px) {
-    margin-top: 50px;
-  }
-}
-
-.newsBox2 {
-  transition: all 0.3s ease;
-}
-
-.newsBox2:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
-}
-
-.newsSpan1 {
-  color: #333;
-}
-
-.newsSpan2 {
-  color: #1C1C1C;
-  letter-spacing: 2px;
-  @media (min-width: 768px) {
-    letter-spacing: 5px;
-    padding-left: 10px;
-  }
-  padding-left: 5px;
-}
-
-.newsbs2 {
-  position: absolute;
-  margin-left: 81px;
-  border-right: 2px solid #1C1C1C;
-  display: inline-block;
-  height: 300px;
-  @media (min-width: 768px) {
-    height: 344px;
-    margin-top: 10px;
-  }
-}
-
-.t6::after {
-  content: '';
-  width: 100px;
-  height: 15px;
-  @media (min-width: 768px) {
-    width: 175px;
-    height: 20px;
-    margin-top: -18px;
-  }
-  background: #A3C8FF;
-  display: block;
-  margin-top: -14px;
-}
-
-.t7::after {
-  content: '';
-  width: 2px;
-  height: 16px;
-  @media (min-width: 768px) {
-    width: 3px;
-    height: 21px;
-    top: 20px;
-  }
-  background: #000000;
-  display: block;
-  position: absolute;
-  right: 0;
-  top: 15px;
-}
-
-.newsTit2 h2::after {
-  content: '';
-  margin-top: -20px;
-  width: 120px;
-  height: 20px;
-  @media (min-width: 768px) {
-    margin-top: -29px;
-    width: 200px;
-    height: 31px;
-    margin-left: 2px;
-  }
-  background: #A8CBFF;
-  display: block;
-  margin-left: 0;
-}
-
-.newsBox2di {
-  width: 100%;
-  border-top: 1px solid #1C1C1C;
-  @media (min-width: 768px) {
-    width: 473px;
-    border-top: 2px solid #1C1C1C;
-    margin-left: 0px;
-    margin-top: 0px;
-  }
-}
-</style>
diff --git a/pages/index_product_t.vue b/pages/index_product_t.vue
deleted file mode 100644
index 1947d8e..0000000
--- a/pages/index_product_t.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<template>
-  <div class="bg-white">
-    <!-- Banner section with background image -->
-    <div class="aboutimgBg">
-      <div class="pl-4 md:pl-[200px]">
-        <div class="newsTit">
-          <h2 class="animated fadeInLeft text-2xl md:text-[40px] font-bold">{{ $t('list_p1') }}</h2>
-          <h3 class="animated fadeInLeft text-lg md:text-[25px] font-medium mt-3 md:mt-[30px] text-[#606060]">{{ $t('list_p2') }}</h3>
-        </div>
-      </div>
-    </div>
-
-    <!-- Featured news section -->
-    <div class="newsBox1 container mx-auto px-4 py-8 flex flex-col md:flex-row flex-wrap" v-if="newsList.length > 0">
-      <div class="newsBox1lider w-full md:w-[38%] mb-6 md:mb-0">
-        <img id="featuredImage" :src="topImg" class="h-[200px] md:h-[300px] w-full object-cover rounded-[5px]" />
-      </div>
-
-      <div class="newsTit1 w-full md:w-[62%] relative pl-0 md:pl-4 mt-6 md:mt-0">
-        <div id="swipen_next" class="absolute left-0 md:left-4 top-[70%] -translate-y-1/2 cursor-pointer z-10" @click="prevSlide">
-          <img src="/images/group10.png" class="w-[40px] md:w-[50px]" alt="Previous" />
-        </div>
-        <div id="swipen_prev" class="absolute right-0 md:right-4 top-[70%] -translate-y-1/2 cursor-pointer z-10" @click="nextSlide">
-          <img src="/images/group9-1.png" class="w-[40px] md:w-[50px]" alt="Next" />
-        </div>
-        
-        <div class="flex justify-end items-center mb-4">
-          <div class="relative pr-3 md:pr-5">
-            <h2 class="t7 m-0">
-              <span id="time1" class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(currentNews.inputtime || currentNews.add_time) }}/</span>
-              <span id="time2" class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(currentNews.inputtime || currentNews.add_time) }}</span>
-            </h2>
-          </div>
-          <div class="text-right">
-            <span class="t6 text-lg md:text-[25px] font-semibold">{{ $t('list_p1') }}</span>
-          </div>
-        </div>
-        
-        <div class="newsdi w-full h-[1px] bg-gray-300 my-3 md:my-4"></div>
-        
-        <div class="listSwiper overflow-hidden w-full md:w-[90%] h-[115px] md:h-[200px]">
-          <div class="swiper-wrapper w-full">
-            <span v-if="!isMobile" class="newsbs2 hidden md:inline-block"></span>
-            <div v-for="(news, index) in newsList" :key="index" 
-                 :class="['swiper-slide pl-[50px] pr-[40px] md:pl-[118px] pt-3 md:pt-[20px]', {'hidden': currentIndex !== index}]">
-              <h2 class="text-xl md:text-3xl font-bold mb-3 md:mb-4 line-clamp-1">
-                <NuxtLink :to="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600">
-                  {{ getCurrentLanguage() === 'zh' ? news.title : news.en_title || news.title }}
-                </NuxtLink>
-              </h2>
-              <h3 class="line-clamp-2 text-gray-600 text-base md:text-lg mb-4 md:mb-6">
-                {{ getCurrentLanguage() === 'zh' ? news.synopsis : news.en_synopsis || news.synopsis }}
-              </h3>
-              <h4 v-if="!isMobile" class="mt-6 md:mt-10">
-                <NuxtLink :to="'/info/' + news.id" target="_blank" 
-                          class="text-[#0c1923] px-4 py-1 md:px-5 md:py-2.5 text-sm md:text-base rounded-[10px] border border-solid border-[#0c1923] hover:bg-gray-100">
-                  {{ $t('list_b3') }}
-                </NuxtLink>
-              </h4>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- News list section -->
-    <div class="container mx-auto px-4 py-8 md:py-12">
-      <div v-for="(news, index) in allNewsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:h-[300px] flex flex-col md:flex-row flex-wrap items-start md:items-center p-4 md:p-[20px] mb-8 md:mb-12 border-b border-gray-200">
-        <NuxtLink :to="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600 md:h-[300px] flex md:p-[20px]">
-        <div class="newsTit2 w-full md:w-2/3 pr-0 md:pr-6 mb-4 md:mb-0">
-          <h2>
-            <span class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(news.add_time) }}/</span>
-            <span class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(news.add_time) }}</span>
-          </h2>
-          <div class="newsBox2di w-full md:w-[473px]"></div>
-          <h3 class="text-xl md:text-2xl font-bold mb-2 md:mb-4 pt-3 md:pt-[20px] line-clamp-1">
-            
-              {{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
-            
-          </h3>
-          <h4 class="text-gray-600 text-base md:text-lg line-clamp-2">
-            {{ getCurrentLanguage() == 'zh' ? news.synopsis : (news.en_synopsis || news.synopsis) }}
-          </h4>
-        </div>
-        <img :src="news.image_input[0]" class="news2g10 w-full md:w-1/3 h-[200px] md:h-full object-cover rounded-lg" alt="News thumbnail" />
-      </NuxtLink>
-      </div>
-      
-      <!-- Pagination -->
-      <div id="pages" class="text-center mt-6 md:mt-8">
-        <button 
-          v-for="page in totalPages" 
-          :key="page" 
-          @click="changePage(page)" 
-          :class="['mx-1 px-3 py-1 md:px-4 md:py-2 text-sm md:text-base rounded', currentPage === page ? 'bg-blue-500 text-white' : 'bg-gray-200 hover:bg-gray-300']">
-          {{ page }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import $api from '@/service/webRequest'
-
-// 分页相关变量
-const currentPage = ref(1)
-const itemsPerPage = 5
-const totalItems = ref(0)
-
-// 新闻数据
-const mockNewsData = ref([])
-const allNewsList = ref([])
-const isMobile = ref(false)
-onMounted(() => {
-  isMobile.value = window.innerWidth < 768
-  getNewsList()
-  getFeaturedNews()
-})
-
-const topImg = ref('')
-// 获取轮播展示的新闻（前5条）
-const getFeaturedNews = () => {
-  $api.get("/api/article/list/8", { params: { page: 1, limit: 5 } })
-    .then((res: any) => {
-      mockNewsData.value = res.data.data.list
-      topImg.value = res.data.data.list[0].image_input[0]
-    })
-    .catch((err) => {
-      console.error("获取轮播新闻失败:", err)
-    })
-}
-
-// 获取分页新闻列表
-const getNewsList = () => {
-  $api.get("/api/article/list/8", { params: { page: currentPage.value, limit: itemsPerPage } })
-    .then((res: any) => {
-      allNewsList.value = res.data.data.list
-        // 获取总条数用于分页
-       totalItems.value = res.data.data.count
-    })
-    .catch((err) => {
-      console.error("获取新闻列表失败:", err)
-    })
-}
-
-const { locale } = useI18n()
-const currentIndex = ref(0)
-
-// 轮播新闻列表
-const newsList = computed(() => mockNewsData.value)
-
-// 计算总页数
-const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage))
-
-// 当前轮播的新闻
-const currentNews = computed(() => {
-  return newsList.value[currentIndex.value] || {
-    id: 0,
-    title: '',
-    description: '',
-    inputtime: ''
-  }
-})
-
-// 轮播控制方法
-const prevSlide = () => {
-  topImg.value = mockNewsData.value[currentIndex.value - 1].image_input[0]
-  currentIndex.value = (currentIndex.value - 1 + newsList.value.length) % newsList.value.length
-}
-
-const nextSlide = () => {
-  topImg.value = mockNewsData.value[currentIndex.value + 1].image_input[0]
-  currentIndex.value = (currentIndex.value + 1) % newsList.value.length
-}
-
-// 分页方法
-const changePage = (page: number) => {
-  currentPage.value = page
-  getNewsList() // 切换页码时重新获取数据
-}
-
-// 格式化年份 - 处理字符串格式的日期 "2023-02-15 16:50"
-const formatYear = (dateStr: string) => {
-  if (!dateStr) return ''
-  // 从日期字符串中提取年份
-  const year = dateStr.split(' ')[0].split('-')[0]
-  return year
-}
-
-// 格式化日期 - 处理字符串格式的日期 "2023-02-15 16:50"
-const formatDate = (dateStr: string) => {
-  if (!dateStr) return ''
-  // 从日期字符串中提取月和日
-  const dateParts = dateStr.split(' ')[0].split('-')
-  if (dateParts.length < 3) return ''
-  
-  const month = dateParts[1]
-  const day = dateParts[2]
-  return `${month}/${day}`
-}
-
-const getCurrentLanguage = () => {
-  return locale.value
-}
-</script>
-
-<style lang="scss" scoped>
-@import "@/assets/animate/animate.min.css";
-
-.container {
-  width: 100%;
-  @media (min-width: 768px) {
-    max-width: 1310px;
-  }
-}
-
-.aboutimgBg {
-  background-image: url(/images/newsgroup3.png);
-  background-size: cover;
-  height: 300px;
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  
-  @media (min-width: 768px) {
-    height: 600px;
-  }
-}
-
-.newsTit h2::after {
-  content: '';
-  width: 120px;
-  height: 20px;
-  @media (min-width: 768px) {
-    width: 100%;
-    height: 28px;
-    margin: 0 auto;
-    margin-top: -15px;
-  }
-  background: #A8CBFF;
-  display: block;
-  margin-top: -20px;
-}
-
-.ellipsis-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.newsBox1 {
-  margin-top: 20px;
-  @media (min-width: 768px) {
-    margin-top: 50px;
-  }
-}
-
-.newsBox2 {
-  transition: all 0.3s ease;
-}
-
-.newsBox2:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
-}
-
-.newsSpan1 {
-  color: #333;
-}
-
-.newsSpan2 {
-  color: #1C1C1C;
-  letter-spacing: 2px;
-  @media (min-width: 768px) {
-    letter-spacing: 5px;
-    padding-left: 10px;
-  }
-  padding-left: 5px;
-}
-
-.newsbs2 {
-  position: absolute;
-  margin-left: 81px;
-  border-right: 2px solid #1C1C1C;
-  display: inline-block;
-  height: 300px;
-  @media (min-width: 768px) {
-    height: 344px;
-    margin-top: 10px;
-  }
-}
-
-.t6::after {
-  content: '';
-  width: 100px;
-  height: 15px;
-  @media (min-width: 768px) {
-    width: 175px;
-    height: 20px;
-    margin-top: -18px;
-  }
-  background: #A3C8FF;
-  display: block;
-  margin-top: -14px;
-}
-
-.t7::after {
-  content: '';
-  width: 2px;
-  height: 16px;
-  @media (min-width: 768px) {
-    width: 3px;
-    height: 21px;
-    top: 20px;
-  }
-  background: #000000;
-  display: block;
-  position: absolute;
-  right: 0;
-  top: 15px;
-}
-
-.newsTit2 h2::after {
-  content: '';
-  margin-top: -20px;
-  width: 120px;
-  height: 20px;
-  @media (min-width: 768px) {
-    margin-top: -29px;
-    width: 200px;
-    height: 31px;
-    margin-left: 2px;
-  }
-  background: #A8CBFF;
-  display: block;
-  margin-left: 0;
-}
-
-.newsBox2di {
-  width: 100%;
-  border-top: 1px solid #1C1C1C;
-  @media (min-width: 768px) {
-    width: 473px;
-    border-top: 2px solid #1C1C1C;
-    margin-left: 0px;
-    margin-top: 0px;
-  }
-}
-</style>
diff --git a/pages/index_product_f.vue b/pages/index_products.vue
similarity index 79%
rename from pages/index_product_f.vue
rename to pages/index_products.vue
index 1947d8e..ba7fa0e 100644
--- a/pages/index_product_f.vue
+++ b/pages/index_products.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="bg-white">
     <!-- Banner section with background image -->
-    <div class="aboutimgBg">
+    <!-- <div class="aboutimgBg">
       <div class="pl-4 md:pl-[200px]">
         <div class="newsTit">
           <h2 class="animated fadeInLeft text-2xl md:text-[40px] font-bold">{{ $t('list_p1') }}</h2>
           <h3 class="animated fadeInLeft text-lg md:text-[25px] font-medium mt-3 md:mt-[30px] text-[#606060]">{{ $t('list_p2') }}</h3>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- Featured news section -->
-    <div class="newsBox1 container mx-auto px-4 py-8 flex flex-col md:flex-row flex-wrap" v-if="newsList.length > 0">
+    <!-- <div class="newsBox1 container mx-auto px-4 py-8 flex flex-col md:flex-row flex-wrap" v-if="newsList.length > 0">
       <div class="newsBox1lider w-full md:w-[38%] mb-6 md:mb-0">
         <img id="featuredImage" :src="topImg" class="h-[200px] md:h-[300px] w-full object-cover rounded-[5px]" />
       </div>
@@ -61,33 +61,23 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- News list section -->
-    <div class="container mx-auto px-4 py-8 md:py-12">
-      <div v-for="(news, index) in allNewsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:h-[300px] flex flex-col md:flex-row flex-wrap items-start md:items-center p-4 md:p-[20px] mb-8 md:mb-12 border-b border-gray-200">
-        <NuxtLink :to="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600 md:h-[300px] flex md:p-[20px]">
-        <div class="newsTit2 w-full md:w-2/3 pr-0 md:pr-6 mb-4 md:mb-0">
-          <h2>
-            <span class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(news.add_time) }}/</span>
-            <span class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(news.add_time) }}</span>
-          </h2>
-          <div class="newsBox2di w-full md:w-[473px]"></div>
-          <h3 class="text-xl md:text-2xl font-bold mb-2 md:mb-4 pt-3 md:pt-[20px] line-clamp-1">
-            
-              {{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
-            
-          </h3>
-          <h4 class="text-gray-600 text-base md:text-lg line-clamp-2">
-            {{ getCurrentLanguage() == 'zh' ? news.synopsis : (news.en_synopsis || news.synopsis) }}
-          </h4>
-        </div>
-        <img :src="news.image_input[0]" class="news2g10 w-full md:w-1/3 h-[200px] md:h-full object-cover rounded-lg" alt="News thumbnail" />
+    <div class="container mx-auto px-4 py-8 md:py-16 flex flex-wrap">
+      <div v-for="(news, index) in allProsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:w-1/5 md:h-[330px] flex flex-col md:flex-row flex-wrap items-start md:items-center p-4 md:p-[20px] mb-8 md:mb-12 border-b border-gray-200">
+        <NuxtLink :to="'/product/' + news.id" target="_blank" class="text-[#0c1923] md:h-[300px] flex flex-col ">
+          <img :src="news.image" class="news2g10 w-full   md:h-full object-cover rounded-lg" alt="News thumbnail" />
+          <div class="newsTit2 w-full pr-0 md:pr-6 mb-4 md:mb-0">
+            <h4 class="text-gray-600 text-base md:text-lg line-clamp-2 text-center">
+            {{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
+            </h4>
+          </div>
       </NuxtLink>
       </div>
       
       <!-- Pagination -->
-      <div id="pages" class="text-center mt-6 md:mt-8">
+      <div id="pages" class="text-center mt-6 md:mt-8 md:w-full">
         <button 
           v-for="page in totalPages" 
           :key="page" 
@@ -107,37 +97,27 @@ import $api from '@/service/webRequest'
 
 // 分页相关变量
 const currentPage = ref(1)
-const itemsPerPage = 5
+const itemsPerPage = 10
 const totalItems = ref(0)
 
 // 新闻数据
 const mockNewsData = ref([])
-const allNewsList = ref([])
+const allProsList = ref([])
 const isMobile = ref(false)
 onMounted(() => {
   isMobile.value = window.innerWidth < 768
   getNewsList()
-  getFeaturedNews()
 })
 
 const topImg = ref('')
-// 获取轮播展示的新闻（前5条）
-const getFeaturedNews = () => {
-  $api.get("/api/article/list/8", { params: { page: 1, limit: 5 } })
-    .then((res: any) => {
-      mockNewsData.value = res.data.data.list
-      topImg.value = res.data.data.list[0].image_input[0]
-    })
-    .catch((err) => {
-      console.error("获取轮播新闻失败:", err)
-    })
-}
+
 
 // 获取分页新闻列表
 const getNewsList = () => {
-  $api.get("/api/article/list/8", { params: { page: currentPage.value, limit: itemsPerPage } })
+  $api.get("/api/websiteproduct/list", { params: { page: currentPage.value, limit: itemsPerPage } })
+
     .then((res: any) => {
-      allNewsList.value = res.data.data.list
+      allProsList.value = res.data.data.list
         // 获取总条数用于分页
        totalItems.value = res.data.data.count
     })
@@ -212,8 +192,10 @@ const getCurrentLanguage = () => {
 
 .container {
   width: 100%;
+  padding-top:4rem;
   @media (min-width: 768px) {
     max-width: 1310px;
+    padding-top: 90px;
   }
 }
 
diff --git a/pages/product/[id].vue b/pages/product/[id].vue
new file mode 100644
index 0000000..6a7f5e7
--- /dev/null
+++ b/pages/product/[id].vue
@@ -0,0 +1,301 @@
+<template>
+    <div class="bg-[#F2F2F2]">
+      <!-- Contact section -->
+      <div class="box2">
+        <div class="flex flex-wrap justify-center pb-[50px] md:pb-[50px] px-4 md:px-0">
+          <div class="md:w-[50%]" style="display: flex;align-items: self-start;flex-wrap: wrap;justify-content: right;height: 800px;margin-top: 119px;">
+            <img :src="images_top" class="w-[585px] h-[585px]" alt="Product Image">
+            <div class="flex justify-start w-[585px] ">
+                <img @click="imgsChange(item)" class="w-[102px] h-[102px] pr-[10px]" :src="item" v-for="(item,index) in info.images" :key="index">
+            </div>
+          </div>
+
+          <div class="w-full md:w-[50%] px-4 md:px-[115px] pt-6 md:pt-[115px]">
+            <div class="contactTit">
+                <h3 class="text-[22px] md:text-[30px] font-bold mb-[20px]" style="color: #3D3D3D;">{{locale  == 'zh' ? info.title : info.en_title }}</h3>
+                <div class="mb-[30px]"> {{locale  == 'zh' ? info.profile : info.en_profile }}</div>
+                <a href="#contactpro">
+                    <button 
+                        type="submit"
+                        class="contactBut flex justify-center items-center bg-[#0C4DA9]"
+                        >
+                        <img src="/images/zixun.png" class="w-[32px] " >
+                        <span class="text-[#ffffff] text-[22px] ml-2" >{{ $t('contact_b5') }}</span>
+                    </button>
+                </a>
+            </div>
+
+            <div class="contactTit">
+                <h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('products_details') }}</h5>
+                <div class="mt-[20px]">{{locale  == 'zh' ? info.content : info.en_content }}</div>
+            </div>
+
+            <div class="contactTit" id="contactpro">
+              <h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('contact_b4') }}</h5>
+              <form class="contactForm mt-6 md:mt-12 w-full md:w-[700px]" @submit.prevent="submitForm">
+                <input 
+                  v-model="formData.name"
+                  class="contactInput w-full md:w-[700px]" 
+                  type="text" 
+                  :placeholder="$t('message_b1')"
+                />
+                <input 
+                  v-model="formData.emil"
+                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]" 
+                  type="text" 
+                  :placeholder="$t('message_b2')"
+                />
+                <input 
+                  v-model="formData.mobile"
+                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]" 
+                  type="text" 
+                  :placeholder="$t('message_b3')"
+                />
+                <input 
+                  v-model="formData.company"
+                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]" 
+                  type="text" 
+                  :placeholder="$t('message_b4')"
+                />
+                <input 
+                  v-model="formData.subject"
+                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]" 
+                  type="text" 
+                  :placeholder="$t('message_b5')"
+                />
+                <div class="relative mt-4 md:mt-8 w-full md:w-[700px]">
+                  <textarea 
+                    v-model="formData.content"
+                    id="myTextarea" 
+                    :placeholder="$t('message_b6')" 
+                    rows="6"
+                    maxlength="100"
+                    class="w-full md:w-[700px]"
+                  ></textarea>
+                  <div class="char-count">{{ formData.content.length }}/100</div>
+                </div>
+                
+                <div class="flex justify-start mt-4 md:mt-6">
+                  <button 
+                    type="submit"
+                    class="contactBut"
+                  >
+                    {{ $t('contact_b5') }}
+                  </button>
+                </div>
+              </form>
+              
+              
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { ref, reactive ,onMounted} from 'vue'
+  import { useI18n } from 'vue-i18n'
+  const { locale,t} = useI18n()
+  import { useStore } from '~/store'
+  import $api from '@/service/webRequest'
+  const store = useStore()
+  const route = useRoute()
+  const id = ref('')
+  const images_top = ref('')
+  const info = ref({})
+  // 表单数据
+  const formData = reactive({
+    name: '',
+    mobile: '',
+    content: '',
+    emil:'',
+    subject:'',
+    company:''
+  })
+  onMounted(() => {
+    id.value = route.params.id;
+    getInfo()
+})
+
+    const getInfo=()=>{
+        $api.get("/api/websiteproduct/details/"+id.value)
+            .then((res: any) => {
+                console.log(res)
+                info.value = res.data.data
+                images_top.value = res.data.data.image
+            })
+            .catch((err) => {
+                console.dir(err)
+            })
+    }
+  // 社交分享功能
+  const shareToLink = (item) => {
+      // 实现Instagram分享
+      window.open(item.link, '_blank');
+  }
+  const imgsChange = (e) => {
+    images_top.value = e;
+  }
+  // 表单提交方法
+  const submitForm = () => {
+    console.log(formData);
+    
+    // 这里可以添加表单验证逻辑
+    if (!formData.name) {
+      alert(t('message_name_required'))
+      return
+    }
+    
+    if (!formData.mobile) {
+      alert(t('message_phone_required'))
+      return
+    }
+    if (!formData.content) {
+      alert(t('message_message_required'))
+      return
+    }
+    $api.post("/api/websiteproduct/leave_word",{
+        name:formData.name,
+        mobile:formData.mobile,
+        content:formData.content,
+        emil:formData.emil,
+        subject:formData.subject,
+        company:formData.company,
+        product_id:id.value
+    })
+          .then((res: any) => {
+              console.log(res)
+        if(res.data.status==200){
+          alert(t('contact_success'))
+        }else{
+          alert(t('contact_error'))
+        }
+        formData.name = '';
+        formData.mobile = '';
+        formData.content = '';
+        formData.subject = '';
+        formData.emil = '';
+        formData.company = '';
+          })
+          .catch((err) => {
+              console.dir(err)
+          })
+    // 重置表单
+    // formData.name = ''
+    // formData.mobile = ''
+    // formData.content = ''
+  }
+  
+ 
+  </script>
+  
+  <style scoped>
+  /* 可以添加一些特定的样式，但大部分已经通过Tailwind实现 */
+  .animated {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+  }
+  
+  .fadeInLeft {
+    animation-name: fadeInLeft;
+  }
+  
+  @keyframes fadeInLeft {
+    from {
+      opacity: 0;
+      transform: translate3d(-100%, 0, 0);
+    }
+  
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  .contactTit {
+      background: #ffffff;
+      margin-bottom:30px;
+      padding: 30px;
+      border-radius: 10px;
+  }
+  .contactTit h5 span {
+      font-weight: 400;
+      font-size: 22px;
+      color: #1C1C1C;
+      line-height: 26px;
+      text-align: left;
+      margin-left: 4px;
+  }
+  .h5s::before {
+        content:'1';
+        width: 3px;
+        height: 26px;
+        margin-right: 10px;
+        background: #0C4DA9;
+  }
+  @media (max-width: 768px) {
+    .contactTit h3 span {
+      font-size: 16px;
+      line-height: 20px;
+    }
+  }
+  .contactInput{border-radius:6px;
+    border: 1px solid #BBBBBB;font-size: 24px;color: #000;height: 50px;}
+  .contactInput::placeholder {color: #999999;}
+  .contactInput:focus {outline: none;}
+  @media (max-width: 768px) {
+    .contactInput {
+      font-size: 18px;
+      height: 40px;
+    }
+  }
+  #myTextarea {padding: 10px;border-radius: 6px;margin-top: 32px;border: 1px solid #BBBBBB;font-weight: 400;font-size: 24px;color: #000;line-height: 22px;resize: none; /* 禁止用户调整文本域大小 */}
+  #myTextarea::placeholder {color: #999999;}
+  #myTextarea:focus {outline: none;}
+  @media (max-width: 768px) {
+    #myTextarea {
+      font-size: 16px;
+      line-height: 18px;
+      margin-top: 16px;
+    }
+  }
+  .char-count {position: absolute;bottom: 5px; /* 根据需要调整距离底部的位置 */right: 10px; /* 根据需要调整距离右侧的位置 */font-size: 12px; /* 根据需要调整字体大小 */color: #999999;}
+  .text-area-container {position: relative;width: 100%;}
+  .contactBut{ width: 232px;
+height: 54px;
+border-radius: 0px 0px 0px 0px;
+border: 1px solid #0C4DA9;
+color: #0C4DA9;
+}
+  @media (max-width: 768px) {
+    .contactBut {
+      font-size: 18px;
+      line-height: 22px;
+    }
+    .contactBut::after {
+      width: 100px;
+      height: 10px;
+      margin-bottom: 20px;
+    }
+  }
+  .contactForm{width: 100%;}
+  .contactTit h8 {
+      font-weight: bold;
+      font-size: 24px;
+      color: #175FCB;
+      line-height: 28px;
+      text-align: left;
+  }
+  @media (max-width: 768px) {
+    .contactTit h8 {
+      font-size: 20px;
+      line-height: 24px;
+    }
+  }
+  .contactdx8{
+    width: 100%;
+    margin-top: 5px;
+    border-top: 2px solid #175FCB;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/plugins/locales/en.ts b/plugins/locales/en.ts
index 9753a8a..0ad2ee6 100644
--- a/plugins/locales/en.ts
+++ b/plugins/locales/en.ts
@@ -10,7 +10,7 @@ export default {
 	index_clients: 'CLIENTS',
 	index_news: 'News',
 	index_contact: 'Contact US',
-	index_product:'Products',
+	index_products:'Products',
 	index_share: 'Share Wed',
 
 	// Index section 2
@@ -98,4 +98,19 @@ export default {
 	contact_success_title: 'Thank you for your submission',
 	//提交失败
 	contact_fail_title: 'Submission failed',
+
+
+	// 留言
+	message_b1: ' Your name',
+	message_b2: ' Your email address',
+	message_b3: ' Your contact information',
+	message_b4: ' Your company name',
+	message_b5: ' Your theme ',
+	message_b6: ' The content you have filled in',
+
+	message_name_required: ' Please enter your name',
+	message_phone_required: ' Please enter your contact information',
+	message_message_required: ' Please enter the message content',
+
+	products_details:'Products Details'
 }
diff --git a/plugins/locales/zh.ts b/plugins/locales/zh.ts
index b2504b3..d678c70 100644
--- a/plugins/locales/zh.ts
+++ b/plugins/locales/zh.ts
@@ -9,7 +9,7 @@ export default {
 	index_clients: '我的客户',
 	index_news: '最新新闻',
 	index_contact: '联系我们',
-	index_product: '产品',
+	index_products: '产品列表',
 	index_share: '分享',
 
 	// 首页2
@@ -96,4 +96,18 @@ export default {
 	contact_success: '提交成功',
 	//提交失败
 	contact_error:'提交失败',
+
+	// 留言
+	message_b1: '您的姓名',
+	message_b2: '您的电子邮箱',
+	message_b3: '您的联系方式',
+	message_b4: '您的公司名称',
+	message_b5: '您的主题',
+	message_b6: '您填写的内容',
+
+	message_name_required: '请输入您的姓名',
+	message_phone_required: '请输入您的联系方式',
+	message_message_required: '请输入留言内容',
+
+	products_details:'产品详情'
 }
diff --git a/public/images/zixun.png b/public/images/zixun.png
new file mode 100644
index 0000000..1f3c2ad
Binary files /dev/null and b/public/images/zixun.png differ