1.纳威格特官网客户建议修改

2.纳威格特官网增加商品分类

pages/index_products.vue

@@ -64,24 +64,38 @@
     </div> -->
 
     <!-- News list section -->
-    <div class="container mx-auto px-4 py-8 md:py-16 flex flex-wrap">
+    <div class="container mx-auto">
-      <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">
+      <div v-if="isMobile" class="flex justify-center">
-        <NuxtLink :to="'/product/' + news.id" target="_blank" class="text-[#0c1923] md:h-[300px] flex flex-col ">
+        <div v-for="item in typeList" @click="openType(item)" :class="typeIs == item.id ? 'type act' : 'type'">
-          <img :src="news.image" class="news2g10 w-full h-full md:min-h-[300px] object-cover rounded-lg" alt="News thumbnail" />
+          {{ getCurrentLanguage() == 'zh' ? item.name : item.en_name }}
-          <div class="newsTit2 w-full pr-0 md:pr-6 mb-4 md:mb-0">
+        </div>
-            <h4 class="text-gray-600 text-base md:text-lg line-clamp-2 text-center">
+      </div>
-            {{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
+      <div class="flex  px-4 py-8 md:py-16 ">
-            </h4>
+        <n-spin stroke="#214ADB" :show="LoadingShow" :style="{ width: isMobile ? '100%' : '90%' }">
-          </div>
+          <div class="flex flex-wrap" style="width: 100%;">
-      </NuxtLink>
+            <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] md:mb-12">
+              <NuxtLink :to="'/product/' + news.id" target="_blank" class="text-[#0c1923] md:h-[300px] flex flex-col ">
+                <img :src="news.image" class="news2g10 w-full h-full md:min-h-[300px] 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>
+          </div>
+        </n-spin>
+        <div v-if="!isMobile" style="text-align: center;">
+          <div v-for="item in typeList" @click="openType(item)" :class="typeIs == item.id ? 'type act' : 'type'">
+            {{ getCurrentLanguage() == 'zh' ? item.name : item.en_name }}
+          </div>
+        </div>
       </div>
-      
       <!-- Pagination -->
-      <div id="pages" class="text-center mt-6 md:mt-8 md:w-full">
+      <div id="pages" class="text-center md:w-full pb-[50px]">
-        <button 
+        <button v-for="page in totalPages" :key="page" @click="changePage(page)"
-          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>
@@ -94,6 +108,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import $api from '@/service/webRequest'
+import { NSpin } from 'naive-ui'
 
 // 分页相关变量
 const currentPage = ref(1)
@@ -106,7 +121,8 @@ const allProsList = ref([])
 const isMobile = ref(false)
 onMounted(() => {
   isMobile.value = window.innerWidth < 768
-  getNewsList()
+  LoadingShow.value = true;
+  getTypeList();
 })
 
 const topImg = ref('')
@@ -114,12 +130,13 @@ const topImg = ref('')
 
 // 获取分页新闻列表
 const getNewsList = () => {
-  $api.get("/api/websiteproduct/list", { params: { page: currentPage.value, limit: itemsPerPage } })
+  $api.get("/api/websiteproduct/list", { params: { page: currentPage.value, limit: itemsPerPage, cid: typeIs.value } })
 
     .then((res: any) => {
       allProsList.value = res.data.data.list
-        // 获取总条数用于分页
+      // 获取总条数用于分页
-       totalItems.value = res.data.data.count
+      totalItems.value = res.data.data.count;
+      LoadingShow.value = false;
     })
     .catch((err) => {
       console.error("获取新闻列表失败:", err)
@@ -176,7 +193,7 @@ const formatDate = (dateStr: string) => {
   // 从日期字符串中提取月和日
   const dateParts = dateStr.split(' ')[0].split('-')
   if (dateParts.length < 3) return ''
-  
+
   const month = dateParts[1]
   const day = dateParts[2]
   return `${month}/${day}`
@@ -185,6 +202,26 @@ const formatDate = (dateStr: string) => {
 const getCurrentLanguage = () => {
   return locale.value
 }
+const LoadingShow = ref(false);
+const typeList = ref([]);
+const typeIs = ref(0);
+const getTypeList = () => {
+
+  $api.get("/api/websiteproduct/cate?page=1&limit=100")
+    .then((res: any) => {
+      typeList.value = res.data.data.list
+      typeIs.value = res.data.data.list[0].id
+      getNewsList()
+    })
+    .catch((err) => {
+      console.error("获取新闻列表失败:", err)
+    })
+}
+const openType = (item: any) => {
+  LoadingShow.value = true;
+  typeIs.value = item.id;
+  getNewsList();
+}
 </script>
 
 <style lang="scss" scoped>
@@ -192,13 +229,8 @@ const getCurrentLanguage = () => {
 
 .container {
   width: 100%;
-  padding-top:4rem;
+  padding-top:5.5rem;
-  @media (min-width: 768px) {
-    max-width: 1310px;
-    padding-top: 90px;
-  }
 }
-
 .aboutimgBg {
   background-image: url(/images/newsgroup3.png);
   background-size: cover;
@@ -206,7 +238,7 @@ const getCurrentLanguage = () => {
   display: flex;
   align-items: center;
   justify-content: start;
-  
+
   @media (min-width: 768px) {
     height: 600px;
   }
@@ -216,12 +248,14 @@ const getCurrentLanguage = () => {
   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;
@@ -237,6 +271,7 @@ const getCurrentLanguage = () => {
 
 .newsBox1 {
   margin-top: 20px;
+
   @media (min-width: 768px) {
     margin-top: 50px;
   }
@@ -258,10 +293,12 @@ const getCurrentLanguage = () => {
 .newsSpan2 {
   color: #1C1C1C;
   letter-spacing: 2px;
+
   @media (min-width: 768px) {
     letter-spacing: 5px;
     padding-left: 10px;
   }
+
   padding-left: 5px;
 }
 
@@ -271,6 +308,7 @@ const getCurrentLanguage = () => {
   border-right: 2px solid #1C1C1C;
   display: inline-block;
   height: 300px;
+
   @media (min-width: 768px) {
     height: 344px;
     margin-top: 10px;
@@ -281,11 +319,13 @@ const getCurrentLanguage = () => {
   content: '';
   width: 100px;
   height: 15px;
+
   @media (min-width: 768px) {
     width: 175px;
     height: 20px;
     margin-top: -18px;
   }
+
   background: #A3C8FF;
   display: block;
   margin-top: -14px;
@@ -295,11 +335,13 @@ const getCurrentLanguage = () => {
   content: '';
   width: 2px;
   height: 16px;
+
   @media (min-width: 768px) {
     width: 3px;
     height: 21px;
     top: 20px;
   }
+
   background: #000000;
   display: block;
   position: absolute;
@@ -312,12 +354,14 @@ const getCurrentLanguage = () => {
   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;
@@ -326,6 +370,7 @@ const getCurrentLanguage = () => {
 .newsBox2di {
   width: 100%;
   border-top: 1px solid #1C1C1C;
+
   @media (min-width: 768px) {
     width: 473px;
     border-top: 2px solid #1C1C1C;
@@ -333,4 +378,25 @@ const getCurrentLanguage = () => {
     margin-top: 0px;
   }
 }
+
+.type {
+  padding: 5px 10px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #9C9C9C;
+  cursor: pointer;
+
+  &:hover {
+    color: #214ADB;
+
+    &:after {
+      left: 0;
+      width: 100%;
+    }
+  }
+}
+
+.act {
+  color: #214ADB;
+}
 </style>

pages/info/[id].vue

@@ -4,19 +4,19 @@
             backgroundSize: 'cover',
         }">>
         <div class="banDes">
-            <div class="newsxq1Tit text-center">
+            <div class="newsxq1Tit text-center" >
-                <h2 class="text-[20px] md:text-[50px] text-black">
+                <h2 class="w-[80%] m-auto text-[20px] md:text-[50px] text-black">
                     {{locale  == 'zh' ? info.title : info.en_title }}
                 </h2>
             </div>
         </div>
     </div>
     <div class="newsxq1Bg">
-        <div class="container px-4 md:px-[15px]">
+        <div class="container px-4 md:px-[15px] pb-[100px]">
             <div class="newsxq1Box1 text-center mt-6 md:mt-[40px]">
                 <h2>{{ info.add_time }}</h2>
                 <div class="newsxq1di mx-auto md:mx-0"></div>
-                <h4 class="mt-4 md:mt-[30px] break-all text-base md:text-[24px]">
+                <h4 class="mt-4 md:mt-[30px] break-all text-base md:text-[24px]" style="line-height: 30px;">
                    <p v-html="locale  == 'zh' ? info.content : info.en_content"></p>
                 </h4>
             </div>
@@ -55,7 +55,7 @@ const getInfo=()=>{
 .aboutimgBg {
     height: 300px;
     @media (min-width: 768px) {
-        height: 600px;
+        height: 554px;
     }
 }
 .banDes {
@@ -97,7 +97,6 @@ const getInfo=()=>{
     
     @media (min-width: 768px) {
         height: 300px;
-        margin-top: -308px;
         margin-left: 64px;
     }
 }

pages/product/[id].vue

@@ -1,301 +1,349 @@
 <template>
-    <div class="bg-[#F2F2F2]">
+  <div class="bg-white">
-      <!-- Contact section -->
+    <!-- Banner section with background image -->
-      <div class="box2">
+    <!-- <div class="aboutimgBg">
-        <div class="flex flex-wrap justify-center pb-[50px] md:pb-[50px] px-4 md:px-0">
+      <div class="pl-4 md:pl-[200px]">
-          <div class="md:w-[50%]" style="display: flex;align-items: self-start;flex-wrap: wrap;justify-content: right;height: 800px;margin-top: 119px;">
+        <div class="newsTit">
-            <img :src="images_top" class="w-[585px] h-[585px]" alt="Product Image">
+          <h2 class="animated fadeInLeft text-2xl md:text-[40px] font-bold">{{ $t('list_p1') }}</h2>
-            <div class="flex justify-start w-[585px] ">
+          <h3 class="animated fadeInLeft text-lg md:text-[25px] font-medium mt-3 md:mt-[30px] text-[#606060]">{{ $t('list_p2') }}</h3>
-                <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>
+    </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">
-          <div class="w-full md:w-[50%] px-4 md:px-[115px] pt-6 md:pt-[115px]">
+            <span class="t6 text-lg md:text-[25px] font-semibold">{{ $t('list_p1') }}</span>
-            <div class="contactTit">
+          </div>
-                <h3 class="text-[22px] md:text-[30px] font-bold mb-[20px]" style="color: #3D3D3D;">{{locale  == 'zh' ? info.title : info.en_title }}</h3>
+        </div>
-                <div class="mb-[30px]"> {{locale  == 'zh' ? info.profile : info.en_profile }}</div>
+        
-                <a href="#contactpro">
+        <div class="newsdi w-full h-[1px] bg-gray-300 my-3 md:my-4"></div>
-                    <button 
+        
-                        type="submit"
+        <div class="listSwiper overflow-hidden w-full md:w-[90%] h-[115px] md:h-[200px]">
-                        class="contactBut flex justify-center items-center bg-[#0C4DA9]"
+          <div class="swiper-wrapper w-full">
-                        >
+            <span v-if="!isMobile" class="newsbs2 hidden md:inline-block"></span>
-                        <img src="/images/zixun.png" class="w-[32px] " >
+            <div v-for="(news, index) in newsList" :key="index" 
-                        <span class="text-[#ffffff] text-[22px] ml-2" >{{ $t('contact_b5') }}</span>
+                 :class="['swiper-slide pl-[50px] pr-[40px] md:pl-[118px] pt-3 md:pt-[20px]', {'hidden': currentIndex !== index}]">
-                    </button>
+              <h2 class="text-xl md:text-3xl font-bold mb-3 md:mb-4 line-clamp-1">
-                </a>
+                <NuxtLink :to="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600">
-            </div>
+                  {{ getCurrentLanguage() === 'zh' ? news.title : news.en_title || news.title }}
-
+                </NuxtLink>
-            <div class="contactTit">
+              </h2>
-                <h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('products_details') }}</h5>
+              <h3 class="line-clamp-2 text-gray-600 text-base md:text-lg mb-4 md:mb-6">
-                <div class="mt-[20px]">{{locale  == 'zh' ? info.content : info.en_content }}</div>
+                {{ getCurrentLanguage() === 'zh' ? news.synopsis : news.en_synopsis || news.synopsis }}
-            </div>
+              </h3>
-
+              <h4 v-if="!isMobile" class="mt-6 md:mt-10">
-            <div class="contactTit" id="contactpro">
+                <NuxtLink :to="'/info/' + news.id" target="_blank" 
-              <h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('contact_b4') }}</h5>
+                          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">
-              <form class="contactForm mt-6 md:mt-12 w-full md:w-[500px]" @submit.prevent="submitForm">
+                  {{ $t('list_b3') }}
-                <input 
+                </NuxtLink>
-                  v-model="formData.name"
+              </h4>
-                  class="contactInput w-full md:w-[500px]" 
-                  type="text" 
-                  :placeholder="$t('message_b1')"
-                />
-                <input 
-                  v-model="formData.emil"
-                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]" 
-                  type="text" 
-                  :placeholder="$t('message_b2')"
-                />
-                <input 
-                  v-model="formData.mobile"
-                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]" 
-                  type="text" 
-                  :placeholder="$t('message_b3')"
-                />
-                <input 
-                  v-model="formData.company"
-                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]" 
-                  type="text" 
-                  :placeholder="$t('message_b4')"
-                />
-                <input 
-                  v-model="formData.subject"
-                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]" 
-                  type="text" 
-                  :placeholder="$t('message_b5')"
-                />
-                <div class="relative mt-4 md:mt-8 w-full md:w-[500px]">
-                  <textarea 
-                    v-model="formData.content"
-                    id="myTextarea" 
-                    :placeholder="$t('message_b6')" 
-                    rows="6"
-                    maxlength="100"
-                    class="w-full md:w-[500px]"
-                  ></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> -->
+
+    <!-- News list section -->
+    <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 h-full md:min-h-[300px] 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 md:w-full">
+        <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>
-  </template>
+  </div>
-  
+</template>
-  <script lang="ts" setup>
+
-  import { ref, reactive ,onMounted} from 'vue'
+<script lang="ts" setup>
-  import { useI18n } from 'vue-i18n'
+import { ref, computed, onMounted } from 'vue'
-  const { locale,t} = useI18n()
+import { useI18n } from 'vue-i18n'
-  import { useStore } from '~/store'
+import $api from '@/service/webRequest'
-  import $api from '@/service/webRequest'
+
-  const store = useStore()
+// 分页相关变量
-  const route = useRoute()
+const currentPage = ref(1)
-  const id = ref('')
+const itemsPerPage = 10
-  const images_top = ref('')
+const totalItems = ref(0)
-  const info = ref({})
+
-  // 表单数据
+// 新闻数据
-  const formData = reactive({
+const mockNewsData = ref([])
-    name: '',
+const allProsList = ref([])
-    mobile: '',
+const isMobile = ref(false)
-    content: '',
+onMounted(() => {
-    emil:'',
+  isMobile.value = window.innerWidth < 768
-    subject:'',
+  getNewsList()
-    company:''
-  })
-  onMounted(() => {
-    id.value = route.params.id;
-    getInfo()
 })
 
-    const getInfo=()=>{
+const topImg = ref('')
-        $api.get("/api/websiteproduct/details/"+id.value)
+
-            .then((res: any) => {
+
-                console.log(res)
+// 获取分页新闻列表
-                info.value = res.data.data
+const getNewsList = () => {
-                images_top.value = res.data.data.image
+  $api.get("/api/websiteproduct/list", { params: { page: currentPage.value, limit: itemsPerPage } })
-            })
+
-            .catch((err) => {
+    .then((res: any) => {
-                console.dir(err)
+      allProsList.value = res.data.data.list
-            })
+      // 获取总条数用于分页
-    }
+      totalItems.value = res.data.data.count
-  // 社交分享功能
+    })
-  const shareToLink = (item) => {
+    .catch((err) => {
-      // 实现Instagram分享
+      console.error("获取新闻列表失败:", err)
-      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 {
+const { locale } = useI18n()
-      font-size: 18px;
+const currentIndex = ref(0)
-      line-height: 22px;
+
-    }
+// 轮播新闻列表
-    .contactBut::after {
+const newsList = computed(() => mockNewsData.value)
-      width: 100px;
+
-      height: 10px;
+// 计算总页数
-      margin-bottom: 20px;
+const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage))
-    }
+
+// 当前轮播的新闻
+const currentNews = computed(() => {
+  return newsList.value[currentIndex.value] || {
+    id: 0,
+    title: '',
+    description: '',
+    inputtime: ''
   }
-  .contactForm{width: 100%;}
+})
-  .contactTit h8 {
+
-      font-weight: bold;
+// 轮播控制方法
-      font-size: 24px;
+const prevSlide = () => {
-      color: #175FCB;
+  topImg.value = mockNewsData.value[currentIndex.value - 1].image_input[0]
-      line-height: 28px;
+  currentIndex.value = (currentIndex.value - 1 + newsList.value.length) % newsList.value.length
-      text-align: left;
+}
+
+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%;
+  padding-top: 4rem;
+
+  @media (min-width: 768px) {
+    max-width: 1310px;
+    padding-top: 90px;
   }
-  @media (max-width: 768px) {
+}
-    .contactTit h8 {
+
-      font-size: 20px;
+.aboutimgBg {
-      line-height: 24px;
+  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;
   }
-  .contactdx8{
+}
+
+.newsTit h2::after {
+  content: '';
+  width: 120px;
+  height: 20px;
+
+  @media (min-width: 768px) {
     width: 100%;
-    margin-top: 5px;
+    height: 28px;
-    border-top: 2px solid #175FCB;
+    margin: 0 auto;
+    margin-top: -15px;
   }
-  </style>
+
-  
+  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>